bug with getAttribute('style').cssText and select lists

  • Thread starter Thread starter Jason Pierce
  • Start date Start date
J

Jason Pierce

I just entered this on the closest thing I could find to a
bug report
(http://register.microsoft.com/mswish/suggestion.asp?
from=cu&fu=%2Fisapi%2Fgomscom%2Easp%3Ftarget%3D%2Fmswish%
2Fthanks%2Ehtm). Hopefully, someone will see it. Just
wanted to make it know here, too.


I have a bug report for IE 6.0.2800.1106.xpsp2.030422-1633

Setting the getAttribute('style').cssText = 'display:
none' has a bug when it comes to SELECT/OPTIONS in an html
form. If you use this code on a section that has a select
list, it will not hide the select list but will instead
leave it floating over whatever text is supposed to be
there. However, if you use style.display = 'none', it
hides it correctly. This bug seems to only affect SELECT.

Below is a good example html page. Click back and forth
between the first two options. Note the floating select.
Then try clicking back and forth between the second two
options.

<html>
<body>
<form>
<input type="radio" name="test1" value="Off"
onclick="document.getElementById
('testsection').getAttribute('style').cssText = 'display:
inline'">getAttribute('style').cssText = 'display:
inline'<br>
<input type="radio" name="test1" value="On"
onclick="document.getElementById
('testsection').getAttribute('style').cssText = 'display:
none'">getAttribute('style').cssText = 'display: none'<br>
<hr>
<input type="radio" name="test2" value="Off"
onclick="document.getElementById
('testsection').style.display = 'inline'">style.display
= 'inline'<br>
<input type="radio" name="test2" value="On"
onclick="document.getElementById
('testsection').style.display = 'none'">style.display
= 'none'<br>
<hr>
<p id="testsection" style="display: inline">
foo foo foo<br>
<select name="amigoUpdatedDay" size=2>
<option value="--" selected>--</option>
<option value="01">01</option>
</select><br>
<textarea name="description" cols="70"
rows="10"></textarea><br>
<input type="radio" name="test1" value="On"">On<br>
<input type="radio" name="test2" value="Off"">Off<br>
bar bar bar<br>
</p>
one<br>
two<br>
three<br>
five<br>
six<br>
seven<br>
</form>
</body>
</html>
 
Jason Pierce said:
I just entered this on the closest thing I could find to a
bug report
(http://register.microsoft.com/mswish/suggestion.asp?
from=cu&fu=%2Fisapi%2Fgomscom%2Easp%3Ftarget%3D%2Fmswish%
2Fthanks%2Ehtm). Hopefully, someone will see it. Just
wanted to make it know here, too.


I have a bug report for IE 6.0.2800.1106.xpsp2.030422-1633

Setting the getAttribute('style').cssText = 'display:
none' has a bug when it comes to SELECT/OPTIONS in an html
form. If you use this code on a section that has a select
list, it will not hide the select list but will instead
leave it floating over whatever text is supposed to be
there. However, if you use style.display = 'none', it
hides it correctly. This bug seems to only affect SELECT.

Below is a good example html page. Click back and forth
between the first two options. Note the floating select.
Then try clicking back and forth between the second two
options.

<html>
<body>
<form>
<input type="radio" name="test1" value="Off"
onclick="document.getElementById
('testsection').getAttribute('style').cssText = 'display:
inline'">getAttribute('style').cssText = 'display:
inline'<br>
<input type="radio" name="test1" value="On"
onclick="document.getElementById
('testsection').getAttribute('style').cssText = 'display:
none'">getAttribute('style').cssText = 'display: none'<br>
<hr>
<input type="radio" name="test2" value="Off"
onclick="document.getElementById
('testsection').style.display = 'inline'">style.display
= 'inline'<br>
<input type="radio" name="test2" value="On"
onclick="document.getElementById
('testsection').style.display = 'none'">style.display
= 'none'<br>
<hr>
<p id="testsection" style="display: inline">
foo foo foo<br>
<select name="amigoUpdatedDay" size=2>
<option value="--" selected>--</option>
<option value="01">01</option>
</select><br>
<textarea name="description" cols="70"
rows="10"></textarea><br>
<input type="radio" name="test1" value="On"">On<br>
<input type="radio" name="test2" value="Off"">Off<br>
bar bar bar<br>
</p>
one<br>
two<br>
three<br>
five<br>
six<br>
seven<br>
</form>
</body>
</html>
Click to expand...

