Results 1 to 8 of 8

Thread: Overlapping Content script

  1. #1
    Join Date
    Aug 2019
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Overlapping Content script

    1) Script Title: Drop down/ Overlapping Content script

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm
    This is an early version of the script.

    3) Describe problem: How to supplement the script so that the menu is hidden by a click outside it?

    Usage example jsfiddle
    Thanks.

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,839
    Thanks
    49
    Thanked 247 Times in 239 Posts
    Blog Entries
    56

    Default

    In the head:
    Code:
    <script type="text/javascript">
    
    /***********************************************
    * Drop Down/ Overlapping Content-  Dynamic Drive (www.dynamicdrive.com)
    * This notice must stay intact for legal use.
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    function getposOffset(overlay, offsettype){
    var totaloffset=(offsettype=="left")? overlay.offsetLeft : overlay.offsetTop;
    var parentEl=overlay.offsetParent;
    while (parentEl!=null){
    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
    parentEl=parentEl.offsetParent;
    }
    return totaloffset;
    }
    
    function overlay(curobj, subobjstr, opt_position){
    if (document.getElementById){
    var subobj=document.getElementById(subobjstr)
    
    subobj.style.visibility=(subobj.style.visibility!="visible")? "visible" : "hidden"
    var xpos=getposOffset(curobj, "left")+((typeof opt_position!="undefined" && opt_position.indexOf("right")!=-1)? -(subobj.offsetWidth-curobj.offsetWidth) : 0) 
    var ypos=getposOffset(curobj, "top")+((typeof opt_position!="undefined" && opt_position.indexOf("bottom")!=-1)? curobj.offsetHeight : 0)
    subobj.style.left=xpos+"px"
    subobj.style.top=ypos+"px"
    return false
    }
    else
    return true
    }
    
    function overlayclose(subobj){
    document.getElementById(subobj).style.visibility="hidden"
    
    }
    
    </script>
    
    <script>
    window.onmousedown=function(e){
    if(e.target.className!=='must_be_closed_from_outside')
    {
    overlayclose('subcontent');
    overlayclose('subcontent2');
    }
    }
    </script>
    In the body:
    Code:
    <b><a href="search.htm" onclick="return overlay(this, 'subcontent')">Search DD</a></b><br/>
    
    <!--Do not remove outer most DIV tag with id="subcontent"-->
    
    <div class="must_be_closed_from_outside"  id="subcontent" style="position:absolute; border: 9px solid orange; background-color: white; width: 300px; padding: 8px; visibility: hidden" >
    
    <p><b>Search Dynamic Drive:</b></p>
    <form method="get" action="https://web.archive.org/web/20061008122920/http://search.freefind.com/find.html" id="topform">
    <input type="HIDDEN" name="id" size="-1" value="6299074"/>
    <input type="HIDDEN" name="pageid" size="-1" value="r"/>
    <input type="HIDDEN" name="mode" size="-1" value="ALL"/>
    <input type="HIDDEN" name="n" value="0">
    <input name="query" maxlength="255" style="width: 150px; " id="topsearchbox" alt="Search"/ > 
    <input value="Search" class="topformbutton" type="submit"/ >
    </form>
    
    </div>
    
    
    <p style="padding-left: 800px"><b><a href="search.htm" onclick="return overlay(this, 'subcontent2', 'rightbottom')">Show Content</a></b><br/></p>
    
    <!--Do not remove outer most DIV tag with id="subcontent2"-->
    <div class="must_be_closed_from_outside" id="subcontent2" style="position:absolute; visibility: hidden; border: 9px solid black; background-color: lightyellow; width: 400px; height: 400px; padding: 8px">
    
    Some content. Some content.
    
    </div>

  3. #3
    Join Date
    Aug 2019
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the help!
    But there are 2 questions.

    1. When you try to place the cursor in the Search DD input field, the layer immediately closes.

    2. If there are more hidden layers, then each time you need to edit the script?
    Adding overlayclose('subcontent3'); overlayclose('subcontent4');..5,6,...
    How to avoid this?

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,839
    Thanks
    49
    Thanked 247 Times in 239 Posts
    Blog Entries
    56

    Default

    You can probably solve the two problems you mentioned by replacing the code I gave you with the following:
    Code:
    <head>
    
    <script type="text/javascript">
    
    /***********************************************
    * Drop Down/ Overlapping Content-  Dynamic Drive (www.dynamicdrive.com)
    * This notice must stay intact for legal use.
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    function getposOffset(overlay, offsettype){
    var totaloffset=(offsettype=="left")? overlay.offsetLeft : overlay.offsetTop;
    var parentEl=overlay.offsetParent;
    while (parentEl!=null){
    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
    parentEl=parentEl.offsetParent;
    }
    return totaloffset;
    }
    
    function overlay(curobj, subobjstr, opt_position){
    if (document.getElementById){
    var subobj=document.getElementById(subobjstr)
    
    subobj.style.visibility=(subobj.style.visibility!="visible")? "visible" : "hidden"
    var xpos=getposOffset(curobj, "left")+((typeof opt_position!="undefined" && opt_position.indexOf("right")!=-1)? -(subobj.offsetWidth-curobj.offsetWidth) : 0) 
    var ypos=getposOffset(curobj, "top")+((typeof opt_position!="undefined" && opt_position.indexOf("bottom")!=-1)? curobj.offsetHeight : 0)
    subobj.style.left=xpos+"px"
    subobj.style.top=ypos+"px"
    return false
    }
    else
    return true
    }
    
    function overlayclose(subobj){
    document.getElementById(subobj).style.visibility="hidden"
    
    }
    
    
    </script>
    
    <script>
    window.onmousedown=function(e){
    document.documentElement.className="the_document";
    document.body.className="the_document";
    if(e.target.className=='the_document')
    {
    for (i = 0; i < document.getElementsByClassName("must_be_closed_from_outside").length; i++) 
    {
    document.getElementsByClassName("must_be_closed_from_outside")[i].style.visibility='hidden'
    }
    }
    }
    </script>
    
    </head>
    
    <body >
    
    <b><a href="search.htm" onclick="return overlay(this, 'subcontent')">Search DD</a></b><br/>
    
    <!--Do not remove outer most DIV tag with id="subcontent"-->
    
    <div class="must_be_closed_from_outside"  id="subcontent" style="position:absolute; border: 9px solid orange; background-color: white; width: 300px; padding: 8px; visibility: hidden" >
    
    <p><b>Search Dynamic Drive:</b></p>
    <form method="get" action="https://web.archive.org/web/20061008122920/http://search.freefind.com/find.html" id="topform">
    <input type="HIDDEN" name="id" size="-1" value="6299074"/>
    <input type="HIDDEN" name="pageid" size="-1" value="r"/>
    <input type="HIDDEN" name="mode" size="-1" value="ALL"/>
    <input type="HIDDEN" name="n" value="0">
    <input name="query" maxlength="255" style="width: 150px; " id="topsearchbox" alt="Search"/ > 
    <input value="Search" class="topformbutton" type="submit"/ >
    </form>
    
    </div>
    
    
    <p style="padding-left: 800px; "><b><a href="search.htm" onclick="return overlay(this, 'subcontent2', 'rightbottom')">Show Content</a></b><br/></p>
    
    <!--Do not remove outer most DIV tag with id="subcontent2"-->
    <div class="must_be_closed_from_outside" id="subcontent2" style="position:absolute; visibility: hidden; border: 9px solid black; background-color: lightyellow; width: 400px; height: 400px; padding: 8px">
    
    Some content. Some content.
    
    </div>
    
    </body>

  5. The Following 2 Users Say Thank You to molendijk For This Useful Post:

    Arsen (08-14-2019),james438 (08-14-2019)

  6. #5
    Join Date
    Aug 2019
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thank you very much, kind man!
    Everything works perfectly!

  7. #6
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,839
    Thanks
    49
    Thanked 247 Times in 239 Posts
    Blog Entries
    56

    Default

    Today I was rethinking the script I posted a couple of days ago and it suddenly occurred to me that I had not examined cases where the target of the click event used for closing several opened elements at the same time is a tagged element (<a> ... </a>, <div> ... </div> etc.), not just raw text. Here's the relevant part of the script I proposed:
    Code:
    window.onmousedown=function(e){
    document.documentElement.className="the_document";
    document.body.className="the_document";
    if(e.target.className=='the_document')
    {
    for (i = 0; i < document.getElementsByClassName("must_be_closed_from_outside").length; i++) 
    {
    document.getElementsByClassName("must_be_closed_from_outside")[i].style.visibility='hidden'
    }
    }
    }
    As it turns out, this code does not work for tagged elements. So I completely revised the script, see this. You will notice that opened elements not only hide after a click on raw text (the 'Lorem Ipsum' part) but also after a click on the tagged page's title (Closing all opened elements with one click). Moreover, the new script deals with a strange bug(?) on the iPhone / iPad.

  8. The Following User Says Thank You to molendijk For This Useful Post:

    Arsen (Yesterday)

  9. #7
    Join Date
    Aug 2019
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Arie, thank you very much for noticing this!
    The code has been updated a lot. 2 points.

    1. I would like to keep the drop down content binding to the link. That also the parameters worked: 'right', 'bottom', 'rightbottom', 'leftbottom', 'lefttop', 'righttop'.
    2. The new code does not work in IE 11.0
    Last edited by Arsen; Yesterday at 09:52 AM.

  10. #8
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,839
    Thanks
    49
    Thanked 247 Times in 239 Posts
    Blog Entries
    56

    Default

    Hello Arsen,
    I'm very busy at the moment. I'll come back to you as soon as I can.

Similar Threads

  1. Drop Down/Overlapping content script content disappears!
    By t_catt11 in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 05-22-2012, 02:51 PM
  2. Overlapping Content script
    By miketech99 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 08-28-2008, 11:32 PM
  3. Overlapping content script is shifting content around it...maddening!
    By AshleyQuick in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 10-09-2007, 03:47 AM
  4. Overlapping Content Script
    By webmistressk in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 01-13-2007, 04:30 AM

Bookmarks

Posting Permissions

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