Jump to content


What is this "effect/script" called?

Started by nygorn, Jan 24 2009 04:47 PM

3 replies to this topic

#1 nygorn

    Young Padawan

  • Members
  • Pip
  • 53 posts
  • Gender:Male
  • Location:Sweden

Posted 24 January 2009 - 04:47 PM

I've seen alot of websites with this "function" or "script".
http://img88.imagesh...age=shoyds4.jpg

Ok, since it's an image not all understand what it does, But i'll explain:
It shows the first news and marks the number "1".
After 15 sec it shows the next news and marks the number "2".
After 15 sec it shows the last news and marks the number "3".
And after that, it starts over.

I want to know what this script is called or maybe even get a link that can teach me how to do this?
Realy want this effect and want to learn it myself, so i can alter it to fit my needs.

Cheers!

#2 rc69

    PHP Master PD

  • P2L Staff
  • PipPipPipPip
  • 3,827 posts
  • Gender:Male
  • Location:Here
  • Interests:Web Development

Posted 24 January 2009 - 05:16 PM

http://www.google.co...ript+settimeout :)

#3 nygorn

    Young Padawan

  • Members
  • Pip
  • 53 posts
  • Gender:Male
  • Location:Sweden

Posted 25 January 2009 - 07:33 AM

Sweet. Thnx to rc69 i learned that :)
Only problem now is i want this script to loop:
function timedText()
{
var t1=setTimeout("document.getElementById('txt').innerHTML='First news here'",0);
var t2=setTimeout("document.getElementById('txt').innerHTML='Second news here'",15000);
var t3=setTimeout("document.getElementById('txt').innerHTML='Third news here'",30000);
var t4=setTimeout("document.getElementById('txt').innerHTML='Fourth news here'",45000);
var t5=setTimeout("document.getElementById('txt').innerHTML='Fifth news here'",60000);
var t6=setTimeout("document.getElementById('txt').innerHTML='Sixth news here'",75000);
}

And i was wondering how to alter this script so i get a "menu" like on the image on the first topic?
I got like a menu that shows the numbers 1-6 in images.
But when a news with the certain number i want that to load a rollover image in the menu with the specified number?

<script type="text/javascript">
function timedText()
{
var t1=setTimeout("document.getElementById('txt').innerHTML='First news here'",0);
var t2=setTimeout("document.getElementById('txt').innerHTML='Second news here'",15000);
var t3=setTimeout("document.getElementById('txt').innerHTML='Third news here'",30000);
var t4=setTimeout("document.getElementById('txt').innerHTML='Fourth news here'",45000);
var t5=setTimeout("document.getElementById('txt').innerHTML='Fifth news here'",60000);
var t6=setTimeout("document.getElementById('txt').innerHTML='Sixth news here'",75000);
}
</script>
<body onLoad="timedText()">
<div id="menu">Here i want the menu...</div>
<div id="txt"></div
</body>

Anybody?

-cry-... i need this too now. lol

Edited by rc69, 30 January 2009 - 11:23 AM.

#4 rc69

    PHP Master PD

  • P2L Staff
  • PipPipPipPip
  • 3,827 posts
  • Gender:Male
  • Location:Here
  • Interests:Web Development

Posted 30 January 2009 - 11:25 AM

If you are struggling with the solution to something you should experiment, not rely on people to give you the answer.

However, i don't have time to explain the algorithm for this, so here:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function timedText(){
	var news = ['First news',
				'Second news',
				'Third news',
				'Fourth news',
				'Fifth news',
				'Sixth news'];

	if(currentNews > news.length){
		currentNews = 0;
	}

	document.getElementById('txt').innerHTML = news[currentNews++];
	timer = setTimeout('timedText()', delay*1000);
}

function changeNews(num){
	clearTimeout(timer);
	currentNews = num;
	timedText();
}

var currentNews = 0,
	delay = 15,
	timer;
window.onload = timedText;
</script>
</head>

<body>
<div id="menu">
	<a href="#" onClick="changeNews(0);">Change to news 1</a><br>
	<a href="#" onClick="changeNews(1);">Change to news 2</a><br>
	...<br>
	<a href="#" onClick="changeNews(5);">Change to news 6</a><br>
</div>

<div id="txt"></div>
</body>
</html>
Let me know if you need an explaination for anything.

Disclaimer: I haven't tested it, and i make typos.
Back to Programming and General Web Design · Next Unread Topic →


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Pixel2Life Forum
  2. → Help Section
  3. → Programming and General Web Design