You are here: Blog » Tutorials » jQuery Window Resize – Fading an HTML Element In and Out

jQuery Window Resize – Fading an HTML Element In and Out

jquery_resize

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:

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:

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.

This entry was posted in Tutorials and tagged , by .

Author: justin saad

Justin Saad is first and foremost a husband and a father of four. He is also a web developer and designer who has been making websites for over twenty years. His company is called The Motech Network and his website is ClevelandWebDeveloper.com. In addition to building websites, Justin makes WordPress plugins and likes writing tutorials to help others learn about various aspects of web development.

4 thoughts on “jQuery Window Resize – Fading an HTML Element In and Out

  1. Clayton

    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

    Reply
    1. Justin Saad Post author

      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.

      Reply
        1. Justin Saad Post author

          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.

          Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">