How to create a jQuery function to toggle dark mode? - javascript

I'm designing a dark mode for my website. Given I have a lot of written content, that would be especially helpful for evening reading. I have a toggle and have borrowed a function that seems to work so far:
$(function() {
$(".switch").click(function() {
$("#canvas-wrapper").css("background", "#222");
$("p").css("color", "#DDD");
});
});
I want the user to toggle these changes on and off as desired. However, when I attempt to add another line - defining a css change for another element - the function only applies the style to the first #canvas-wrapper element. Everything thereafter is ignored.
Is my syntax incorrect later in the function? Also, I need to write the function in a way that returns the CSS to its original state, should the user deactivate the toggle. How would I approach this?
I'm quite poor with jQuery and haven't had a ton of experience with the language.

Instead of changing every single element, you can define the dark mode styles in your CSS, and just use jQuery to toggle the dark-mode class.
I'm assuming clicking the .switch twice would change it back to light mode, and that your current CSS shows the light mode styles by default.
CSS:
#canvas-wrapper.dark-mode {
background: #222;
color: #DDD;
}
jQuery:
$(function() {
$(".switch").click(function() {
$("#canvas-wrapper").toggleClass("dark-mode");
});
});
If you like, you can use CSS variables as well. However, it would still involve class toggling/changing somewhere in your code. Using CSS variables but using vanilla JS: https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8

you may have to write some css for each element whether its in light or dark mode. use javascript to toggle between the two. You can have a class for light mode (.light-mode) then one for dark mode. as long as class-wrapper is a div you should be ok.
I would use a js variable with global access for the mode and tie that into a function.
css
.light-mode{
some more css classes for light mode
}
.dark-mode{
some more css classes for dark mode
}

