Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 30

Thread: Overlapping Content script

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

    Default

    Hi Arsen,
    There seems to have been a misunderstaniding that must be clarified.
    1. My script works by click.
    2. My dropdowns bind to any link on the page.
    3. The position of my dropdowns can be customized (I used css for that, but there's a javascript option, see below).
    4. My js isn't that heavy.
    5. It is true that my script doesn't work with Internet Explorer (it works with Edge), but that's because of a requirement that was not met by the old DD-script ('hide all opened dropdowns in one click').
    6. My own version of the DD-code you mention has been in my script(s) all the time.

    Anyhow, this thing is beginning to interest me. I made a new script that produces what you showed in your PNG, see this.
    Usage:
    onclick="open_element('dropdown ID', 'right_of_link_bottom')"
    onclick="open_element('dropdown ID', 'left_of_link_bottom')"
    onclick="open_element('dropdown ID', 'right_of_link_top')"
    onclick="open_element('dropdown ID', 'left_of_link_top')"

    The only (important!) thing that must be achieved yet is to make it so that the dropdowns will not be partially cut off when small mobile devices are used. I can easily do it with CSS3 media queries, but you probably want to do it with javascript.

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

    Arsen (08-26-2019)

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

    Default

    Hi, Arie.
    Thanks for the help! Your new script also implements these 5 points, but not as much as we would like.

    I clarify your points:
    1. Not like the original. In your script, a second click on the link does not close the dropdown content. For IE, there remains one option for closing - a cross.
    2. Yes.
    3. Not like the original. It is necessary so. In your script, the right positioning above and below is not accurate (screenshot).
    Update: I see that you have already fixed this moment.

    Another disadvantage is that the drop-down content in the body of the page should be located strictly next to the links.
    If, for example, drop-down content before </ body>, then the positioning is violated.

    4. Yes.
    5. If in IE it is not possible to make a general close with one click, then a simple close one at a time is better.
    6. Yes.

    Media Requests ccs3 for mobile devices let them be, they do not interfere.
    p.s. And it would be great if you could implement new additional functions in the original DD script.

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

    Default

    Hi Arsen,
    I already corrected the error you mention in (3). You must have seen the first version of my page. Please go to http://mesdomaines.nu/arsen.html again. I'll take a look at your other remarks soon.

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

    Arsen (08-26-2019)

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

    Default

    Hello again Arsen,

    I managed to let javascript make sure that the dropdowns are always entirely visible, whatever the width of the screen, see http://mesdomaines.nu/arsen2.html.

    As for your requirement regarding the second click on the link, it can't be done if we want the script to allow us to close all opened elements with one click. I'll explain. A click on any part P of the screen outside the opened dropdowns must close them all, except when the target of the click is a link. If we would not make this exception for the links, then a click on them would never open a hidden element since the links are part of P. The reason why toggling between visible and hidden is possible with the old DD-script is that this script doesn't require what we want.

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

    Arsen (08-28-2019)

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

    Default

    Hello again Arie,

    ..dropdowns are always entirely visible, whatever the width of the screen..
    Yes, this is a good addition. Thank you.

    ..second click on the link, it can't be done if we want the script to allow us to close all opened elements with one click. I'll explain..
    Understand. Another reason to remove this add-on. This is convenient, but not necessary. In practice, you rarely need to open in turn a lot of hidden elements, and then close them with one click. Let a click outside an area close only one open dd-content. And for IE there will be a plus. And let it be possible to close open dd-content with a second click on the link.

    It is also necessary that the positioning of hidden elements does not depend on the position in the body of the page. Like in the original DD-script.

    I also noticed that when changing the width of the browser window, the page reloads. Is it possible to avoid?
    Last edited by Arsen; 08-28-2019 at 09:02 AM.

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

    Default

    Quote Originally Posted by Arsen View Post
    I also noticed that when changing the width of the browser window, the page reloads. Is it possible to avoid?
    Sure, just remove or comment these lines:
    Code:
    var the_width = window.innerWidth;
    window.addEventListener('resize', function (){if(window.innerWidth != the_width){location=location}}, false);

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

    Arsen (08-29-2019)

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

    Default

    Hello Arie,
    There is a problem. This page.
    Link 2 was positioned - float: right. 400px width of DD-content - deleted. DD-content - 4 links.
    HTML Code:
    	<a href="">Here is some link text 1</a><br>
    	<a href="">Some link text 2</a><br>
    	<a href="">Here is some link text 3</a><br>
    	<a href="">Some link text 4</a>
    Links with long text wrap over 2 lines.

    How to make width by content? (JavaScript methods). Line breaks only where there are tags < br>.
    Last edited by Arsen; 09-15-2019 at 01:56 PM.

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

    Default

    Hi Arsen,
    I'm not sure I understand well what your are asking.
    If you don't want the links to wrap to two lines, just add
    Code:
    <style>
    .the_anchor {white-space: nowrap}
    </style>
    to the head of your page.
    Last edited by molendijk; 09-16-2019 at 12:16 PM.

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

    Arsen (09-17-2019)

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

    Default

    Thanks, Arie.
    It helps. I wanted the same with JavaScript. More or less like this (given the scroll bar):
    Code:
    DDcontent.style.minWidth = DDcontent.offsetWidth + (DDcontent.offsetWidth - DDcontent.clientWidth) + "px";
    Add to code. Is it possible?

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

    Default

    Setting a min-width for the dropdowns is not advisable since it might result in part of the dropdowns being invisible in certain situations.
    The original DD-script didn't have this problem because it allowed a horizontal scrollbar for cases where (part of) the dropdown was out of view.

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

    Arsen (09-17-2019)

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
  •