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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Location
    Spain
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Need help with Toggle Visibility

    I had some help last week with a brands a to z list which shows a div containing list of brands starting with the relevant letter onclick.

    It works pretty well with one flaw. The brand links within the div seem to activate the toggle function. My wish is that the layer is shown when a letter is clicked but then hides on div onMouseOut so that a different letter can be selected.

    Here is by code;

    Javascript;
    Code:
    function toggle_visibility(o,id) {
     var obj = document.getElementById(id);
     obj.style.display=(obj.style.display == 'block')?'none':'block';
     if (obj.style.display!='none') {
     obj.style.left=zxcPos(o)[0]+20+'px';
     obj.style.top=zxcPos(o)[1]+20+'px';}
    }
    
    function zxcPos(obj){
     var rtn=[0,0];
     while(obj){
      rtn[0]+=obj.offsetLeft;
      rtn[1]+=obj.offsetTop;
      obj=obj.offsetParent;
     }
     return rtn;
    }
    Here is a sample of my a to z table;
    Code:
    <table width="100%" border="0" cellspacing="2" cellpadding="2">
    <tr>
    <td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename20');">U</a></td>
    
    <td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename21');">V</a></td>
    
    <td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename22');">W</a></td>
    
    <td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename23');">X</a></td>
    </tr>
    <tr>
    <td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename24');">Y</a></td>
    
    <td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename25');">Z</a></td>
            
    </tr></table>
    And here is an example of the Brand name div ;
    Code:
    <div id="uniquename21" onMouseOut="toggle_visibility('null','uniquename21');" style="display:none; position:absolute; border-style: solid;  background-color: white;  padding: 5px;">
    <a href="Manufacturer-view.asp?ManID=43">VPX</a><br>
    <a href="Manufacturer-view.asp?ManID=44">Vyomax</a>
    </div>
    You can view the site on my test page;
    http://www.dp-development.co.uk/ProteinStop/site/

    (Brand menu on the left nav)

    Thank you for any help you can give
    Last edited by Dannyj6; 12-11-2009 at 11:59 AM. Reason: Extra info

  • #2
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    My wish is that the layer is shown when a letter is clicked but then hides on div onMouseOut so that a different letter can be selected
    That's what does happen. The mouseout event doesn't occur because the cursor isn't over the div already when it appears, but if you mouseover, then mouseout, it does exactly what you're talking about.

    Unless I misunderstand completely, you could just take a few px off the top and left of the div, and the mouse will be over it by default.

    Edit - I see you already add 20px to make it look better. To keep the effect, the div could be within a transparent container (to which the mouseout event would be attached) with some padding.
    Last edited by gusblake; 12-11-2009 at 12:43 PM.

  • Users who have thanked gusblake for this post:

    Dannyj6 (12-11-2009)

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    var Lst=false;
    
    function toggle_visibility(o,id) {
     var obj = document.getElementById(id);
     if (Lst&&Lst!=obj){
      Lst.style.display='none';
     }
     Lst=obj;
     obj.style.display=(obj.style.display == 'block')?'none':'block';
     if (obj.style.display!='none') {
      obj.style.left=zxcPos(o)[0]+20+'px';
      obj.style.top=zxcPos(o)[1]+20+'px';
     }
    }
    
    function zxcPos(obj){
     var rtn=[0,0];
     while(obj){
      rtn[0]+=obj.offsetLeft;
      rtn[1]+=obj.offsetTop;
      obj=obj.offsetParent;
     }
     return rtn;
    }
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    Dannyj6 (12-11-2009)

  • #4
    New to the CF scene
    Join Date
    Nov 2009
    Location
    Spain
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you Vic... This has made it function a little better although something strange still occurs when you hover the links. Please see the live page at;

    http://www.dp-development.co.uk/ProteinStop/site

    It seems to me to hide and show the div.

    Again thank you for you help so far.

    Dan

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    I can not see any 'strange things' on mouseover

    but best to add return to link calls

    Code:
    <a href="#" onclick="return toggle_visibility(this,'uniquename0');">A</a>
    and add a return false to the function

    Code:
    var Lst=false;
    
    function toggle_visibility(o,id) {
     var obj = document.getElementById(id);
     if (Lst&&Lst!=obj){
      Lst.style.display='none';
     }
     Lst=obj;
     obj.style.display=(obj.style.display == 'block')?'none':'block';
     if (obj.style.display!='none') {
      obj.style.left=zxcPos(o)[0]+20+'px';
      obj.style.top=zxcPos(o)[1]+20+'px';
     }
     return false;
    }
    
    function zxcPos(obj){
     var rtn=[0,0];
     while(obj){
      rtn[0]+=obj.offsetLeft;
      rtn[1]+=obj.offsetTop;
      obj=obj.offsetParent;
     }
     return rtn;
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Tags for this Thread

    Posting Permissions

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