How to put page width in if/else condition


#1

I want to put the width of the page as a condition of an if/else statement, I tried a lot, I couldn’t do it…I can’t use @media, I need to use Javascript, just let me know how to do it.


#2

you could have multiply @media queries which check for various width (using min-width and max-width in the media query), and inside each media query write the different css selectors with different widths

using if/else is not possible for css.


#3

I know but thats not what I need it for, I wanted javascript to execute some certain code depending on changing page width, any alternative to do that?


#4

you could add a addEventListener to window which listen for resize.

https://developer.mozilla.org/en-US/docs/Web/Events/resize
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
https://stackoverflow.com/questions/641857/javascript-window-resize-event

read the stackoverflow question properly, and comments. Some good recommendations are make. The first answer uses Jquery, be aware of this. Be really careful with what you are doing here, DOM manipulation with resize directly seems ill advised, what are you planning?


#5

I made a task bar on the top of the website, I hid some of the elements from the page and displayed ‘more’ using @media in case the screen size was reduced and a dropdown using toggleSlide was established so that the hidden elements could be shown, but the problem is that I only want the dropdown menu to show the elements hidden in different smaller screen sizes considering no. of hidden elements varies but uptil now, I’ve only been able to show all of them in the dropdown…I’m using bootstrap in the webpage if that info is of any importance.
This is too big a question, you dont have to explain everything, I’ll check out the addEventListener links you shared


#6

There are so many different ways to solve this. It really depends on the final desired outcome, research your options and familiarize yourself with there pros and cons

the most common solution is to have a full navigation menu, something like this:

http://jsbin.com/tecimureji/edit?output

for larger screens, and they make a hamburger menu for small screens (using media queries), and then do the animation of the hamburger menu with JS/jquery.