How to call a predefined functions in multiple scenerio? - javascript

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**
});
});

Related

Why does this jQuery code works only once?

I have this short jQuery code to make the picture disappear when the window is resized. For some reason, after it disappears, it doesn't appear again.
Here is the code:
$(document).ready(function(){
$(window).resize(function(){
if($(window).width() < 700) {
$("#side-pic").css("display","none");
} else if($(window).width() >= 700){
$("#side-pic").css("display","show");
}
});
});
Also if by any chance you know if there is a way to make picture move under a certain div in my code, I'll be glad to hear it! Thank you guys in advance!
There is no display property such as display: show. Try using $("#side-pic").css("display","block"); instead.
Another Alternative would be hide/show:
$(document).ready(function(){
$(window).resize(function(){
if($(window).width() < 700) {
$("#side-pic").hide();
}
else if($(window).width() >= 700) {
$("#side-pic").show();
}
});
});
That's because the "show" is not a valid display value. https://developer.mozilla.org/en-US/docs/Web/CSS/display
Also, why the else if, isn't an else good enough?
Or rather a reusable CSS class and jQuery's toggleClass() Method:
jQuery( $ => {
$(window).on('resize', function() {
$("#side-pic").toggleClass("is-hidden", $(this).width() < 700);
});
});
.is-hidden {display: none;}
<div id="side-pic">SIDE PIC</div>
<script src="//code.jquery.com/jquery-3.1.0.js"></script>
You can also write a code Like following
$(document).ready(function(){
$(window).resize(function(){
if($(window).width() < 700) {
$("#side-pic").hide();
} else if($(window).width() >= 700){
$("#side-pic").show();
}
});
});

Javascript Toggle open by width

i have actually an Simple/Standart Toggle System from Bootstrap, my Knowledge about Javascript is 0, what i want is following, if the width size min. 700px then everytime open else the standart system. I Need only the function if desktop/media width size min. 700px so stay it open.
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
My Bad! Syntax error in my code before thats the right way
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
function resize() {
if ($(window).width() > 614) {
$('#wrapper').removeClass('toggled');
}
}
$(document).ready( function() {
$(window).resize(resize);
resize();
});
</script>

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

Responsive menu not closing on item selection

EDIT: I'm not trying to be pushy but if someone knows how to help me with this, I'd really appreciate it.
www.kwpei.com is the site I'm working on, the issue I'm having is with the responsive menu not closing after a menu or submenu item is chosen. Ive been told the place to make the change needed is in global.js which I've included here in its current state. Could someone show me how to fix the issue?
jQuery(function( $ ){
$('.site-header').addClass('front-page-header');
$('.footer-widgets').prop('id', 'footer-widgets');
$(".nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").addClass("responsive-menu").before('<div class="responsive-menu-icon"></div>');
$(".responsive-menu-icon").click(function(){
$(this).next(".nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").slideToggle();
});
$(window).resize(function(){
if(window.innerWidth > 800) {
$(".nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu, nav .sub-menu").removeAttr("style");
$(".responsive-menu > .menu-item").removeClass("menu-open");
}
});
$(".responsive-menu > .menu-item").click(function(event){
if (event.target !== this)
return;
$(this).find(".sub-menu:first").slideToggle(function() {
$(this).parent().toggleClass("menu-open");
});
});
// Local Scroll Speed
$.localScroll({
duration: 750
});
// Sticky Navigation
var headerHeight = $('.site-header').innerHeight();
var beforeheaderHeight = $('.before-header').outerHeight();
var abovenavHeight = headerHeight + beforeheaderHeight - 1;
$(window).scroll(function(){
if ($(document).scrollTop() > abovenavHeight){
$('.nav-primary').addClass('fixed');
} else {
$('.nav-primary').removeClass('fixed');
}
});
});
You can slide up the menu again on clicking any of the menu items. Try adding this bit of jquery:
$('.menu-item a').click(function () {
$('.responsive-menu').stop(true, true).slideUp();
});
EDIT:
$('.menu-item a').click(function () {
if ($(window).width() < 800) {
$('.sub-menu').stop(true, true).slideUp();
$('.responsive-menu').stop(true, true).slideUp();
$('.menu-item').removeClass('menu-open');
}
});
If 800px is your breakpoint in the media query

Accordion looping on resize

I have a menu that is hidden in an accordion when viewing on screens less than 600px.
On screens larger than 600px the menu is visible.
jsfiddle- http://jsfiddle.net/ashatron/zbzqoz2f/
it works ok, but when i resize the window to be greater than 600px, then go back to less than 600px then press view sitemap it loops the animation multiple times.
I think its running the function for every resize event, which is queing up the accordion and then looping it. But I'm not sure how best to order the syntax to get it to work.
Any help would be appreciated!
footernavmenufn = function() {
var current_width = $(window).width();
if (current_width < 600) {
$('.footer-accordion-head').show();
$('.footer-accordion-body').hide();
$('.footer-accordion-head').click(function () {
$(".footer-accordion-body").slideToggle('400');
// console.log('hmmm');
return false;
}).next().hide();
} else {
$('.footer-accordion-head').hide();
$('.footer-accordion-body').show();
}
};
$(document).ready(function () {
footernavmenufn();
});
$(window).resize(function(){
footernavmenufn();
//console.log('OMG-WHY-YOU-NO-WORK');
});
The issue is that everytime window is resized and the condition is met, you're binding a new click event handler, so after a while there'll be multiple event handlers causing chaos. Ideally your code should be something like
$(document).ready(function () {
$('.footer-accordion-head').click(function () {
$(".footer-accordion-body").slideToggle('400');
console.log('hmmm');
return false;
});
$(window).resize(footernavmenufn);
footernavmenufn(); // or $(window).trigger("resize");
});
footernavmenufn = function () {
var current_width = $(window).width();
if (current_width < 600) {
$('.footer-accordion-head').show();
$('.footer-accordion-body').hide();
} else {
$('.footer-accordion-head').hide();
$('.footer-accordion-body').show();
}
};
Updated Fiddle
Why do you have this code? Crazy one. Remove it:
if (current_width < 600) {
$('.footer-accordion-head').show();
$('.footer-accordion-body').hide();
$('.footer-accordion-head').click(function () {
$(".footer-accordion-body").slideToggle('400');
return false;
}
move the click declaration into the $(document).ready function.
at the moment everytime you resize the page that click function is being added again - so the repeat is once per page resize.
forked jsfiddle with change

Categories

Resources