Yotube like comment-Show link over textarea when user try to add a comment

Question

Hello Everybody,

I'm working on asp.net application.And i'm looking for a way to show a link over a textarea when a user try to add a comment if the user is not loggd in.

I've got this idea from Youtube videos comments.If ur not coonected,they show a link saying u have to login to be able to add a comment.

Does anyone has an idea how to do that.a piece of jquery code will be helpful.

Thanks in advance.

Best Regards, Rachid

Answer 1

You could do it with an overlay link that you placed over the textarea on mouseenter. Then it would just be a matter of hiding it on mouseleave:

HTML

<div id="comment">
    <textarea rows="3" cols="20"></textarea>
    <a class="overlay" href="" style="display: none; position: absolute;">You must login</a>
</div>

jQuery

$('#comment').mouseenter(function() {
    var textarea = $(this).find('textarea');
    var overlay = $(this).find('.overlay');

    var pos = textarea.position();
    overlay.css({
        top: pos.top,
        left: pos.left,
        width: textarea.width(),
        height: textarea.height(),
        display: 'block'
    });
});

$('#comment').mouseleave(function() {
    var overlay = $(this).find('.overlay');
    overlay.css({
        display: 'none'
    });
});

You can see it in action here.