Calling any Javascript experts with some time on their hands [Archive]

View Full Version : Calling any Javascript experts with some time on their hands

maida

11-17-2003, 11:13 PM

I need some help with a web page that has Javascript in it. I pieced together a couple of Javascript functions in order to preload images before starting an automatic slide show.

Now, when *I* view it (IE 6, Windows XP ), it works as it should. My client viewed the page before and it used to work on his PC (IE 5, Windows 98), but now it doesn't. It doesn't preload the images anymore.

I've made some changes again and I think it should work for him now, but I don't have a modem, so I can't test it at slow speeds, so I will be testing it at the client site tomorrow.

If you have some time, can you look at this page and see if you see any glaring code issues?

http://www.legendantiques.com/takeatour.htm

Thanks!

Maida

---------------------------------------------

Here's the code in the header...

<script language="javascript">

</script>

Here's the HTML that calls it:
<form name=slideform>
<table align="center">
<tr>
<td align="right"><input type=button onClick="chgImg(-1);" value="<< Previous" title="Previous" style="background-color:#000066; color: #ffffff; font-weight:bold"></td>
<td align="center">
<input type=button name="slidebutton" onClick="ap(this.value);" value=" Stop " title="PlayStop" style="background-color:#000066; color: #ffffff; font-weight:bold;">
</td>
<td align="left"><input type=button onClick="javascript:chgImg(1);" value=" Next >>" title="Next" style="background-color:#000066; color: #ffffff; font-weight:bold"></td>
</tr>
<tr>
<td colspan="3"><img src="images/tour/tour-1.jpg" name="slideshow" width="400" height="234" border="0" alt=""></td>
</tr>
</table>
</form>

wildjokerdesign

11-18-2003, 05:11 AM

The link worked well for me on WinME IE 5 DSL. I could no see any glareing holes in the script but then I am always missing the small details like ";" and is early in the morning here. :) I will try to get back and check it when I am more awake.

maida

11-18-2003, 06:37 AM

Thanks for taking a look at it...I'm hoping the changes I made will make it work for them... :D

Maida

torrin

11-18-2003, 09:58 AM

I looked at it in IE5.5 and Firebird on WinNT and it works fine. The images preload correctly in both browsers. By the way, it's faster in Firebird. I guess that isn't a surprise (http://forums.westhost.com/phpBB2/viewtopic.php?t=1380).

maida

11-18-2003, 11:23 AM

I got one report of the page continually reloading the documents...otherwise okay.

Wondering if I should change the main call in the script window.onload=auto(); to a call from the body tag <BODY onload="javascript:auto();">

Thanks Torrin for looking at it! :)

Maida

11-18-2003, 03:04 PM

Looks good in Firebird 0.7 (Mozilla) and IE6 (Win2k). Oh yeah, and if I recall correctly,

window.onload=auto();

is incorrect - you aren't meant to have the brackets after it when you "call" it from an event handler like that:

window.onload=auto;

Also, if you do decide to go with onload attribute in body, then you'd say:

<body onload="auto()">

i.e. no need for the javascript: bit (though it will probably work anyway).

maida

11-18-2003, 09:13 PM

Thanks FZ!!!

That helps...I went ahead and moved it to the BODY tag...and I meant to say that the loadimages function needed to be moved, not the auto function.

<BODY onload="loadimages();">

One tester told me that that fixed the looping for him. I haven't heard back from the other person.

Check this out, though...if I resize the browser window either during the images loading or afterwards, the progress bar stays on the whole time. Very interesting bug.

It's probably this function here...

function hideperouter(){
(NS4)? perouter.visibility="hide" : perouter.style.visibility="hidden";
imagesdone=true;
// alert (imagesdone);
auto();
}

I added the call to start the start of the slideshow myself. So maybe it's looping somehow?

function auto() {
if (lock == true) {
lock = false;
window.clearInterval(run);
}
else if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
}
}

Who knows? I may have to live with that bug.

Thanks everyone!

Maida

11-18-2003, 10:31 PM

Hmm, looks like an intermittent bug - I can't reproduce it in Mozilla, and got it in IE6 only once - I emptied cache and reloaded/re-tried twice but it did not occur again.

wildjokerdesign

11-18-2003, 10:41 PM

This is the standard reload page on resize for Netscape from MacromediaDW. Thought it might help. Don't think it would be a steal since it is pretty basic.

<script language="JavaScript">

</script>

maida

11-19-2003, 10:34 AM

Thanks FZ for testing that out. I can actually get it to happen consistently at home on Win XP IE 6 on Sprint Broadband. But maybe that's just me.

Thanks Shawn for that code...I tried the standard Dreamweaver preload (which I think that code is), but the slideshow would start before all the images were preloaded and show partial images throughout the slideshow. I had to code it so that the images all were fully preloaded before the slideshow started...hence the progress bar.

I think I'll leave it as is and hope that it works for the majority.

Thanks everyone for your help!!!

Maida

11-19-2003, 11:16 AM

Hmm, what Shawn suggested could work, maida - or you could use some code that will reload the page if the window is resized (and the browser is IE) - that way, the page will reload if the window is resized, and whatever images were already loaded would be pulled from cache, and the remainder would be preloaded like normal.

maida

11-19-2003, 02:47 PM

I'm sorry, I don't know how I would incorporate that script into my current script. Where would I put the call to it?

Maida

11-19-2003, 03:08 PM

