The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
 Reply to this topicStart new topic
> Need Help with a Class plz (scripting banners)
scrapwave
post Dec 8 2011, 11:12 AM
Post #1


Newbie
*

Group: Members
Posts: 11
Joined: 8-December 11
Member No.: 16,030
Hi, new to this website but I am just not getting what I am doing wrong on this. The assignment is that the page should have a cycling banner on the top third of the page, a random image banner in the middle third and a javascript slideshow on the bottom 3rd. Here is what I have...and individually the banners work fine but when I put them all together in one html file and only the last one works right. Any help is greatly appreciated...I am just not understanding this.

<html>

<head>
<title>HTML and Javascript</title>
<script>
var my_imgs = new Array(4);
var index = 0;

function cycle()
{
document.banner1.src = my_imgs[index].src;
index++;
if (index > 3)
{
index =0;
}
setTimeout("cycle()", 2000);
return;
}

function startup()
{
my_imgs[0] = new Image;
my_imgs[0].src = "lions.gif";
my_imgs[1] = new Image;
my_imgs[1].src = "tigers.gif";
my_imgs[2] = new Image;
my_imgs[2].src = "bears.gif";
my_imgs[3] = new Image;
my_imgs[3].src = "ohmy.gif";
cycle();
return;
}

var img_arr = new Array(4);
var index = 0;

function select ()
{
index = Math.floor(Math.random() * 4);
document.random.src = img_arr[index].src;
setTimeout("select()", 2000);
return;
}

function startup()
{
img_arr[0] = new Image;
img_arr[0].src = "lions.gif";
img_arr[1] = new Image;
img_arr[1].src = "tigers.gif";
img_arr[2] = new Image;
img_arr[2].src = "bears.gif";
img_arr[3] = new Image;
img_arr[3].src = "ohmy.gif";
select();
return;
}
var imgArray = new Array(4);
var index = 0;

function doBack()
{
if (index > 0)
{
index--;
document.slideshow.src = imgArray[index].src;
}
return;
}

function doNext()
{
if (index < 3)
{
index++;
document.slideshow.src = imgArray[index].src;
}
return;
}

function startup()
{
imgArray[0] = new Image;
imgArray[0].src = "lions.gif";
imgArray[1] = new Image;
imgArray[1].src = "tigers.gif";
imgArray[2] = new Image;
imgArray[2].src = "bears.gif";
imgArray[3] = new Image;
imgArray[3].src = "ohmy.gif";
return;
}
</script>
</head>

</body>
<body onLoad="startup()">
<div align="center">
<img name="banner1" src="lions.gif">
</div>
<p>
</p>
<body onLoad="startup()">
<div align="center">
<img name="random" src="lions.gif">
</div>
<p>
</p>
<body onLoad="startup()">
<div align="center">
<h2>My Javascript Slideshow</h2>
<p>
<img name="slideshow" src="lions.gif">
</p>
<p>
<a href="java script:doBack()">Back</a>
&nbsp;&nbsp;&nbsp;
<a href="java script:doNext()">Next</a>
</p>
</div>
</body>

</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Dec 8 2011, 12:00 PM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
You have three startup() functions in the script. Logically, only the last one will work. You need to rename two of them.

And, you have three <body onLoad="startup()">. There can only be one BODY tag per page. Then you can put all three function calls in the onload attribute by separating them by a semi-colon ( ; ). See also http://www.javascriptkit.com/javatutors/multiplejava.shtml .

This post has been edited by Frederiek: Dec 8 2011, 12:01 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
scrapwave
post Dec 8 2011, 09:18 PM
Post #3


Newbie
*

Group: Members
Posts: 11
Joined: 8-December 11
Member No.: 16,030
thanks Frederiek....when I change the name of two of the startup functions is there something I have to name them or can I rename them anything? Like one as startup() one as alpha() one as delta() ?

then I would do the body onLoad like this (with just one body onload on the page):
<body onLoad="startup(); alpha(); delta()">

Am I understanding that correctly? Thank you sooo much for helping!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 8 2011, 09:21 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,732
Joined: 9-August 06
Member No.: 6
Yes.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
scrapwave
post Dec 8 2011, 10:26 PM
Post #5


Newbie
*

Group: Members
Posts: 11
Joined: 8-December 11
Member No.: 16,030
I changed it to this...but now only the top one works correctly. The one I called cycleban works correctly, the banner1 and slideshow just show the first img of "lions"...what am I missing? thanks!

