Solved

Swap DIV's using jQuery?

Posted on 2013-01-03
3
306 Views
Last Modified: 2013-01-03
Hi all and happy new year!

I am trying to change the behaviour of an element on my page when the screen is resized.

I have a left navigation menu that is open at max screen width of say 1200px but when the window is resized below 1200px I would like the left navigation to be closed and only open when hovered (like Amazons menu).

I have both elements setup and ready to go. For the normal navigation I have  a css class of ".dropdown open" and for the closed hover menu I have a css class of ".dropdown"

Is there a way to use jQuery to swap the classes when the window is resized?

I'd appreciate some advice on how to do this please....
0
Comment
Question by:rafique12
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
ID: 38740174
$(window).resize( function () {

var w = $(window).width();

if (w < 1200) {
   $(".dropdown").removeClass("open");
}else{
   $(".dropdown").addClass("open");
}
});

Open in new window

0
 

Author Closing Comment

by:rafique12
ID: 38740389
Thankyou so much. Works perfect!!!
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38740447
:)
0

Featured Post

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

732 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question