Marquee without scroll delay

Posted by Sugi under ASP.NET on 4/9/2014 | Points: 10 | Views : 1036 | Status : [Member] | Replies : 2

Write New Post |

Search Forums | Answered

Resolved Posts |

Un Answered Posts |

Forums Home

Marquee without scroll delay only in page load for the first time ?

Reply | Reply with Attachment

Alert Moderator

Responses

Posted by: Allemahesh on: 4/9/2014 [Member] [MVP] Silver | Points: 25

0	You can use it as : <div style="width: 1024px; background-color: #FFFF00;"> <marquee direction="left"><strong>Left Direction</strong></marquee> </div> <div style="width: 1024px; background-color: #CCFFCC;"> <marquee direction="right"><strong> Right Direction</strong></marquee> </div> Try these links:- http://www.tutorialspoint.com/html/html_marquees.htm http://www.quackit.com/html/codes/html_marquee_code.cfm http://www.html.am/html-codes/marquees/ Happy coding. Sugi, if this helps please login to Mark As Answer. \| Alert Moderator

You can use it as :

<div style="width: 1024px; background-color: #FFFF00;">
   <marquee direction="left"><strong>Left Direction</strong></marquee>
    </div>
    <div style="width: 1024px; background-color: #CCFFCC;">
      <marquee direction="right"><strong> Right Direction</strong></marquee>
   </div>

Try these links:-

http://www.tutorialspoint.com/html/html_marquees.htm
http://www.quackit.com/html/codes/html_marquee_code.cfm
http://www.html.am/html-codes/marquees/

Happy coding.

Sugi, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: A2H on: 4/9/2014 [Member] [MVP] Silver | Points: 25

0	Hi, As an alternative solution You can try the JQuery based Marquee code which will run with out any delay. Sample Implementation Code: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Scroll Text</title> <style type="text/css"> .scroll{ width:430px; height:21px; overflow:hidden; position:relative; } .scrollingtext{ white-space:nowrap; position:absolute; } </style> <script type="text/javascript"> $(document).ready(function() { $('.scrollingtext').bind('marquee', function() { var ob = $(this); var tw = ob.width(); var ww = ob.parent().width(); ob.css({ right: -tw }); ob.animate({ right: ww }, 20000, 'linear', function() { ob.trigger('marquee'); }); }).trigger('marquee'); }); </script> </head> <body> <div class="scroll"> <div class="scrollingtext"> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div> </div> </body> </html> You can find a Sample Working demo of above code in below link http://jsbin.com/tiqociwa/2/edit Source URL : http://blog.codez.in/scrolling-text-content-using-jquery-and-not-using-marquee/jquery/2011/01/06 Thanks, A2H My Blog Sugi, if this helps please login to Mark As Answer. \| Alert Moderator

Hi,
As an alternative solution You can try the JQuery based Marquee code which will run with out any delay.

Sample Implementation Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Scroll Text</title>

<style type="text/css">
.scroll{
		width:430px;
		height:21px;
		overflow:hidden;
		position:relative;
        }
	
	.scrollingtext{
		white-space:nowrap;
		position:absolute;
	}
	
</style>
<script type="text/javascript">
$(document).ready(function() {
	 
	    $('.scrollingtext').bind('marquee', function() {
	        var ob = $(this);
	        var tw = ob.width();
	        var ww = ob.parent().width();
	        ob.css({ right: -tw });
	        ob.animate({ right: ww }, 20000, 'linear', function() {
	            ob.trigger('marquee');
	        });
	    }).trigger('marquee');
	 
	});
	</script>
</head>
<body>
<div class="scroll">
            <div class="scrollingtext"> Lorem Ipsum has been the industry's standard    dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.  
  </div>
</div>
</body>
</html>

You can find a Sample Working demo of above code in below link
http://jsbin.com/tiqociwa/2/edit

Source URL : http://blog.codez.in/scrolling-text-content-using-jquery-and-not-using-marquee/jquery/2011/01/06

Thanks,
A2H
My Blog

Sugi, if this helps please login to Mark As Answer. | Alert Moderator

Latest Posts