HTML Question

[lowlow42]

Hello guys, heres my problem...

On a website I've made, the images are supposed to change when you rollover them with your mouse, and they do. But as soon as you click a link, and the window pops up, and you go back to the main page the images take slower to "rollover".

Kinda hard to explain, visit the site, you'll see what I mean.

http://home.comcast.net/~homeboyj13/NFL/home.html

What didn't I do right? I noticed when I refresh the page its fine again, so I'm thinking if I can somehow use 1 link to open the page and also run a javascript to refresh the page at the same time, it'd work. Is that possible?

[hudsonf]

I'm using Firefox and it worked ok for me.

[lowlow42]

Even when you clicked on a link, the link images rolled as quickly as when you first opened the page?

I'm using IE (newest one)...

[thecoalman]

I see what you mean and it doesn't affect Firefox, don't have any advice for you.

[shelbyGT]

yeah, seems to be some weird IE problem... no clue!

[lowlow42]

Awww.... well at least I know it works. But too bad it doesn't work correctly in IE...

So is it possible that I can make a link that will open the window up and also refresh the parent page at the same time. (same link, i.e. 1 link 2 targets? [where 2nd target will be javascript refresh])

[lowlow42]

By the way, thanks for helping out all of you!

[bunyip]

For some reason IE is re-fetching the images from your web site and not from the local user's cache after you return from the pop-up.

Firefox is fetching from the cache.

The timestamp on your images in the cache is '12:00 PM' which usually means that they don't have a valid timestamp on your site, so that IE may think they have changed each time it checks for newer versions.

Have a look at the creation datestamp on these files on your server and try correcting them if they aren't quite right.

Obviously Firefox is a little more intelligent in this matter.

[lowlow42]

Thanks for the reply!

Have a look at the creation datestamp on these files on your server and try correcting them if they aren't quite right.

How do I go about doing that?

[bunyip]

OK, I presume your site is being hosted by an ISP and you use FTP to transfer your files to it, and that your source files are on your Windows XP PC.

Is that correct?

If so, connect to the web site using your FTP client and check the 'Date Modified' values (shown in the FTP client) for the image files on the web server. They should be the date and time that you originally uploaded them. If the time is saying "12.00PM" I would firstly try uploading them again and see if both the date and time change to the current values.

If they have a more realistic date/time setting then the caching should work correctly.

[lowlow42]

OK, I presume your site is being hosted by an ISP and you use FTP to transfer your files to it, and that your source files are on your Windows XP PC.

Is that correct?

Correct

Now I did what you said, and the times were correct. I re-uploaded them anyways and yet I still have the same problem.

If you "View Source", can you see anything that may be mistyped or not there?

[bunyip]

Well your datestamp looks OK now so we can't blame that.

Your code is OK (although there is redundant scripts present - I presume their function will be expanded later).

I have run tests on my web servers and I'm convinced this is an IE bug. In every test, once a pop-up window is launched, IE refuses to recognise the images in the local cache as being unchanged when returning to the parent window and is forcing a reload from the original web site.

If however you set IE to not check for newer versions then it happily uses the cached version, but this setting is unacceptable for normal browsing.

It looks like you may be stuck with this behaviour in IE.

[lowlow42]

Ok... Well at least I know I didn't do something wrong.

I really appreciate all your help, along with the others that replied to this thread. Thanks alot!!!

1 last question, is it possible to have 1 link & 2 targets? This way I can pop up the window and at the same time refresh the main page.

[bunyip]

You can't have more than one target on a link but you can link to a script which will do both.

I did some more tests to see if reloading the page by Javascript helped, but although it does reload, it appears not to reload the hover images until you move the mouse over them, and then only from the web site.

But give it a go and see if you have any better luck.

There are a number of script methods to re-load a page.

1. "window.history.go(0);" (but this way might only refesh from the cache)
2. "window.location.href='home.htm';"
3. "window.location.reload(true);" (where 'true' forces a website reload rather than a cache reload)

You could place anyone of these commands in the 'popup' function so that it does both.

There is another way of doing what you want and that's by loading both images one on top of the other and then 'showing' and 'hiding' each as required by mouseover and mouseout. This requires a bit more coding but can be fruitful.

