Hi

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.

Image attached with code.

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>
Member Avatar for stbuchok

css display: inline should do the trick.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.