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.
Related
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).
I am creating a dropdown menu and need the hide the menu bar when the dropdown is expanded and show the menu after a time interval when it is collapsed. The problem is that the code I had is not removing the "toggle-off" class I am adding and removing with jQuery. The result is that the menu bar does not reappear after collapsing the dropdown. The problem is that the part of the jquery function that is within the time interval is not executing.
LINK TO PAGE:
jQuery:
$( ".menu-close" ).click(function() {
var interval = setInterval(function () {
$( ".navbar-header" ).addClass( "toggle-on" );
$( ".navbar-header" ).removeClass( "toggle-off" );
}, 500);
clearInterval(interval);
$( "#mob-nav" ).removeClass( "margin-up" );
$( "#mob-nav" ).addClass( "margin-down" );
$( ".animated" ).removeClass( "go" );
$.scrollLock( false );
});
Why you don't use setTimout()?
$('.menu-open').on('click',function(){
$('.navbar-header').addClass('toggle-off').removeClass('toggle-on');
$('.animated').addClass('go');
$('#mob-nav').addClass('margin-up').removeClass('margin-down');
$.scrollLock( true );
});
and close funciton
$('.menu-close').on('click',function(){
setTimeout(function(){
$('.navbar-header').addClass('toggle-on').removeClass('toggle-off');
}, 500);
$('#mob-nav').removeClass('margin-up').addClass('margin-down');
$('.animated').removeClass( "go" );
$.scrollLock( false );
});
You could implement this function.
setInterval(function(){
if(myDiv.style.display == "block"){
myDiv.style.display = "none";
}else{
myDiv.style.display = "block";
}
}, 3000);
jQuery(document).ready(function() {
jQuery( "li.post_link_history.current" ).click(function() {
jQuery( "div#rating-anchor" ).css( "display", "none !important" );
});
});
//or
jQuery(document).ready(function() {
if(jQuery('li.post_link_history.current').attr('class')=='current')
{
jQuery('div#rating-anchor').not(jQuery(this)).css('display','none !important');
}
});
How can I "By selecting a class, another div display none in jquery"?
Your display style value is not valid for inline styles
jQuery( "div#rating-anchor" ).css( "display", "none" );//or just call the hide() method
jQuery(document).ready(function() {
jQuery( "li.post_link_history" ).click(function() {
jQuery( "div#rating-anchor" ).hide();
});
//or
jQuery( "li.current" ).click(function() {
jQuery( "div#rating-anchor" ).hide();
});
//or use an common class for "li" ex:"commonli"
jQuery( ".commonli" ).click(function() {
if(jQuery(this).hasClass("current")){
jQuery( "div#rating-anchor" ).hide();
}
});
});
.hide() method will hide the division.
edited... current and post_link_history are different classes..so use any one
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 );