Well, I don't know about the code that Shawn pasted (it is Netscape 4 specific), but you might want to try this to fix the bug (as it occurs for you, in IE only):

In your existing code, look for function setouterpos() and add this line after the last one, which is perouter.style.visibility="visible"; - before the second-last }

top.location.reload();

Keep in mind though that I just came up with that NOW, so it could be buggy... Testing is needed! Oh and was the person that reported infinite reloading using Netscape 4?

wildjokerdesign

11-19-2003, 05:03 PM

Yes the code I posted is for NS 4. I thougth that was where the bug was. It can simply be pasted in to your head as a javascript and it works even tag it on to the end of what you have.

maida

11-19-2003, 07:18 PM

FZ... I think I did something wrong...I added the line and then the page just continually reloaded. This is where I put it...

function setouterpos(){
var ww=(IE4)? document.body.clientWidth : window.innerWidth;
var x=(ww-barwidth)/2;
if(NS4){
perouter.moveTo(x,yposition);
perouter.visibility="show";
}
if(IE4||NS6){
perouter.style.left=x+'px';
perouter.style.top=yposition+'px';
perouter.style.visibility="visible";
top.location.reload();
}
}

Maida

maida

11-19-2003, 07:20 PM

Yes the code I posted is for NS 4. I thougth that was where the bug was. It can simply be pasted in to your head as a javascript and it works even tag it on to the end of what you have.

Well, I can get it to stay on the page with IE6 on WinXP. I never heard back from the other person who saw the same problem to find out what browser/OS they were on.

Thanks for the code, maybe I'll stick it in there just to be safe.

Maida

maida

11-19-2003, 07:37 PM

Okay, so I tried adding an onresize to the body tag like so:

<body onresize="top.location.reload();" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" bgcolor="#FFFFFF" background="images/nav/whiteswirl.gif" onload="loadimages();">

and even

<body onresize="window.location.href = window.location.href;" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" bgcolor="#FFFFFF" background="images/nav/whiteswirl.gif" onload="loadimages();">

Here is what happens.
I open the page and the progress bar comes and then goes and then the slideshow starts.

So then I maximize the window and the progress bar re-appears and just stays on there and won't go away even though the slideshow is running.

It happens in reverse as well. I open it in a maximized window, and it loads fine. When I try to resize it to a smaller size, the progress bar returns and then stays on the screen until I force a refresh.

WEIRD!

Maida

wildjokerdesign

11-20-2003, 12:18 AM

Sounds like we need to rework that code I gave you to include more then just NS4 since when you refresh it works. That is what the NS4 code is doing automaticly when the window is resized. It is late now and can't think straight but will try to get back here tomarrow. Sorry I have not been around much but been real busy on another matter.

wildjokerdesign

11-20-2003, 01:53 PM

Instead of the DW code I gave I wonder if this would work. You would get rid of the code I gave you and replace it with this.

function fixBAR() { //reloads the window if NS4 resized or hides the load bar if IE4
if (NS4){
if (window.innerWidth != ww || window.innerHeight != wh){
window.location.reload()
}
}
if (IE4){
if (document.body.clientWidth != ww || document.body.clientHeight != wh){
perouter.style.visibility="hidden";
}
}
}

I figured we already know things like what browser type it is and we already had the original innerwidth of the page that we got when the function setouterpos() was called. Now the only other thing we need to change is this
FIND:It is in setouterpos() funtion.
var ww=(IE4)? document.body.clientWidth : window.innerWidth;
AFTER ADD var wh=(IE4)? document.body.clientHeight : window.innerHeight; //WJ ADDWe now have a the original hieght set in variable wh wich I used in the fixBAR() function to run my check.

The last thing that needs to happen is adding a this to your body tag:
onResize="fixBAR()"

I think this works but not sure about all my logic. Any comments welcome :)

maida

11-21-2003, 07:39 PM

This is so strange. Nothing is working and I believe it stems from the fact that the onResize attribute in the body tag is simply not being recognized.

I did a simple <body onResize="alert('resize')"> and nothing happened when I resized the window.

So, if the onResize attribute isn't working, the fix Shawn gave me won't work, and that is also why my attempts on force a reload when the window was resized aren't working.

Why would this happen?

Curiouser and curiouser...

Well, at least it works for my client...maybe I have the buggy OS.

Thanks so much Shawn for taking the time to write that...if only my browser would recognize the onresize attribute...

Maida

wildjokerdesign

11-21-2003, 07:44 PM

Did you restore the code to the original? I just went to check it to see and it looks like you did. Just thought that if not maybe when you made the changes they did not get uploaded.

11-22-2003, 05:09 AM

Hi Maida,

Did not mean to abandon you. Anyway, I just thought I would point out to you that the onresize is possibly the cause of the infinite reloading-loops. This is because in some (buggy) browsers (Netscape 4 for example), the onresize event is fired simultaneously with the onload event - meaning the page will reload infinitely. Hence the reason the code for doing a reload onresize is so darn complicated - you have to accomodate the buggy browsers. Anyway, if all else fails, what you should do is just have a "manual reload" link on the page (making that link really visible) or a notice telling the person they should reload if they experience bugs, etc. Also, you should always strive to get as much information possible (from the people that you ask to test your pages) when they report that it is buggy. Without that, them testing your page for you is useless. See if you can track down the people that were having problems, and get their browser and operating system specs, then update us and we'll see what can be done.