Hide div elements if conditions (browser width) are true

  • unlambda

    (@unlambda)


    10 years ago

    Hi
    I’m trying to figure out how to fix my header responsiveness. I placed four DIVs in a div that header have and I made them inline with CSS (otherwise the header is huge). It worked. Everything is fine except when I resize browser (and probably on mobile phones I do not have any for now to check that). More I resize bigger my header becomes pushing down content area of my site.

    What I want to do is to hide one DIV at the time if browzer width changes and I want to have only one DIV left if browser is at minimum width.

    1) If browser with is 1080px hide fourth DIV of four in the header.
    2) If browser with is 960px hide fourth third DIVs of four in the header.
    3) If browser with is 640px hide fourth third and second DIVs of four in the header. Only one DIV left for mobiles and minimum browser width.

    I do not know witch method (JavaScript, php, JavaScript/php or only CSS) is actually recommended in modern browsers.

    Please help me with some code!

    Thank you!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Clarion Technologies

    (@clarionwpdeveloper)

    10 years ago

    Hi,

    You can use jQuery for that.

    <script type="text/javascript">
 $(window).resize(function() {

    var windowWidth = $(window).width(); //retrieve current window width
    var windowHeight = $(window).height(); //retrieve current window height
     if (windowWidth < 960) {
        $("#div_id_here").hide();
      }

 });
</script>

    Similarly you can use as many conditions you like.

    Thanks

    Thread Starter unlambda

    (@unlambda)

    10 years ago

    Thank you for that code !
    Please, can indicate where to add this code ? I have a child theme activated.

    Clarion Technologies

    (@clarionwpdeveloper)

    10 years ago

    Hi,

    You can add this code in any of the JS file of the child theme.

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Hide div elements if conditions (browser width) are true’ is closed to new replies.