Link to home
Start Free TrialLog in
Avatar of theclassic
theclassicFlag for United States of America

asked on

Vertical scrolling marquee that stops and fades each message...

I am looking for Javascript that I can apply to content within a div.  An example would be here...

adobe.vanguard-education.com

I have this javascript I lifted of the internet that does a continuous scroll, but I am not sure if it can be customized to do what I want for the example shown above... HELP!!!



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">


<style type="text/css">

#marqueecontainer
{
position: relative;
width: 200px; /*marquee width */
height: 300px; /*marquee height */
background-color: white;
overflow: hidden;
border: 3px solid black;
padding: 2px;
padding-left: 4px;
}

</style>
<script type="text/javascript">
var delayTime=5
var marqueeSpeed=1
var pauseTime=1
var copySpeed=marqueeSpeed
var pauseSpeed=(pauseTime==0)? copySpeed: 0
var actualHeight=''

function ScrollMarquee() {
  if (parseInt(crossMarquee.style.top)>((actualHeight / 2)*(-1)))
  crossMarquee.style.top=parseInt(crossMarquee.style.top)-copySpeed+"px"
  else
  crossMarquee.style.top=0 +"px"
}

function InitializeMarquee()
{
crossMarquee=document.getElementById("vmarquee")
crossMarquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualHeight=crossMarquee.offsetHeight;
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1)
{
crossMarquee.style.height=marqueeheight+"px"
crossMarquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("ScrollMarquee()",30)', delayTime)
}

