I'm trying to have a statement 'if scroll and has a class, do an action.
however I don't manage to have it working . . .
I've tried below code:
$(document).scroll(function() {
if($(this).scrollTop() > 1 && $(".menu-toggle").hasClass(".toggle-on")) {
// $('.toggle-on')
$( 'body' ).removeClass( 'overlay-open' );
$( '.menu-toggle' ).removeClass( 'toggle-on hide' );
$( '.menu-toggle' ).attr( 'aria-expanded', 'false' );
$( '.overlay--menu' ).removeClass( 'show' ).resize();
$( '.search-toggle' ).removeClass( 'hide' );
$( '.chapter-toggle' ).removeClass( 'hide' );
$('.overlay--menu').addClass('hidemenu');
}
});
any help will be really amazing !!
Thanks for your time !
You almost had it!
You have your right parenthesis out of place.
Try changing the conditional from,
if($(this).scrollTop() > 1) && $(".menu-toggle").hasClass("toggle-on") {
to
if($(this).scrollTop() > 1 && $(".menu-toggle").hasClass("toggle-on")){
The basic idea is that you'd have both conditionals within the parenthesis, separated by &&, such as
if (this && that).
Related
Is there any way of getting the changes of enabling/disabling dark mode to propagate on all pages of my site without changing the CSS?
My jQuery.js code
onload = function() {
if(localStorage.getItem("darkMode") === "true") {
var mode = localStorage.getItem("darkMode");
enableDarkMode();
}
}
function enableDarkMode() {
$( "body" ).addClass( "dark" );
$( "nav" ).removeClass( "navbar navbar-expand-md navbar-light");
$( "nav" ).addClass( "navbar navbar-expand-md navbar-dark");
$( '.inner-switch' ).text( "ON" );
var mode = localStorage.setItem("darkMode", "true");
}
function disableDarkMode() {
$( "body" ).removeClass( "dark" );
$( "nav" ).removeClass( "navbar navbar-expand-md navbar-dark");
$( "nav" ).addClass( "navbar navbar-expand-md navbar-light");
$( '.inner-switch' ).text( "OFF" );
var mode = localStorage.setItem("darkMode", "false");
}
$( '.inner-switch' ).on("click", function() {
if( $( "body" ).hasClass( "dark" )) {
disableDarkMode();
} else {
enableDarkMode();
}
});
It looks like you have a working solution in your question. You can simply put that code into a $(document).read() statement and implement it once the user loads the page.
Alternatively, you can set a timer to check on the value of your darkMode variable and update on change.
I have a question about JS dropdown menus.
I have multiple menus button, each has submenus. Unfortunatly once I open a menu, it stays open even if I click on another menus buttons and they visually overlap.
I´ve tried different solutions found on here, but apparently I´m doing something wrong.
Here is what I have:
$( '.main-navigation .page_item_has_children > a, .main-navigation .menu-item-has-children > a, .widget_nav_menu .page_item_has_children > a, .widget_nav_menu .menu-item-has-children > a' ).append( '<button class="dropdown-toggle" aria-expanded="false"/>' );
$( '.dropdown-toggle' ).click( function( event ) {
event.preventDefault();
$( this ).toggleClass( 'toggle-on' );
$( this ).parent().next( '.children, .sub-menu' ).toggleClass( 'toggle-on' );
$( this ).attr( 'aria-expanded', $( this ).attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
} );
And:
jQuery(document).ready(function($){
$(window).resize(function(){
var socialHeight = $('.social-icons').outerHeight();
$('.social-icons').css('margin-top',-(socialHeight/2));
}).resize();
});
Any advice is appreciated!
I have a task for WordPress website which use Contact Form 7 plugin.
How do I set textarea as required only if value of another field ( [number* number-265 min:0 id:antala] ) > 0 ?
So, it should be not like [textarea* stelnummera id:stelnummera] because this textarea will be required every time.
I have created javascript code which add some classes, attributes and alert message (how it add Contact Form 7 plugin):
$( "#antala" ).change(function() {
if ( $( "#antala" ).val() > 0 ) {
$( "#stelnummera" ).addClass( "wpcf7-validates-as-required wpcf7-not-valid" ).attr( "aria-required", "true" ).attr( "aria-invalid", "true" );
} else {
$( "#stelnummera" ).removeClass( "wpcf7-validates-as-required wpcf7-not-valid" ).attr( "aria-required", "false" ).attr( "aria-invalid", "false" );
}
});
$( ".wpcf7-form" ).submit(function( event ) {
if ( $( "#antala" ).val() > 0 && $( "#stelnummera" ).val() == "" ) {
event.preventDefault();
$( "#stelnummera" ).attr( "aria-invalid", "true" );
$( "#stelnummera" ).after( "<span class='custom-alert' style='color: #f00;'>Dette felt skal udfyldes</span>" );
if ($ ( ".invalid" ).length == 0 ) {
$ ( ".wpcf7-form" ).addClass( "invalid" );
}
} else {
$( "#stelnummera" ).attr( "aria-invalid", "false" );
$( ".custom-alert" ).remove();
}
});
But the form still submitting
I have just hide this textarea until value of number field will be > 0.
Textarea is required [textarea* stelnummera id:stelnummera]
$("#stelnummera").parent().parent().hide();
$("#stelnummera").val('n/a');
$("#antala").change(function() {
if ($("#antala").val() > 0) {
$("#stelnummera").parent().parent().show();
$("#stelnummera").val('');
} else {
$("#stelnummera").parent().parent().hide();
$("#stelnummera").val('n/a');
}
});
There is something wrong with my jQuery script. It kinda works, but when I try to toggle between the classes it works at first.
the script changes classes just like it's supposed to. but when i try to do it again,
I have to click the link and then somewhere else, and then it works again.
I want to be able do repeat the whole procedure over and over without having to click two extra times.
var clickOnSettings = true;
$(".settings_link").click(function () {
event.preventDefault();
if (clickOnSettings) {
$("#coverup").toggleClass("cover1");
$("#settingani").toggleClass("settings1");
clickOnSettings = false;
}
});
$("#coverup").click(function () {
if (!clickOnSettings) {
$("#coverup").toggleClass("cover2");
$("#settingani").toggleClass("settings2");
clickOnSettings = true;
}
});
created a jsfiddle:
http://jsfiddle.net/5dzt1v6f/13/
If you toggle 'cover1', you basically toggle between having and not having 'cover1' on the element. That does not imply that you automatically get cover2 when you remove cover1.
You have to do that yourself. Fortunately, toggleClass has a second parameter that accepts a boolean. This allows you to easily toggle classes on or off based on your conveniently introduced boolean.
Furthermore, this makes the click handler for both elements the same:
var clickOnSettings = false;
$( ".settings_link, #coverup" ).click(function() {
event.preventDefault();
clickOnSettings = ! clickOnSettings;
//Toggle all classes.
$( "#coverup" ).toggleClass( "cover1", clickOnSettings);
$( "#settingani" ).toggleClass( "settings1", clickOnSettings);
$( "#coverup" ).toggleClass( "cover2", !clickOnSettings);
$( "#settingani" ).toggleClass( "settings2", !clickOnSettings);
});
http://jsfiddle.net/5dzt1v6f/20/
Why don't you just use addClass and removeClass for what you want to do.
var clickOnSettings = true;
$( ".settings_link" ).click(function() {
event.preventDefault();
if (clickOnSettings) {
$( "#coverup" ).addClass( "cover1" );
$( "#settingani" ).addClass( "settings1" );
$( "#coverup" ).removeClass( "cover2" );
$( "#settingani" ).removeClass( "settings2" );
clickOnSettings = false;
}
});
$( "#coverup" ).click(function() {
if (!clickOnSettings) {
$( "#coverup" ).addClass( "cover2" );
$( "#settingani" ).addClass( "settings2" );
$( "#coverup" ).removeClass( "cover1" );
$( "#settingani" ).removeClass( "settings1" );
clickOnSettings = true;
}
});
http://jsfiddle.net/5dzt1v6f/15/
I fixed it!
Not the prettiest code. But this worked I needed to have another class for the settingani and not for the coverup. So I had to do it like this:
var clickOnSettings = 1;
$( ".settings_link" ).click(function() {
event.preventDefault();
if (clickOnSettings == 1) {
$( "#settingani" ).removeClass( "settings0" );
$( "#coverup" ).addClass( "cover1" );
$( "#settingani" ).addClass( "settings1" );
clickOnSettings = 3;
}
});
$( ".settings_link" ).click(function() {
event.preventDefault();
if (clickOnSettings == 2) {
$( "#coverup" ).removeClass( "cover2" );
$( "#settingani" ).removeClass( "settings2" );
$( "#coverup" ).addClass( "cover1" );
$( "#settingani" ).addClass( "settings1" );
clickOnSettings = 3;
}
});
$( "#coverup" ).click(function() {
if (clickOnSettings == 3) {
$( "#coverup" ).removeClass( "cover1" );
$( "#settingani" ).removeClass( "settings1" );
$( "#coverup" ).addClass( "cover2" );
$( "#settingani" ).addClass( "settings2" );
clickOnSettings = 2;
}
});
Thanks for all the help! =)
I know a lot of people ask questions about plug-ins and callbacks (and I've read lots of them - that's how i got this far) so please, bear with me. I tried my hand at a very simple hide/show accordion type plugin for FAQs and was successful at getting it to do what I wanted. However, as I am still learning, I am not really sure how some things work.
I was able to add a callback to the plugin after reading this question and a few others.
My question is: Is this code correct and is there a better way to implement this callback?
Here's a working sample and the code below.
Thank you for your time.
( function($) {
$.fn.simpleFAQ = function( options, callback ) {
// define default options
var defaults = {
textExpand : "Expand all",
textCollapse : "Collapse all",
displayAll : false,
toggleSpeed : 250
};
var options = $.extend( defaults, options );
// callback
if( typeof callback != "function" ) { callback = function(){} }
this.each( function () {
obj = $(this);
// insert FAQ expand all/collapes all text before FAQ
var txt = '<span class="simple_jfaqText">' + options.textExpand + ' / ' + options.textCollapse + '</span>';
$( txt ).insertBefore( obj );
// add class to desired FAQ element
obj.addClass( 'simple_jfaq' );
// show/hide faq answers according to displayAll option
( options.displayAll == false ) ? ddDisplay = 'none' : ddDisplay = 'block';
obj.children( 'dd' ).css( 'display', ddDisplay );
// add classes according to <dd> state (hidden/visible)
obj.children( 'dd:visible' ).prev( 'dt' ).addClass( 'expanded' );
obj.children( 'dd:hidden' ).prev( 'dt' ).addClass( 'collapsed' );
obj.children( 'dt' )
.click( function() {
// show/hide all answers (dd elements) on click
$(this).nextUntil( 'dt' ).slideToggle( options.toggleSpeed, callback );
// dt class change on click
$(this).toggleClass( 'collapsed' ).toggleClass( 'expanded' ); })
.hover( function() { $(this).toggleClass( 'hover' ); }, function(){ $(this).toggleClass( 'hover' ); });
});
// Expand All
obj.prev( 'span' ).children( 'a[rel=jfaq_expand]' ).click( function() {
// show all answers
$(this).parent( 'span' ).next( '.simple_jfaq' ).children( 'dd:hidden' ).slideToggle( options.toggleSpeed );
setTimeout( callback, options.toggleSpeed )
// change classes
$(this).parent( 'span' ).next( '.simple_jfaq' ).children( 'dt' ).removeClass( 'collapsed' ).addClass( 'expanded' );
});
// Collapse all
obj.prev( 'span' ).children( 'a[rel=jfaq_collapse]' ).click( function() {
// hide all answers
$(this).parent( 'span' ).next( '.simple_jfaq' ).children( 'dd:visible' ).slideToggle( options.toggleSpeed );
setTimeout( callback, options.toggleSpeed );
// change classes
$(this).parent( 'span' ).next( '.simple_jfaq' ).children( 'dt' ).removeClass( 'expanded' ).addClass( 'collapsed' );
});
};
})( jQuery );
I would recommend using jQuery's built in event system for this. You can trigger an event on any node, then the user of the FAQ code could bind to that event on that node. You can even pass data to the binding function.
Of course, my real recommendation is to use my plug-in of the same name. :)
It might be nice if the callback would execute in the context of some relevant element.
var clicked = this;
setTimeout(function() { callback.call(clicked); }, options.toggleSpeed );