Jump to content
xisto Community
Sign in to follow this  
Followers 0
Baniboy

Help With Dhtml I need some help with the javascript part

By Baniboy, in Programming

Recommended Posts

Baniboy    3

Baniboy
Posted

I wanted to have my content scroll/change after a certain amount of time has passed viewing a web-page. So I used this script I found on dynamicdrive.com: http://www.dynamicdrive.com/dynamicindex2/prohtmlticker.htm(the code is also below). It's got pretty much everything I want. The only thing it's missing, is that I want <previous and next> buttons/links to view the previous/next content, while still normally scrolling the contents. So how can I integrate it to this code?

<style type="text/css">#dropcontentsubject{width: 250px;font-weight: bold;}.dropcontent{width: 250px;height: 200px;border: 1px solid black;background-color: #DFDFFF;padding: 3px;display:block;}</style><script type="text/javascript">/************************************************ ProHTML Ticker script- Š Dynamic Drive (dynamicdrive.com;* This notice must stay intact for use* Visit http://http://www.dynamicdrive.com/ for full source code***********************************************/var tickspeed=2000 //ticker speed in miliseconds (2000=2 seconds)var enablesubject=1 //enable scroller subject? Set to 0 to hideif (document.getElementById){document.write('<style type="text/css">\n')document.write('.dropcontent{display:none;}\n')document.write('</style>\n')}var selectedDiv=0var totalDivs=0function contractall(){var inc=0while (document.getElementById("dropmsg"+inc)){document.getElementById("dropmsg"+inc).style.display="none"inc++}}function expandone(){var selectedDivObj=document.getElementById("dropmsg"+selectedDiv)contractall()document.getElementById("dropcontentsubject").innerHTML=selectedDivObj.getAttribute("subject")selectedDivObj.style.display="block"selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0setTimeout("expandone()",tickspeed)}function startscroller(){while (document.getElementById("dropmsg"+totalDivs)!=null)totalDivs++expandone()if (!enablesubject)document.getElementById("dropcontentsubject").style.display="none"}if (window.addEventListener)window.addEventListener("load", startscroller, false)else if (window.attachEvent)window.attachEvent("onload", startscroller)</script>

And the HTML part:

<div id="dropcontentsubject"></div><div id="dropmsg0" class="dropcontent" subject="Content1"> Content 1, this will appear first, 0 seconds after the page's loading.</div><div id="dropmsg1" class="dropcontent" subject="content2">Content 2, this will appear in the place of content 1, 2 seconds after the page's loading.</div><div id="dropmsg2" class="dropcontent" subject="Content3">This is block number 3, the third content that will show you after 4 seconds of the page's loading.</div>

So how can I use previous and next buttons with this script? Or can someone write a better script for me, which has the previous-next stuff in it?

Help is appreciated,

Baniboy

Share this post

Link to post
Share on other sites

truefusion    3

truefusion
Posted

Here, i added in everything and fixed any bugs i caused. :lol: Had to move a few things around and add a few things. I've also switched from using the non-existing "subject" attribute to the standards compliant "title" attribute. I also increased the time it takes to move onto the next one, so people can actually read what it says. I'll let you worry about the look and feel of the whole thing. Enjoy.Note: If you want to see the difference, get a diff program.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://forums.xisto.com/no_longer_exists/ xmlns="http://www.w3.org/1999/xhtml/; xml:lang="en" lang="en"><head><title>untitled</title><meta http-equiv="content-type" content="text/html;charset=utf-8" /><style type="text/css">#dropcontentsubject{width: 250px;font-weight: bold;}.dropcontent{width: 250px;height: 200px;border: 1px solid black;background-color: #DFDFFF;padding: 3px;display:block;}</style><script type="text/javascript">/************************************************ ProHTML Ticker script- © Dynamic Drive (dynamicdrive.com;* This notice must stay intact for use* Visit [url="http://www.dynamicdrive.com/; for full source code***********************************************/var tickspeed = 6000 //ticker speed in miliseconds (2000=2 seconds)var enablesubject = 1 //enable scroller subject? Set to 0 to hidevar timeoutif (document.getElementById){	document.write('<style type="text/css">\n')	document.write('.dropcontent{display:none;}\n')	document.write('</style>\n')}var selectedDiv=0var totalDivs=0function contractall(){	var inc = 0	while (document.getElementById("dropmsg"+inc))	{		document.getElementById("dropmsg"+inc).style.display = "none"		inc++	}}function expandone(){	selectedDiv = (selectedDiv < totalDivs-1) ? selectedDiv+1 : 0	var selectedDivObj = document.getElementById("dropmsg"+selectedDiv)	contractall()	document.getElementById("dropcontentsubject").innerHTML = selectedDivObj.getAttribute("title")	selectedDivObj.style.display = "block"	timeout = setTimeout("expandone()", tickspeed)}function expandone2(){	contractall()	selectedDiv = (selectedDiv-1 > -1) ? selectedDiv-1 : totalDivs-1	var selectedDivObj = document.getElementById("dropmsg"+selectedDiv)	document.getElementById("dropcontentsubject").innerHTML = selectedDivObj.getAttribute("title")	selectedDivObj.style.display = "block"	timeout = setTimeout("expandone()", tickspeed)}function startscroller(){	while (document.getElementById("dropmsg"+totalDivs) != null)		totalDivs++	expandone()	if (!enablesubject)		document.getElementById("dropcontentsubject").style.display = "none"}function doNext(){	clearTimeout(timeout)	expandone()}function doPrev(){	clearTimeout(timeout)	expandone2()}if (window.addEventListener)	window.addEventListener("load", startscroller, false)else if (window.attachEvent)	window.attachEvent("onload", startscroller)</script></head><body><div id="dropcontentsubject"></div><div id="dropmsg0" class="dropcontent" title="Content1">Content 1, this will appear first, 0 seconds after the page's loading.</div><div id="dropmsg1" class="dropcontent" title="Content2">Content 2, this will appear in the place of content 1, 2 seconds after the page's loading.</div><div id="dropmsg2" class="dropcontent" title="Content3">This is block number 3, the third content that will show you after 4 seconds of the page's loading.</div><div><button onclick="doPrev();">Prev</button><button onclick="doNext();">Next</button></div></body></html>[/html]

Share this post

Link to post
Share on other sites

Baniboy    3

Baniboy
Posted (edited)

Thanks! You're a life-saver! (kind of :P)

I've also switched from using the non-existing "subject" attribute to the standards compliant "title" attribute.

What you mean non-existing? it works fine in firefox... :D okay it's non-existing... :D let's just assume it was a challenge, which you passed. And now I'll give the imaginary golden medal to you. *hands the imaginary medal*.

I also increased the time it takes to move onto the next one, so people can actually read what it says.

:) Why!? The text had no meaning anyway, it was the point of all this,. :D JK it wasn't, and no I was not trying to give someone an epileptic seizure with fast text, believe me!!! :lol: And now all my gibberish calculations "this shows up after 4 sec..." are even more confusing :D

Just kidding it's fine. Thanks again!

PS. I wonder if I can make a wannabe animation out of this, it would be neat :XD: *You don't need macromedia flash, you can always try coding your animations, you only need enough images :D*
Edited by Baniboy (see edit history)

Share this post

Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept