How to create a fade-in fade-out hint box for an element

Here is the example of fade-in fade-out hint box for an element.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
<style>
.my_cust_css{border:1px solid #333; display:none; background:#09F; 
border-radius:5px; padding:5px; width:180px;}
</style>
</head>

<body>

<a href="#" class="jqury_hint" id="first" rev="hello this is test message.">chandan</a>
<br /><br /><br /><br />
<a href="#" class="jqury_hint"id="two" rev="hello this is test message123." 
style="float:right; margin-right:0px;">chandan</a><br /><br /><br /><br />

<a href="#" class="jqury_hint" id="three" rev="hello this is test message456." 
style="float:right; margin-right:330px;">chandan</a><br /><br /><br /><br />

<a href="#" class="jqury_hint" id="four" rev="hello this is test message456234." 
style="float:right; margin-right:630px;">chandan</a>

<div class="jqury_hint" id="fivr" rev="hello this is chandan." 
style="float:right; margin-right:830px;">chandan</div>


</body>

<script type="text/javascript">
	$(function(){
		$('.jqury_hint').each(function (I) {
			var msg = $(this).attr('rev');
			var position = $(this).position();
			var left = position.left;
			$(this).after('<div class="my_cust_css" id="'+this.id+'_css">'+msg+'</span>');
			$('#'+this.id+'_css').css('position','fixed');			
			$('#'+this.id+'_css').css('margin-top','50px');
			if(($(document).width()-left) < $('#'+this.id+'_css').width()){
				$('#'+this.id+'_css').css('left',$(document).width() - 
				($('#'+this.id+'_css').width() + 15));
			}else{
				$('#'+this.id+'_css').css('left',left);
			}
			$('#'+this.id+'_css').fadeIn(10000);
			$('#'+this.id+'_css').fadeOut(10000);
		});
	});
</script>
</html>

Share and Enjoy

  • Facebook
  • Twitter
  • Google Plus
  • Live
  • Delicious
  • Digg
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
  • Instapaper
  • FriendFeed

Comments

  1. This is the best article I have read, thank you, I have learned a lot of knowledge in this area.