Develop Reference

sidebar untoggle on smaller screens

I'm testing on Start Bootstrap's sidebar template.
The template's jQuery is pretty simple:
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
I'd like the sidebar to be toggled on desktop screens and untoggled on small devices.
Here's what I tried to do:
$(document).ready(function() {
$("#menu-toggle").click(function(e) {
$("#wrapper").toggleClass("toggled");
});
function sidebarResize() {
if ($(window).width() >= 768) {
$("#wrapper").toggleClass("toggled");
} else {
$("#wrapper").toggleClass("toggled");
}
}
sidebarResize();
});
The document loads and the sidebar is toggled, but it doesn't untoggle when I resize the screen.
How can I achieve what I'm looking for?

You should bind the function to the window resize event..
$(window).resize(sidebarResize);
Demo: http://www.codeply.com/go/tDdQm8TrB9

I need a jQuery function to only work above 700px screen size, cant spot the error in my code

I have a jquery function that i want to disable below 700px. I have the following function:
<script>
$(document).ready(function() {
$(window).resize();
});
</script>
and
<script>
$(window).resize(function() {
if( $(this).width() > 700 ) {
$(window).load(function() {
$('.dh-container').directionalHover();
});
}
});
</script>
This seems like it should work, but i'm a noob to jquery, and can't find the error in my code, and the chrome inspector isn't displaying any errors.
If someone could spot my error, that would be great. And in the future, how would i go about diagnosing a jquery error that the chrome inspector doesn't point out?
Thank you

Your code works fine
<script>
$(document).ready(function() {
$(window).resize();
});
$(window).resize(function() {
if( $(this).width() > 700 ) {
$(window).load(function() {
alert("It's Working above 700px width");
});
}
});
</script>
Always start by testing simple procedures to find out mistakes.
Another way:
<script>
var width = $(window).width();
if (width > 700) {
alert('Display Above 700px');
} else {
alert('Do nothing since it's under 701px');
}
</script>

Execute function only if window width is greater than something else don't

function dropdownHover() {
jQuery('ul.nav li.dropdown').hover(function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});
}
$(window).on('resize', function(event){
var windowSize = $(window).width();
if(windowSize > 992){
dropdownHover();
}
});
I need this function dropdownHover() to fire only when window is greater than 992px, both on load and on resize, else if window is < 992px, both on load or on resize i dont want to fire this function on hover i want regular bootstrap dropdown on click. I tried to do this with css but i cant add animation on dropdown because its just display: none/block. I also tried to add class on resize to fire this function if element has that class else dont but it doesnt work either.
Edit: Final working version
$('.dropdown').on('mouseenter', function(){
if(!$(this).is('.open') && $(window).data('wide'))
$('.dropdown-menu', this).dropdown('toggle').hide()
.stop(true, true)
.delay(200)
.fadeIn(function(){
this.style.display = '';
}).find('a').on('touchstart click', function (e) {
e.stopPropagation();
});
}).on('mouseleave', function(){
if($(this).is('.open') && $(window).data('wide'))
$('.dropdown-menu', this).dropdown('toggle');
});
$('.dropdown').on('click', function(e){
if( $(window).data('wide')) {
$('.dropdown-menu', this).dropdown('toggle');
} else {
$('.dropdown-menu', this)
.stop(true, true).slideToggle()
.closest('.dropdown').removeClass('open');
}
});
// not entirely necessary. Not sure which is faster: this or just checking the width in all three places.
$(window).on('resize', function(){
$(window).data('wide', $(window).width() > 992);
// reset the open menues
$('.dropdown').removeClass('open');
$('.dropdown-menu').css({
display: '',
left: '',
position: '',
});
// because we are checking the width of the window, this should probably go here although this really should be a media query style
$('.dropdown-menu.pull-center').each(function() {
var menuW = $(this).outerWidth();
if ($(window).width() > 1000) {
$(this).css({
left: - menuW / 2 + 60 + 'px',
position: 'absolute'
});
} else {
$(this).css({
left: '',
position: ''
});
}
});
}).trigger('resize');

