Chocolate570 Posted November 10, 2005 Share Posted November 10, 2005 Here's the script, what i need is it to fade from normal to light pink to normal. You'll understand what i mean when you see it. <div id="tickertape"><div id="subtickertape" class="subtickertapefont">Initializing...</div></div><script language="JavaScript1.2">/************************************************ Fading Ticker Tape Script- © Dynamic Drive (www.dynamicdrive.com)* This notice must stay intact for use* Visit [url="http://www.dynamicdrive.com/"]http://www.dynamicdrive.com/[/url] for full source code***********************************************///default speed is 4.5 seconds, Change that as desiredvar speed=4500var news=new Array()news[0]="<a href='http://www.dynamicdrive.com'>Click here to go to Dynamic Drive's front page</a>"news[1]="<a href='http://www.javascriptkit.com'>Visit JavaScript Kit for free JavaScripts!</a>"news[2]="<a href='http://freewarejava.com'>Looking for free java applets? Click here.</a>"//expand or shorten this list of messages as desiredvar fadescheme=0 //set 0 to fade bgcolor from (white to black), 1 for (black to white)var hex=(fadescheme==0)? 255 : 0var startcolor=(fadescheme==0)? "rgb(255,255,255)" : "rgb(0,0,0)"var endcolor=(fadescheme==0)? "rgb(0,0,0)" : "rgb(255,255,255)"var frame=20;var ie=document.allvar ns6=document.getElementByIdvar ns4=document.layersi=0tickerobject=ie? subtickertape: ns6? document.getElementById("subtickertape") : document.tickertape.documentfunction regenerate(){window.location.reload()}function regenerate2(){if (document.layers)setTimeout("window.onresize=regenerate",450)}function bgcolorfade() { // 20 frames fading processif(frame>0) { hex=(fadescheme==0)? hex-12 : hex+12 // increase or decrease color value depd on fadeschemetickerobject.style.backgroundColor="rgb("+hex+","+hex+","+hex+")"; // Set color value.frame--;setTimeout("bgcolorfade()",20); }else{tickerobject.style.backgroundColor=endcolor;frame=20;hex=(fadescheme==0)? 255 : 0} }function updatecontent(){if (ie||ns6)bgcolorfade()if (ns4){tickerobject.subtickertape.document.write('<span class="subtickertapefont">'+news[i]+'</span>')tickerobject.subtickertape.document.close()}else tickerobject.innerHTML=news[i]if (i<news.length-1)i++elsei=0setTimeout("updatecontent()",speed)}</script> Here is a url to where i got the script:http://www.dynamicdrive.com/dynamicindex2/tickertape.htm Link to comment Share on other sites More sharing options...
Chocolate570 Posted November 11, 2005 Author Share Posted November 11, 2005 No one!? Come on people! Link to comment Share on other sites More sharing options...
Jonas Posted November 11, 2005 Share Posted November 11, 2005 Dude, go out, get some air, take it easy, relax. Someone will help you when they see it, if they can... Link to comment Share on other sites More sharing options...
Chocolate570 Posted November 11, 2005 Author Share Posted November 11, 2005 Dude, go out, get some air, take it easy, relax. Someone will help you when they see it, if they can... <{POST_SNAPBACK}> What does that mean???!??!??I need help right now!*gets taken away by guys in suits* Link to comment Share on other sites More sharing options...
lugos Posted November 11, 2005 Share Posted November 11, 2005 Hello,So what is it that you're asking? I just copied and pasted the style and javascript code into my editor and it seems to work fine. Did you need help finding colors? Or getting it to work?lugos Link to comment Share on other sites More sharing options...
Chocolate570 Posted November 11, 2005 Author Share Posted November 11, 2005 Yes, it does work.The problem is, i want it to fade from a different color other than white and black. You see how it displays the message on black, and then fades into white quickly and then back to black again? What i want is it to write the message on transparent, fade to light pink (that's the name of the color), and then come back to transparent with the next message written. Link to comment Share on other sites More sharing options...
hacknsack Posted November 13, 2005 Share Posted November 13, 2005 Would you like to use this, we can customize anything about it, because it's ours . <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head> <title>Banner Colorizer</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css">.noShow{ display: none; width: 350px; padding: 5px; }.yesShow{ display: block; width: 350px; cursor: pointer; padding: 5px; }</style> <script type="text/javascript">var bgArray = [['#06D5F9','#0A9DF5','#3587CA','#4173BE','#4D73B3'],['#FDEE37','#ECCB13','#DBB724','#C1A03E','#B0934F'],['#FDCFFE','#F9B7F9','#E659DB','#C00CB3','#A240A2']];var fgArray = [['#4D73B3','#4173BE','#3587CA','#0A9DF5','#06D5F9'],['#B0934F','#C1A03E','#DBB724','#ECCB13','#FDEE37'],['#A240A2','#C00CB3','#E659DB','#F9B7F9','#FDCFFE']];var divArray = ['aDiv','bDiv','cDiv'];var prev_banner = 0;var curr_banner = 0;var j = 0;var bTimer = null;var stop = false;function mkBG(toggle){if(stop) return;if(toggle){ document.getElementById(divArray[prev_banner]).className = 'noShow'; document.getElementById(divArray[curr_banner]).className = 'yesShow'; }banner = document.getElementById(divArray[curr_banner]); banner.style.background = bgArray[curr_banner][j]; banner.style.color = fgArray[curr_banner][j]; j++; if(j == bgArray[curr_banner].length && curr_banner == divArray.length - 1){ prev_banner = curr_banner; curr_banner = 0; j = 0; setTimeout('mkBG(true)', 2000); return; } else if(curr_banner < divArray.length && j == bgArray[curr_banner].length){ prev_banner = curr_banner; curr_banner++; j = 0; setTimeout('mkBG(true)', 2000); return; }setTimeout('mkBG()', 200); }function init(){setTimeout('mkBG(true)',50);}window.onload = init;</script> </head><body> <p> Customize your colors. </p> <div style="width:360px; height: 40px;"> <div class="noShow" id="aDiv" title="Google" onclick="window.location = 'http://www.google.com';"> Google </div> <div class="noShow" id="bDiv" title="Yahoo" onclick="window.location = 'http://www.yahoo.com';"> Yahoo </div> <div class="noShow" id="cDiv" title="Ask Mr. J" onclick="window.location = 'http://www.ask.com';"> AskJeeves </div> </div><input type="button" value="stop" onclick="stop = true;"></body></html> Left stop button on the page so you can check your colors.Thanks, Link to comment Share on other sites More sharing options...
Chocolate570 Posted November 13, 2005 Author Share Posted November 13, 2005 I don't understand what it does? :ph34r: Link to comment Share on other sites More sharing options...
Jonas Posted November 13, 2005 Share Posted November 13, 2005 I don't understand what it does? :ph34r:<{POST_SNAPBACK}> Try putting the code here:http://www.w3schools.com/html/tryit.asp?fi...e=tryhtml_basicIt makes a banner which changes between Google, Yahoo and Mr. Jeeves, and also a link based on which search engine is currently displayed. As he says, you could edit this to make a news ticker with a link to the clicked news header... And of course, you could change the color to be the same on all of them... Link to comment Share on other sites More sharing options...
hacknsack Posted November 13, 2005 Share Posted November 13, 2005 Jonas,Does it work in Opera? Link to comment Share on other sites More sharing options...
Jonas Posted November 13, 2005 Share Posted November 13, 2005 Like a charm... Link to comment Share on other sites More sharing options...
hacknsack Posted November 14, 2005 Share Posted November 14, 2005 Thanks, I only have FF & IE6 for testing. Link to comment Share on other sites More sharing options...
Jonas Posted November 14, 2005 Share Posted November 14, 2005 Huh, I have IE6, FF, NN and Opera...http://www.opera.com/download/:)I'm currently looking forward to Opera 9, which will have xslt support, so I can start learning writing AND displaying xml... Link to comment Share on other sites More sharing options...
Chocolate570 Posted November 14, 2005 Author Share Posted November 14, 2005 Not to be rude, all of this stuff is great, and cool script, but will anyone help me with the original one Link to comment Share on other sites More sharing options...
hacknsack Posted November 14, 2005 Share Posted November 14, 2005 It's just that the way the original script is written, I don't see any way to help you out. Looks like it would take a rewrite of the fade functions.But someone else may be able to make modifications. Link to comment Share on other sites More sharing options...
Jonas Posted November 14, 2005 Share Posted November 14, 2005 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head> <title>Banner Colorizer</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css">.noShow{ display: none; width: 350px; padding: 5px; }.yesShow{ display: block; width: 350px; cursor: pointer; padding: 5px; }</style> <script type="text/javascript">var bgArray = [['#000000','#ffddff'],['#000000','#ffddff'],['#000000','#ffddff'],['#000000','#ffddff'],['#000000','#ffddff'],['#000000','#ffddff'],['#000000','#ffddff']];var fgArray = [['#000000'],['#000000'],['#000000'],['#000000'],['#000000'],['#000000'],['#000000']];var divArray = ['aDiv','bDiv','cDiv','dDiv','eDiv','fDiv'];var prev_banner = 0;var curr_banner = 0;var j = 0;var bTimer = null;var stop = false;function mkBG(toggle){if(stop) return;if(toggle){ document.getElementById(divArray[prev_banner]).className = 'noShow'; document.getElementById(divArray[curr_banner]).className = 'yesShow'; }banner = document.getElementById(divArray[curr_banner]); banner.style.background = bgArray[curr_banner][j]; banner.style.color = fgArray[curr_banner][j]; j++; if(j == bgArray[curr_banner].length && curr_banner == divArray.length - 1){ prev_banner = curr_banner; curr_banner = 0; j = 0; setTimeout('mkBG(true)', 5000); return; } else if(curr_banner < divArray.length && j == bgArray[curr_banner].length){ prev_banner = curr_banner; curr_banner++; j = 0; setTimeout('mkBG(true)', 5000); return; }setTimeout('mkBG()', 200); }function init(){setTimeout('mkBG(true)',50);}window.onload = init;</script> </head><body> <p> Customize your colors. </p> <div style="width:360px; height: 40px;"> <div class="noShow" id="aDiv" title="NewsA" onclick="window.location = 'http://www.w3schools.com/';"> Header A:<br />This is news item A. As you can see, it will pan out to black, and end up pink. Not sure this was what you wanted... </div> <div class="noShow" id="bDiv" title="NewsB" onclick="window.location = 'http://www.w3schools.com';"> Header B:<br />If this isn't what you want, we can work around that and work our way closer. Notice also that the height changes depending on the length of the text. If you want to give the news header a fixed height, you have to define a height in the style tag... </div> <div class="noShow" id="cDiv" title="NewsC" onclick="window.location = 'http://www.w3schools.com';"> Header C:<br />I think it's possible to just add divs like this, and they will be included in the scroll. Let's see... </div> <div class="noShow" id="dDiv" title="NewsD" onclick="window.location = 'http://www.w3schools.com';"> Header D:<br />Did it work? Not initially. But by changing the <span style="color: #ff0000;">divArray</span> sentence in the script tags to include dDiv, it worked. Now, just add as many divArrays as you want in the script tags... </div> <div class="noShow" id="eDiv" title="NewsE" onclick="window.location = 'http://www.w3schools.com';"> Header E:<br />Now I have 5 headers. Another thing to note is I've changed the display time from 2000 to 5000 ms, milliseconds. Look for <span style="color: #ff0000;">setTimeout</span> two places within the script tags, and change both of them to a higher or lower value for different display time. I also had to add a bgColor and fgColor array for every newsitem... :| Annoying... </div> <div class="noShow" id="fDiv" title="NewsF" onclick="window.location = 'http://www.w3schools.com';"> Header F:<br />Any questions? Don't hesitate to ask @ [url="http://w3schools.invisionzone.com"]http://w3schools.invisionzone.com[/url]... I'm sure we can improve this script even more, optimize it... </div> </div></body></html> Try it here:http://www.w3schools.com/html/tryit.asp?fi...e=tryhtml_basicCtrl+C the code in the codebox, and Ctrl+V it into the left frame...Oh, and excuse my ramblings... Link to comment Share on other sites More sharing options...
Chocolate570 Posted November 14, 2005 Author Share Posted November 14, 2005 No, i need fade. Thanks though. I'll try rewriting the function. :ph34r: Link to comment Share on other sites More sharing options...
Jonas Posted November 14, 2005 Share Posted November 14, 2005 No, i need fade.Fade, how? Link to comment Share on other sites More sharing options...
Chocolate570 Posted November 14, 2005 Author Share Posted November 14, 2005 Copy the original script, the one in my first post, into a try it editor. Link to comment Share on other sites More sharing options...
Jonas Posted November 14, 2005 Share Posted November 14, 2005 In IE and Opera, it just says "initializing..." Link to comment Share on other sites More sharing options...
Chocolate570 Posted November 15, 2005 Author Share Posted November 15, 2005 Go to the url i put at the top, it gives instructions. You gotta put in a onload= thing in the body tag, and a stylesheet. Link to comment Share on other sites More sharing options...
hacknsack Posted November 15, 2005 Share Posted November 15, 2005 Is this anywhere close to the target?http://webfeet.siteburg.com/1colorBanner.htmlSimplified it per your request for only one color set.Thanks, Link to comment Share on other sites More sharing options...
Jonas Posted November 15, 2005 Share Posted November 15, 2005 Black to pink to black?orWhite to pink to white? Link to comment Share on other sites More sharing options...
Chocolate570 Posted November 15, 2005 Author Share Posted November 15, 2005 Transparent background fades into pink and then back to transparent background with pink text. Link to comment Share on other sites More sharing options...
Chocolate570 Posted November 15, 2005 Author Share Posted November 15, 2005 And hacknsack, thanks, but i really like the way this script works. Ty though. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now