[Garibaldi]

Ok... Well at least I know I didn't do something wrong.

I really appreciate all your help, along with the others that replied to this thread. Thanks alot!!!

1 last question, is it possible to have 1 link & 2 targets? This way I can pop up the window and at the same time refresh the main page.

There is probably a javascript command to refresh a page, you could just place that on your main page. That way after someone views the new window and then closes it the main page will be all set. Let me look around and see if I can find such a script for you.

[Garibaldi]

Got one.

Take this script and put it in your <head> tags. Then change the time to whatever time you want for the refresh rate.

<script 
language="JavaScript"> // CREDITS: // Automatic Page Refresher by 
Peter Gehrig and Urs Dudli www.24fun.com // Permission given to use the script 
provided that this notice remains as is. // Additional scripts can be found at 
http://www.hypergfurl.com. // Configure refresh interval (in seconds) var refreshinterval=5 
// Shall the coundown be displayed inside your status bar? Say "yes" 
or "no" below: var displaycountdown="yes" // Do not edit the 
code below var starttime var nowtime var reloadseconds=0 var secondssinceloaded=0 
function starttime() { starttime=new Date() starttime=starttime.getTime() countdown() 
} function countdown() { nowtime= new Date() nowtime=nowtime.getTime() secondssinceloaded=(nowtime-starttime)/1000 
reloadseconds=Math.round(refreshinterval-secondssinceloaded) if (refreshinterval>=secondssinceloaded) 
{ var timer=setTimeout("countdown()",1000) if (displaycountdown=="yes") 
{ window.status="Page refreshing in "+reloadseconds+ " seconds" 
} } else { clearTimeout(timer) window.location.reload(true) } } window.onload=starttime 
</script>

[Raga]

Your code is OK (although there is redundant scripts present - I presume their function will be expanded later).

I have run tests on my web servers and I'm convinced this is an IE bug. In every test, once a pop-up window is launched, IE refuses to recognise the images in the local cache as being unchanged when returning to the parent window and is forcing a reload from the original web site.

If however you set IE to not check for newer versions then it happily uses the cached version, but this setting is unacceptable for normal browsing.

It looks like you may be stuck with this behaviour in IE.

I find it hard to believe this'd be an IE bug. I've never, in all my years of coding and playing around with JavaScript and all this stuff, come across such an issue with IE.

Bunyip: The code is NOT in good condition. There is no DocType declaration. Is it HTML 4.01, HTML 3.0 or XHTML 1.0? The script-tag should have a type attribute (type="text/javascript").

For starters, you could preload the rollover images either with a simple piece of javascript or otherwise inside a hidden layer. That should help you out a long way.

For what it's worth, forcing the javascript to reload the page is a real ugly way around the problem, if it even helps at all.

[bunyip]

Gee don't have a heart attack!
Sorry I tried to help!
This site is getting full of holier-than-thou 'experts'.
Had enough - I'm outta here !

[lowlow42]

Lol... Well...

--------------------
Garibaldi, thanks for the script, in fact I had one too.

<a href="javascript:location.reload()"> Is that fine?
But how would I go about putting that in a link if I can only have 1 target?

--------------
Bunnyip, thanks for the 3 scripts, I'm going to try them out later on today.

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

Bunyip: The code is NOT in good condition. There is no DocType declaration. Is it HTML 4.01, HTML 3.0 or XHTML 1.1? The script-tag should have a type attribute (type="text/javascript").

For starters, you could preload the rollover images either with a simple piece of javascript or otherwise inside a hidden layer. That should help you out a long way.

Thanks for the reply, What do you think I should do then?

[Garibaldi]

Lol... Well...

--------------------
Garibaldi, thanks for the script, in fact I had one too.

<a href="javascript:location.reload()"> Is that fine?
But how would I go about putting that in a link if I can only have 1 target?

--------------
Bunnyip, thanks for the 3 scripts, I'm going to try them out later on today.

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

Bunyip: The code is NOT in good condition. There is no DocType declaration. Is it HTML 4.01, HTML 3.0 or XHTML 1.1? The script-tag should have a type attribute (type="text/javascript").

For starters, you could preload the rollover images either with a simple piece of javascript or otherwise inside a hidden layer. That should help you out a long way.

