?
Solved

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

Posted on 2003-03-19
2
Medium Priority
?
243 Views
Last Modified: 2009-12-16
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
Comment
Question by:musicarr
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 1

Accepted Solution

by:
AlbertoFrog earned 600 total points
ID: 8171654
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
 

Author Comment

by:musicarr
ID: 8180834
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question