Sticky Note problem with combo box in IE

[rizlaa]

1) Script Title: Sticky Note

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...stickynote.htm)

3) Describe problem:

Hi,

I'm using the sticky note script (http://www.dynamicdrive.com/dynamici...stickynote.htm) with IE.
whenever the sticky note div is displayed and hovers over a combobox. The combobox is visible above the sticky note and obscures the text.

Is there anyway of overcoming this bug in IE??

Thanks,
Rizlaa

[jscheuer1]

Yes, move the select element (combo box) away from the sticky note. That's the best solution.

Another is to use an iframe shim. It is complex mostly because it must be invoked only in IE5.5 through 6 and because its appearance and disappearance needs to be synchronized with the appearance and disappearance of the note. The idea is simple enough, you create an iframe of the same size and place it in the same location as the note. Give it a higher z-index than the combo box and a lower z-index than the note. I worked this out for another script, see this thread:

http://www.dynamicdrive.com/forums/s...ead.php?t=8454

Yet another is to make the combo box disappear while the note is being displayed. this can be done by setting its visibility to hidden while the note is being displayed and restoring it to visible, once the note disappears.

[jscheuer1]

Lucky you, I worked out the iframe shim solution for you, use this in place of 'step 1' from the demo page:

<style type="text/css">

#fadeinbox{
position:absolute;
width: 300px;
left: 0;
top: -400px;
border: 2px solid black;
background-color: lightyellow;
padding: 4px;
z-index: 100;
visibility:hidden;
}

</style>

<!--[if lte IE 6]>
<!--[if gte IE 5.5]>
<iframe id="fadeboxiframe" src="" style="z-index:99;display:none;position:absolute;" frameborder="0"></iframe>
<![endif]-->
<![endif]-->

<script type="text/javascript">

/***********************************************
* Sticky Note script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
* Go to http://www.dynamicdrive.com/ for full source code
* Modified in http://www.dynamicdrive.com/forums by jscheuer1
* to cover select elements in IE5.5 through IE6 and to
* Fade-in in all browsers supporting opacity.
***********************************************/

//Specify display mode. 3 possible values are:
//1) "always"- This makes the fade-in box load each time the page is displayed
//2) "oncepersession"- This uses cookies to display the fade-in box only once per browser session
//3) integer (ie: 5)- Finally, you can specify an integer to display the box randomly via a frequency of 1/integer...
// For example, 2 would display the box about (1/2) 50% of the time the page loads.

var displaymode="always"

var enablefade="yes" //("yes" to enable fade in effect, "no" to disable)
var autohidebox=["no", 5] //Automatically hide box after x seconds? [yes/no, if_yes_hide_after_seconds]
var showonscroll="yes" //Should box remain visible even when user scrolls page? ("yes"/"no)
var IEfadelength=1 //fade in duration for IE, in seconds
var Mozfadedegree=0.05 //fade in degree for NS6+ (number between 0 and 1. Recommended max: 0.2)

////////No need to edit beyond here///////////

var ie5_5=typeof fadeboxiframe=='undefined'? 0 : 1

if (parseInt(displaymode)!=NaN)
var random_num=Math.floor(Math.random()*displaymode)

function displayfadeinbox(){
var ie=document.all && !window.opera
var dom=document.getElementById
iebody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
objref=(dom)? document.getElementById("fadeinbox") : document.all.fadeinbox
var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset
var docwidth=(ie)? iebody.clientWidth : window.innerWidth
docheight=(ie)? iebody.clientHeight: window.innerHeight
var objwidth=objref.offsetWidth
objheight=objref.offsetHeight
objref.style.left=docwidth/2-objwidth/2+"px"
objref.style.top=scroll_top+docheight/2-objheight/2+"px"

if (showonscroll=="yes")
showonscrollvar=setInterval("staticfadebox()", 50)

if (enablefade=="yes" && objref.filters){
objref.filters[0].duration=IEfadelength
objref.filters[0].Apply()
objref.filters[0].Play()
}
objref.style.visibility="visible"
if (objref.style.MozOpacity||(objref.style.opacity&&!objref.filters)){
if (enablefade=="yes")
mozfadevar=setInterval("mozfadefx()", 90)
else{
if (objref.style.MozOpacity)
objref.style.MozOpacity=1
if (objref.style.opacity&&!objref.filters)
objref.style.opacity=1
controlledhidebox()
}
}
else
controlledhidebox()
unhideIframe()
}

function mozfadefx(){
if (objref.style.MozOpacity&&parseFloat(objref.style.MozOpacity)<1)
objref.style.MozOpacity=parseFloat(objref.style.MozOpacity)+Mozfadedegree
else if (objref.style.opacity&&!objref.filters&&parseFloat(objref.style.opacity)<1)
objref.style.opacity=parseFloat(objref.style.opacity)+Mozfadedegree
else{
clearInterval(mozfadevar)
controlledhidebox()
}
}

function staticfadebox(){
var ie=document.all && !window.opera
var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset
objref.style.top=scroll_top+docheight/2-objheight/2+"px"
unhideIframe()
}

function hidefadebox(){
hideIframe();
objref.style.visibility="hidden"
if (typeof showonscrollvar!="undefined")
clearInterval(showonscrollvar)
}

function controlledhidebox(){
if (autohidebox[0]=="yes"){
var delayvar=(enablefade=="yes" && objref.filters)? (autohidebox[1]+objref.filters[0].duration)*1000 : autohidebox[1]*1000
setTimeout("hidefadebox()", delayvar)
}
}

function initfunction(){
setTimeout("displayfadeinbox()", 100)
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = ""
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset)
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}


if (displaymode=="oncepersession" && get_cookie("fadedin")=="" || displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0){
if (window.addEventListener)
window.addEventListener("load", initfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", initfunction)
else if (document.getElementById)
window.onload=initfunction
document.cookie="fadedin=yes"
}

// Hide IFrame
function hideIframe() {
if (ie5_5){
var theIframe = document.getElementById("fadeboxiframe")
theIframe.style.display = "none";
}
}

// Unhide IFrame
function unhideIframe() {
if (ie5_5){
var theIframe = document.getElementById("fadeboxiframe")
var theDiv = document.getElementById("fadeinbox");
theIframe.style.width = theDiv.offsetWidth+'px';
theIframe.style.height = theDiv.offsetHeight+'px';
theIframe.style.top = theDiv.offsetTop+'px';
theIframe.style.left = theDiv.offsetLeft+'px';
theIframe.style.display = "block";
}
}
</script>

[rizlaa]

Thanks,

That worked a treat!!!
I think the main script should be amended with this one so that your good work does not get lost.

Rizlaa