css @media query + jQuery button to show/hide div when screen gets smaller than a certain width + automatically restore it back when it gets larger

StackOverflow https://stackoverflow.com/questions/23189128

Frage

There are many similar issues overhere, but none of them offer a real solution to what I need.

Here is a jsfiddle demo with small tutorial of the issue: http://jsfiddle.net/V482z/2/ (or full-screen result http://jsfiddle.net/V482z/2/embedded/result/)

As described in the above tutorial, I have succesfully created jquery script to show/hide a sidebar content when the screen is smaller, but it is not dynamic. This is a very rare scenario that ordinary user is gonna play with his browser screen size in this way, but none the less, I would like to solve this puzzle.

How to null jquery effect of the sidebar div?

Thanks!

for those who do not like jsfiddle and would like to copy this example into a plain html file on your computers, here is the integral code:

<!DOCTYPE html>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <title>jquery show/hide div test</title>

    <style>

      #showhide{
        clear: both;
        float: left;
        display: none;
        height: 25px;
        cursor: pointer;
        background-color: #F00;
      }

      @media only screen and (max-width:499px) {
        #showhide{
          display: block;
        }
      }

      #container {
        clear: both;
        display: block;
        width: 100%;
      }

      #sidebar {
        clear: both;
        float: left;
        display: block;
        width: 240px;
        height: 450px;
        background-color: #777;
      }

      @media only screen and (max-width:499px) {
        #sidebar {
          display: none;
        }
      }

      #content {
        display: block;
        width: 500px;
        height: 450px;
        background-color: #CCC;
      }
    </style>

  </head>

  <body>
    <div id="showhide">
      show/hide sidebar
    </div>

    <div id="container">
      <div id="sidebar">#1 automatically show/hide sidebar content when screen IS or GETS resized/smaller then 500px, but leave user the option to show hidden content on demand.
        <br/>
        <br/>tutorial:
        <br/>1. use the JSFIDDLE screen divider line to resize this content and observe the effect when it gets smaller than 500px
        <br/>2. now click on red show/hide sidebar block
        <br/>3. now click again to hide sidebar content
        <br/>4. now resize back the window screen to larger than 500px size.
        <br/>5. Where is the sidebar? Why is it not restored back?
      </div>

      <div id="content">
        #2 content is always visible
        <br/>
        <br/>
        <b>THE ISSUE:</b> as you can see, when you toggle sidebar in less than 500px screen mode and resize the window back to original larger size, sidebar is still toggled/hidden due jquery effect.
        <br/>
        <br/>
        How to restore jquery hiding of the sidebar div?
        <br/>
        <br/>
        Thanks!
      </div>
    </div>

    <script type="text/javascript">
      $(document).ready(function(){
        $("#showhide").click(function () {
          $("#sidebar").fadeToggle("slow");
        });
      });
    </script>

  </body>
</html>

War es hilfreich?

Lösung

However, after close examination in Chrome, there appears to exist +18px offset with window size function (css media queries are pixel-precise), so instead at 500px it triggers at 518px for some reason. It is not a major issue, but I wonder why?

Andere Tipps

Well, morning is smarter than night :)

The answer was missing jquery code to actually show/hide divs, and the solution which I found before here Show and hide div with Window Size JavaScript? was not working for some reason, probably because of my wrong implementation, but also due a bug (should be function(){ instead of function{ ).

Here is the missing code:

$(window).resize(function() {
if( $(window).width() > 500 ) {
    $('#sidebar').show();
    $('#showhide').hide();
} else {

}

if( $(window).width() < 499 ) {
    $('#sidebar').hide();
    $('#showhide').show();
} else {

}
});

http://jsfiddle.net/V482z/3/

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top