Solved

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

Posted on 2008-10-22
22
10,083 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 

Author Comment

by:theclassic
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:theclassic
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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 basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

771 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

9 Experts available now in Live!

Get 1:1 Help Now