Set CSS Left property of UL using Javascript

Question

So i'm trying to make my schools navigation bar a little bit more mobile friendly. If you navigate to www.jpc.wa.edu.au on a mobile device, and click on the menu item "Resources" - A drop down menu opens up with two options. Mousing over these with a desktop computer gives you another menu to the right of the first. This works fine on a large screen. However, anything that has a resolution lower than roughly 1460px, such as most tablets, phones, or even laptops, the new menu gets cut off and you have to pan the window left to view it. I would like to avoid this problem completely by simply positioning the second submenu to the left of the first submenu on smaller screens. Determining screen size I can do.

if(window.innerWidth<1460)

Works perfectly fine. The problem i'm having is that I can't seem to access the second submenus left property to modify the menus position from my javascript

In my CSS, I set it by using the following selector

#horizonMenu

But when I try to use this selector in Javascript using

document.querySelector("#horizonMenu").style.left

But that doesn't seem to return any values.

What am I doing wrong guys? Or should I just take a whole different strategy to fixing this problem?

Edit: I've now changed horizonMenu to a class. Alas, my problem seems to persist :(

Answer 1

style property is the representation of the style attribute. Since you are setting the CSS property in your CSS file, the left property returns an empty string. Also properties of the style object do not show the computed values. For getting the computed value you should use window.getComputedStyle() function.

window.getComputedStyle(document.querySelector("#horizonMenu"), null)
      .getPropertyValue('left')

For setting the property value you can code:

document.querySelector("#horizonMenu").style.left = '...';

Note that you can consider using CSS media queries instead of using JavaScript.

Answer 2

The problem is that you have multiple elements with the ID horizonMenu. You should only have a single element with a given ID. When you query #horizonMenu, it is returning the Community -> Pastoral Care menu, which does not have a left value. You should use classes instead, as you can have multiple elements share a class, or change the id to something unique so you can access what you intend to access.

Answer 3

Take a look at the following links

Change an element's class with JavaScript and http://www.kirupa.com/html5/setting_css_styles_using_javascript.htm

Also please check the position attribute for the elements, see below example: https://jsfiddle.net/masoodalam78/e3erq6j4/

var elementObj = document.querySelector("#menu");
elementObj.style.backgroundColor = "blue";
elementObj.left = "200px";

Answer 4

Okay. so it may have been a combination of a few things.

1. I followed JBzd's advice to change the menu to a class.

2. I also stopped using querySelector() and instead am using querySelectorAll() - storing what's returned as a variable and accessing the correct menus by using varaible[1] and variable[2]

3. I am now able to access the left property of the menu by using

    variable[x].style.left = '162px' 

Thanks for all the help everyone :)