Solved

Hiding and showing DIVs at different screen sizes using jQuery

Posted on 2013-01-09
13
484 Views
Last Modified: 2013-01-10
Hi experts,

I'm trying to hide/show different elements at different screen sizes using jQuery. I am very new to jQuery and responsive design but have managed to hide and show elements using this code:

jQuery(window).resize( function () {

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

if (w <= 1200) {
   jQuery("#left").removeClass("open");
   jQuery("#nav-vertical").removeClass("left-nav-vertical");
}else{
	
   jQuery("#left").addClass("open");
   jQuery("#nav-vertical").addClass("left-nav-vertical");
}
if (w <= 980) {
   jQuery("#clock").removeClass("block well-subscribe");
   jQuery("#curTime").removeClass("clock");
   jQuery("#dlinks").removeClass();
}else{
   jQuery("#clock").addClass("block well-subscribe");
   jQuery("#curTime").addClass("clock");
   jQuery("#dlinks").addClass();

}
if (w <= 980) {
   jQuery("#content").removeClass("span7");
}else{
   jQuery("#content").addClass("span7");

}
});

Open in new window


The problem is if the screen is resized the elements disappear but if the page is refreshed they show again!

I tried to change the code to use .hide instead of remove class

jQuery(document).ready(function () {

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

if (w <= 1200) {
   jQuery("#left").hide("open");
   jQuery("#nav-vertical").hide("left-nav-vertical");
}else{

   jQuery("#left").show("open");
   jQuery("#nav-vertical").show("left-nav-vertical");

}
if (w <= 980) {
   jQuery("#clock").hide("block well-subscribe");
   jQuery("#curTime").hide("clock");
   jQuery("#dlinks").hide();
}else{

   jQuery("#clock").show("block well-subscribe");
   jQuery("#curTime").show("clock");
   jQuery("#dlinks").show();

}
if (w <= 980) {
   jQuery("#content").hide("span7");
   jQuery("#content").show("span8");
}else{
   jQuery("#content").show("span7");
   jQuery("#content").hide("span8");

}
});

Open in new window


The problem here is the elements show then hide then show then hide again. I am very keen to learn how to do this so I'd appreciate some guidance here please?
0
Comment
Question by:rafique12
  • 7
  • 6
13 Comments
 
LVL 8

Assisted Solution

by:soupBoy
soupBoy earned 500 total points
ID: 38759890
This is a prime example for media queries, which is a CSS3 fix for your issue.  There are some support issues for IE8 and lower, but typically we don't worry about those as we feed them the 'desktop' size anyways...

But if you need to use JQuery for your particular application, you just need to wrap your logic in a function and call it when the dom is ready and when the screen is resized.

here is an untested example:
jQuery(document).ready(function () {


//call the showHideElm when the dom is 'ready'
showHideElm();

/* 
   Now lets call it when the screen is resized
   since some browsers fire the resize a ton of times,
   we will wrap the actual function call in a setTimout to 
   wait a short while 
*/ 
$(window).resize(function(){
   setTimout(showHideElm, 500); //just wait .5 seconds
})




function showHideElm(){
   var w = jQuery(window).width();

   if (w <= 1200) {
      jQuery("#left").hide("open");
      jQuery("#nav-vertical").hide("left-nav-vertical");
   }else{

      jQuery("#left").show("open");
      jQuery("#nav-vertical").show("left-nav-vertical");

   }
   if (w <= 980) {
      jQuery("#clock").hide("block well-subscribe");
      jQuery("#curTime").hide("clock");
      jQuery("#dlinks").hide();
   }else{

      jQuery("#clock").show("block well-subscribe");
      jQuery("#curTime").show("clock");
      jQuery("#dlinks").show();

   }
   if (w <= 980) {
      jQuery("#content").hide("span7");
      jQuery("#content").show("span8");
   }else{
      jQuery("#content").show("span7");
      jQuery("#content").hide("span8");

   }
}
});

Open in new window

0
 

Author Comment

by:rafique12
ID: 38760803
Was planning to use media queries but for the same reason you just outlined. The can be unreliable sometimes too!

With jQuery its always there I guess. I implemented your code but it stops firing with this error: Uncaught ReferenceError: setTimout is not defined

I'll continue trying to fix...
0
 
LVL 8

Accepted Solution

by:
soupBoy earned 500 total points
ID: 38760931
sorry, I always struggle with setTimeout....

try wrapping it in an anonymous function...like so
setTimout(function(){showHideElm()}, 500);

Open in new window


- Chris
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:rafique12
ID: 38760961
Thanks for your patients dude!

I still get the error: Uncaught ReferenceError: setTimout is not defined

And everything just hides as soon as the page is loaded.