This is not a bug... SELECT objects in IE are not under IE's complete
control. I believe it has something to do with the fact that a SELECT
object is not a Windowed (or is, I cant remember). You cannot make
anything appear on top of a select either. About the only thing you
can do is hide it when it intersects other objects on your page...

Jason Stevenson ([email protected])

Here is some source I use to detect collisions and hide select boxes:

//************ FUNCTIONS FOR HIDING SELECT BOX WHEN ELEMENT IS
HOVERING OVER IT ***********
//--------------------------------------------------------------------------

function showSelectBoxes() {
for(var i=0;i<top.document.frames.length;i++){
var tmpArray = top.document.frames.document.getElementsByTagName("select")
for(var j=0; j < tmpArray.length; j++) {
if(tmpArray[j].style.visibility.toLowerCase() == "hidden") {
tmpArray[j].style.visibility = "visible"
}
}
}
}

//--------------------------------------------------------------------------

function checkPoint(pX, pY, minX, minY, maxX, maxY) {
var msg = ""
msg += "pX = " + pX
msg += "\npY = " + pY
msg += "\nminX = " + minX
msg += "\nminY = " + minY
msg += "\nmaxX = " + maxX
msg += "\nmaxY = " + maxY


if((pX >= minX && pX <= maxX) && (pY >= minY && pY <= maxY)) {
//alert("It is intersecting")
//alert(msg)
return true
} else {
//alert("It is not intersecting")
//alert(msg)
return false
}
}

//--------------------------------------------------------------------------

function pointHolder(obj) {
this.left = getRealLeft(obj)
this.top = getRealTop(obj)
this.W = obj.offsetWidth
this.H = obj.offsetHeight
this.minX = this.left
this.minY = this.top
this.maxX = this.minX + this.W
this.maxY = this.minY + this.H
this.midX = this.minX + Math.round(this.W / 2)
this.midY = this.minY + Math.round(this.H / 2)
this.obj = obj
}

//--------------------------------------------------------------------------

function hideSelectBoxes(el) {
for(var i=0;i<top.document.frames.length;i++){

//Get Array of Select Objects for this Frame
var tmpArray = top.document.frames.document.getElementsByTagName("select")

var frmTop = top.document.frames.screenTop
var frmLeft = top.document.frames.screenLeft

//Spin through Array checking for overlap
for(var j=0; j < tmpArray.length; j++) {

//alert('Checking Select: ' + tmpArray[j].name)
if(checkIntersect(tmpArray[j], el, frmTop, frmLeft)) {
tmpArray[j].style.visibility = "hidden"
}

}

}
}

function hideAllSelectBoxes() {
for(var i=0;i<top.document.frames.length;i++){

//Get Array of Select Objects for this Frame
var tmpArray = top.document.frames.document.getElementsByTagName("select")

var frmTop = top.document.frames.screenTop
var frmLeft = top.document.frames.screenLeft

//Spin through Array checking for overlap
for(var j=0; j < tmpArray.length; j++) {
tmpArray[j].style.visibility = "hidden"
}

}
}

//--------------------------------------------------------------------------

