JavaScript: Define a distance between two classes

Question

I created a simplified menu bar with an additional widget box. Now I want to define a spacing between both of these classes using JavaScript. The distance between .menu and .widget has to be 100px constantly.

How can I make this possible using JavaScript?

(I do not want to use attributes like padding, margin or top in CSS)

.menu {
  background: black;
  height: 50px;
  width: 100%;
  color:red;
}
.widget {
  background: green;
  height: 100px;
  width: 100px;
  border-radius: 5px;
}

<div class="menu">Menu Bar</div>
<div class="widget">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div>

If you don't use padding, margin or top, I doubt that you will be able to achieve that. — Michael Seltenreich, Jan 04 '16 at 17:23
The reason why I can not do this with CSS is because there are elements between .menu and .widget .. Padding or margin should be ok, but only using JS — Otaku Kyon, Jan 04 '16 at 17:25
What if the height of the elements between `.menu` and `.widget` is 100 or more? Should `.widget` overlap the element? — MinusFour, Jan 04 '16 at 17:28
No. '.widget' should always be 100px beneath '.widget'. So when I scroll down the page, both elements move upwards but never lose their distance of 100px. Also, both classes may be interleaved within multiple divs.. — Otaku Kyon, Jan 04 '16 at 17:37

guysigner · Accepted Answer · 2016-01-04T19:43:18.110

0

if that's the HTML

<div class="menu">Menu Bar</div>
<div class="widget">Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text</div>

you can do something like

var menu = document.getElementsByClassName("menu")[0];
var widget = document.getElementsByClassName("widget")[0];
var difference = widget.offsetTop - menu.offsetBottom ; 
if (difference > 100) {
   widget.style.top = (menu.offsetBottom + 100) + "px";
}

EDIT:

you might also want to check the case where the difference is less than 100, or, to begin with, zero.

if (difference < 100) {
   widget.style.top = (menu.offsetBottom + 100) + "px"; 
}

edited Jan 04 '16 at 19:43

answered Jan 04 '16 at 17:56

guysigner

2,822
1
19
23

I made some code corrections, but still it does not work. Can you tell me if widget.style.top refers to the variable or the class? – Otaku Kyon Jan 04 '16 at 19:28
document.getElementsByClassName("widget") gives you an array (not exactly array but some collection that you can get length from, and can use index [] to refer to its items). – guysigner Jan 04 '16 at 19:31
document.getElementsByClassName("widget") gives you an array (not exactly array but some collection that you can get length from, and can use index [] to refer to its items). So document.getElementsByClassName("widget")[0] gives you the first DOM of the element. It's a reference to the element properties in JavaScript (it's not an exact definition). You can see these properties here: [link]http://www.w3schools.com/jsref/dom_obj_all.asp style is the property that gives you the style property. you have the style.top reference here: [link]http://www.w3schools.com/jsref/prop_style_top.asp – guysigner Jan 04 '16 at 19:37
I edited to deal with the original case where the difference is zero – guysigner Jan 04 '16 at 19:44
I am wondering why it still does not work for my page .. I will give you a checkmark for now, (because I strongly believe, that your approach was correct,) but maybe you can check what's wrong with my page. I modified the code a bit and I'm sure it is easy to understand what I modified. Menu is class "nav-primary" and widget is ID "mw-panel" http://wiki.vocaloid.de/Hauptseite – Otaku Kyon Jan 04 '16 at 20:06
I saw your code. NOTICE: document.getElementsByClassName - elements (with an s), and then you have to take the first element ([0]) with that given class name. Otherwise you have an id and then you have to use document.getElementById (without s) to retrieve your DOM – guysigner Jan 04 '16 at 20:12
Please work with some debugger (for example press F12 in IE or Chrome) to fix all code issues. for example you still have _italic_ **bold** `var widget = document.getElementsByID("mw-panel")[0];` somewhere. I wish you luck, Sir. – guysigner Jan 04 '16 at 20:24

JavaScript: Define a distance between two classes

1 Answers1

Linked