Overlapping Content script

**molendijk** · 09-18-2019, 12:06 PM

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

**molendijk** · 09-18-2019, 06:05 PM

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.

**molendijk** · 09-18-2019, 08:04 PM

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.

**Arsen** · 09-19-2019, 10:25 AM

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

**molendijk** · 09-19-2019, 12:07 PM

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.

**Arsen** · 09-20-2019, 08:19 AM

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?

**molendijk** · 09-20-2019, 01:53 PM

Originally Posted by Arsen

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.

Originally Posted by Arsen

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

Ask your question please.

**Arsen** · 09-20-2019, 03:27 PM

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.

**molendijk** · 09-20-2019, 06:30 PM

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.

**Arsen** · 09-20-2019, 10:27 PM

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