7

I'm currently using a js/jq resize event to apply a css rule to a horizontal menu (of variable width) when it becomes too large for the screen. The menu however wraps momentarily before the new rule is applied.

Ideally I'd like to measure the menu width and change the break point of a media query! 

@media screen and (min-width: THIS-VALUE){
    New Rules
}

Is this possible??

Thanks in advance.

Chris GW Green

nickhar
  • 19,981
  • 12
  • 60
  • 73
Chris GW Green
  • 1,145
  • 9
  • 17

3 Answers3

4

You can create a media query rule programatically - activated by measuring the width of your menu (using js/jQuery):

  document.querySelector('style').textContent +=
     "@media screen and (min-width:400px) { div { color: red; }}"

Media queries aren't designed to activate on the changing width of an element within a page or screen though - more by changes to the viewport/window itself and other factors. (A full list can be found here)

You've not posted your menu code so it's hard to understand the 'wrapping' you're experiencing, but if your horizontal menu is going 'off screen', then you might be better off setting the menu as a percentage(%) width of viewport and using a series of media queries that re-draw the menu and change/remove child elements etc at certain screen widths.

nickhar
  • 19,981
  • 12
  • 60
  • 73
0

Try meta tags, instead of media queries. In meta tag you can use also the min-width property.

As if meta is a html tag you can then change the value how you like it:

var element = document.getElementByTagName('meta')[0];

element.setAttribute('content','Value');

Example use of meta tag

David Fariña
  • 1,536
  • 1
  • 18
  • 28
  • Thanks David, but I'm not trying to change the viewport of the site. I'm trying to make the page responsive using css media queries. I'm just wondering if it's possible to dynamically change the break point. – Chris GW Green Apr 18 '13 at 11:19
  • 1
    its even what your trying to achieve. Anyway you shouldnt use media queries due to performance reasons. Look at this site i think its what you want: [link](http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/) – David Fariña Apr 18 '13 at 11:27
0

You can accomplish this with matchMedia.

I gave a usage example in this answer.

I assume you only need to measure the menu width once. This solution should accommodate that easily.

grandinero
  • 1,155
  • 11
  • 18