Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 256
  • Last Modified:

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>
0
musicarr
Asked:
musicarr
1 Solution
 
AlbertoFrogCommented:
Yes, IE is rubbish. I've been practicing some bizarre Friady afternoon work avoidance tactics by spending a little while on this, and the problem is that IE wipes the cache of anything that's held in memory when it's not displayed, as you say. And there's no way round it.

An IMG tag is stored as a file, but a background parameter isn't. Opening the popup window seems to have similar affect. As I say, rubbish.

So, the best solution I've come up with is to stay away from changing the visibility and move the hidden div off-screen instead. If you give it a large negative left value then the scroll bars don't change either.

This makes:

if(document.all) {
document.all[name].style.left= 360;
if (name=="layer0") {document.all['layer1'].style.left=-1000;}
else {document.all['layer0'].style.left=-1000;}
}

And of course making both layers visible from the start, but giving layer1 a left value of -1000px, or whatever.

It's not ideal, but it does give the effect your looking for. And at the end of the day, if it looks right, then it is right. Usually.

Alberto
0
 
musicarrAuthor Commented:
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...
0

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now