1

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 :(

illusion466
  • 339
  • 2
  • 4
  • 12
  • I think it look nicer to simply put the submenu options below the main options, instead of to the right/left. – Tatermelon Apr 16 '15 at 03:05

4 Answers4

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.

Ram
  • 143,282
  • 16
  • 168
  • 197
  • This seems to work for returning the left value. But is there like a setProperty function that I can use to modify it? – illusion466 Apr 16 '15 at 03:21
1

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.

JBzd
  • 715
  • 3
  • 12
1

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";
Community
  • 1
  • 1
Masood Alam
  • 645
  • 2
  • 8
  • 22
  • These are the strategies that i've been trying to employ. Unfortunately, they too seem unable to access the property that I need. The var elementObj = document.querySelector(".horizonMenu").left - Should return the left property of the horizontal menu (now a class) - But instead it returns "undefined" – illusion466 Apr 16 '15 at 03:38
1

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 :)

Ram
  • 143,282
  • 16
  • 168
  • 197
illusion466
  • 339
  • 2
  • 4
  • 12
  • I also don't have enough reputation to set this as the answer, nor hand out any upvotes to the people who've helped me. Sorry guys :( – illusion466 Apr 16 '15 at 03:54