Friday, June 22, 2012

Speed Control in Marquee, Make interactive Webpage -Part 2

I hope you all enjoyed a lot with my previous post Make Interactive Webpages Using Marquee -Part1. In this post I explained the basic uses and properties (Attributes) of Marquee tag in HTML. Now, In the Next Tutorial of Marquee, I am going to explain you how to use Start and Stop functionality, Speed control of Marquee text. To learn this tutorials, I recommend you first go through the Part-1 Marquee tutorial. You can say this is a advance tutorial to develop sliding text widget for your blog. So Let start with Marquee Part-2 tutorials.



Read Part-1 Tutorials : Make Interactive Webpage Using Marquee

To Provide Start and Stop and other dynamic functionality in  Marquee, we have to call any event like onMouseover, onClick, onMouseDown using a inline JavaScript. Don`t think it is a big task. Its a simple inline JavaScript code to call these event to control the movement of Marquee tags element.

1. Mouse Hover Marquee  

In this, whenever User mouser over at Marquee, it slow the speed of marquee element.

Your Hover Marquee Text

<marquee behavior="scroll" direction="left" scrollamount="12" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 12, 0);">Your Hover Marquee Text</marquee>
you can change onmouseover scrollamount  time for slow and fast speed.

2. onClick Marquee Speed Control

In this, whenever user click on the marquee text, it slow the speed of marquee text.

Your onClick Marquee Text

<marquee behavior="scroll" direction="left" onmousedown="this.setAttribute('scrollamount', 12, 0);" onmouseup="this.setAttribute('scrollamount', 0, 0);" scrollamount="12">Your onClick Marquee Text</marquee>

3. Using Buttons 

In this you can add start and stop button to control the Marquee element.

Button Controls in Marquee

<marquee id="mrk" behavior="scroll" direction="left" scrollamount="10" >
<p>Button Controls in Marquee</p>
</marquee>
<input type="button" value="Slower Speed" onClick="document.getElementById('mrk').setAttribute('scrollamount', 1, 0);">
<input type="button" value="Normal Speed" onClick="document.getElementById('mrk').setAttribute('scrollamount', 10, 0);">
<input type="button" value="Faster Speed" onClick="document.getElementById('mrk').setAttribute('scrollamount', 20, 0);">
For controlling the Speed we use Marquee scrollamount attribute which is a best way to control the speed. For Stop we used '0' seconds while there is another way to do this by call "this.stop()" for stop the marquee and "this.start()" for start the scrolling the marquee element.

Real Time Uses

Now, you are ready to develop some real time awesome tools for your blog. Here I am showing how to create snow fall widget in your website using Marquee.



Code of this widget :-
<div class="pbt-marquee-code" style="height:400px;position:relative;">
<marquee style="z-index:2;position:absolute;left:186px;top:84px;height:447px;"direction="down">
<img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" />
</marquee>
<marquee style="z-index:2;position:absolute;left:280px;top:14px;height:366px;"scrollamount="1" direction="down">
<img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" />
</marquee>
<marquee style="z-index:2;position:absolute;left:10px;top:62px;height:38px;"scrollamount="6" direction="down"><img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" /></marquee><marquee style="z-index:2;position:absolute;left:155px;top:82px;height:299px;"scrollamount="6" direction="down"><img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" /></marquee><marquee style="z-index:2;position:absolute;left:7px;top:18px;height:284px;"scrollamount="3" direction="down"><img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" /></marquee><marquee style="z-index:2;position:absolute;left:224px;top:23px;height:257px;"scrollamount="2" direction="down"><img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" /></marquee><marquee style="z-index:2;position:absolute;left:293px;top:9px;height:63px;"scrollamount="6" direction="down"><img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" /></marquee><marquee style="z-index:2;position:absolute;left:84px;top:110px;height:432px;"scrollamount="3" direction="down"><img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" /></marquee><marquee style="z-index:2;position:absolute;left:236px;top:71px;height:180px;"scrollamount="3" direction="down"><img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" /></marquee><marquee style="z-index:2;position:absolute;left:310px;top:37px;height:209px;"scrollamount="3" direction="down"><img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" /></marquee><marquee style="z-index:2;position:absolute;left:206px;top:92px;height:52px;"direction="down"><img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" /></marquee><marquee style="z-index:2;position:absolute;left:96px;top:7px;height:48px;"scrollamount="5" direction="down"><img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" /></marquee><marquee style="z-index:2;position:absolute;left:241px;top:13px;height:159px;"scrollamount="6" direction="down"><img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" /></marquee><marquee style="z-index:2;position:absolute;left:287px;top:83px;height:270px;"scrollamount="1" direction="down"><img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" /></marquee><marquee style="z-index:2;position:absolute;left:123px;top:75px;height:300px;"scrollamount="5" direction="down"><img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" /></marquee><marquee style="z-index:2;position:absolute;left:223px;top:14px;height:305px;"scrollamount="2" direction="down"><img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" /></marquee><marquee style="z-index:2;position:absolute;left:105px;top:113px;height:259px;"scrollamount="5" direction="down"><img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" /></marquee><marquee style="z-index:2;position:absolute;left:183px;top:64px;height:99px;"scrollamount="2" direction="down"><img src="http://aux.iconpedia.net/uploads/2124989484974903768.png" /></marquee>
</div>
I hope, you enjoyed a lot with this series and will develop more interactive web pages using Marquee. :)

1 comments :

confused??? Post a Comment

 

Recent Posts

About PBT

We design and develop Widget, Custom code , Template customization so that you can make your blog unique and cool. If you need any type of widget or custom code feel free to Contact. we happy to help you...