Solved

Hiding and showing DIVs at different screen sizes using jQuery

Posted on 2013-01-09
13
479 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
 

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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 

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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
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…

747 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now