<html>

<head>
<title>HTML and Javascript</title>
<!------------SCRIPT 1------------->
<script>
var my_img = new Array(4);
var index = 0;

function cycle()
{
document.cycleban.src = my_img[index].src;
index++;
if (index > 3)
{
index =0;
}
setTimeout("cycle()", 2000);
return;
}

function alpha()
{
my_img[0] = new Image;
my_img[0].src = "lions.gif";
my_img[1] = new Image;
my_img[1].src = "tigers.gif";
my_img[2] = new Image;
my_img[2].src = "bears.gif";
my_img[3] = new Image;
my_img[3].src = "ohmy.gif";
cycle();
return;
}
</script>
<!-------END SCRIPT 1-------->

<!--------SCRIPT 2----------->
<script>
var img_arr = new Array(4);
var index = 0;

function select ()
{
index = Math.floor(Math.random() * 4);
document.banner.src = img_arr[index].src;
setTimeout("select()", 2000);
return;
}

function beta()
{
img_arr[0] = new Image;
img_arr[0].src = "lions.gif";
img_arr[1] = new Image;
img_arr[1].src = "tigers.gif";
img_arr[2] = new Image;
img_arr[2].src = "bears.gif";
img_arr[3] = new Image;
img_arr[3].src = "ohmy.gif";
select();
return;
}
</script>
<!----------END SCRIPT 2------------>

<!---------SCRIPT 3------------->
<script>
var imgArray = new Array(4);
var index = 0;

function doBack()
{
if (index > 0)
{
index--;
document.slideshow.src = imgArray[index].src;
}
return;
}

function doNext()
{
if (index < 3)
{
index++;
document.slideshow.src = imgArray[index].src;
}
return;
}

function omega()
{
imgArray[0] = new Image;
imgArray[0].src = "lions.gif";
imgArray[1] = new Image;
imgArray[1].src = "tigers.gif";
imgArray[2] = new Image;
imgArray[2].src = "bears.gif";
imgArray[3] = new Image;
imgArray[3].src = "ohmy.gif";
select();
return;
}
</script>
<!---------END SCRIPT 3--------->
</head>

<body onLoad="alpha();beta();omega()">

<div align="center">
<p>
<img name="cycleban" src="lions.gif">
</p>
<p>
<img name="banner" src="lions.gif">
</p>
<p>
<h2>My Javascript Slideshow</h2>
<p>
<img name="slideshow" src="lions.gif">
</p>
<p>
<a href="java script:doBack()">Back</a>
&nbsp;&nbsp;&nbsp;
<a href="java script:doNext()">Next</a>
</p>
</div>
</body>

</html>

This post has been edited by scrapwave: Dec 8 2011, 10:50 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Dec 8 2011, 10:31 PM
Post #6


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
Replace:
CODE
<body onLoad="alpha()";"beta()";"omega()">
with:
CODE
<body onLoad="alpha();beta();omega()">
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
scrapwave
post Dec 8 2011, 10:36 PM
Post #7


Newbie
*

Group: Members
Posts: 11
Joined: 8-December 11
Member No.: 16,030
ok, did that Darin..and now the top two are changing..but they are both changing on the random pattern for some reason (which should only be the second set that changes randomly)...and the bottom one doesn't change at all. This is making me crazy!! LOL!
Really really appreciate the help...I am trying so hard to GET this!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 8 2011, 10:56 PM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,732
Joined: 9-August 06
Member No.: 6
I think... the omega function works but it changes the second image (again). Both the beta and the omega functions call the select function and that function changes the image with the name "banner". And now I got a headache. blink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
scrapwave
post Dec 8 2011, 11:02 PM
Post #9


Newbie
*

Group: Members
Posts: 11
Joined: 8-December 11
Member No.: 16,030
oh...yeah...I see what you are saying...they both have select() at the end of the image array strings.....how do I work around that? And any idea why the cycle function on the alpha isn't working? it's changing to whatever random image beta (the second script) is generating.
Sorry for your headache...I feel your pain..I've had one for DAYS trying to understand this! LOL!

The first banner (alpha) should change images in a cycle that says "lions" "and tigers" "and bears" "oh my!" (in that order)
The second banner (beta) should randomly choose 1 of the same four images
The third should be a slideshow that moves forward or backward in order (again using the same four images) when the next or back is clicked. I have them all moving now...they are just all moving randomly. sad.gif

