Intro
I am going to share with you a cool trick you can use to fade html elements in and out using jQuery — depending on the width of the browser window. This creates a nice responsive effect that when the window is resized the element will fade in if there is room for it and fade out if not. It will give your website visitors the impression that they are interacting with the elements on the page.
Example
If your browser width is more than 925 pixels, you should see an ‘about me’ picture on the top-left of this page. If you resize your browser to make it smaller, you will notice the image fade away just when it’s about to run out of room. To learn how that’s done, read on…
How to do it
The JQuery
I am going to assume that you already have jQuery included on your site and you have your own javascript file somewhere that you are working off of. In that file, put this code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
jQuery(function() { //runs on dom load target_element = jQuery(".about_me_holder"); //replace this with the element you want to fade in/out initial_width = jQuery(window).width(); //the initial window width when page loads if(initial_width >= 925) { //by default element will be hidden via css. if window is wide enough initially, let's show the element target_element.show(); } }); jQuery(window).resize(function() { //do something when window is resized new_width = jQuery(window).width(); //create a temporary variable name so code is easier for people to read target_element = jQuery(".about_me_holder"); //replace this with the element you want to fade in/out if(new_width < 925) { //the window is getting too small. target_element.fadeOut(300); //fade out the element. if its already invisible it will stay that way } else { //the window is large enough target_element.fadeIn(700); //fade in the element. if its already visible it will stay that way } }); |
Note that I am using 925 pixels for the minimum window width required. Replace that number with whatever is appropriate for your site.
The CSS
In your css file:
|
1 2 3 |
.about_me_holder { /*remember to replace this with your element*/ display:none; } |
Summary of What’s Going On
I tried to comment the code to walk you through every step of the way, but here is the gist of it plain English:
The element starts off hidden with CSS. jQuery first checks if the initial window width on page load is wide enough, and if it is, immediately shows the element. When the browser window gets resized, jQuery checks if the new width is wide enough to show the element. If it is, the element gets faded in. If it’s not, jQuery fades out the element.
Hey Justin,
Is there any way to get another div to replace the fading div? As in a slide in effect in place of the old one?
Thanks,
Clayton
Hi Clayton,
Thanks for stopping by. I’m not sure exactly what you want to do. From what I can gather, you want to have another div which would appear when the original div fades. The way that I would go about this would be to create another div with a different class, which would be initially hidden via CSS. Then when jQuery checks for the window getting too small, in additional to fading out the original div, you can also slide in the new div. You also want to make sure to slide out the new div when the window becomes large enough.
If you need help with learning how to slide elements, check out the jQuery documentation on sliding and animating.
What I am trying to do is when the first div1 disappears I want div2 which is beside div1 to slide into where div1 was.
Got it. You want to look into the animate() function. Check out this article and pay attention to the section labeled ‘Moving elements using animate()’. That should give you a good start. Let me know if you have further questions.