Thanks for the reply, What do you think I should do then?

If you use the script I gave you above you don't have to have a link with two targets, just one. What will happen is the target will open in a new window, while the script I gave you will keep reloading the homepage while the user is browsing the link.

[lowlow42]

If you use the script I gave you above you don't have to have a link with two targets, just one. What will happen is the target will open in a new window, while the script I gave you will keep reloading the homepage while the user is browsing the link.

Oh Ok, Sounds good... I will try that later on this evening.

Thanks again!

[Garibaldi]

If you use the script I gave you above you don't have to have a link with two targets, just one. What will happen is the target will open in a new window, while the script I gave you will keep reloading the homepage while the user is browsing the link.

Oh Ok, Sounds good... I will try that later on this evening.

Thanks again!

No problem! Let me know how it turns out!

[Raga]

Thanks for the reply, What do you think I should do then?

Do the following.

1. Add the following to the top of your page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

2. Fix the Javascript tag to read:

<script type="text/javascript" language="javascript">

3. Add a preloader for the rollover images to your page, paste the following anywhere in the body of the page:

<div style="display: none;">
[img]r1p2_hover.JPG[/img]
[img]r2p1_hover.JPG[/img]
[img]r2p3_hover.JPG[/img]
[img]r3p1_hover.JPG[/img]
[img]r3p3_hover.JPG[/img]
[img]r4p2_hover.JPG[/img]
</div>

I would expect that to fix the issue without a need to reload the page with every popup opened.

For future reference, you can check your code for possible problems at http://validator.w3.org/ .

[lowlow42]

Thanks RAGA!!! I'll also try that too!!!

[lowlow42]

Do the following.

1. Add the following to the top of your page:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">


2. Fix the Javascript tag to read:

Code:
<script type="text/javascript" language="javascript">


3. Add a preloader for the rollover images to your page, paste the following anywhere in the body of the page:

Code:
<div style="display: none;">
[img]r1p2_hover.JPG[/img]
[img]r2p1_hover.JPG[/img]
[img]r2p3_hover.JPG[/img]
[img]r3p1_hover.JPG[/img]
[img]r3p3_hover.JPG[/img]
[img]r4p2_hover.JPG[/img]
</div>

I would expect that to fix the issue without a need to reload the page with every popup opened.

For future reference, you can check your code for possible problems at http://validator.w3.org/ .

I tried that and it doesn't work... check it out. Did I do something wrong?

[Raga]

No, that's all correct there.

Taking a closer look at your code, why is the popup-javascript done like that, eval with date and all that jazz? You could just have:

function popup(url)
{
window.open(url,'popup','scrollbars=1,width=600,height=700,left=212,top=0');
}

That seems to do the trick, I just tested this on a local setup.

[lowlow42]

No, that's all correct there.

Then why isn't the rollovers as quick before I click on a link? I still have the same problem...

Taking a closer look at your code, why is the popup-javascript done like that, eval with date and all that jazz? You could just have:

function popup(url)
{
window.open(url,'popup','scrollbars=1,width=600,height=700,left=212,top=0');
}

That seems to do the trick, I just tested this on a local setup.

Thats just the way a website said to do it, I was trying to get it as simplified as possible but didn't know what to take out and leave in. Thanks for that popup code!

[Raga]

I believe the problem with the delayed rollovers had to do with what your popup-code did with that date definition.

The hidden div is there to ensure that all images are loaded immediately. They basically have to be loaded from the cache to load fast (and produce the immediate rollover-effect), especially with your server that seems to be pretty slow at times.

[lowlow42]

Ok, with that being said, and if my html/scripts are typed correctly, then why are my roll-over effects still not "rolling" immediately? If you check the website on IE, it still delays (redownloads the picture) when I click a link. I cleared my temp files and cleaned all that internet cookies, so I know it cant be only my computer.

[Raga]

OK, here I have the exact same thing (with the exception of the contents of the popups, that are all copies of the audio.html) on our server:

http://www.codewallah.com/temp/nfl/home.html

Does that work for you with IE? It does for me.

Edit: I tweaked the rollover code to include the document. part just to be on the safe side. Also, now that the invisible div is there, you don't really need the javascript piece for declaring the images.