• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 552
  • Last Modified:

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.

---------------------------------Hovering 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.Microsoft.Shadow(color=gray,direction=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.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function ddrivetip(thetext, thecolor, thewidth, state){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}


//New Code
var DivRef = document.getElementById('PopupDiv');
var IfrRef = document.getElementById('DivShim');
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().scrollLeft;
var curY=(ns6)?e.pageY : event.y+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-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.offsetWidth)
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"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+offsetxpoint+"px"

//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight)
tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
else
tipobj.style.top=curY+offsetypoint+"px"
tipobj.style.visibility="visible"
}
}

function hideddrivetip(state){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}

//New Code
var DivRef = document.getElementById('PopupDiv');
var IfrRef = document.getElementById('DivShim');
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=positiontip

</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('Visit Yahoo.com', 'yellow', 250, 'true')";
 onMouseout="hideddrivetip('false')">Search Engine</a>

 

</body>
</html>
---------------------------------End Hovering Layer Effect Script---------------------------------------------------



---------------------------------Overlay window script--------------------------------------------------------

<html>
<head>
 <script>
  function DivSetVisible(state)
  {
   var DivRef = document.getElementById('PopupDiv');
   var IfrRef = document.getElementById('DivShim');
   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(true)">Click to show DIV.</a>
 <br>
 <br>
  <a href="#" onclick="DivSetVisible(false)">Click to hide DIV.</a>
</body>
</html>

---------------------------------End Overlay window script---------------------------------------------------

---------------------------------Attempt to Combine Scripts--------------------------------------------------
<html>
<head>
 <script>
  function DivSetVisible(state)
  {
   var DivRef = document.getElementById('PopupDiv');
   var IfrRef = document.getElementById('DivShim');
   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)">Click to show DIV.</a>
 <br>
 <br>
<!---   <a href="#" onclick="DivSetVisible(false)">Click to hide DIV.</a> --->
</body>
</html>
---------------------------------End Attempt to Combine Scripts--------------------------------------------------

Thank you.
0
blue44
Asked:
blue44
  • 2
1 Solution
 
ZvonkoSystems architectCommented:
Here my combination:


<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;
top:25px;
left:50px;
display:none;
color:#ff0000;
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.Microsoft.Shadow(color=gray,direction=135);
}
</style>
</head>
<body>
 
<div id="dhtmltooltip"></div>
<iframe
 id="dhtmliframe"
 src="about:blank"
 scrolling="no"
 frameborder="10"
 style="position:absolute; top:0px; left:0px; display:none; ">
</iframe>





<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.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
var ifrobj=document.all? document.all["dhtmliframe"] : document.getElementById? document.getElementById("dhtmliframe") : ""
function ietruebody(){
  return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function ddrivetip(thetext, thecolor, thewidth, state){
  if (ns6||ie){
    if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
    if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
    tipobj.innerHTML=thetext
    enabletip=true
//New Code
    tipobj.style.display = "block";
    ifrobj.style.width = tipobj.offsetWidth;
    ifrobj.style.height = tipobj.offsetHeight;
    ifrobj.style.top = tipobj.style.top;
    ifrobj.style.left = tipobj.style.left;
    ifrobj.style.display = "block";
//End New Code
    return false
  }
}

function positiontip(e){
  if (enabletip){
    var curX=(ns6)?e.pageX : event.x+ietruebody().scrollLeft;
    var curY=(ns6)?e.pageY : event.y+ietruebody().scrollTop;
    //Find out how close the mouse is to the corner of the window
    var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
    var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-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.offsetWidth){
      //move the horizontal position of the menu to the left by it's width
      tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"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+offsetxpoint+"px"
    }
    ifrobj.style.left = tipobj.style.left;
    //same concept with the vertical position
    if (bottomedge<tipobj.offsetHeight){
      tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
    } else {
      tipobj.style.top=curY+offsetypoint+"px";
    }
    tipobj.style.visibility="visible"
    ifrobj.style.visibility="visible"
    ifrobj.style.left = tipobj.style.left;
    ifrobj.style.top = tipobj.style.top;
  }
}

function hideddrivetip(state){
  if (ns6||ie){
    enabletip=false
    tipobj.style.visibility="hidden"
    tipobj.style.left="-1000px"
    tipobj.style.backgroundColor=''
    tipobj.style.width=''
    ifrobj.style.visibility="hidden"
    ifrobj.style.left="-1000px"
    ifrobj.style.backgroundColor=''
    ifrobj.style.width=''
  }
}

document.onmousemove=positiontip

</script>



 
<a href="http://www.yahoo.com" onMouseover="ddrivetip('Visit Yahoo.com', 'yellow', 250, 'true')";
onMouseout="hideddrivetip('false')">Search Engine</a>

 <form>
 <select>
  <option>A New Select Box is Born ....</option>
 </select>
</form>


</body>
</html>


0
 
blue44Author Commented:
Amazing job.  Thanks a million!!!!
0
 
ZvonkoSystems architectCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now