<marquee> behavior slide - scroll thrice at once; fade into center

**techno_race** · 04-07-2007, 01:28 AM

I don't know if this is possible or not, but I need the following:

HTML Code:

<marquee direction="up" behavior="slide">

I need this to slide it up. After it's finished sliding, I need it to stay there. Which it normally does.
But then I need it to copy it and then, leaving the original one there, I need it to copy it and show it at the bottom of the window. With the original one staying, the one at the bottom slides up. It repeats this three times and then, on the one at the top, it performs this code:

HTML Code:

<marquee direction="right" behavior="scroll">

but after it scrolls off of the screen, it DOESN'T come back. Then, it fades the same text into view in the center (but still left side) of the screen. Then, the text is fully normal. At the same time, if someone clicks ANYWHERE on the page ANYTIME, it goes to a different page WITHOUT this effect.

If this is possible, could someone please perform the effect on the following code:

HTML Code:

Are you headed for <u><font face="Comic Sans MS"the Hindi Belt</font></u>?<br>&#201C;कृपा करना निश्चित
करना कुरसी है
भीतर एक धार्मिक
जगह और आनंद लेना
वही उड़ान.
&#201E;


<br>
At LangTravel, we speak your language.<br>

Click here to find free online translators and dictionaries for <u><font face="Comic Sans MS">HINDI</font></u>.

If this requires Flash, there's a whole lot more texts similar to the above that I need this effect on.

**mburt** · 04-07-2007, 01:35 AM

So you need a verticle scroller?

**techno_race** · 04-07-2007, 01:40 AM

Yes..

**mburt** · 04-07-2007, 01:52 AM

Got it:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>verticle scroller</title>
<style type="text/css">
.scroller {
width:250px;
height:350px;
border:1px solid gray;
padding:5px;
font:10pt arial;
overflow:hidden;
}
</style>
<script type="text/javascript">
var delay = 40;
var scroll = {};
scroll.up = function(el) {
	if (el.start == true) {
		el.i = 0;
		}
	else {
		el.i--;
		}
	el.style.marginTop=el.i+"px";
	if (el.i < el.offsetHeight-el.offsetHeight*2) {
		el.i = el.parentNode.offsetHeight;
		}
	setTimeout(function() {scroll.up(el)},delay);
	el.start = false;
	}
scroll.getEl = function() {
	for (var i=0,t=document.getElementsByTagName("*");i<t.length;i++) {
		if (t[i].className=="scroller") {
			var indiv = document.createElement("div");
			indiv.start=true;
			indiv.innerHTML = t[i].innerHTML;
			t[i].innerHTML = "";
			scroll.up(indiv);
			t[i].appendChild(indiv);
			}
		}
	}
window.onload = scroll.getEl;
</script>
</head>
<body>
<div class="scroller">
	Are you headed for <u><font face="Comic Sans MS">the Hindi Belt</font></u>?
	<br>
	<br>
	At LangTravel, we speak your language.<br>
</div>
</body>

All you have to do is make a div container with the class-name "scroller":

Code:

<div class="scroller">...

You can have as many as you want on the page.

Hope this helps.

**techno_race** · 04-07-2007, 03:12 AM

Not quite what I wanted. I need the scroller to stop at the top of the div, then the same thing to come up and scroll to the top of the div and overlap the other one. Then another overlap. Then another overlap. Then everything disappears. Then the same message fades its way into view in the middle of the div. Then it stays there.

**mburt** · 04-07-2007, 10:24 AM

I've read over and over your thread, but still have no idea what you're talking about. I know it may be hard, but could you give a further detailed answer?

**techno_race** · 04-07-2007, 02:38 PM

Let's say we'll call the message at the bottom of this post 'text.'
Let's call the <div> you made 'scroller.'
'Text' is at the bottom of 'scroller.'
'Text' scrolls to the top of 'scroller.'
'Text' stops when it gets to the top of 'scroller.'
Then another 'text' appears at the bottom of the scroller so there's one at the top and one at the bottom.
The 'text' at the bottom of 'scroller' scrolls up, overlaps the first 'text,' then stops.
Another 'text' appears at the bottom of 'scroller' and scrolls to the top, overlaps the first two 'text's, then stops.
The three 'text's at the top of 'scroller' scroll off of the right side of 'scroller,' still overlapping each other.
Then 'text' appears in white in the middle of the white 'scroller.'
Then the white 'text' slowly fades its way into black in the middle of the white 'scroller.'
Then nothing happens.

Message:
“कृपा करना निश्चित
करना कुरसी है
भीतर एक धार्मिक
जगह और आनंद लेना
वही उड़ान.„

**mburt** · 04-07-2007, 06:38 PM

That could become incredibly complex. I suggest you search the net for a script that might suite your needs.

Thread: <marquee> behavior slide - scroll thrice at once; fade into center

Thread Tools

Search Thread

<marquee> behavior slide - scroll thrice at once; fade into center

Bookmarks

Bookmarks

Posting Permissions