I remember a time when programs is written using the curses library and the user interface was a 80x24 terminal. I'm not going to dwell too much about it, but one thing I remember I wrote something like this to work on every terminal. Then came the era of GUI applications (such as Delphi, Swing), and finally we came to Internet browsers, and here they ran into problems. It works on Firefox, and Internet Explorze not, etc. Last week I came across just such a problem and, as always, with the help Came "html hack", ie the use of the famous JavaScript function setTimeout
. I'll start from the beginning (This is the best) is from an example which clearly shows the problem to which I came. Well, the reason was to click the checkbox is selected to show (for an additional attribute
position had to be relative), and after unchecking hide (additional attribute position had to be absolute ). I made all the HTML code below: \u0026lt;html>
\u0026lt;head>
\u0026lt;script type="text/javascript"> \u0026lt;! -
function changeDiv (checkboxEl) {var
divElStyle = document.getElementById ("div1"). styles;
if (checkboxEl.checked) {
divElStyle.position = "relative";
divElStyle.visibility= "visible";
}
else {
divElStyle.position = "absolute";
divElStyle.visibility= "hidden";
}
}
//-->
</script>
</head>
<body>
<input type="checkbox"
onclick="changeDiv(this);">Test</input>
<br />
Poczatek
<div id="div1"
style="position: absolute; display: inline; visibility: hidden; "> \u0026lt;input type="button"
value="Test" />
\u0026lt;/ div> End
\u0026lt;/ body>
\u0026lt; / html>
When you run this example, it turned out that yes in Firefox does everything well, but in Internet Explorer button is not visible, but it is a place reserved for him. course, full of humility, but I took faith in success to work after a few moments, I found that the problem is related to the assignment of attribute
position relative value . Unfortunately, Internet Explorer, it can not cope. Problem found, so I switched to a solution that brought the pragmatic move which was to use setTimeout function - the popular and "liked" html hacku. Below is modified code that works in Internet Explorer:
\u0026lt;html>
\u0026lt;head>
\u0026lt;script type="text/javascript"> \u0026lt;! -
function changeDiv (checkboxEl) { var
divElStyle = document.getElementById ("div1"). styles;
if (checkboxEl.checked) {
divElStyle.position = "relative";
setTimeout(
'document.getElementById("div1").style.visibility = "visible"',
1);
}
else {
divElStyle.position = "absolute";
divElStyle.visibility= "hidden";
}
}
//-->
</script>
</head>
<body>
<input type="checkbox"
onclick="changeDiv(this);">Test</input>
<br />
Beginning
\u0026lt;div id="div1"
style="position: absolute; display: inline; visibility: hidden;">
\u0026lt;input type="button" value="Test" />
\u0026lt; ; / div> End
\u0026lt;/ body>
\u0026lt;/ html> I encourage you to share in their interesting experiences. 
0 comments:
Post a Comment