Link to home
Start Free TrialLog in
Avatar of musicarr
musicarr

asked on

How do I stop the cache in IE on a PC, not a Mac, from being emptied when I open a popup window?

Hi all,

Here's one I can't figure out. This script works great on PC and Mac on just about anything, EXCEPT... IE on a PC. This of course is a problem as most people use IE on a PC. Here's the problem. And again, the problem only occurs in IE on a PC.

The code is below.

When the page loads up, the DIV switching between "layer0" and "layer1", whether onClick or onMouseover, works great. BUT, when I open a popup window (the 2 links at the top of the page), then close the window, two things happen.

First, when clicking on the "onClick" links, the background images disappear. And don't come back until I reload the page OR move the cursor over the "onMouseover" links.

Second, and this is so baffeling to me, when moving the cursor over the "onMouseover" links, the browser reloads the graphics, not from the cache, but from the server! That doesn't work well when trying to switch quickly between DIV's.

Can anyone solve this one?

Thanks,

Mark

_________________________________________________

<html>
<head>
<title>Popuptest</title>
<script language="javascript" type="text/javascript">
<!--
function popup(title,text,width,height) {
var win
var w = width;
var h = height;
var winl = (screen.width - w) / 2;
var wint = (screen.height - h) / 2;
if(win) {win.close();}
win = window.open('','popupwindow','width='+w+',height='+h+',top='+wint+',left='+winl+',scrollbars=no');
win.focus();
var content = '<html>';
content += '<head><title>'+title+'</title>';
content += '</head>';
content += '<body bgcolor="white">';
content += text+'<br><br>';
content += '<div align="center">';
content += '<a href="javascript:window.close()">Close window</a>';
content += '</div>';
content += '</body></html>';
win.document.open();
win.document.write(content);
win.document.close();
}
//-->
</script>

<style media="screen" type="text/css"><!--
#layer0         { position: absolute; top: 163px; left: 360px; width: 235px; height: 114px; visibility: visible }
#layer1     { position: absolute; top: 163px; left: 360px; width: 235px; height: 114px; visibility: hidden }
--></style>

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

function layerswitch(name) {

 if (document.getElementById) {
 document.getElementById(name).style.visibility='visible';
 if (name=="layer0") {document.getElementById('layer1').style.visibility='hidden';}
 else {document.getElementById('layer0').style.visibility='hidden';}
 }

 if(document.all) {
 document.all[name].style.visibility= 'visible';
 if (name=="layer0") {document.all['layer1'].style.visibility= 'hidden';}
 else {document.all['layer0'].style.visibility='hidden';}
 }

 if (document.layers) {
 document.layers[name].visibility='show';
 if (name=="layer0") {document.layers['layer1'].visibility='hide';}
 else {document.layers['layer0'].visibility='hide';}
 }
}
//-->
</script>

</head>
<body bgcolor="#ffffff">
<a href="javascript:;" onclick="popup('Popup 1','this popup window #1',200,200)">open window #1</a><br>
<br>
<a href="javascript:;" onclick="popup('Popup 2','this popup window #2',350,350)">open window #2</a><br>
<br>
<a href="javascript:;" onClick="layerswitch('layer0')">Click Link #1</a><br>
<br>
<a href="javascript:;" onClick="layerswitch('layer1')">Click Link #2</a><br>
<br>
<a href="javascript:;" onMouseover="layerswitch('layer0')">MouseOver Link #1</a><br>
<br>
<a href="javascript:;" onMouseover="layerswitch('layer1')">MouseOver Link #2</a><br>
<div id="layer0">
<table border="0" cellpadding="0" cellspacing="0" width="235" height="114">
<tr height="28">
<td height="28" background="http://www.kayrizzo.com/TDS/images/audioBG-S.gif" colspan="2" align="center" valign="bottom">Layer #1</td>
<td width="37" background="http://www.kayrizzo.com/TDS/images/audioBG-V.gif" rowspan="2">&nbsp;</td>
</tr>
<tr height="48">
<td height="48" width="67" background="http://www.kayrizzo.com/TDS/images/audioBG-F.gif" valign="top">&nbsp</td>
<td height="48" width="131" background="http://www.kayrizzo.com/TDS/images/audioBG-T.gif" valign="top">&nbsp</td>
</tr>
<tr height="38">
<td height="38" background="http://www.kayrizzo.com/TDS/images/audioBG-W.gif" colspan="2">&nbsp;</td>
<td height="38" width="37" background="http://www.kayrizzo.com/TDS/images/audioBG-U.gif">&nbsp;</td>
</tr>
</table>
</div>
<div id="layer1">
<table border="0" cellpadding="0" cellspacing="0" width="235" height="114">
<tr height="28">
<td height="28" background="http://www.kayrizzo.com/TDS/images/audioBG-S.gif" colspan="2" align="center" valign="bottom">Layer #2</td>
<td width="37" background="http://www.kayrizzo.com/TDS/images/audioBG-V.gif" rowspan="2">&nbsp;</td>
</tr>
<tr height="48">
<td height="48" width="67" background="http://www.kayrizzo.com/TDS/images/audioBG-F.gif" valign="top">&nbsp</td>
<td height="48" width="131" background="http://www.kayrizzo.com/TDS/images/audioBG-T.gif" valign="top">&nbsp</td>
</tr>
<tr height="38">
<td height="38" background="http://www.kayrizzo.com/TDS/images/audioBG-W.gif" colspan="2">&nbsp;</td>
<td height="38" width="37" background="http://www.kayrizzo.com/TDS/images/audioBG-U.gif">&nbsp;</td>
</tr>
</table>
</div>

</body>
</html>
ASKER CERTIFIED SOLUTION
Avatar of AlbertoFrog
AlbertoFrog
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of musicarr
musicarr

ASKER

Fantastic! That worked beautifully. You're right, by the way. As long as it looks right, then it is right...usually. In this case we have to work around a bug ("feature"?) in IE. This problem doesn't exist in IE on the Mac side, only on the PC side. I dream of a world filled with browsers that, under the hood, all work the same. Some day, some day...