Slidetoogle and larger browser - javascript

I’m using jquery slideToggle to show and hide a div on mobile devices. I’m using display: none inside a media query for devices below 768px. This allows the div to start closed .
If you resize the browser to be smaller than the 768px breakpoint, the Nav div disappears and you’re prompted with a Button to toggle it’s visibility. But if you resize the browser back to the original state (larger than 768px). At this point, you will notice the div remains hidden and does not return to display:block. Only after refreshing the browser will the div re-appear.
Could someone please suggest a method for solving this?

Create an $(window).resize function
var _windowWidth = $(window).width();
$(window).resize( function() {
if(_windowWidth > 768) {
$("nav").show();
}
});
Or make it visible with css if the screen is bigger than 768px.
#media screen and (min-width: 768px) {
nav {
display: block;
}
}

Related

jQuery - div not closing when screen is resized

I have this code that will display the Hello-World div when the search-icon is clicked. I want this to only happen when the screen size is < 768px.
The problem I am facing is the fact that the div does not hide when the screen is > 768px, if the div is first opened in screen size < 768px, and not closed before the screen is resized.
$(document).ready(function() {
$('#showsearch').click(function() {
$('.input-display').slideToggle("fast");
});
});
Se my jsfiddle, open the div, not close, and resize the screen!
How can I prevent this from happening?
Since you are using JavaScript to show/hide div, You'll have to use !important in css to override inline styles (display: block;) added by JavaScript. Try this:
.input-visible {
display: none !important;
}

Load div on collapse in Boostrap when screen width is 991px or less

I am trying to optimize the mobile version of my website in Boostrap. I have a div that takes a lot of space on my page and I would like to be able to hide this div on page load for any screen width of 991px or less. I want to give the option to the user to show the div when clicking on a button. I want this div to appear on page load for screen width greater than 992px.
I would like to know if Boostrap offers a way to do so without the use of additional JavaScript and if so, how to do it. If not, what would be the best way to accomplish what I want.
<div class="mydiv">
I want to be hidden on page load for screen width of 991px or less
</div>
<a class="btn" data-toggle="collapse" data-target=".mydiv">Show Div »</a>
CSS
//hide for displays below 992px
.mydiv {
dispaly:none;
}
#media (min-width: 992px) {
//show for displays greater thatn 992px
.mydiv {
display:block;
}
}
and you can use the bootstrap toggle to switch it on and Off
if you want to hide the button on displays greater than 992px
#media (min-width: 992px) {
#idforyourbutton {
display:none;
}
}

Check width of viewport on side load, then add class to body if less than X

I'm currently building a portfolio site and i want the sidebar to be hidden by default on mobile devices since its quite big atm, you can check it out here: www.dosh.dk/rofl/
The sidebar will hide if body has the class "sidebar-inactive" and therefore i want to do a single check on the viewport when the site is loaded and then add the class if below X
Im using coffeescript and ive made the following code but it doesnt seem to work, any ideas?
$ ->
$(".inner_content").hide()
$("#myskills").show()
$("#site").addClass 'loaded'
if $(window).width < 600
$("body").addClass 'sidebar-inactive'
How about a non-JavaScript solution using CSS media queries?
#media (max-width: 599px) {
.sidebar {
display: none;
}
}
This will hide elements with the sidebar class when the screen is less than 600px wide and will update as the browser is resized.
More: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

How do I show a previously hidden div if the view port is resized?

I am developing a responsive site using Bootstrap 3. I have a JS show/hide script which is available when the screen is max-width 767px, but if I have shown and then hidden the div in that size, when I resize the screen back to desktop the div is still hidden.
Is there away to force the div to come back if the screen goes beyond a 767px?
<script type="text/javascript">
function showFunction() {
document.getElementById("left-col").style.visibility="visible";
}
function hideFunction() {
document.getElementById("left-col").style.visibility="hidden";
}
</script>
Why not use a media query then?
#media (max-width: 767px) {
.left-col {
display: none;
}
}
http://jsfiddle.net/x9y1s14o/
Generally, there are two ways to do this:
Use CSS to force the div to be shown at one size, and hidden at another
Use JavaScript to listen for changes in the browser and then call a function to modify the state of the dom
With CSS, you tell the browser what to do when the window is bigger than your breakpoint, and what to do when your window is smaller than your breakpoint, which 767 px.
#media (min-width: 767px) {
.left-col {
visibility: visible;
}
}
#media (max-width: 767px) {
.left-col {
visibility: hidden;
}
}
With JavaScript, you tell the browser to call a function when the window resizes:
var breakpoint = 767;
window.onresize = function(event) {
if (window.innerWidth >= breakpoint) {
showFunction();
} else {
hideFunction();
}
};
Note: Your specifics might be slightly different, but this is meant to illustrate the idea behind it. Tweak the details that you need to.

Using jQuery .hide() with CSS media queries for menu toggle based on screen resolution

I have a website using css media queries to detect browser resolution and modify my site accordingly.
I have run into a slight problem with my main navigation menu. There are a number of pages on my site where I would like to have my main navigation hidden on load for mobile resolutions, but displayed on desktop resolutions.
This seems like a simple enough task to accomplish with css, but unfortunately for me, it is not. I am unable to use both display:none; and visibility:hidden; because when my menu detects on load that it is hidden, it sets it's height to 0, and will not change.
Here is a stack overflow page reference:
Setting a div to display:none; using javascript or jQuery
Ultimately, I the only option I found that would hide my menu on load, while still allowing the menu to correctly calculate it's height was the following bit of jQuery.
$(document).ready(function () {
$(".hide-menu").hide();
var $drillDown = $("#drilldown");
});
Now, this solution is working for pages that I would like to have the menu initially hidden on load for all screen resolutions. However, I have a number of pages on which I would like to have the menu hidden initially hidden on load for mobile, but displayed on desktop.
I have attempted to recreate this scenario in a jsfiddle: http://jsfiddle.net/WRHnL/15/
As you can see in the fiddle, the menu system has big issue with not being displayed on page load. Does anyone have any suggestions on how I might accomplish this task?
You can do it by comparing the screen-size:
$(document).ready(function () {
var width = $(window).width();
if (width < 768) {
$(".hide-menu").hide();
}
var $drillDown = $("#drilldown");
});
You can use !important to force to origional state via media queries.
This will over-ride the "display:none" from your js.
Example:
#media (max-width:980px){
nav > .btn-group{display:none}
}
Your Js then toggles style="display:block" or style="display:none"
you maximize the window and the below resets your origional style.
#media (min-width: 992px) {
nav > .btn-group{margin:0px auto; display:inline-block !important}
}

Categories