Page 3 of 3 FirstFirst 123
Results 21 to 30 of 30

Thread: Overlapping Content script

  1. #21
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,865
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

    Default

    As soon as I've got some time, I'll come up though with a solution that handles the width-issue for the dropdowns.

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

    Arsen (09-18-2019)

  3. #22
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,865
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

    Default

    Hi Arsen,

    I've completely revised the script, see this. (Refresh the page if you have been there before).

    The script is much more solid now. As far as I can see, there's no width-problem anymore.

    If you have any questions, please ask me.

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

    Arsen (09-19-2019)

  5. #23
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,865
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

    Default

    I noticed that the revised script (post #22) doesn't work well with Chrome for Android, so I made some final(?) changes. If you use the link given in my previous post, please refresh the page to be sure.

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

    Arsen (09-19-2019)

  7. #24
    Join Date
    Aug 2019
    Posts
    13
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    Thanks, Arie!
    I see big changes in the code.. Interesting.
    Yes, of course, there are questions.

    - Have you completely changed the positioning method due to the width problem? Therefore, for each positioning point a separate function? Not very bulky?

    - Why document.body.lineHeight and not document.getElementById(anchor).offsetHeight ?

    - CSS style white-space: nowrap - helps, but not in the class .the_anchor, but in the class of DD-content .closeable_from_outside

  8. #25
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,865
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

    Default

    No, I have not changed the positioning method due to the width problem only. There were also other problems with my previous script, among which sudden unwanted position changes for certain dropdowns occurring when an anchor link for other dropdowns was clicked on.

    In the new script, I use four different functions that don't have arguments for positioning the dropdowns (like 'bottom-right', top_left' etc. ) instead of one single function that does have these arguments, because the latter method turned out to be less safe than the former one while not being less costly (in terms of the number of required javascript lines). Moreover, a coder who is only interested in 'bottom-right', for instance, can safely throw away functions open_element_bottom_left(which, anchor), open_element_top_right(which, anchor) and open_element_top_left(which, anchor) while just retaining open_element_bottom_right(which, anchor).
    EDIT:
    I managed to use one single function with arguments for positioning the dropdowns (like 'bottom-right', top_left' etc. ) that is as safe as the one using different functions for different positions of the dropdowns, see this.


    document.getElementById(anchor).offsetHeight is also possible, but document.body.lineHeight produces a nicer effect for pages having a large line-height.

    As for white-space: nowrap, it does work for the class .the_anchor. Make the text for the anchors very large and you'll see what I mean. You should not use it for the class .closeable_from_outside because that will make certain lines inside the dropdowns wider than the dropdowns themselves in certain cases.
    Last edited by molendijk; 09-19-2019 at 10:54 PM.

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

    Arsen (09-20-2019)

  10. #26
    Join Date
    Aug 2019
    Posts
    13
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the explanation. Your script got better.

    ..nowrap.. because that will make certain lines inside the dropdowns wider..
    Yes. But it helps when nowrap is used in conjunction with <br />

    I have a question about positioning in the original script. Take to consideration?

  11. #27
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,865
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

    Default

    Quote Originally Posted by Arsen View Post
    Yes. But it helps when nowrap is used in conjunction with <br />
    Be careful though. A break that looks good on your screen may look ugly on a screen that's wider or narrower than yours.

    Quote Originally Posted by Arsen View Post
    I have a question about positioning in the original script. Take to consideration?
    Ask your question please.

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

    Arsen (09-20-2019)

  13. #28
    Join Date
    Aug 2019
    Posts
    13
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    I would like the original script to work with four positions.
    This extra line for working top positions:
    Code:
    var ypos=getposOffset(curobj, "top")-((typeof opt_position!="undefined" && opt_position.indexOf("top")!=-1)? subobj.offsetHeight : 0)
    How to enter this line in the script so that all 4 positions work depending on the argument in the link.

  14. #29
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,865
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

    Default

    Arsen that line can't be entered into the original DD-script just like that. What you want would require a whole lot of changes in the script.
    What you could do is use the code below, which is an exact emulation of the DD-script:
    Code:
    <!doctype html>
    <html>
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>No title</title>
    
    <style>
    /* Not required */
    body {font-family: arial; font-size: 20px; padding: 10%; padding-top: 15px; padding-bottom: 15px; line-height: 30px}
    </style>
    
    <script>
    function open_element(which, pos, anchor)
    {
    var d = document.getElementById(which);
    if(d.style.display!='block')
    {
    d.style.display='block';
    if (pos == 'bottom_right')
    {
    d.style.left=document.getElementById(anchor).offsetLeft  +'px';
    d.style.top=document.getElementById(anchor).offsetTop  + document.body.lineHeight + 5 + 'px';
    }
    if (pos == 'bottom_left')
    {
    d.style.left=document.getElementById(anchor).offsetLeft - d.offsetWidth + document.getElementById(anchor).offsetWidth + 'px';
    d.style.top=document.getElementById(anchor).offsetTop  + document.body.lineHeight + 5 + 'px';
    }
    if (pos == 'top_right')
    {
    d.style.left=document.getElementById(anchor).offsetLeft  +'px';
    d.style.top=document.getElementById(anchor).offsetTop  + document.body.lineHeight + 5 + 'px';
    d.style.marginTop= -(d.offsetHeight + document.getElementById(anchor).offsetHeight )  -  5 + 'px';
    }
    if (pos == 'top_left')
    {
    d.style.left=document.getElementById(anchor).offsetLeft - d.offsetWidth + document.getElementById(anchor).offsetWidth + 'px';
    d.style.top=document.getElementById(anchor).offsetTop  + document.body.lineHeight + 5 + 'px';
    d.style.marginTop= -(d.offsetHeight + document.getElementById(anchor).offsetHeight )  -  5 + 'px';
    }
    }
    else d.style.display='none'
    }
    function close_element(which_element)
    {
    document.getElementById(which_element).style.display='none';
    }
    </script>
    
    </head>
    
    <body >
    
    <h3 style="text-align: center; margin-bottom: 40px">Tweakig the original DD-script</h3>
    
    Lorem Ipsum is simply  dummy text
    
    <b><a class="the_anchor" id="subcontent_anchor"  href="javascript: void(0)" onclick="open_element('subcontent', 'bottom_right',  this.id);   return false">Link 1</a></b>
    <div id="subcontent" style="position:absolute; border: 9px solid orange; background-color: white; width: 300px; padding: 8px; display:none" >
    <b>bottom right</b><hr>
    <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 style="font-size: 16px; font-weight: bold; float: right"><a href="javascript: void(0)" onclick="close_element('subcontent'); return false">Close</a></div>
    </div>
    
     of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing  software like Aldus PageMaker 
    
    <b><a class="the_anchor" id="subcontent_anchor2" href="javascript: void(0)" onclick="open_element('subcontent2', 'bottom_left', this.id);  return false" >Link 2</a></b> 
    <div id="subcontent2" style="position:absolute; display:none; border: 9px solid black; background-color: lightyellow; width: 400px; height: 400px; padding: 8px; font-size: 18px">
    <b>bottom left</b>.<hr>
    Some content. Some content.<br>
    <div style="font-size: 16px; font-weight: bold; float: right"><a href="javascript: void(0)" onclick="close_element('subcontent2'); return false">Close</a></div>
    </div>
    
     including versions of Lorem Ipsum. 
    <br><br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    
    <br><br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, 
    
    <b><a class="the_anchor"  id="subcontent_anchor3"  href="javascript: void(0)" onclick="open_element('subcontent3', 'top_right', this.id); return false" >Link 3</a></b>
    <div id="subcontent3" style="position:absolute; display:none; border: 1px solid black; background-color: white; width: 400px; height: auto; padding: 8px; font-size: 18px" >
    <b>top right</b>.<hr>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.<br>
    <div style="font-size: 16px; font-weight: bold; float: right"><a href="javascript: void(0)" onclick="close_element('subcontent3'); return false">Close</a></div>
    </div>  
    
    but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release  of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including  
    
    <b><a id="subcontent_anchor4"  href="javascript: void(0)" onclick="open_element('subcontent4', 'top_left', this.id); return false" class="the_anchor" >Link 4</a></b>
    <div id="subcontent4" style="position:absolute; display:none; border: 1px solid black; background-color: white; width: 400px; height: auto; padding: 8px; font-size: 18px" >
    <b>top left</b>.<hr>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br>
    <div style="font-size: 16px; font-weight: bold; float: right"><a href="javascript: void(0)" onclick="close_element('subcontent4'); return false">Close</a></div>
    </div> 
    
    Ipsum. 
    
    </body>
    
    </html>
    But remember, this emulation (and the original DD-script for that matter) cannot be used on modern mobile devices. The user would be forced to constantly swipe from left to right and from right to left to see on the screen what he / she wants to see.

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

    Arsen (09-20-2019)

  16. #30
    Join Date
    Aug 2019
    Posts
    13
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    ..that line can't be entered into the original DD-script just like that..
    Thanks, Arie. In the beginning I tried for a long time to add a line, but it did not work. Therefore, it was interesting from the technical point of view, maybe or not.

    ..cannot be used on modern mobile devices..
    Yes, I agree.

    Than the original script is still good:
    - arbitrary arrangement of dd-content in the html part of the page;
    - opening/closing by clicking on the link;
    - cross-browser compatibility.

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
  •