javascript closure in a loop not working
Problem: you have a function, a loop in it, and in that loop another function. The inner function remembers only the last value of the loop. Solution: learn about closures, this is the best tutorial I have seenso far http://www.kryogenix.org/code/browser/secrets-of-javascript-closures/. Give it a try and then look at slide no. 50 of the presentation.
prototype ie6 ie7 methods not visible
Problem: when using javascript library prototype in ie6 ie7 methods such as:
removeClassName addClassName ...
are not visible.
Solution: use the $() function instead of document.getElementById()
popup transparent window (ie6 ie7 ff)
NOTICE: this post is deprecated. Now I would recommend using a library for example JQuery or Prototype with a “popup window” plugin installed.
How to make a transparent glass popup pane that covers the whole site and displays a message window?
Simple example:
<html>
<style type="text/css">
/* START OF glass window pane styles */
#glass_background {
width:100%;
height:100%;
top:0;
left:0;
position: fixed;
z-index:51; background: #333333 none repeat scroll 0 0;
opacity:0.7;
display:none;
}
#message_box {
width:450px;
height:300px;
border:2px solid #AEAEAE;
z-index:100;
margin:50px auto 10px;
background:white none repeat scroll 0 0;
position:absolute;
left:200px;
top:20px;
display:none;
}
/* END OF glass window pane styles */
/* Other styles */
div.site_content {
color:red;
}
</style>
<script type="text/javascript">
function showMessageGlassPane(msg) {
document.getElementById('message_box').style.display = 'block';
document.getElementById('glass_background').style.display = 'block';
document.getElementById('message_box_content').innerHTML = msg;
}
function hideMessageGlassPane() {
document.getElementById('message_box').style.display = 'none';
document.getElementById('glass_background').style.display = 'none';
}
</script>
<!--[if lte IE 7]>
<style type="text/css">
#glass_background {
position: absolute;
}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
#glass_background {
filter:alpha(opacity=70);
}
</style>
<![endif]-->
<body>
<div class="site_content">
<a href="#" onclick="showMessageGlassPane('Hello glass pane!')">SHOW WINDOW (click me!)</a>
<br />
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
</div>
<div id="glass_background">
</div>
<div id="message_box">
<div id="message_box_content">
Default message.
</div>
<a href="#" onclick="hideMessageGlassPane()">CLOSE</a>
</div>
</body>
</html>