No marquee tag in the HTML markup

For the experienced web developer the marquee tag is a non-standard HTML markup element type which causes text to scroll up, down, left or right. 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.

Because text within a marquee is not always visible, it violates the basic nature of web pages, which are eminently skimmable. Users typically glance over a page and decide what, if anything, to read (using headlines, bold text, bullets, etc.), but marquees, like the blink element, hide text at certain points, meaning at any given time, scanning the page may fail (or take longer).

Links within marquees are notoriously difficult to click, and users only get one chance every time it scrolls past. This can easily annoy users.

Well, there are solutions to this and I want to present you one of them. You only need CSS and having javascript enabled.

just some text...

You can continue adding text and images, but remember not to change „overflow: hidden;” in the „no_marquee” div. That's important.

Second thing you need is a javascript function you must add in the head element of the webpage.

function moving_div_up(value)

{

value--;

if (value<-10300) value = 0;

document.getElementById('moving_div').style.top = value+'px';

setTimeout("moving_div_up("+value+")", 20);

}

That will scroll the text and the images from the „moving_div” from bottom to the top. The speed of the scroll can be changed by modifing the value „20” inside the „setTimeout” with any value you desire.

To scroll the text and the images down you only need to change the decrease of the value and to add it up. Something like this:

function moving_div_down(value)

{

value++;

if (value>10300) value = 0;

document.getElementById('moving_div').style.top = value+'px';

setTimeout("moving_div_down("+value+")", 20);

}

You can scroll the content to the left or to the right. It's simple. Very simple.

function moving_div_left(value)

{

value--;

if (value<-10300) value = 0;

document.getElementById('moving_div').style.left = value+'px';

setTimeout("moving_div_down("+value+")", 20);

}

function moving_div_right(value)

{

value++;

if (value>10300) value = 0;

document.getElementById('moving_div').style.left = value+'px';

setTimeout("moving_div_down("+value+")", 20);

}