function checkIntersect(objA, objB, frmTop, frmLeft) { //objA =
select box, objB = Calendar
var intersected = false
var objA_points = new pointHolder(objA)
var objB_points = new pointHolder(objB)

//************* CHECK objA in objB **********************

//************* CHECK MidPoints for Intersection *************

//check objA , A.midX, B.midY
var msg = "Select name = " + objA.name + "\n"
msg += "objA_points.minX = " + objA_points.minX + "\n"
msg += "objA_points.minY = " + objA_points.minY + "\n"
msg += "objA_points.maxX = " + objA_points.maxX + "\n"
msg += "objA_points.maxY = " + objA_points.maxY + "\n"
msg += "objA_points.midX = " + objA_points.midX + "\n"
msg += "objA_points.midY = " + objA_points.midY + "\n\n"
msg += "Object name = " + objB.name + "\n"
msg += "objB_points.minX = " + objB_points.minX + "\n"
msg += "objB_points.minY = " + objB_points.minY + "\n"
msg += "objB_points.maxX = " + objB_points.maxX + "\n"
msg += "objB_points.maxY = " + objB_points.maxY + "\n"
msg += "objB_points.midX = " + objB_points.midX + "\n"
msg += "objB_points.midY = " + objB_points.midY + "\n"

//alert(msg)

if((objA_points.midY >= objB_points.minY && objA_points.midY <=
objB_points.maxY) && (objB_points.midX >= objA_points.minX &&
objB_points.midX <= objA_points.maxX)) {return true}

//-------Check rest of points-----------
//check objA , leftTop point in objB
intersected = checkPoint(objA_points.left, objA_points.top,
objB_points.minX, objB_points.minY, objB_points.maxX,
objB_points.maxY)
//alert(intersected)
if(intersected == true) {return true}

//check objA , leftBottom point in objB
intersected = checkPoint(objA_points.left, objA_points.top +
objA_points.H, objB_points.minX, objB_points.minY, objB_points.maxX,
objB_points.maxY)
if(intersected == true) {return true}

//check objA , rightTop point in objB
intersected = checkPoint(objA_points.left + objA_points.W,
objA_points.top, objB_points.minX, objB_points.minY, objB_points.maxX,
objB_points.maxY)
if(intersected == true) {return true}

//check objA , rightBottom point in objB
intersected = checkPoint(objA_points.left + objA_points.W,
objA_points.top + objA_points.H, objB_points.minX, objB_points.minY,
objB_points.maxX, objB_points.maxY)
if(intersected == true) {return true}
//************* CHECK objB in objA **********************

//check objB , leftTop point in objA
intersected = checkPoint(objB_points.left, objB_points.top,
objA_points.minX, objA_points.minY, objA_points.maxX,
objA_points.maxY)
if(intersected == true) {return true}

//check objB , leftBottom point in objA
intersected = checkPoint(objB_points.left, objB_points.top +
objB_points.H, objA_points.minX, objA_points.minY, objA_points.maxX,
objA_points.maxY)
if(intersected == true) {return true}

//check objB , rightTop point in objA
intersected = checkPoint(objB_points.left + objB_points.W,
objB_points.top, objA_points.minX, objA_points.minY, objA_points.maxX,
objA_points.maxY)
if(intersected == true) {return true}

//check objB , rightBottom point in objA
intersected = checkPoint(objB_points.left + objB_points.W,
objB_points.top + objB_points.H, objA_points.minX, objA_points.minY,
objA_points.maxX, objA_points.maxY)
if(intersected == true) {return true}

//since made it here no intersect
return false
}

//--------------------------------------------------------------------------

function getRealLeft(el) {
if (arguments.length==0) el = this;
xPos = el.offsetLeft;
tempEl = el.offsetParent;
while (tempEl != null) {
xPos += tempEl.offsetLeft;
tempEl = tempEl.offsetParent;
}
return xPos;
}

//--------------------------------------------------------------------------

function getRealTop(el) {
if (arguments.length==0) el = this;
var yPos = el.offsetTop;
tempEl = el.offsetParent;
while (tempEl != null) {
yPos += tempEl.offsetTop;
tempEl = tempEl.offsetParent;
}
return yPos;
}
//--------------------------------------------------------------------------
//*********** DONE SELECT HOVER FUNCTIONS
*********************************
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

session timeout warning problem 0
Select Checkbox on Web Page 1
ValueChanged Event Doesn't Fire 3
Page error duplicating Joe Stangler's sample HTML page. . . ? 2
validation group problem 1
What is the id that Javascript uses for a server control? 2
Parsing some info out of HTML - can you help me please? 3
ASP.NET v2.0 and Repeater controls 3

Back
Top