I have a piece of Jquery which I am using to force a div to have a 'slide in' effect upon a user clicking on another div (a button which I define). However, upon page load, the jquery has executed and the div which is supposed to slide in upon user click, has already appeared and been revealed. Please can someone tell me how to stop this, and make it so that it's not active upon page load, and only works upon user click. Thanks.
Here is my code :
$( "#open-nav-3" ).click(function() {
$( "#open-nav-menus" ).slideToggle( "slow" );
});
open-nav-3 is the button which the user clicks to make the content appear, and open-nav-menus is the div ( content ) which appears.
I expect this is probably very simple, but I am a novice with all things Javascript.
I guess you just need an additional
$( "#open-nav-menus" ).hide();
to hide the element on page load. Add it before the event handler:
var navMenu = $( "#open-nav-menus" );
navMenu.hide();
$( "#open-nav-3" ).click(function() {
navMenu.slideToggle( "slow" );
});
Related
I am trying to hide the scrollbar when opening a fullscreen menu. That part I got working, what Im missing is getting the same button that hides the scrollbar to make it appear back again (removing the .no-scroll from the body). Here is my failed attempt, looks like the second function is not working.
$('.menu_container').on('click', function(){
$('body').addClass('no-scroll');
$('.menu_container').attr('id', 'menu_close');
});
$('#menu_close').on('click', function(){
$('body').removeClass('no-scroll');
$('#menu_close').removeAttr('menu_close');
});
Your event handlers are attached as soon as the DOM is loaded. And when this happens, there's no element with id #menu_close yet (since it's added only after you click on .menu_container), so the second event handler is not attached to anything.
You could move it up inside the first function like this:
$('.menu_container').on('click', function(){
$('body').addClass('no-scroll');
$('.menu_container').attr('id', 'menu_close');
$('#menu_close').on('click', function(){
$('body').removeClass('no-scroll');
$('#menu_close').removeAttr('menu_close');
});
});
It's because you've removed the id which is how you're finding the element.
If you want to add and remove a class that makes your scrollable use:
$( 'body' ).addClass( 'no-scroll' );
And:
$( 'body' ).removeClass( 'no-scroll' );
I'm using jimdo but i have a head area where i be able to change all codes and everything works fine but this cool timeout feature. Any help would be great!
This is my code which adds a class to an animated svg image which status is display:none. With a click on a download button the svg image changes to display:block and runs 3 times and fades out after 3 second. So far so good. What i want is that the added class "s-dwlnd" will be removed after the svg fades out. Exactly after 3 seconds to be correct :) ... Is there a way to do this? To add a working timeout function to my existing code? Not all codes working with Jimdo :(
$( document ).ready(function() {
$( ".dwlnd-trg" ).click(function() {
$( ".dwlnd" ).addClass( "s-dwlnd" );
});});
Yes, something like this should work:
$( document ).ready(function() {
$( ".dwlnd-trg" ).click(function() {
$( ".dwlnd" ).addClass( "s-dwlnd" );
setTimeout(function() {
$(".dwlnd").removeClass("s-dwlnd");
}, 3000); // Delay of 3 seconds
});
});
Current site I am fixing: --> http://newmind.se/lagerbolag-2/
I want to make forms fieldsets generated by the Visual Form Builder separated in to a wizard or paged.
Where you can click your way through without leaving the page (there is a paged feature it seems but I want to learn jQuery: https://www.youtube.com/watch?v=o5wjRDnEg8s) but I want to trigger this on click of a button like a next button would make a certain div style.display:'block' and I figured the easiest way is was adding this functionality was through jQuery but jQuery seems turned off. Call to undefined variable from this piece of code I just added there to test if jQuery worked in the proper section in the Divi theme:
//changing color on the headline on the page
$( ".bengt" ).on( "click", function() {
$( this ).css( "color", "red" );
});
//just putting a message in the console
A $( document ).ready() block.
$jQuery( document ).ready(function() {
console.log( "ready!" );
});
Neither of these triggered within the divitheme even though jQuery library is included in the theme. Instead I got an error message Uncaught ReferenceError. Seems like the Divi-theme doesn't want me as a user to tamper with the jQuery..
Remove $ sign from $jQuery and try this code, your Jquery library is loaded you are not calling it properly
//just putting a message in the console
jQuery( document ).ready(function() {
console.log( "ready!" );
});
I have an off canvas navigation on a website that I am working on. The default state for the off canvas navigation is closed which works well on the mobile site as you can toggle it open and select your links but on the desktop having it closed and toggling it on hides information from the user and I would like it to be open by default when the user arrives at the page.
Currently the navigation uses jQuery to make the toggle:
$( "#main-menu-toggle, #main-menu-caption, .menu-mask" ).on( "click", function() {
// toggle the classes in the body the css does the rest
$( "body" ).toggleClass( 'main-menu-open' );
// for screen readers lets set the ARIA atributes
if ( $( "body" ).hasClass( 'main-menu-open' ) ) {
$( '#navbar, #main-menu-toggle' ).attr( 'aria-expanded', 'true' );
} else {
$( '#navbar, #main-menu-toggle' ).attr( 'aria-expanded', 'false' );
}
});
And there is a call in there when the page loads as well as resizes to show and hide the menu depending on screen size:
// show or hide the main navigation menu when the page is loaded
showHideMenu();
$( window ).resize(function() {
waitForDraggingStop(function(){
showHideMenu();
}, 500, "window resize in progress");
});
// adds or removes the classes for the menu addition or removal
function showHideMenu() {
if ( 955 < $( window ).width() ) {
$( "body" ).addClass( 'main-menu-open' );
$( '#navbar, #main-menu-toggle' ).attr( 'aria-expanded', 'true' );
} else {
$( "body" ).removeClass( 'main-menu-open' );
$( '#navbar, #main-menu-toggle' ).attr( 'aria-expanded', 'false' );
}
}
The issue is that the menu has an animation associated with it and so when you arrive on the desktop there is a delay and then the menu animates out. This quickly becomes annoying to the user as they have to wait for the page to finish its animations before they can use the screen.
The Question:
Is there a better way to do this using the CSS/JS that will have the menu expanded by default when the user comes to the page above 955px and collapsed by default below the same mark AND allow for the direction to be reversed on the click of the toggle later on and avoid the delays associated with animation using JS to add the open class?
I ended up solving this using the method from my comments:
I treated the jQuery added class like a status toggle instead of a state like open or closed.
Above 955 the css would default to open in the absence of the toggle but its presence would close it and below 955 the absence would keep it closed but its presence would open it.
This would completely remove the jQuery adding the class on load as well as the resize function.
Additionally I renamed the body class to "main-menu-open-close" to reflect the toggle.
I have a page with a menu the folds out. When the user clicks a menu link and browser starts to load a new page the old page loses its body class move-left. Using inspector I can see that it clears the body class before re-rendering the DOM. Can this behavior be prevented?
$( "#foo" ).click(function() {
$( "body" ).toggleClass( "move-left" );
});
Where foo can be a menu button etc.