Solved

Help combining two Scripts

Posted on 2004-03-24
3
479 Views
Last Modified: 2012-06-22
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
Comment
Question by:blue44
  • 2
3 Comments
 
LVL 63

Accepted Solution

by:
Zvonko earned 500 total points
ID: 10671676
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
 

Author Comment

by:blue44
ID: 10683439
Amazing job.  Thanks a million!!!!
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 10684734
You are welcome.
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Suggested Solutions

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

26 Experts available now in Live!

Get 1:1 Help Now