jQuery(document).ready(function () {


//call the showHideElm when the dom is 'ready'
showHideElm();

/* 
   Now lets call it when the screen is resized
   since some browsers fire the resize a ton of times,
   we will wrap the actual function call in a setTimout to 
   wait a short while 
*/ 
jQuery(window).resize(function(){
   setTimout(function(){showHideElm()}, 500); //just wait .5 seconds
});

function showHideElm(){
   var w = jQuery(window).width();

   if (w <= 1200) {
      jQuery("#left").hide("open");
      jQuery("#nav-vertical").hide("left-nav-vertical");
   }else{

      jQuery("#left").show("open");
      jQuery("#nav-vertical").show("left-nav-vertical");

   }
   if (w <= 980) {
      jQuery("#clock").hide("block well-subscribe");
      jQuery("#curTime").hide("clock");
      jQuery("#dlinks").hide();
   }else{

      jQuery("#clock").show("block well-subscribe");
      jQuery("#curTime").show("clock");
      jQuery("#dlinks").show();

   }
   if (w <= 980) {
      jQuery("#content").hide("span7");
      jQuery("#content").show("span8");
   }else{
      jQuery("#content").show("span7");
      jQuery("#content").hide("span8");

   }
}
});

Open in new window

0
 
LVL 8

Expert Comment

by:soupBoy
ID: 38761057
My spelling has failed me again....I was missing the 'e' in setTimeout...

setTimeout(function(){showHideElm()}, 500);

Open in new window

0
 

Author Comment

by:rafique12
ID: 38761102
Lol,

Good spot.

Okay we are definitely getting somewhere albeit back to square one!

The error is gone but the elements we a trying to hide are: showing/hiding + showing/hiding

I'm wondering if there is a conflict somewhere with another javascript library... I will keep checking.
0
 

Author Comment

by:rafique12
ID: 38761144
This seems to work...

The .show .hide argument isn't working properly though!

jQuery(document).ready(function () {

//call the showHideElm when the dom is 'ready'
showHideElm();

/* 
   Now lets call it when the screen is resized
   since some browsers fire the resize a ton of times,
   we will wrap the actual function call in a setTimout to 
   wait a short while 
*/ 
jQuery(window).resize(function(){
   setTimeout(function(){showHideElm()}, 500); //just wait .5 seconds
});

function showHideElm(){
   var w = jQuery(window).width()

   if (w <= 1200) {
      jQuery("#left").removeClass("open")
      jQuery("#nav-vertical").removeClass("left-nav-vertical")
   }else{

      jQuery("#left").addClass("open")
      jQuery("#nav-vertical").addClass("left-nav-vertical")

   }
   if (w <= 980) {
      jQuery("#clock").removeClass("block well-subscribe")
      jQuery("#curTime").removeClass("clock")
      jQuery("#dlinks").removeClass()
   }else{

      jQuery("#clock").addClass("block well-subscribe")
      jQuery("#curTime").addClass("clock")
      jQuery("#dlinks").addClass()

   }
   if (w <= 980) {
      jQuery("#content").hide("span7")
      jQuery("#content").show("span8")
   }else{
      jQuery("#content").addClass("span7")
      jQuery("#content").removeClass("span8");

   }
}
});

Open in new window

0
 
LVL 8

Expert Comment

by:soupBoy
ID: 38762845
Did you get this working?
0
 

Author Comment

by:rafique12
ID: 38762910
Not with the show hide method as it is still repeatedly showing/hiding showing/hiding.

I am using the .addClass/removeClass method which is not exactly what I need but I can't figure out why the .show .hide method isn't working.
0
 
LVL 8

Expert Comment

by:soupBoy
ID: 38763300
In the code you listed above, you have jQuery("#dlinks").addClass(), and you are not passing anything into the addClass...that may be your issue.

Do you have a link you can share showing your issue?
0
 

Author Comment

by:rafique12
ID: 38763575
I can do a screen share if you like. I am still on localhost
0
 
LVL 8

Expert Comment

by:soupBoy
ID: 38763694
Screen share isn't something I can do, I am rather locked down here at my work network...

Pardon my question, but do you know how to debug in the browser?  Or if not, maybe this is a good time to start :)  I'd pop open developer tools (F12 on a Windows machine), hopefully you are working in Chrome or Firefox (if Firefox you will need FireBug installed).  Anyways, pop open developer tools and see what is actually being applied to your elements.  This way you will now for sure they are getting the classes added and removed that you are expecting.

Regardless, if you are using the code you posted above, there are some issues....
Take a look at this block:
if (w <= 980) {
      jQuery("#clock").removeClass("block well-subscribe")
      jQuery("#curTime").removeClass("clock")
      jQuery("#dlinks").removeClass() // <-- this removes all classes on #dlinks....
   }else{

      jQuery("#clock").addClass("block well-subscribe")
      jQuery("#curTime").addClass("clock")
      jQuery("#dlinks").addClass() // <-- I believe this does nothing...but may throw an error

   }

Open in new window

0
 

Author Comment

by:rafique12
ID: 38763716
Yeah, I've been debugging since I posted the question. There are no errors in the javascript console and I have jQuery.noConflict() included. I have removed the two classes but still no joy. I just really don't know why this is happening.

I'm going to systematically remove every jQuery file that is in the site to see if I can track down the culprit.

Again, thanks for you help!
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

821 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