also, part of the instructions are
1) use different names for your two banner images (which I did with "cycleban" and "banner", right?)
2) Use different names for your three array index variables (which I think I did by using my_img for alpha, img_arr for beta, and ImgArray for omega, right?)

This post has been edited by scrapwave: Dec 8 2011, 11:14 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 8 2011, 11:06 PM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,732
Joined: 9-August 06
Member No.: 6
BTW you don't need to use several script blocks and somewhat meaningful names for functions and just about everything helps when trying to untangle things and see what's connected to what. wink.gif

To make the HTML kosher you need to use type attribute for SCRIPT.
http://htmlhelp.com/reference/html40/special/script.html
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 8 2011, 11:17 PM
Post #11


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,732
Joined: 9-August 06
Member No.: 6
QUOTE
And any idea why the cycle function on the alpha isn't working?


I can be wrong here, and I'm not sure how to write it, but I think the result of cycle() is returned to alpha() only the first time. Or rather the problem is that alpha() is called only once. After that cycle() keeps running on its own, to no use. I think.

You can see it keeps changing the value of index if you insert an alert like this.

CODE
function cycle()
{
document.cycleban.src = my_img[index].src;
index++;
alert(index);
if (index > 3)
{
index =0;
}
setTimeout("cycle()", 2000);
return;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 8 2011, 11:26 PM
Post #12


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,732
Joined: 9-August 06
Member No.: 6
Yeppers. Remove the setTimeout() from the cycle() function and have alpha() keep calling itself instead.

CODE
function alpha()
{
my_img[0] = new Image;
my_img[0].src = "lions.gif";
my_img[1] = new Image;
my_img[1].src = "tigers.gif";
my_img[2] = new Image;
my_img[2].src = "bears.gif";
my_img[3] = new Image;
my_img[3].src = "ohmy.gif";
cycle();
setTimeout("alpha()", 2000);
return;
}


I'm not sure if return is needed or used right, but since it was there I kept it in. I have a problem with return and am seldom sure of where, how and when to use it. blush.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
scrapwave
post Dec 9 2011, 12:05 AM
Post #13


Newbie
*

Group: Members
Posts: 11
Joined: 8-December 11
Member No.: 16,030
Here's what I have now:

<html>

<head>
<title>HTML and Javascript</title>

<script>
var my_img = new Array(4);
var index= 0;

function cycle()
{
document.cycleban.src = my_img[index].src;
index++;
if (index > 3)
{
index =0;
}
setTimeout("cycle()", 2000);
return;
}

function alpha()
{
my_img[0] = new Image;
my_img[0].src = "lions.gif";
my_img[1] = new Image;
my_img[1].src = "tigers.gif";
my_img[2] = new Image;
my_img[2].src = "bears.gif";
my_img[3] = new Image;
my_img[3].src = "ohmy.gif";
cycle()
return;
}

var img_arr = new Array(4);
var index = 0;

function select ()
{
index = Math.floor(Math.random() * 4);
document.random.src = img_arr[index].src;
setTimeout("select()", 2000);
return;
}

function beta()
{
img_arr[0] = new Image;
img_arr[0].src = "lions.gif";
img_arr[1] = new Image;
img_arr[1].src = "tigers.gif";
img_arr[2] = new Image;
img_arr[2].src = "bears.gif";
img_arr[3] = new Image;
img_arr[3].src = "ohmy.gif";
select();
return;
}

var imgArray = new Array(4);
var index = 0;

function doBack()
{
if (index > 0)
{
index--;
document.slideshow.src = imgArray[index].src;
}
return;
}

function doNext()
{
if (index < 3)
{
index++;
document.slideshow.src = imgArray[index].src;
}
return;
}

function omega()
{
imgArray[0] = new Image;
imgArray[0].src = "lions.gif";
imgArray[1] = new Image;
imgArray[1].src = "tigers.gif";
imgArray[2] = new Image;
imgArray[2].src = "bears.gif";
imgArray[3] = new Image;
imgArray[3].src = "ohmy.gif";
return;
}
</script>
</head>

<body onLoad="alpha();beta();omega()">

<div align="center">
<p>
<img name="cycleban" src="lions.gif">
</p>
<p>
<img name="random" src="lions.gif">
</p>
<p>
<h2>My Javascript Slideshow</h2>
<p>
<img name="slideshow" src="lions.gif">
</p>
<p>
<a href="java script:doBack()">Back</a>
&nbsp;&nbsp;&nbsp;
<a href="java script:doNext()">Next</a>
</p>
</div>
</body>

</html>

the first script code (alpha) should change the banner images in order "lions" "and tigers" "and bears" "oh my"
the second script code (beta) should change the banner images (using the same four images as above) randomly
the third script code (omega) should move through the images in order when you click next, or backwards when you click back.
However, as the page is written now alpha and beta both change randomly and omega changes to a random image when you click next or back.

BTW....I removed the select() from the omega script array part...it wasn't supposed to be there...typing error on my part. sad.gif sorry

This post has been edited by scrapwave: Dec 9 2011, 12:07 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 9 2011, 12:10 AM
Post #14


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,732
Joined: 9-August 06
Member No.: 6
You still have the setTimeout() in the cycle() function.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
scrapwave
post Dec 9 2011, 12:28 AM
Post #15


Newbie
*

Group: Members
Posts: 11
Joined: 8-December 11
Member No.: 16,030
it doesn't change anything when I do change it though..it's still just randomly changing both alpha and omega (even when I remove the setTimeout() from the cycle() function and put it in the alpha() function.
I even tried moving the setTimeout() from select() function on beta also..still didn't change the problem.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 9 2011, 12:46 AM
Post #16


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,732
Joined: 9-August 06
Member No.: 6
Does for me. The top image cycles trough the four images.

I even created dummy images just now to be sure. Alas the second image also cycles now. Maybe it did all the time. It's a little hard to check without actually seeing the images.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
scrapwave
post Dec 9 2011, 09:19 AM
Post #17


Newbie
*

Group: Members
Posts: 11
Joined: 8-December 11
Member No.: 16,030
here are the four images:

IPB Image

IPB Image

IPB Image

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 9 2011, 07:30 PM
Post #18


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,732
Joined: 9-August 06
Member No.: 6
I've already tried with the images I created (which are remarkably alike yours BTW tongue.gif ).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
scrapwave
post Dec 9 2011, 10:17 PM
Post #19


Newbie
*

Group: Members
Posts: 11
Joined: 8-December 11
Member No.: 16,030
Ok...got a reply from the teacher (this is an online course so getting help isn't so simple).
Here's what he said to do:

how to do it:
load the array once
select images by:
randomly select on using a random index from the loaded array.
select in order from the loaded array
select based on mouse click

do not need to load the array for each function.



Based on that...I did this..but it's still not working right. I can't--for the life of me--figure out why I am having so much trouble with this particular chapter. sad.gif Instructions also say use different names for your banner images (which I have done) and use different names for your three array index variables (which I have confused myself so much now I'm not even sure what that means??)

<html>

<head>
<title>HTML and Javascript</title>

<script>
var imgArray = new Array(4);
var index= 0;

function startup()
{
imgArray[0] = new Image;
imgArray[0].src = "lions.gif";
imgArray[1] = new Image;
imgArray[1].src = "tigers.gif";
imgArray[2] = new Image;
imgArray[2].src = "bears.gif";
imgArray[3] = new Image;
imgArray[3].src = "ohmy.gif";
return;
}

function select()
{
index = Math.floor(Math.random() * 4);
document.random.src = imgArray[index].src;
setTimeout("select()", 2000);
return;
}

function cycle()
{
document.cycling.src = imgArray[index].src;
index++;
if (index > 3)
{
index =0;
}
setTimeout("cycle()", 2000);
return;
}

function doBack()
{
if (index > 0)
{
index--;
document.slideshow.src = imgArray[index].src;
}
return;
}

function doNext()
{
if (index < 3)
{
index++;
document.slideshow.src = imgArray[index].src;
}
return;
}
</script>

<body onLoad="startup();select();cycle();doBack();doNext">
<div align="center">
<p>
<img name="random" src="lions.gif">
</p>
<p>
<img name="cycling" src="lions.gif">
</p>
<p>
<h2>My Javascript Slideshow</h2>
<p>
<img name="slideshow" src="lions.gif">
</p>
<p>
<a href="java script:doBack()">Back</a>
&nbsp;&nbsp;&nbsp;
<a href="java script:doNext()">Next</a>
</p>
</div>
</body>

</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 9 2011, 10:36 PM
Post #20


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,732
Joined: 9-August 06
Member No.: 6
I get the same as with the old page I changed. The two first images cycle. The third shows a different image when the page is reloaded.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 26th April 2024 - 10:49 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC