Click here to Skip to main content
14,667,145 members
Rate this:
Please Sign up or sign in to vote.
See more:
I need to change the position of popup dynamically like when i show popup onmouse hover of hyperlink, popup always shows at bottom of the hyperlink, in this case when hyperlink is at end of the browser then more than half of the goes hide.

So, I need the popup position change according to the space, if the hyperlink is at end then popup show at top of the hyperlink otherwise at bottom.

How could i achieve this task ?
Posted

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

this is what you might be looking for

<body style="height:1000px;">
        <div style="margin-top:800px;"></div>
        <a href="" class="link" onmouseover="showTitle()">your link<span class="anchorTitle" id="link"> show title</span></a><body></body></body>


<script>
function showTitle(){
	var link = document.getElementById("link");
	
	if(screen.height	 	link.style.top="-200%";
	}else{
		link.style.top="100%";		
	}
}
</script>


<style>
.link{
position:relative;		
}
.anchorTitle{
display:none;
position:absolute;
background:#F60;	
}
.link:hover .anchorTitle{
display:block;	
background:#F60;
}
</style>
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100