You need to use css with a target class. Jquery toggleClass() will do the job
.bgDark{background: #4a4a4a !important;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv" class="" style="background: #fff393; border: 1px solid black; width: 100px; height: 100px"></div>
<button onclick="$('#myDiv').toggleClass('bgDark')">toggle bg</button>

You can resolve this issue by doing some tricks, direct answer for your question is by implement toggleClass for dark/light theme.
for example you look to this demo
<div class="change-color">
<p>Hello World</p>
</div>
<div class="change-color">
<p>Hello World 2</p>
</div>
<button>Change color</button>
and our script:
// find elements
var anotherColor = $(".change-color")
var button = $("button")
// handle click and add class
button.on("click", function(){
anotherColor.toggleClass("another-color")
})
and our style:
body {
background: #000;
color: red;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
.another-color {
background: #ddd;
}
But you can resolve issue too by using root variable color, for example:
:root {
--color-bg: #000;
}
.default-color {
background-color: var(--color-bg);
}
.another-color {
--color-bg: #ddd;
}
You can look to this demo too

Related

Can I change the class of a link from one class to another using javascript?

I've been attempting to use the js .toggle feature to change the class of a link to turn it from one colour to another onclick.
<html>
<style>
.the-button-inactive {
display: inline-block;
height: 20px;
width: 20px;
border-radius: 10px;
background-color: black;
}
.the-button-active {
display: inline-block;
height: 20px;
width: 20px;
border-radius: 10px;
background-color: blue;
}
</style>
<body>
<div class="the-button-container">
</div>
<script>
function myFunction() {
var element = document.getElementByID("the-image-1-id");
element.classList.toggle("the-button-active");
}
</script>
</body>
</html>
The link already has the "the-button-inactive" class and I'm trying to switch it to "the-button-active" class on click using the above script though I'm not sure why it's not working. The ultimate goal would be to get the link to change colour from black to blue when clicked and then from blue to black again when another link is clicked.
So far, nothing happens when the link is clicked.
I was able to achieve this previously using buttons instead of links, but have decided to try to tackle this issue using links now.
Here is the jsfiddle I'm using to test this script: https://jsfiddle.net/tqr2h4pb/
The toggle method won't affect the classes that already exist, which is why .the-button-active is persisting.
HTML:
click
Javascript:
function myFunction() {
const element = document.querySelector("#the-image-1-id")
element.classList.toggle("the-button-active")
element.classList.toggle("the-button-inactive");
}
This worked for me to toggle inactive and active states
you had a typo in your code. Change getElementByID to getElementById and it works fine.
you should always check the console for debugging
it says Uncaught TypeError: document.getElementByID is not a function"

Can I make an element inherit the properties of other elements?

We're providing a pre-populated WordPress site for multiple members to use on their servers. The theme has a selector where they can customize their heading colours and fonts. Each member will have different colours based on their branding.
The site also includes a knowledgebase plugin and it uses its own colours which can be customized within its interface. Instead, we'd like to be able to set the knowedgebase colours/properties based on the theme's colour palette. (Ultimately, we'd like the member to only have to change the colors for the theme in one place rather than customize every single plugin.)
So, if H1 is globally set to blue, we'd like to be able to tell the knowledgebase's element (.kb-header) to be the same colour as H1.
Is this at all doable via CSS or Javascript or something?
Many thanks!
You can make an element to inherit the properties of a parent element. For example:
p { color: red; }
a { color: inherit; }
<p>Paragraph with link</p>
But definitely this won't work for what you're asking if your .kb-header is not a child of your h1.
Instead you could use different approaches to get the desired result. For example with custom properties (a.k.a CSS variables)
:root {
--user-color: red;
}
h1 {
color: var(--user-color);
}
.kb-header {
color: var(--user-color);
}
<h1>Title</h1>
<header class="kb-header">This is the header</header>
This way you could, for example, output your :root selector defining all your custom properties in your <head> tag using PHP. And your CSS would be totally independent from it.
If you want to inherit (Object Oriented Programing like) if the html tags doesn't have any relationship, you can use SCSS, for example SASS, it's a text pre processor that generates the CSS with a CSS-like coding with the addition that you can use variables and much more.
For more details visit SASS lang webpage i think this can help you a lot for mostly all your projects.
If you don't want to use SASS, you can even use javascript (with or without libraries) to reach this job, as plain CSS is not capable to conditionally apply styles between non-related tags.
I've written a miniature version of what you're looking for. Hope this helps :P
<html>
<style>
h1 {
background-color: blue;
}
</style>
<body>
<h1>Hey!</h1>
<div class="kb-header">I'm a div :)</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var bgColor = $("h1").css("background-color");
$(".kb-header").css({"background-color": bgColor});
});
</script>
<body>
</html>
In CSS you can combine selectors with a comma and have a single block of rules for both:
.a, .b { property: value; }.
And still style one or another selector with other declarations (example below).
When selectors are unrelated, it causes maintenance problems but if it's generated by a theme generator, that should be OK (you don't want to style those given components but have a clear documented list of what has to be styled with a set of colors).
h1,
.kb-header {
color: darkred;
}
h1 {
font-size: 2rem;
}
#media (min-width: 961px) {
.kb-header {
border: 1px solid tomato;
}
<h1>Title</h1>
<p>Unstyled paragraph</p>
<header class="kb-header">This is the header</header>
You can also add a utility class to all elements that are to be styled with a border, a background color and a color:
/* Theme 1
Primary color: #0055D0
Secondary color: #080;
*/
.c-primary {
color: #0055D0;
}
.bd-secondary {
border: 1px solid #080;
}
/* Common styles */
h1 {
font-size: 2rem;
}
.kb-header {
padding: 1rem;
}
<h1 class="c-primary">Title</h1>
<header class="kb-header bd-secondary c-primary">This is the header</header>
Other answers talking about a Sass environment (or other preprocessors like PostCSS and LESS) and CSS "Variables" (if you don't have to support old browsers like IE11 and Edge ~15 + Saf (iOS and OS X) 9.2 https://caniuse.com/#search=custom%20prop are also fine solutions to your problem IMHO.

jQuery hover event toggle class not triggering

I have been debugging this issue for a good while now and I am so confused to why this isn't working.
As you can see I am running the following code on JSFiddle and it seems to work without any issues at all:
$(".assistance-submit-btn").hover(function() {
$(this).children('i').toggleClass("assistance-submit-btn-mouseover");
});
.assistance-submit-btn {
font-size: 1.4rem;
font-weight:300;
padding: 10px 20px;
background: none;
border: 2px solid #333;
border-radius: 10rem;
color: #333;
margin: 25px auto 0;
display: block;
}
.assistance-submit-btn-mouseover {
transform:translate(10px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="assistance-submit-btn" value="Submit">Submit <i class="fa fa-caret-right"></i></button>
As you can see when the assistance-submit-btn element is hovered it will add a class to the i element.
This code is a direct copy from my local website that I am developing however for some reason on my local system it will not execute when the assistance-submit-btn element is hovered.
So far I have tried adding a CSS hover to the element itself just to see whether or not the element was behind another element and unable to hover.
The only difference that I can think of on my local setup is that the assistance-submit-btn element is pulled in by AJAX. Could this effect the jQuery hover event? Any suggestions to why this might be happening would be much appreciated.
Thanks
UPDATE: Forgot to mention I am getting no errors within my console.
Yes, it's because of Ajax dynamic content. Use this code:
$(document).on({
mouseenter: function () {
$(this).children('i').addClass("assistance-submit-btn-mouseover");
},
mouseleave: function () {
$(this).children('i').removeClass("assistance-submit-btn-mouseover");
}
});

How to make a simple jQuery button that toggles an element's background

I know it probably doesn't get any simpler than this but hey I am a novice. I just want to use the bgtoggle class as a simple change of state button that changes the background color of metro class. I know I am using the wrong approach because what I am trying is not working. Any help is very appreciated! Thanks in advance.
HTML:
<div class="bgtoggle">
</div>
CSS:
.bgtoggle{
position: absolute;
width: 56px;
height: 43px;
right:65px;
top:170px;
color:#fff;
font-size: 3em;
cursor:pointer;
z-index:9999;
background-image: url("../images/mthc/bgtoggle.png");
background-size: 100%;
}
.bgtoggle:hover{
background-image: url("../images/mthc/bgtoggle2.png");
}
And I have this attempt at jQuery which of course is not doing as intended:
$('.bgtoggle').toggle(function () {
$(".metro").css('background', '#000');
}, function () {
$(".metro")css('background', '#fff'));
}
I have created a button, based on your CSS (except the background image which I do not have) and made it change the body's background color instead, so as to provide you with a very visual effect. I know you can take this and apply it whichever way you like. One thing to note, I am using the latest jQuery version here, which means that instead of $ you need to use jQuery, that can be changed back if you wish to use an earlier version.
jsFiddle_1
HTML
<div class="bgtoggle"></div>
jQuery
jQuery(document).ready(function(){
jQuery(".bgtoggle").click(function () {
jQuery("body").toggleClass("bgcolor--yellow");
});
});
CSS
body {
/* set the background to whatever you like, I made it white in color */
background-color: white;
}
.bgcolor--yellow {
background-color: yellow;
}
I noted that you had a few syntax errors on your end to begin with (normal if you are a beginner no big deal). Such as not checking for the document (the webpage) to be ready. I also considered that if you want a button, you will want an on click event to represent a button functionality.
If you really wanted to achieve this via hover, then use mouseover/mouseout instead:
jsFiddle_2
jQuery(document).ready(function(){
jQuery(".bgtoggle").mouseover(function () {
jQuery("body").css("background-color", "yellow");
});
jQuery(".bgtoggle").mouseout(function () {
jQuery("body").css("background-color", "white");
});
});
I think you are asking about How to make a toggle button using jQuery and It perform action whenever toggle event takes place, take a look at the code below.
<html>
<head>
<title>Toggle Button using Jquery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body style="font-family:arial,sans-serif;font-weight:bold;font-size:.9em;">
<center>
<div class="metro" style="width:100;height:100;background-color: rgb(255, 255, 255);">To change Me</div>
<div class="bgtoggle" style="width:100;height:100;cursor:pointer;">Click Here</div>
<script>
$('.bgtoggle').click(function() {
if ($('.metro').css('background-color')=="rgb(255, 255, 255)"){
$('.metro').css('background-color', '#000');
} else if ($('.metro').css('background-color')=="rgb(0, 0, 0)"){
$('.metro').css('background-color', 'rgb(255, 255, 255)');
}
});
</script>
</center>
</body>
</html>
Best of luck for your project!

Toggle divs without using Javascript

I'd like to toggle a <div>, but my requirement is that it must work with javascript turned off. I would like to select a hyperlink that states "modify search" and the div that contains the search criteria displays.
I've found a TON of demos using jQuery, but they all require javascript enabled. Any assistance is appreciated.
Here you go, skipper! (edit — updated for science)
HTML:
<label for=cb>Click Here</label>
<input type='checkbox' style='display: none' id=cb>
<div>
Hello. This is some stuff.
</div>
CSS:
input:checked + div { display: none; }
edit — an additional note: display: none will cause certain browsers (IE) to pay no attention to the <input> checkbox. Instead of hiding it with the display CSS attribute, you can "move" it offscreen with something like position: absolute; left: -10000px;.
The <details> element does what you ask without any CSS or JavaScript applied.
It is of course not a div, so it doesn't answer your question literally, but I read your requirement being having some content you wish to conditionally reveal or conceal.
The <details> creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the <summary> element.
Unfortunately browser support for <details> is less than perfect, IE and Edge currently having no support at all. Edge status is Under Consideration. Development of IE is stopped so it will never gain support.
Here is the simple example follow this and you will be able to create toggle using css without any JAVASCRIPT and JQUERY. You can also add animations using css without JQUERY. CSS3 is AWESOME! :)
.box{width:200px;
height:0;
background:red;
transition:all 0.4s linear;}
input:checked ~ .box{height:220px;}
<input id="toggle" type="checkbox" style="visibility:hidden">
<label for="toggle"> CLICK ME </label>
<div class="box"> </div>
You can't toggle on clicks without javascript. End.
Update:
If you can use CSS 3 selectors, you'll have to change your DOM structure and use CSS 3 selectors without a library that covers old browsers which are probably a lot more common than users with javascript off, You can usee #pointy answer with :selected.
So I would say, practically it's still impossible...!
For a little more polished version of the accepted answer, a common practice is to combine a hidden checkbox + label to be able to have a clickable label on screen that maps to a hidden backing value that is available to both JavaScript (.checked) and to CSS (:checked)
<input type='checkbox' id='css-toggle-switch' checked='checked' class='css-toggle-switch'>
<label for='css-toggle-switch' class='btn'>Error Details</label>
<div class='css-toggle-content'>
<pre><code>Unexpected StackOverflow</code></pre>
</div >
By putting our checkbox first, we can drive CSS decisions based on the :checked selector. We can grab subsequent elements with the adjacent sibling select + or the general sibling selector ~
/* always hide the checkbox */
.css-toggle-switch { display: none; }
/* update label text to reflect state */
.css-toggle-switch + label:before { content: "Hide "; }
.css-toggle-switch:checked + label:before { content: "Show "; }
/* conditionally hide content when checked */
.css-toggle-switch:checked ~ .css-toggle-content { display: none; }
/* make the label look clickable */
.css-toggle-switch + label {
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Working Demo in jsFiddle & StackSnippets
.css-toggle-switch { display: none; }
.css-toggle-switch + label:before { content: "Hide "; }
.css-toggle-switch:checked + label:before { content: "Show "; }
.css-toggle-switch:checked ~ .css-toggle-content { display: none; }
.css-toggle-switch + label {
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* just some styles to make the demo a little more pleasant */
.btn {
padding: 5px 10px;
background: white;
border: 1px solid grey;
border-radius: 3px;
width: 130px;
display: inline-block;
text-align: center;
}
.btn:hover {
background: #e6e6e6;
-webkit-box-shadow: inset 0 -1px 0 #dddddd;
-moz-box-shadow: inset 0 -1px 0 #dddddd;
box-shadow: inset 0 -1px 0 #dddddd;
}
.panel {
padding: 15px;
background: #ffe06d;
border: 1px solid #d69e01;
border-radius: 3px;
}
pre {
padding: 5px;
margin-bottom: 0;
background: #eaeaea;
border: 1px solid grey;
}
<div class="panel">
<input type='checkbox' id='css-toggle-switch'
checked='checked' class='css-toggle-switch'>
<label for='css-toggle-switch' class='btn'>
Error Details
</label>
<div class='css-toggle-content'>
<pre><code>Unexpected StackOverflow</code></pre>
</div >
</div>
About three years late to the party, but I found this when I was looking to do the same thing, for a mobile menu, and subsequently found a very good solution, so I thought I'd post it for whoever else comes a-hunting.
The basic idea was from this article: http://www.creativebloq.com/css3/build-smart-mobile-navigation-without-hacks-6122800. I think
I've used a slightly simpler approach (stumbled on while setting it all
up). This hides / displays the navigation, by clicking the Menu button.
In the CSS, nav is set as "hidden" and nav:target is set to display. The page has two menu buttons, using the same image, both have class menubutton, absolute position in the same place.
menbuttonON has index 1000, sits outside nav in the html menubuttonOFF has index 1001, but sits inside nav, so it's invisible at first
In the HTML, clicking menubuttonON links to nav, which is then target, so
it displays. Inside that nav is menubuttonOFF, with a higher z-index
than menubutton ON, so that's on top now. Clicking menubuttonOFF links
back to menubuttonON, so nav isn't the target, and disappears, taking
menubuttonOFF with it.
Simplified CSS (without site-specific formatting):
nav {display: none;}
nav:target {display: block !important;}
.menubutton { position: absolute;
text-align: right;
top: 0;
margin-top: 14%;} /* This margin puts it below the header logo */
.menubuttonON {z-index: 1000;}
.menubuttonOFF {z-index: 1001;}
HTML
<header> <!-- logo here --> </header>
<div class="menubutton menubuttonON" name="buttonON"><img src="../Images/menubutton.png">MENU</div>
<nav id="nav" name="nav">
<div class="menubutton menubuttonOFF"><img src="../Images/menubutton.png">CLOSE</div>
<ul> <!-- all the navigation stuff --> </ul>
</nav>
You can see it working here: http://www.thewritersgreenhouse.co.uk/storyelements_resources/storyelements.htm.
What you ask is impossible without JavaScript. (Or, as #Pointy has pointed out, CSS3 selectors.)
You will have to modify your requirements, or better yet, just display the form by default and hide for JavaScript users (if necessary). Your page can work for everyone, and have unimportant features disabled for those that cannot use them.
No Javascript, no toggling. There are some pseudo CSS3 methods, but if you have to support JS off, you're certainly not supporting CSS3.
As others have said, you must use JS to achieve toggling of divs. If you want your website to work with javascript disabled, you need to design your website to fail gracefully when javascript isn't available. In other words, your website should NOT rely on JavaScript to function. Ex: AJAX forms should fall back to HTTP submit, etc.
You can't do it without using either Javascript or sending another request.
If you can live with the extra request (that is, an added page load is OK), then the most straightforward solution is to point the link to the current URL, but add a query string parameter, e.g. http://example.com/current-page?showsearch=1. Then, on the server, check if the showsearch parameter is set, and if so, initialize the search div to be visible.
Of course you will have to take care that the rest of your page state survives the request; you may have to use a form to be able to carry over any data the user may have entered, and this most likely means your link can't be a link, but has to be a button (because links cannot trigger form submits without Javascript).
The way to make this work with JS disabled is have the hyperlink have some href that accomplishes the task you desire - like:
/the/original/url?advanced-search=true
where the web server delivers different content when ?advanced-search=true is there. if JS is enabled, the jquery code you've researched should just cancel the original action.

Categories

Resources