Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Maintain Visibility on Mouseout of a DIV

    I'm trying to maintain a display on several divs when displayed. I activate the DIV display by a button. I close/hide the DIV on onmouseout of the DIV. However, when I mouseout at the top of the DIV, I want the DIV to maintain it's block display.

    Here is a piece of the DIV:

    <input type="text" name="displaytheme" value="" onclick="var picker = document.getElementById('PickTheme');readonly="readonly" style="width:379px; border:0px;" id="displaytheme"><span id="event.buttons.theme" name="event.buttons.theme" class="SpanButtonOver" style="background:#C6C3C6; width:16px height:16px" onmouseover="this.className='SpanButtonOver';" onmousedown="this.className='SpanButtonDown';this.childNodes[0].style.left='1px'; this.childNodes[0].style.top='1px';" onmouseout="document.getElementById(this.id + '.img').src='../images/img.combo.gif';this.className='SpanButtonOver';this.childNodes[0].style.left='0px'; this.childNodes[0].style.top='0px';" onmouseup="this.className='SpanButtonOver';this.childNodes[0].style.left='0px';this.childNodes[0].style.top='0px';" onclick="var picker = document.getElementById('PickTheme'); if(picker.style.display=='none'){picker.style.width=this.parentNode.offsetWidth; picker.style.display='block';}else {picker.style.display='none';}"><span style="position:relative;"><NOBR><img id="event.buttons.theme.img" name="event.buttons.theme.img" src="../images/img.combo.gif" border=0 align="absmiddle"></NOBR></span></span>
    </span><span class="SpanButton" onmousedown="this.className='SpanButtonDown'" onmouseup="this.className='SpanButton'" onmouseout="this.className='SpanButton'" onmouseover="this.onclick=ShowHistory">&nbsp;...&nbsp;</span>

    <div id="PickTheme" name="PickTheme" style="position:absolute; overflow:auto; left:0px; top:20px; background:white; border:1px solid black; height:100px; width:250px; display:none;" onmouseout="sclose('PickTheme')">

    <table border="0" cellpadding="0" cellspacing="0" width="100%" onmouseover="sopen('PickTheme')">
    <TR>
    <TD onmouseover="sopen('PickTheme')"><input type="checkbox"></TD>
    <TD onmouseover="sopen('PickTheme')" width="99%">Blue Sky Events<input type=hidden id="" value="Blue Sky Events"></TD>
    </TR>

    ...


    Here are the two functions:
    function sopen(target)
    {
    obj=document.getElementById(target);
    obj.style.display='block';
    }

    function sclose(target)
    {
    obj=document.getElementById(target);
    obj.style.display='none';
    }

    Thank you,

    Warren Murray

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function zxcInit(obj) {
     ars=zxcInit.arguments;
     for (zxc0=0;zxc0<ars.length;zxc0++){
      obj=document.getElementById(ars[zxc0]);
      obj.onmouseover=function(event) { zxcMseDown(event,this);}
     }
    }
    
    function zxcMseDown(event,obj) {
     zxcObj=obj;
    //            Left              Right                                 Top                  Bottom
     zxcObj.pos=[zxcPos(zxcObj)[0],zxcPos(zxcObj)[0]+zxcObj.offsetWidth,zxcPos(zxcObj)[1],zxcPos(zxcObj)[1]+zxcObj.offsetHeight];
     document.onmousemove=function(event){zxcDrag(event);}
    }
    
    function zxcMseUp(event) {
     document.onmousemove=null; zxcDragX=-1;  zxcDragY=-1;
    }
    
    function zxcDrag(event) {
     zxcMse(event);
     zxcCk=false;
    document.Show.Show1.value='MseX = '+zxcMseX;
    document.Show.Show2.value='MseY = '+zxcMseY;
     if (zxcMseX<zxcObj.pos[0]){
      document.Show.Show3.value='ExitLeft';
      zxcCk=true;
     }
     else if (zxcMseX>zxcObj.pos[1]){
      document.Show.Show3.value='ExitRight';
      zxcCk=true;
     }
     else if (zxcMseY<zxcObj.pos[2]){
      document.Show.Show3.value='ExitTop';
      zxcCk=true;
     }
     else if (zxcMseY>zxcObj.pos[3]){
      document.Show.Show3.value='ExitBottom';
      zxcCk=true;
     }
     if (zxcCk){
      document.onmousemove=null;
     }
    }
    
    function zxcMse(event){
     if(!event) var event=window.event;
     if (document.all){ zxcMseX=event.clientX; zxcMseY=event.clientY; }
     else {zxcMseX=event.pageX; zxcMseY=event.pageY; }
    }
    
    function zxcPos(zxc){
     zxcObjLeft = zxc.offsetLeft;
     zxcObjTop = zxc.offsetTop;
     while(zxc.offsetParent!=null){
      zxcObjParent=zxc.offsetParent;
      zxcObjLeft+=zxcObjParent.offsetLeft;
      zxcObjTop+=zxcObjParent.offsetTop;
      zxc=zxcObjParent;
     }
     return [zxcObjLeft,zxcObjTop];
    }
    
    
    //-->
    </script>
    </head>
    
    <body onload="zxcInit('D1','T1','T2','T3','T4');" >
    <div id="D1" style="position:relative;top:100px;left:200px;width:100px;height:50px;background-color:red;" ></div>
    
    <table border="1">
      <tr>
        <td width=50 id="T1">1</td>
        <td width=50  id="T2">2</td>
      </tr>
      <tr>
        <td id="T3">3</td>
        <td id="T4">4</td>
      </tr>
    </table>
    
    <script> vic=0; </script>
    <form name=Show id=Show style="position:absolute;visibility:visible;top:450px;left:0px;" >
    <input size=10 name=Show1 >
    <input size=10 name=Show2 >
    <input size=10 name=Show3 >
    </form>
    </body>
    
    </html>
    Take it you can take it from there

  • #3
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm trying to decrypt it and I'm not doing well at all.

    Warren

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    decrypt?

    if you run the code and mouse over an object you will see the mse coords in the text box

    when you mseout you will see the side of the object the mouse left the obj

    replace the 'document.Show.Show6's with the required calls.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •