SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
-
Mar 28, 2007, 06:16 #1
- Join Date
- Feb 2003
- Location
- Knoxville, TN
- Posts
- 531
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Memory Problem in IE with Transparent DIV
javascript
Code:function msgBox() { var cover = document.createElement("div"); cover.setAttribute("id", "message-cover"); // give the <div> an ID cover.onclick = function() { killMsgBox(); }; // add onclick event to hide <div> document.body.appendChild(cover); // append element to DOM } function killMsgBox() { var element = document.getElementById("message-cover"); element.detachEvent("onclick", killMsgBox); // get rid of onclick event element.parentNode.removeChild(element); // remove element from DOM }
Code:#message-cover { background-color: rgb(0, 0, 0); opacity: .5; filter: alpha(opacity=50); /* for IE */ position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; }
Code:<button type="button" onclick="msgBox();">Message Box</button>
any ideas on what can be done, if anything, in IE to fix this problem? typically this wouldn't be an issue, but my users are going to be opening up these transparent boxes often and the memory will add up quick.
-
Mar 28, 2007, 06:48 #2
- Join Date
- Feb 2003
- Location
- Knoxville, TN
- Posts
- 531
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
alrighty - apparently IE has a memory issue with it's own filter: alpha(opacity=50); style because i decided to try a PNG set to 50% for the cover instead and i received no memory increase.
javascript
Code:function msgBox(subject, message, type) { /*** TRANSPARENT COVER ***/ var cover = document.createElement("img"); cover.setAttribute("id", "message-cover"); cover.setAttribute("src", "cover.png"); document.body.appendChild(cover); }
Code:#message-cover { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; }
-
Mar 28, 2007, 06:51 #3
- Join Date
- Mar 2006
- Location
- Sweden
- Posts
- 451
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
What IE version are you using? I'm using 7, and it works fine here.
-
Mar 28, 2007, 06:53 #4
- Join Date
- Feb 2003
- Location
- Knoxville, TN
- Posts
- 531
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
ok, i just tried IE's AlphaImageLoader filter and it jacked-up the memory, as well...
filter: progidXImageTransform.Microsoft.AlphaImageLoader(src="cover.png", sizingMethod="scale");
so it looks like the filter in CSS is the culprit in IE.
-
Mar 28, 2007, 06:55 #5
- Join Date
- Feb 2003
- Location
- Knoxville, TN
- Posts
- 531
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
i'm using IE 7, as well.
and which script did you use? the first one that uses a transparent <div> or the second one where i tried a PNG?
both work perfect for me. it's not the functionality that's lacking - it's the memory that's being consumed by using the filter style in CSS for IE that's the problem.
when i use the PNG for a cover - works fine, no memory issues.
when i use the <div> with the IE CSS filter - works fine, but major memory issues.
-
Mar 28, 2007, 07:11 #6
- Join Date
- Nov 2002
- Location
- Montréal, Canada
- Posts
- 375
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I'm seeing the leak in my IE7 (and IE6)
This article may be helpful: http://www.codeproject.com/jscript/leakpatterns.asp
As well as this leak detection program, http://www.outofhanwell.com/ieleak/i...itle=Main_Page
-
Mar 28, 2007, 07:15 #7
- Join Date
- Feb 2003
- Location
- Knoxville, TN
- Posts
- 531
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
i appreciate the response. i've read that codeproject.com article before thinking that maybe i wasn't clearing out the elements properly, but after this latest test of just displaying a simple <div> with a style attached i've found out that it's the filter style in CSS for IE that's causing the memory pile-up.
i just need to find a way to clear that out somehow, if possible.
Bookmarks