Overlapping Content script

[molendijk]

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.

[Arsen]

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.

[molendijk]

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.

[molendijk]

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.

[Arsen]

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?

[molendijk]

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:

var the_width = window.innerWidth;
window.addEventListener('resize', function (){if(window.innerWidth != the_width){location=location}}, false);

[Arsen]

Hello Arie,
There is a problem. This page.
Link 2 was positioned - float: right. 400px width of DD-content - deleted. DD-content - 4 links.

	<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>.

[molendijk]

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

<style>
.the_anchor {white-space: nowrap}
</style>

to the head of your page.

[Arsen]

Thanks, Arie.
It helps. I wanted the same with JavaScript. More or less like this (given the scroll bar):

DDcontent.style.minWidth = DDcontent.offsetWidth + (DDcontent.offsetWidth - DDcontent.clientWidth) + "px";

Add to code. Is it possible?

[molendijk]

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.