Popup links

links to use inside a popup

by NicosKaralis

HTML

<p>saf lksdjflksjdflk asjdfl kjsdflkj s<br /></p>
<div id="sidebar">
    <div id="tags">
        <div id="popup">
            <h3>TAGS</h3>
            <a href="#" id="popupTagClose">x</a>
            
            <a href="#">Notes</a>
            <a href="#">Mac OS X</a>
            <a href="#">AD</a>
            <a href="#">Teste</a>
            <a href="#">Desenvolvimento</a>
            <a href="#">Programação</a>
            <a href="#">Ruby</a>
            <a href="#">Ruby on Rails</a>
        </div>
        <div id="pre_popup">
            <h3>TAGS</h3>
        </div>
    </div>
    <p>
        The .position() method allows us to retrieve the current position of an element relative to the offset parent. Contrast this with .offset(), which retrieves the current position relative to the document. When positioning a new element near another one and within the same containing DOM element, .position() is the more useful.
        fdasdfasdfsdf<br/>
        sfasdf
    </p>
</div>

CSS

#sidebar {
    width:200px;
    margin:auto;
}
#tags {
    width:200px;
    margin:auto;
}
#popup {
    width:inherit;
    display:none;  
    position:relative;  
    _position:absolute; /* hack for internet explorer 6*/
    background:#FFFFFF;
    border:2px solid #cecece;
    z-index:200;
    padding:12px;
border: 3px solid red;
-webkit-border-radius: 20px 0 20px 0;
-moz-border-radius: 20px 0 20px 0;
}
#popupTagClose{
    font-size:14px;
    line-height:14px;
    right:1px;
    top:-4px;
    position:absolute;
    color:#6fa5fd;
    display:block;
    display:none;
}

JavaScript

$("#pre_popup").hover(function() {
    var position = $("#popup").parent().position();
    var paddingTop = parseInt($("#popup").css("padding-top")) + parseInt($("#popup").css("border-top-width"));
    var paddingLeft = parseInt($("#popup").css("padding-left")) + parseInt($("#popup").css("border-left-width"));;
    var popupWidth = $("#popup").parent().width();
    $("#popup").css({
        "position": "absolute",
        "top": position.top - paddingTop,
        "left": position.left - paddingLeft,
        "whidth": popupWidth
    });
    $('#popup').fadeIn("fast");
});

$("#tags").hover(function() {}, function() {
    $('#popup').fadeOut("slow");
});

$('#popupTagClose').click(function() {
    $('#popup').hide();
    return false;
});

showPopUp = function() {

}