Initial Solution
Your question is twofold. First, you need it to not show the menu at smaller sizes. For that, you check on resize what the window width is. The problem is that it only works once. It triggers the event listeners for hover and it doesn't kill those event listeners if the screen is then larger at some point. For that, you can set a flag. There are a lot of ways to do this, but for my answer, I've chosen to use jQuery .data() method.
$(window).on('resize', function(event){
var windowSizeWide = $(window).width() > 600; // reduced for testing purposes
jQuery('ul.nav li.dropdown').data('dropdown-enabled', windowSizeWide);
}).trigger('resize');
Then when we listen for the hover events (which are mouseenter and mouseleave events), we simply return out of the function if the screen is too small.
jQuery('ul.nav li.dropdown').on('mouseenter', function() {
if(!jQuery(this).data('dropdown-enabled')) return;
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}).on('mouseleave', function() {
if(!jQuery(this).data('dropdown-enabled')) return;
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
}).find('.dropdown-menu').hide();
Finally, you also want the event to trigger on load. You can do that by simply adding .trigger('resize') as seen in the first snippet. You can see a functioning demo here: http://jsfiddle.net/jmarikle/xw9Ljshu/
Possible Alternative Solution
Alternatively, you can also use CSS to handle this with media queries. The simplest way to do this is to force display: none on smaller screens. I don't recommend completely hiding the element because it becomes inaccessible at that point, but this is the general idea:
#media(max-width: 600px) {
ul.dropdown-menu {
display:none !important;
}
}
Note that !important is used because jQuery adds inline styles when you fadeIn or fadeOut.
Second demo: http://jsfiddle.net/jmarikle/xw9Ljshu/1

window.screen.availWidth to get the window size. i am yet not tested your code.But i think this will ok.
function dropdownHover() {
jQuery('ul.nav li.dropdown').hover(function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});
}
$(document).ready(function(){
$(window).on('resize', function(event){
var windowSize = window.screen.availWidth;
if(windowSize > 992){
dropdownHover();
}
});
})

Stop jquery for different screen size.

I have this code:
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
$('#content-left').css('width', '100%').css('width', '-=320px');
$(window).on('resize', function(){
$('#content-left').css('width', '100%').css('width', '-=320px');
});
});
//]]>
</script>
The above code works great but what I need is for this code to stop working or switch back to just 100% width (without subtracting the 320px) when the screen size is 768px or less.
I did some google searches and found this:
if ($(window).width() <= 768){
// do something here
}
But I'm not sure how to add this to my existing code.
Background:
My sidebar is a fixed sidebar on the right side of the page at 300px. And I have a padding of 20px between the sidebar (#content-right) and the main section (#content-left). My main section (#content-left) is using the above script of 100% - 320px.
I am using two CSS. One is a regular CSS. The other uses:
#media all and (max-width: 768px) {}
Thank you. :)

Use a simple if/else statement, put your resize code in a function and call that function when the page loads and when the window is resized.
function resize() {
if ($(window).width() <= 768) {
$('#content-left').css('width', '100%');
} else {
$('#content-left').css('width', '100%').css('width', '-=320px');
}
}
$(window).load(function() {
resize();
});
$(window).on('resize', function() {
resize();
});

You can combine them like this. This only runs your code when the window is NOT less than 769 pixels. That's what the "!" symbol does, converts it to NOT.
$(window).load(function() {
if (!$(window).width() <= 768) {
$('#content-left').css('width', '100%').css('width', '-=320px');
$(window).on('resize', function() {
$('#content-left').css('width', '100%').css('width', '-=320px');
});
}
});

How to call a predefined functions in multiple scenerio?

I am completely new to jquery, here is the code for toggling to collaspe the sidebar.
//define script for sidebar toggling
function togglesidebar() {
$('#sidebar').toggleClass('column-collapse');
}
$(document).ready(function(){
$(function() {
$('[data-toggle=offcanvas]').click(togglesidebar);
});
It works just fine. But when I add the following code to make it also collapse when screen size is < 768, it stops working.
//define script for sidebar toggling
function togglesidebar() {
$('#sidebar').toggleClass('column-collapse');
}
$(document).ready(function(){
$(function() {
$('[data-toggle=offcanvas]').click(togglesidebar);
});
$(window).resize(function(){
windowsize = $(window).width();
if(windowsize < 768) {
$('[data-toggle=offcanvas]').click(togglesidebar);
});
});
I wonder where the problem is and i will be grateful if someone can help me with it.
EDIT:
Here is the website:
http://wileyphp.no-ip.biz/tagees/testing.html#
I want to collapse the sidebar when it is windowsize <768px
and
there is a button to toggle collapse/expand in the sidebar. I want it to work at all screen size.

You are missing '}' at the end of if condition.
$(document).ready(function(){
$('[data-toggle=offcanvas]').click(togglesidebar);
$(window).resize(function(){
windowsize = $(window).width();
if(windowsize < 768) {
$('[data-toggle=offcanvas]').click(togglesidebar);
} /**/ '}' missing here**
});
});