theclassic
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.c om
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.sty le.top)>(( actualHeig ht / 2)*(-1)))
crossMarquee.style.top=par seInt(cros sMarquee.s tyle.top)- copySpeed+ "px"
else
crossMarquee.style.top=0 +"px"
}
function InitializeMarquee()
{
crossMarquee=document.getE lementById ("vmarquee ")
crossMarquee.style.top=0
marqueeheight=document.get ElementByI d("marquee container" ).offsetHe ight
actualHeight=crossMarquee. offsetHeig ht;
if (window.opera || navigator.userAgent.indexO f("Netscap e/7")!=-1)
{
crossMarquee.style.height= marqueehei ght+"px"
crossMarquee.style.overflo w="scroll"
return
}
setTimeout('lefttime=setIn terval("Sc rollMarque e()",30)', delayTime)
}
if (window.addEventListener)
window.addEventListener("l oad", InitializeMarquee, false)
else if (window.attachEvent)
window.attachEvent("onload ", InitializeMarquee)
else if (document.getElementById)
window.onload=InitializeMa rquee
</script>
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div id="marqueecontainer" onMouseover="copySpeed=pau seSpeed" onMouseout="copySpeed=marq ueeSpeed">
<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>
adobe.vanguard-education.c
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)?
var actualHeight=''
function ScrollMarquee() {
if (parseInt(crossMarquee.sty
crossMarquee.style.top=par
else
crossMarquee.style.top=0 +"px"
}
function InitializeMarquee()
{
crossMarquee=document.getE
crossMarquee.style.top=0
marqueeheight=document.get
actualHeight=crossMarquee.
if (window.opera || navigator.userAgent.indexO
{
crossMarquee.style.height=
crossMarquee.style.overflo
return
}
setTimeout('lefttime=setIn
}
if (window.addEventListener)
window.addEventListener("l
else if (window.attachEvent)
window.attachEvent("onload
else if (document.getElementById)
window.onload=InitializeMa
</script>
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div id="marqueecontainer" onMouseover="copySpeed=pau
<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>
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.
ASKER
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.Ole db" %>
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.h tmlEncode( drMessage( "Message") )) & """;" & vbcrlf)
intMessageCount += 1
next
%>
Here is where the action starts...
function startMessageBoard(){
document.getElementById("i nnerDiv"). innerHTML = messages[currentMessageInd ex];
window.setTimeout("moveMes sagesUp()" , 0);
}
function moveMessagesUp(){
if (ns4){
document.layers["innerDiv" ].visibili ty = "show";
}
if (msie){
document.getElementById("i nnerDiv"). style.visi bility = 'visible';
}
if (document.getElementById(" innerDiv") .style.pix elTop != 10) {
document.getElementById("i nnerDiv"). style.pixe lTop = document.getElementById("i nnerDiv"). style.pixe lTop - 1;
window.setTimeout("moveMes sagesUp()" , 38);
} else {
hideCurrentMessageAndShowN ext();
}
}
function hideCurrentMessageAndShowN ext(){
var timeToWait = 8000;
window.setTimeout("hideMes sages()", timeToWait/2);
window.setTimeout("resetIn nerDiv();" , timeToWait);
window.setTimeout("moveMes sagesUp(); ", timeToWait);
}
function resetInnerDiv(){
if (currentMessageIndex != messages.length - 1) {
currentMessageIndex += 1;
} else {
currentMessageIndex = 0;
}
document.getElementById('i nnerDiv'). innerHTML = messages[currentMessageInd ex];
document.getElementById('i nnerDiv'). style.pixe lTop = 50;
if (ns4){
document.layers["innerDiv" ].visibili ty = "hide";
}
if (msie){
document.getElementById('i nnerDiv'). style.visi bility='hi dden';
}
}
function hideMessages(){
document.getElementById('i nnerDiv'). style.widt h = '159px';
document.getElementById('i nnerDiv'). style.filt er='blendT rans(durat ion=2)';
document.getElementById('i nnerDiv'). filters.bl endTrans.a pply();
if (ns4){
document.layers["innerDiv" ].visibili ty = "hide";
}
if (msie){
document.getElementById('i nnerDiv'). style.visi bility='hi dden';
}
document.getElementById('i nnerDiv'). filters.bl endTrans.p lay();
}
So maybe someone might know how to apply this action to just the contents of a div?
<%@ Page debug="true" inherits="functions" src="functions.vb" %>
<%@ import namespace="System.Data" %>
<%@ import namespace="System.DateTime
<%@ import namespace="System.Data.Ole
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(
<%
dim intMessageCount as integer = 0
dim drMessage as datarow
for each drMessage in dsMessages.tables(0).rows
response.write ("messages[" & intMessageCount & "] = """ & server.htmlDecode(server.h
intMessageCount += 1
next
%>
Here is where the action starts...
function startMessageBoard(){
document.getElementById("i
window.setTimeout("moveMes
}
function moveMessagesUp(){
if (ns4){
document.layers["innerDiv"
}
if (msie){
document.getElementById("i
}
if (document.getElementById("
document.getElementById("i
window.setTimeout("moveMes
} else {
hideCurrentMessageAndShowN
}
}
function hideCurrentMessageAndShowN
var timeToWait = 8000;
window.setTimeout("hideMes
window.setTimeout("resetIn
window.setTimeout("moveMes
}
function resetInnerDiv(){
if (currentMessageIndex != messages.length - 1) {
currentMessageIndex += 1;
} else {
currentMessageIndex = 0;
}
document.getElementById('i
document.getElementById('i
if (ns4){
document.layers["innerDiv"
}
if (msie){
document.getElementById('i
}
}
function hideMessages(){
document.getElementById('i
document.getElementById('i
document.getElementById('i
if (ns4){
document.layers["innerDiv"
}
if (msie){
document.getElementById('i
}
document.getElementById('i
}
So maybe someone might know how to apply this action to just the contents of a div?
Oh, adobe.vanguard-education.c om 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.
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.
ASKER
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):
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>
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 >
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
ASKER
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
ASKER
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...
ASKER
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:8 0px;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>
<!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:8
<div class="mooquee_item">
This is item 1. Wait for it...
</div>
<div class="mooquee_item">
This is item 2!!
</div>
</div>
ASKER
Are there additional files besides the moquee.js and the html that you need to run this?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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"></sc ript>
<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:8 0px;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....
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="scripts/mootools.1.2.
<script type="text/javascript" src="scripts/mootools.1.2-
<script type="text/javascript" src="scripts/mooquee.js">
</script>
</head>
<body onload="body_onLoad();">
<div id="mooquee" style="width:80px;height:8
<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.
ASKER
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 :/
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 :/
ASKER
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.
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.
ASKER
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 ;)
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 ;)
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.