if (window.addEventListener)
window.addEventListener("load", InitializeMarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", InitializeMarquee)
else if (document.getElementById)
window.onload=InitializeMarquee

</script>
<title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">

<div id="marqueecontainer" onMouseover="copySpeed=pauseSpeed" onMouseout="copySpeed=marqueeSpeed">
<div id="vmarquee" style="position: absolute; width: 98%;">

<div id="copy1">
<div>content<div>
</div>

<div id="copy2">
Content

</div>

</div>
</div>
</form>
</body>
</html>
Avatar of mltsy
mltsy

What exactly are you looking to make it do?  My advice is to use a more robust framework like mootools:
http://mootools.net/docs/

A couple advantages that pop into mind are that it's well supported by community, GPL so you don't have to "lift" it off someone else's site, designed to be used in many contexts unlike someone's proprietary script, and has lots more functionality (fading, for instance - which it sounds like you might want?), bug fixes, updates available.
Avatar of theclassic

ASKER

I worked for a long time writing visual basic code that parses content and delivers it as an asp:literal, so i was hoping to find an easy solution in javascript that does what the above example does - I don't really see any content or code for that in the link you sent - did I miss it?
I don't think you can get a fade out of a scrolling marquee.  I have never seen it.  You would need FLASH for that, and remember, flash is not indexed by SEOs, it is considered graphics for the most part.
Yes, it can be done, but not with the marqee tag here is some code that takes messages from a database and does exactly what the example does...
 

<%@ Page debug="true" inherits="functions" src="functions.vb" %>
<%@ import namespace="System.Data" %>
<%@ import namespace="System.DateTime" %>
<%@ import namespace="System.Data.Oledb" %>

This code gets the messages from the code behind
<script language="vb" runat="server">
 dim dsMessages as dataset
 sub page_load()  
  if not page.IsPostBack() then
   dsMessages = GetEnabledMessages()
  end if
 end sub
</script>
 
 

var currentMessageIndex = 0
var ns4 = (document.layers)? true:false;
var msie = (document.all)? true:false;
 
This is where those messages are placed in an array

var messages = new Array(<%= dsMessages.tables(0).rows().count %>);
<%
 dim intMessageCount as integer = 0
 dim drMessage as datarow
 for each drMessage in dsMessages.tables(0).rows
  response.write ("messages[" & intMessageCount & "] = """ & server.htmlDecode(server.htmlEncode(drMessage("Message"))) & """;" & vbcrlf)
  intMessageCount += 1
 next
%>
Here is where the action starts...

function startMessageBoard(){
 document.getElementById("innerDiv").innerHTML = messages[currentMessageIndex];
 window.setTimeout("moveMessagesUp()", 0);
}
function moveMessagesUp(){
 if (ns4){
  document.layers["innerDiv"].visibility = "show";
 }
 
 if (msie){
  document.getElementById("innerDiv").style.visibility = 'visible';
 }
 
 if (document.getElementById("innerDiv").style.pixelTop != 10) {
  document.getElementById("innerDiv").style.pixelTop = document.getElementById("innerDiv").style.pixelTop - 1;
  window.setTimeout("moveMessagesUp()", 38);
 } else {
  hideCurrentMessageAndShowNext();  
 }
}
function hideCurrentMessageAndShowNext(){
 
 var timeToWait = 8000;
 
 window.setTimeout("hideMessages()", timeToWait/2);
 window.setTimeout("resetInnerDiv();", timeToWait);
 window.setTimeout("moveMessagesUp();", timeToWait);
}
function resetInnerDiv(){
 if (currentMessageIndex != messages.length - 1) {
  currentMessageIndex += 1;
 } else {
  currentMessageIndex = 0;
 }
 
 document.getElementById('innerDiv').innerHTML = messages[currentMessageIndex];
 document.getElementById('innerDiv').style.pixelTop = 50;
 
 if (ns4){
  document.layers["innerDiv"].visibility = "hide";
 }
 
 if (msie){
  document.getElementById('innerDiv').style.visibility='hidden';
 }
}
function hideMessages(){
 document.getElementById('innerDiv').style.width = '159px';
 document.getElementById('innerDiv').style.filter='blendTrans(duration=2)';
 document.getElementById('innerDiv').filters.blendTrans.apply();
 
 
 if (ns4){
  document.layers["innerDiv"].visibility = "hide";
 }
 
 if (msie){
  document.getElementById('innerDiv').style.visibility='hidden';
 }
 
 document.getElementById('innerDiv').filters.blendTrans.play();
}
 
 
So maybe someone might know how to apply this action to just the contents of a div?
Oh, adobe.vanguard-education.com was an example of what you *want* to do?  I thought maybe it was your test page - because it doesn't work at all in Firefox.  So you probably don't want to do whatever they're doing ;)  But you're looking for a scroll in / fade out effect?

Mootools is a javscript framework that applies effects (among other things) in a nice cross-browser, gracefully failing way.  As far as I can tell, the code above only fades in IE, and just "hides" stuff in other browsers... unless I'm mistaken.

There is a script written for mootools that does the marquee already - it probably wouldn't be too hard to apply a fade to it rather than scrolling out.  I'll give it a shot if you don't figure it out before I do :)

This is the marquee script written for Mootools: http://www.mooforum.net/scripts12/mooquee-mookie-mootools-marquee-t115.html#p1983
This is the fade effect demo: http://demos.mootools.net/Effects

You do have to include mootools.js for each of these to work, of course.
Do you have the code for mootools.js ?  It canm't be any type of reference to an external library...I have to code it...I will take a look  and accept if it works- THANKS!!!
Here it is:
http://www.tempomediagroup.com/miscellany/mooqueetest/mooquee.htm

I modified the class a little bit - and it's not finished, but will do what you want it to do, as long as you us "fade" as the direction - the other ones won't work.  I'll post an update to the main page for the mooquee script (http://www.mooforum.net/scripts12/mooquee-mookie-mootools-marquee-t115.html#p1983) when I finish it.

Once that's done, all you need is to include mootools, and the mooquee script and then use something similar to this (maybe a little different once I finish it... check the page above for better documentation then):
<script type="text/javascript">
function body_onLoad() {
	mookieExampleOne = new Mooquee({
	   element:'mooquee',
	   direction:'fade',
	   duration:5, //time in seconds
	   pause:3
	}); 
}
</script>
</head>
 
<body onload="body_onLoad();">
<div id="mooquee" style="width:80px;height:80px;border:1px solid;">
	<div class="mooquee_item">
		This is item 1.  Wait for it...
	</div>  
	<div class="mooquee_item">
		This is item 2!!
	</div>  
</div> 

Open in new window

This is where you get mootools: http://mootools.net/download

It is kinda big to paste into your page... you can select only the components you need, but that's a little tricky to do.  Anyway, you could just paste that whole thing into your page I guess... but it would definitely be better if you could use a linked script tag, of course :)

<script type="text/javsacript" src="mootools.js"></script>
I am looking for what the script is - that is what i was looking for - I am a beginner with javascript, I know basics....HELP!!!  I cannot link it to an external file,...
Okay dude, you gotta give a little effort here: that is a link to the page where you can get the script.  Just click on a download link! :)  Then copy and paste the contents of the file.  Here is a link directly to the compressed version of the script (assuming you want the compressed version): http://mootools.net/download/get/mootools-1.2.1-core-yc.js
Ah, here is a direct link to the mooquee script from the sample page I posted, if that's what you're lookin for: http://www.tempomediagroup.com/miscellany/mooqueetest/mooquee.js
My fault, I should of been clearer - I cannot download ANYTHING, including files, script, or even plain text.  I will review your posts and see what's good...thanks for your patience...
When I save the Moquee Javascript file to the scripts folder in my project, and try to run this html page in visual studio, it says "Class" is undefined - I am new with this intricate javascript programming - sorry for all of the beginner questions...am I missing a tag somewhere?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<script type="text/javascript" src="scripts/mooquee.js">
</script>
</head>

<body onload="body_onLoad();">
<div id="mooquee" style="width:80px;height:80px;border:1px solid;">
<div class="mooquee_item">
This is item 1. Wait for it...
</div>
<div class="mooquee_item">
This is item 2!!
</div>
</div>  
 
Are there additional files besides the moquee.js and the html that you need to run this?
ASKER CERTIFIED SOLUTION
Avatar of mltsy
mltsy

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Last time I bother you , sorry - I have this html...and the js files loaded in my development studio

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="scripts/mootools.1.2.1.js"></script>
<script type="text/javascript" src="scripts/mootools.1.2-more.js"></script>
<script type="text/javascript" src="scripts/mooquee.js">
</script>
</head>
<body onload="body_onLoad();">
<div id="mooquee" style="width:80px;height:80px;border:1px solid;">
<div class="mooquee_item">
This is item 1. Wait for it...
</div>
<div class="mooquee_item">
This is item 2!!
</div>
</div>
</body>
</html>
 When I go to run it, is gives me a jscript error highlighting "body_onLoad();">  and says object not found - sorry, I know I am probably missing or misunderstanding something simple....
Hehe.  No problem.  That would be where the little script segment I attached to my precious post comes in :)  Stick that in your page, and it should work.
I am going to accept, if you would kindly though, explain what this is - is this naming a new function?
 

mookieExampleOne = new Mooquee
 
And is there any way to make it loop - it only occurs once....sorry, if I wasnt working on 26 projects due by end of year (and this is the simplest problem) I would not have to be so lazy :/
If you can answer my last post, it would be much appreciated - thank you for your help, really!!!
Oh, yes.
Well, it's creating a JavaScript "object".  Objects work a little differently in JavaScript.  So anyway, it's creating a new Mooquee object (the structure of which is defined in moquee.js) and calling it mookieExampleOne.

As for looping - it should have been looping the whole time - I saw that it wasn't working in IE, and it turned out the opacity had the wrong value, so I fixed that in mooquee.js but there's still some kind of a problem I can't put my finger on where, rather than fading out, the item just disappears in IE before the next one slides in.  I'll see if I can fix it and finish the script up, but that may take a bit.  It should work better than before now anyway.
I will check back - I am also working on a way to pass a server side array from a code behind file (.vb) and place it in a client side array - it crashes the IE Browser though, so I am attempting a work around - but if you figure it out, please just post where to find the updates - thanks for all your help!!!
Alright, I've fixed and finished it :)  The new script (to replace mooquee.js) is posted as an update to the script on mooforum.net.  You have to modify the body_onLoad function slightly since the interface has changed.  but there is an example of that part on this page as well (just copy the first code block into your body_onLoad function):

http://www.mooforum.net/scripts12/mooquee-mookie-mootools-marquee-t115.html#p2064

As for your server-side array issue, I'd open a new post for that one - with more details ;)