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>
Advertisements

3 thoughts on “How to create a fade-in fade-out hint box for an element

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s