Originally Posted by
usedname
I have implemented sticky note in one of my jsp (copying the code sample from this website).
When the page is loaded the sticky note is coming on the top.
The problem I have is that any drop down select on the form is coming on top of the sticky note. How can make sticky note come on top of the page (every thing on page).
thanks.
Upgrade to IE 7 or to any browser other than IE.
Or, try this mod:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<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 gte IE 5.5]>
<!--[if lte IE 6]>
<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=["yes", 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=2 //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>
</head>
<body style="height:3000px;">
<br> <br> <br> <br> <br> <br> <br> <br> <br>
<div style="width:100px;margin:0 auto;"><select>
<option>jjjjjjjjjj</option>
<option>jjjjjjjjjj</option>
<option>jjjjjjjjjj</option>
<option>jjjjjjjjjj</option>
<option>jjjjjjjjjj</option>
<option>jjjjjjjjjj</option>
</select></div>
<DIV id="fadeinbox" style="filter:progid:DXImageTransform.Microsoft.Fade(); progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135) ; -moz-opacity:0; opacity:0;">
INSERT ANY HTML TO DISPLAY HERE. DO NOT REMOVE OUTER MOST DIV.<br>
Script © <a href="http://www.dynamicdrive.com">Dynamic Drive</a><br>
<div align="right"> <a href="#" onClick="hidefadebox();return false">Hide Box</a>
</div>
</DIV>
</body>
</html>
New Comer (less than 5 posts)
Sticky Note script - Question
Posting Permissions
Reply With Quote
Bookmarks