Question

how to render a div next to href link, we are using JQuery.
Below is code attached where when clicked the div gets rendered just below the tab of browsers, I want to render next to that of href link as there will be lot of href links in the webpage using the same div tag.

I cannot do it in css because it gets fixed at that position and I am using the same div for many of the href in a page but changing the contents of the div dynamically upon the user who clicks the link.

Code attached.

Any help would be very helpful.

thanks.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<script type="text/javascript">
      $(document).ready(function(){

      $('#cluster1').hide();

            $('a').click(function(){

            $('#cluster1').show('slow');

   });

   $('a#close').click(function(){
        $('#cluster1').hide('slow');
        })

      });
</script>

<style>

.heading {
background:none repeat scroll 0 0 #B8CFE6;
color:#333333;
font:bold 12px verdana;
padding:7px;
}

.fr {
float:right;
}

element.style {
display:block;
}
.cluster {
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #757893;
display:none;
left:80px;
position:absolute;
text-align:left;
top:0;
width:560px;
z-index:10000;
margin-left:100px;
}

body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, button, textarea, p, td {
margin:0;
padding:0;
}

.content {
background:none repeat scroll 0 0 #FFFFFF;
font:11px verdana;
overflow:auto;
width:560px;
}

.bottom {
border-top:1px solid #C1C8D4;
font:11px verdana;
padding:7px;
text-align:right;
}
.fl {
float:left;
}

.content ul li {
float:left;
padding:5px;
width:170px;
list-style: none;
}
</style>

<div class="cluster" id="cluster1" style="display: block;"><div class="heading">
                    <div class="fr"><p><a href="#" id="close">Close</a></p></div>
                        Update
                </div>
                    <form method="post" action="">

                    </form>
                </div>

                </br></br></br></br></br></br></br></br>
                <a href="#" id="click">Click Here</a>

Answer 1

You can get the link’s position with the .position() function. It will give you the element’s position relative to the offset parent (with .offset() you can get it relative to the document).

Then you can simply use .css() on the div to position it.

  $('a').click(function(){
      var linkpos=$(this).position();
      $('#cluster1')
          .css('top', linkpos.top)
          .show('slow');         
  });

jsFiddle Demo