blue44
asked on
Help combining two Scripts
Hi,
I have one script that creates a hovering layer effect, and another that allows a layer to overlay a windowed control such as a select box. I'm having trouble combining the two. Below, I will attach the two scripts and a third script in which I tried combining the two. I know this is a tough one so help is very much appreciated.
-------------------------- -------Hov ering Layer Effect Script-------------------- ---------- ---------- ---------- ------
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#dhtmltooltip{
position: absolute;
/*New Values*/
top:25px;
left:50px;
display:none;
color:#ffffff;
/*End New Values*/
width: 150px;
border: 2px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Mi crosoft.Sh adow(color =gray,dire ction=135) ;
}
</style>
</head>
<body>
<form>
<select>
<option>A Select Box is Born ....</option>
</select>
</form>
<div id="dhtmltooltip"></div>
<script type="text/javascript">
/************************* ********** ********** **
* Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
************************** ********** ********** */
var offsetxpoint=-60 //Customize x offset of tooltip
var offsetypoint=20 //Customize y offset of tooltip
var ie=document.all
var ns6=document.getElementByI d && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip "] : document.getElementById? document.getElementById("d htmltoolti p") : ""
function ietruebody(){
return (document.compatMode && document.compatMode!="Back Compat")? document.documentElement : document.body
}
function ddrivetip(thetext, thecolor, thewidth, state){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidt h+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundCol or=thecolo r
tipobj.innerHTML=thetext
enabletip=true
return false
}
//New Code
var DivRef = document.getElementById('P opupDiv');
var IfrRef = document.getElementById('D ivShim');
if(state)
{
DivRef.style.display = "block";
IfrRef.style.width = DivRef.offsetWidth;
IfrRef.style.height = DivRef.offsetHeight;
IfrRef.style.top = DivRef.style.top;
IfrRef.style.left = DivRef.style.left;
IfrRef.style.zIndex = DivRef.style.zIndex - 1;
IfrRef.style.display = "block";
}
else
{
DivRef.style.display = "none";
IfrRef.style.display = "none";
}
//End New Code
}
function positiontip(e){
if (enabletip){
var curX=(ns6)?e.pageX : event.x+ietruebody().scrol lLeft;
var curY=(ns6)?e.pageY : event.y+ietruebody().scrol lTop;
//Find out how close the mouse is to the corner of the window
var rightedge=ie&&!window.oper a? ietruebody().clientWidth-e vent.clien tX-offsetx point : window.innerWidth-e.client X-offsetxp oint-20
var bottomedge=ie&&!window.ope ra? ietruebody().clientHeight- event.clie ntY-offset ypoint : window.innerHeight-e.clien tY-offsety point-20
var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWi dth)
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=ie? ietruebody().scrollLeft+ev ent.client X-tipobj.o ffsetWidth +"px" : window.pageXOffset+e.clien tX-tipobj. offsetWidt h+"px"
else if (curX<leftedge)
tipobj.style.left="5px"
else
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+off setxpoint+ "px"
//same concept with the vertical position
if (bottomedge<tipobj.offsetH eight)
tipobj.style.top=ie? ietruebody().scrollTop+eve nt.clientY -tipobj.of fsetHeight -offsetypo int+"px" : window.pageYOffset+e.clien tY-tipobj. offsetHeig ht-offsety point+"px"
else
tipobj.style.top=curY+offs etypoint+" px"
tipobj.style.visibility="v isible"
}
}
function hideddrivetip(state){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="h idden"
tipobj.style.left="-1000px "
tipobj.style.backgroundCol or=''
tipobj.style.width=''
}
//New Code
var DivRef = document.getElementById('P opupDiv');
var IfrRef = document.getElementById('D ivShim');
if(state)
{
DivRef.style.display = "block";
IfrRef.style.width = DivRef.offsetWidth;
IfrRef.style.height = DivRef.offsetHeight;
IfrRef.style.top = DivRef.style.top;
IfrRef.style.left = DivRef.style.left;
IfrRef.style.zIndex = DivRef.style.zIndex - 1;
IfrRef.style.display = "block";
}
else
{
DivRef.style.display = "none";
IfrRef.style.display = "none";
}
//End New Code
}
document.onmousemove=posit iontip
</script>
<iframe
id="DivShim"
src="javascript:false;"
scrolling="no"
frameborder="0"
style="position:absolute; top:0px; left:0px; display:none;">
</iframe>
<a href="http://www.yahoo.com" onMouseover="ddrivetip('Vi sit Yahoo.com', 'yellow', 250, 'true')";
onMouseout="hideddrivetip( 'false')"> Search Engine</a>
</body>
</html>
-------------------------- -------End Hovering Layer Effect Script-------------------- ---------- ---------- ---------- -
-------------------------- -------Ove rlay window script-------------------- ---------- ---------- ---------- ------
<html>
<head>
<script>
function DivSetVisible(state)
{
var DivRef = document.getElementById('P opupDiv');
var IfrRef = document.getElementById('D ivShim');
if(state)
{
DivRef.style.display = "block";
IfrRef.style.width = DivRef.offsetWidth;
IfrRef.style.height = DivRef.offsetHeight;
IfrRef.style.top = DivRef.style.top;
IfrRef.style.left = DivRef.style.left;
IfrRef.style.zIndex = DivRef.style.zIndex - 1;
IfrRef.style.display = "block";
}
else
{
DivRef.style.display = "none";
IfrRef.style.display = "none";
}
}
</script>
</head>
<body>
<form>
<select>
<option>A Select Box is Born ....</option>
</select>
</form>
<div
id="PopupDiv"
style="position:absolute; top:25px; left:50px; padding:4px; display:none; background-color:#000000; color:#ffffff; z-index:100">
.... and a DIV can cover it up<br>through the help of an IFRAME.
</div>
<iframe
id="DivShim"
src="javascript:false;"
scrolling="no"
frameborder="0"
style="position:absolute; top:0px; left:0px; display:none;">
</iframe>
<br>
<br>
<a href="#" onclick="DivSetVisible(tru e)">Click to show DIV.</a>
<br>
<br>
<a href="#" onclick="DivSetVisible(fal se)">Click to hide DIV.</a>
</body>
</html>
-------------------------- -------End Overlay window script-------------------- ---------- ---------- ---------- -
-------------------------- -------Att empt to Combine Scripts------------------- ---------- ---------- ---------- -
<html>
<head>
<script>
function DivSetVisible(state)
{
var DivRef = document.getElementById('P opupDiv');
var IfrRef = document.getElementById('D ivShim');
if(state)
{
DivRef.style.display = "block";
IfrRef.style.width = DivRef.offsetWidth;
IfrRef.style.height = DivRef.offsetHeight;
IfrRef.style.top = DivRef.style.top;
IfrRef.style.left = DivRef.style.left;
IfrRef.style.zIndex = DivRef.style.zIndex - 1;
IfrRef.style.display = "block";
}
else
{
DivRef.style.display = "none";
IfrRef.style.display = "none";
}
}
</script>
</head>
<body>
<form>
<select>
<option>A Select Box is Born ....</option>
</select>
</form>
<div
id="PopupDiv"
style="position:absolute; top:25px; left:50px; padding:4px; display:none; background-color:#000000; color:#ffffff; z-index:100">
.... and a DIV can cover it up<br>through the help of an IFRAME.
</div>
<iframe
id="DivShim"
src="javascript:false;"
scrolling="no"
frameborder="0"
style="position:absolute; top:0px; left:0px; display:none;">
</iframe>
<br>
<br>
<a href="#" onMouseOver="DivSetVisible (true)">Cl ick to show DIV.</a>
<br>
<br>
<!--- <a href="#" onclick="DivSetVisible(fal se)">Click to hide DIV.</a> --->
</body>
</html>
-------------------------- -------End Attempt to Combine Scripts------------------- ---------- ---------- ---------- -
Thank you.
I have one script that creates a hovering layer effect, and another that allows a layer to overlay a windowed control such as a select box. I'm having trouble combining the two. Below, I will attach the two scripts and a third script in which I tried combining the two. I know this is a tough one so help is very much appreciated.
--------------------------
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#dhtmltooltip{
position: absolute;
/*New Values*/
top:25px;
left:50px;
display:none;
color:#ffffff;
/*End New Values*/
width: 150px;
border: 2px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Mi
}
</style>
</head>
<body>
<form>
<select>
<option>A Select Box is Born ....</option>
</select>
</form>
<div id="dhtmltooltip"></div>
<script type="text/javascript">
/*************************
* Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
**************************
var offsetxpoint=-60 //Customize x offset of tooltip
var offsetypoint=20 //Customize y offset of tooltip
var ie=document.all
var ns6=document.getElementByI
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip
function ietruebody(){
return (document.compatMode && document.compatMode!="Back
}
function ddrivetip(thetext, thecolor, thewidth, state){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidt
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundCol
tipobj.innerHTML=thetext
enabletip=true
return false
}
//New Code
var DivRef = document.getElementById('P
var IfrRef = document.getElementById('D
if(state)
{
DivRef.style.display = "block";
IfrRef.style.width = DivRef.offsetWidth;
IfrRef.style.height = DivRef.offsetHeight;
IfrRef.style.top = DivRef.style.top;
IfrRef.style.left = DivRef.style.left;
IfrRef.style.zIndex = DivRef.style.zIndex - 1;
IfrRef.style.display = "block";
}
else
{
DivRef.style.display = "none";
IfrRef.style.display = "none";
}
//End New Code
}
function positiontip(e){
if (enabletip){
var curX=(ns6)?e.pageX : event.x+ietruebody().scrol
var curY=(ns6)?e.pageY : event.y+ietruebody().scrol
//Find out how close the mouse is to the corner of the window
var rightedge=ie&&!window.oper
var bottomedge=ie&&!window.ope
var leftedge=(offsetxpoint<0)?
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWi
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=ie? ietruebody().scrollLeft+ev
else if (curX<leftedge)
tipobj.style.left="5px"
else
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+off
//same concept with the vertical position
if (bottomedge<tipobj.offsetH
tipobj.style.top=ie? ietruebody().scrollTop+eve
else
tipobj.style.top=curY+offs
tipobj.style.visibility="v
}
}
function hideddrivetip(state){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="h
tipobj.style.left="-1000px
tipobj.style.backgroundCol
tipobj.style.width=''
}
//New Code
var DivRef = document.getElementById('P
var IfrRef = document.getElementById('D
if(state)
{
DivRef.style.display = "block";
IfrRef.style.width = DivRef.offsetWidth;
IfrRef.style.height = DivRef.offsetHeight;
IfrRef.style.top = DivRef.style.top;
IfrRef.style.left = DivRef.style.left;
IfrRef.style.zIndex = DivRef.style.zIndex - 1;
IfrRef.style.display = "block";
}
else
{
DivRef.style.display = "none";
IfrRef.style.display = "none";
}
//End New Code
}
document.onmousemove=posit
</script>
<iframe
id="DivShim"
src="javascript:false;"
scrolling="no"
frameborder="0"
style="position:absolute; top:0px; left:0px; display:none;">
</iframe>
<a href="http://www.yahoo.com" onMouseover="ddrivetip('Vi
onMouseout="hideddrivetip(
</body>
</html>
--------------------------
--------------------------
<html>
<head>
<script>
function DivSetVisible(state)
{
var DivRef = document.getElementById('P
var IfrRef = document.getElementById('D
if(state)
{
DivRef.style.display = "block";
IfrRef.style.width = DivRef.offsetWidth;
IfrRef.style.height = DivRef.offsetHeight;
IfrRef.style.top = DivRef.style.top;
IfrRef.style.left = DivRef.style.left;
IfrRef.style.zIndex = DivRef.style.zIndex - 1;
IfrRef.style.display = "block";
}
else
{
DivRef.style.display = "none";
IfrRef.style.display = "none";
}
}
</script>
</head>
<body>
<form>
<select>
<option>A Select Box is Born ....</option>
</select>
</form>
<div
id="PopupDiv"
style="position:absolute; top:25px; left:50px; padding:4px; display:none; background-color:#000000; color:#ffffff; z-index:100">
.... and a DIV can cover it up<br>through the help of an IFRAME.
</div>
<iframe
id="DivShim"
src="javascript:false;"
scrolling="no"
frameborder="0"
style="position:absolute; top:0px; left:0px; display:none;">
</iframe>
<br>
<br>
<a href="#" onclick="DivSetVisible(tru
<br>
<br>
<a href="#" onclick="DivSetVisible(fal
</body>
</html>
--------------------------
--------------------------
<html>
<head>
<script>
function DivSetVisible(state)
{
var DivRef = document.getElementById('P
var IfrRef = document.getElementById('D
if(state)
{
DivRef.style.display = "block";
IfrRef.style.width = DivRef.offsetWidth;
IfrRef.style.height = DivRef.offsetHeight;
IfrRef.style.top = DivRef.style.top;
IfrRef.style.left = DivRef.style.left;
IfrRef.style.zIndex = DivRef.style.zIndex - 1;
IfrRef.style.display = "block";
}
else
{
DivRef.style.display = "none";
IfrRef.style.display = "none";
}
}
</script>
</head>
<body>
<form>
<select>
<option>A Select Box is Born ....</option>
</select>
</form>
<div
id="PopupDiv"
style="position:absolute; top:25px; left:50px; padding:4px; display:none; background-color:#000000; color:#ffffff; z-index:100">
.... and a DIV can cover it up<br>through the help of an IFRAME.
</div>
<iframe
id="DivShim"
src="javascript:false;"
scrolling="no"
frameborder="0"
style="position:absolute; top:0px; left:0px; display:none;">
</iframe>
<br>
<br>
<a href="#" onMouseOver="DivSetVisible
<br>
<br>
<!--- <a href="#" onclick="DivSetVisible(fal
</body>
</html>
--------------------------
Thank you.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You are welcome.
ASKER