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>
theclassicAsked:
Who is Participating?
 
mltsyConnect With a Mentor Commented:
Yeah.  You need mootools, from the first link I posted :)

Check out the source of this page:
http://www.tempomediagroup.com/miscellany/mooqueetest/mooquee.htm

Everything there is what is required :)  Just save all the scripts that page uses into your scripts folder and link to all of them :)  That would be:
http://www.tempomediagroup.com/miscellany/mooqueetest/mootools.1.2.1.js
http://www.tempomediagroup.com/miscellany/mooqueetest/mootools.1.2-more.js
http://www.tempomediagroup.com/miscellany/mooqueetest/mooquee.js

Then you also need to use the little script included in the actual HTML, which I'll attach below.

I'm not sure what you mean by "cannot download ANYTHING" - it sounds like you were able to download mooquee.js alright...?  So I'll assume you can also download these files too :)  If you mean you can't link to them in your final page (as you have done in the sample page above), then you can just copy and paste each js file right into your page inside a script tag.

<script type="text/javascript">
function body_onLoad() {
	mookieExampleOne = new Mooquee({
	   element:'mooquee',
	   direction:'fade',
	   duration:5, //time in seconds
	   pause:3
	}); 
}
</script>

Open in new window

0
 
mltsyCommented:
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.
0
 
theclassicAuthor Commented:
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?
0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
scrathcyboyCommented:
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.
0
 
theclassicAuthor Commented:
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?
0
 
mltsyCommented:
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.
0
 
theclassicAuthor Commented:
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!!!
0
 
mltsyCommented:
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

0
 
mltsyCommented:
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>
0
 
theclassicAuthor Commented:
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,...
0
 
mltsyCommented:
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
0
 
mltsyCommented:
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
0
 
theclassicAuthor Commented:
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...
0
 
theclassicAuthor Commented:
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>  
 
0
 
theclassicAuthor Commented:
Are there additional files besides the moquee.js and the html that you need to run this?
0
 
theclassicAuthor Commented:
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....
0
 
mltsyCommented:
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.
0
 
theclassicAuthor Commented:
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 :/
0
 
theclassicAuthor Commented:
If you can answer my last post, it would be much appreciated - thank you for your help, really!!!
0
 
mltsyCommented:
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.
0
 
theclassicAuthor Commented:
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!!!
0
 
mltsyCommented:
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 ;)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.