Solved

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

Posted on 2008-10-22
22
10,128 Views
Last Modified: 2013-11-19
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>
0
Comment
Question by:theclassic
  • 11
  • 10
22 Comments
 
LVL 7

Expert Comment

by:mltsy
ID: 22778699
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
 

Author Comment

by:theclassic
ID: 22779812
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
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22782349
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:theclassic
ID: 22785834
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
 
LVL 7

Expert Comment

by:mltsy
ID: 22797517
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
 

Author Comment

by:theclassic
ID: 22798164
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
 
LVL 7

Expert Comment

by:mltsy
ID: 22798196
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
 
LVL 7

Expert Comment

by:mltsy
ID: 22798241
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
 

Author Comment

by:theclassic
ID: 22799620
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
 
LVL 7

Expert Comment

by:mltsy
ID: 22800225
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
 
LVL 7

Expert Comment

by:mltsy
ID: 22800249
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
 

Author Comment

by:theclassic
ID: 22812297
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
 

Author Comment

by:theclassic
ID: 22812502
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
 

Author Comment

by:theclassic
ID: 22812521
Are there additional files besides the moquee.js and the html that you need to run this?
0
 
LVL 7

Accepted Solution

by:
mltsy earned 500 total points
ID: 22822149
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
 

Author Comment

by:theclassic
ID: 22824317
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
 
LVL 7

Expert Comment

by:mltsy
ID: 22824457
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
 

Author Comment

by:theclassic
ID: 22824999
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
 

Author Closing Comment

by:theclassic
ID: 31508818
If you can answer my last post, it would be much appreciated - thank you for your help, really!!!
0
 
LVL 7

Expert Comment

by:mltsy
ID: 22826250
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
 

Author Comment

by:theclassic
ID: 22830737
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
 
LVL 7

Expert Comment

by:mltsy
ID: 22831471
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

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

815 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now