how to remove slidetoggle hidden div when window width reaches certain size

189
November 26, 2016, at 7:30 PM

I have this irritating problem when I toggle a menu in smartphone view the menu stays hidden when resized to desktop view.

So when the window reaches width of about 905px I want to remove the effect of the toggle and show the navigation from hidden to shown.

I am not sure how to fix this as I've no knowledge of JQuery

Here is my code

<div id="menu">
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">About us</a></li>
                    <li class="remove-margin"><a href="#">Contact us</a></li>
                </ul>       
            </nav>
        </div>
<script type="text/javascript">
$(window).resize(function(){
    if ($(window).width() >= 905){  
    }   
})
$("#menu").addClass("responsive").before('<div id="three-lines"><i class="material-icons">menu</i></div>');
$("#three-lines").click(function(){
$("#menu").slideToggle('fast');
})
</script>
Answer 1

Just show the element when the condition is reached.

$(function() { 
 
 
 
  $("#menu").addClass("responsive") 
            .before('<div id="three-lines"><i class="material-icons">menu</i></div>'); 
  
  $("#three-lines").click(function() { 
    $("#menu").slideToggle('fast'); 
  }) 
 
 
  addEventListener("resize", function() { 
    if (innerWidth >= 905) { 
      $("#menu").show(); 
    } 
  }) 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="menu"> 
  <nav> 
    <ul> 
      <li><a href="#">Home</a> 
      </li> 
      <li><a href="#">Services</a> 
      </li> 
      <li><a href="#">About us</a> 
      </li> 
      <li class="remove-margin"><a href="#">Contact us</a> 
      </li> 
    </ul> 
  </nav> 
</div>

UPDATE

Using media queries

@media screen and (min-width: 905px) {
    #menu{
        display: block;
    }
}
READ ALSO
jquery text size on load enlarged

jquery text size on load enlarged

I have add a jquery accordion to a web page create in Xara Web Designer (no choice)It all works well except when I view the accordion on an Android device, when I first load the page the content text in the open panel is larger than expected

191
HTML - How to make a &ldquo;Read More&rdquo; button

HTML - How to make a “Read More” button

On my website, Link, I have my blog and I want each card to have a read more buttonI specifically want it to only show x words (NOT characters) when collapsed, and then show the whole text when expanded

198
Passing an attribute in Jquery/javascript didnt work?

Passing an attribute in Jquery/javascript didnt work?

Why is the tableName variable null within the function itself? I cant find an anwser to this anywhere( I must be a bit of a noob) Have tried a few variations but stumped!

182
String.fromCharCode doesn&#39;t show anything for &#39;Enter&#39; in jQuery

String.fromCharCode doesn't show anything for 'Enter' in jQuery

I am doing a JavaScript calculator and trying to map key press events to the appropriate button eventSo when a user presses 1, then $('#one')

203