Marquee: A Best HTML Tag For Moving Your Object.

What Is A Marquee?

The marquee tag is a non-standard HTML element which causes text to scroll up, down, left or right automatically. The tag was first introduced in early versions of Microsoft’s Internet Explorer, and was compared to Netscape’s blink element, as a proprietary non-standard extension to the HTML standard with usability problems. In simple The HTML <marquee> tag is used for scrolling piece of text or image displayed either horizontally across or vertically down your web site page depending on the settings.

Why To Use?

Marquee can be distracting.The human eye is attracted to movement,and marquee text is constantly moving. So you can add your desired text on which you want to garb your visitor attention first like some hottest news of your site or some offers or anything you want to show your visitor at there first sight to your page.

Some Problems And Solutions:

Because marquee text moves, links within it are more difficult to click than those in static text, depending on the speed and length of the scrolling. Users only get one chance every time it scrolls past. This can easily frustrate users. Good design keeps links and critical information out of scrolled texts or puts another static copy of each somewhere else always onscreen and keep scrolls with links (like site or general news updates) very brief (not more than two or three virtual screen lengths maximum at a good speed like the default of 10) so that they repeat quickly. Also, scrolling text too fast can make it unreadable to some people, particularly those with visual impairments. Speed settings above default should be avoided for relaying readable text. There are many legitimate reasons to use or avoid use of the marquee tag. Web authors need to have the good sense to know when either case is present.

Attributes:

Uses Of Attributes, Code+Live DEMO:

There are some best use of this tag and also live DEMO of it about how to use it and In how many ways you can use it. These all are awesome and simple in coding. Have a look on all the below names and see there live demo.

Scroll Amount:

From this attribute, you can set and define your text how how far your text have to jump. The default value is 1. 1 means that your text will jump each after 1px to scroll itself. You can see the below code and the live DEMO at of DEMO page linked below.

<marquee behavior="scroll" direction="left" scrollamount="1" style="border: 1px solid;">
Scroll Amount Is Set To 1
</marquee>

Scroll Delay:

From this attribute, you can set  and define your text how much your text have to wait before jumping to next pixel or your set ScrollAmount value pixel. The default value is also 1. 1 means that your text will jump each after 1ms to slide itself. You can see the below code and the live DEMO at of DEMO page linked below.

<marquee behavior="scroll" direction="left" scrolldelay="1" style="border: 1px solid;">
Scroll Delay Is Set To 1
</marquee>

Behavior:

From this attribute, you can set and define your text what to do in scroll or slide or alternate The default value is also “scroll”. “scroll” means that your text will scroll . You can set it to slide or alternate. “slide” means that your text will move to any end and after reaching to end it will be stop there. And the third one is “alternate” that mean your text will remain scrolling back and froth without hiding any text respectively. You can see the below “alternate” code and the live DEMO at of DEMO page linked below.

<marquee behavior="alternate" style="border: 1px solid;">
Behavior Is Set To Alternate
</marquee>

Direction:

From this attribute, you can set and define your text where it have to move like up/down/left/right. The default value is also “left”. You can change it ina any code then it will start as you will. You can see the “right” attribute code below and the live DEMO at of DEMO page linked below.

<marquee direction="right" style="border: 1px solid;">
Direction Is Set To Right
</marquee>

Stop Sliding Text On Mouse Hover Replay On Relieve:

From this DOM event, you can set your mouse that will stop your sliding text when it came over the text and will restart when mouse goes by. It’s best for some news type widgets because a visitor can’t read out the text while scrolling. You can see the event code below and the live DEMO at of DEMO page linked below.

<marquee behavior="scroll" direction="left" onmouseout="this.start();" onmouseover="this.stop();" style="border: 1px solid;">
Stop Sliding Text On Mouse Hover Replay On Relieve
</marquee>

Stop Sliding Text On Mouse Click Over Text And Replay On Relieve:

From this DOM event, you can set your mouse that will stop your sliding text when you press left click of your mouse on the text and the text and will restart when you leave the click. It’s also best for some news type widgets because a visitor can’t read out the text while scrolling and from this it can read out when he want. You can see the event code below and the live DEMO at of DEMO page linked below.

<marquee behavior="scroll" direction="left" onmousedown="this.stop();" onmouseup="this.start();" style="border: 1px solid;">
Stop Sliding Text On Mouse Click Over Text And Replay On Relieve:
</marquee>

Stop Sliding Text On Mouse Click Over Button And Replay On Relieve:

From this DOM event, you can set your mouse that will stop your sliding text when you press left click of your mouse on the given stop button and the text and will restart when you click on start button. It’s also best for some news type widgets but it contain two buttons. You can see the event code below and the live DEMO at of DEMO page linked below.

<marquee behavior="scroll" direction="left" id="mymarquee" style="border: 1px solid;">
Stop Sliding Text On Mouse Click Over Button And Replay On Relieve:
</marquee>
<input onclick="document.getElementById('mymarquee').stop();" type="button" value="Stop Marquee" />
<input onclick="document.getElementById('mymarquee').start();" type="button" value="Start Marquee" />

All DEMO of the above mentioned text are kept live in one page so it’s means that you can also add unlimited Marquee tag in a single page or post without conflicting them.

CSS-JavaScript Code In It:

The element is non-compliant HTML. CSS properties are used to achieve the same effect as specified in the Marquee Module Level 3, which is in the call for implementations stage.Similar effects can also be achieved through the use of JavaScript.

In MySpace Pages:

The on off codes use JavaScript, and therefore, will not work on your MySpace page. You can still use only marquee codes on your MySpace page though, you just won’t be able to stop/start them with JavaScript.

Supported By:

The marquee element was first invented for Microsoft’s Internet Explorer and is still supported by it. Firefox, Opera, Chrome and Safari web browsers support it for compatibility with legacy pages. The HTML <marquee> is an MSIE extension, but is now supported by NS 7 also. So please check if your browser supports this tag or not.

NON-Official:

The W3C advises against its use in HTML documents.

Online Practice:

To Become more comfortable – Do Online Practice

Some Widgets Based Upon This Tag:

1.) 100% Free Hulo Bar For Blogger And Website With CSS Only
2.) Awesome CSS Fan-Shout Web-Bar For Blog And Website
3.) Simple And Pure HTML Image Slider Without CSS Or JavaScript
4.) Simple And Pure HTML SlideShow With Play/Pause Controls
Be With Us To Get More…