Solved

Help combining two Scripts

Posted on 2004-03-24
3
488 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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

816 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

8 Experts available now in Live!

Get 1:1 Help Now