HTML Marquee with jQuery

by

Marquee JqueryPIAn HTML marquee is a sliding piece of text that displays vertically down or  horizontally across the webpage depending on what conditions you have set. This is made by using HTML <marquees> tag.

Note: Its is not recommended to rely on the <marquee>  tag because it may not be supported by different browsers , otherwise use CSS and Javascript to make responsive effects.

Basic Syntax as follows:

<marquee ... [attributes] ..>
Put your text or image here.....
</marquee>

Basic example as follows:

Basic...
<marquee>scrolling text from right to left</marquee>
has an attributes...
<marquee direction="up">Scrolling text from bottom to top</marquee>
More attributes...
<marquee direction="down" behavior="alternate" width="600" height="400"  style="border:solid 1px #ddd;">
  <marquee behavior="alternate">
   bouncing text
  </marquee>
</marquee>

 

Marquee.js is an alternative to HTML <marquee> tag. This is the most responsive and effective when creating a smooth scrolling text on the webpage.

 

Examples:

 

Default options

<div class='marquee'>Scrolling text from right to left.</div>
<script>
$(function(){
 $('.marquee').marquee();
});
</script>

Overwrite options

<div class='marquee-overwrite'>Scrolling text from left to right.</div>
<script>
$(function(){
$('.marquee-overwrite').marquee({
 speed: 6000,
 gap: 60,
 delayBeforeStart: 1,
 direction: 'right',
 duplicated: true,
 pauseOnHover: true
});
});
</script>

Scrolling upward

<div class='marquee-up'>Scrolling text upward.</div>
<script>
$(function(){
$('.marquee-up').marquee({
 direction: 'up',
 speed: 1400
 });
});
</script>

Adding Events

<div class='marquee-event toggle'>Scrolling text from right to left.</div>
<a id='pause' href='#'>Pause</a> | <a id='resume' href='#'>Resume</a> 
<script>
$(function(){
 var $mwo = $('.marquee-event');
 $('.marquee-event').marquee();
 //pause and resume links
 $('#pause').click(function(e){
 e.preventDefault();
 $mwo.trigger('pause');
 });
 $('#resume').click(function(e){
 e.preventDefault();
 $mwo.trigger('resume');
 });
 //toggle
 $('.toggle').hover(function(e){
 $mwo.trigger('pause');
 },function(){
 $mwo.trigger('resume');
 })
 .click(function(e){
 e.preventDefault();
 })
});
</script>

 

For all students who need programmer for your thesis system or anyone who needs a sourcecode in any programming languages. You can contact me @ :

 

Email – [email protected]
Mobile No. – 09305235027 – tnt

 

Download Sourcecode

Leave a Comment