Develop Reference

How to create a jQuery function to toggle dark mode?

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

Change div to class active only when needed

I am trying to get each title/block bar of my little carousel controls to change to blue when 'active' and showing its content. Right now they will keep switching between blue and black when clicked, this is pretty much just be testing things out but overall is there anyone which may be able to amend my javascript to control the active/non active state of each button to do this.
I've left a live url to have a look so you can see and some code:
Live URL: http://bit.ly/1bijza0 (Homepage, next to the large image.)
HTML
<ul id="index-controls">
<li><div id="1" class="active">FREE DISC Profile</div>
<ul>
<li><h2>Training that fits like a glove</h2></li>
<li><p>Your company is as individual as the people it employs; and as such, it’s likely that your training requirements don’t tick any one, particular box. You may currently have a personnel issue that requires urgent attention. Or, you are taking a serious look at the management strategies you use to run your organisation and are considering an overhaul.</p></li>
</ul>
</li>
<li><div id="2">Last Minute Availability</div>
<ul>
<li><h2>Training that fits like a glove</h2></li>
<li><p>Your company is as individual as the people it employs; and as such, it’s likely that your training requirements don’t tick any one, particular box. You may currently have a personnel issue that requires urgent attention. Or, you are taking a serious look at the management strategies you use to run your organisation and are considering an overhaul.</p></li>
</ul>
</li>
<li><div id="3">Bespoke Training</div>
<ul>
<li><h2>Training that fits like a glove</h2></li>
<li><p>Your company is as individual as the people it employs; and as such, it’s likely that your training requirements don’t tick any one, particular box. You may currently have a personnel issue that requires urgent attention. Or, you are taking a serious look at the management strategies you use to run your organisation and are considering an overhaul.</p></li>
</ul>
</li>
</ul>
JavaScript
jQuery('#1').click(function () {
jQuery(this).toggleClass('active');
});
jQuery('#2').click(function () {
jQuery(this).toggleClass('active');
});
jQuery('#3').click(function () {
jQuery(this).toggleClass('active');
});
CSS
#index-controls div { display: block; background-color: #222424; font-weight: bold; margin: 0px; cursor: pointer; padding: 19px 20px 20px 20px; border-bottom: 1px solid #4e92ad; color: #fff; font-size: 1.1em; }
#index-controls .active { background-color: #4e92ad; }
#index-controls ul { padding-left: 0; margin-top: 0; }
#index-controls ul{ display: none; background-color: transparent; padding: 10px 10px 0px 10px; }
#index-controls ul li { list-style-type: none; background-color: transparent; width: 240px; color: #fff; font-size: 12px; }

Firstly, don't use a number for your id, and don't use a number as the first letter of an id.
Secondly, don't use id's for the jquery part of this.
Give all those divs the same class, such as class="same-class"
like this:
<div id="one" class="active same-class">FREE DISC Profile</div>
<div id="two" class="same-class">Last Minute Availability</div>
<div id="three" class="same-class">Bespoke Training</div>
And then for your jquery do this.
jQuery('.same-class').click(function(){
jQuery('.same-class').removeClass('active');
jQuery(this).addClass('active');
});
So whenever you click on an element that has class="same-class" , it will remove any active class from any of the elements with same-class, but then it will add the class active to the one you clicked on.
So this will work for all three of those div's, as well as if you added a thousand more divs with that same class.
EDIT : Here's a demo http://jsfiddle.net/az4c3/

As a quick fix you could just do that:
jQuery('#1,#2,#3').click(function(){
jQuery('#1,#2,#3').removeClass('active');
jQuery(this).addClass('active');
});
Keep in mind, that this is no flexible solution and you want to keep your code reusable. So in the long run you want to work with classes rather than id's to keep your code flexible. There is also one unnecessary "search-query" in the above code. A refactored, much nice approach would be something like:
var $clickables = $('.clickable');
$clickables.click(function(){
$clickables.removeClass('active');
jQuery(this).addClass('active');
});
This will make your code scale with the number of .clickable elements you add, if you once want to extend your accordion to a 4th or 5th element.

Something like this should do the trick for you:
jQuery("#input-controls div").click(function() {
jQuery("#input-controls div.active").add(this).toggleClass("active");
});

Here's a JSFiddle that is very flexible:
http://jsfiddle.net/8VxLw/1/
var list = jQuery('#index-controls li div');
list.click(function() {
list.removeClass('active');
jQuery(this).addClass('active');
});

Icon to move when hovering over a menu button

Before you read this please get up this website to see what I am trying to do:
https://www.kris-willis.com
As you can see there is a RED arrow located below the menu and what it is that I'm trying to achieve is... when I hover over a menu button the arrow moves to the same button I'm hovering over without reloading the page.
Ideally I'd like the arrow to move back to a default button.. and also for the default button to change if clicked on a different menu button.
If you know any links to examples etc... I would really appreciate it!
Thank you for your time,
Kerry x

The first thing is that you have a wrong DOCTYPE.
<!DOCTYPE html PUBLIC "">
This causes you page to load in quirk mode. Change it to
<!DOCTYPE html>
for HTML5 or use the complete one including the FSI & FPI.
Second is you are using a <table> for navigation. Nothing seriously wrong with it but people tend to use ul
For the :hover, you can simply use
#MenuPosition table tbody tr td:hover
{
background-image: url("/images/Arrow.jpg");
}
You might have to play with paddings and margins or maybe use display: block or display: inline-block to position the arrow correctly.

Make the "buttons" anchors. Using css set create a rule for :hover to set a background image that contains the arrow.
There are plenty of CSS tutorials out there, Nettuts and Webdesigntuts have a lot of navigation articles. Or if you are comfortable with emulating others, find a site you like and pick apart the source until you figure out how they did it.
Keep in mind that javascript is not at all necessary to accomplish what you are doing. Unless you want some animations, and even then CSS can handle most of that work, pure CSS in my opinion is the better approach.

PURE CSS SOLUTION
Check this answer.
Is there any way to hover over one element and affect a different element?
So it might be:
#thething {
margin: 0;
}
.classone:hover + #thething {
margin-top: 10px;
margin-left: 10px;
}
If they're adjacent siblings in a parent div.

Just move the arrow bymargin-left with respect to left of the td DEMO
$("#Arrow").css({"margin-left":$(this).position().left+($(this).width()/2)-2});
Tp do this Add jQuery libirary to the head section of your page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Add this code in a external js file and add it to head section of your page
$(function(){
$("#MenuPosition").on("hover","td",function(){
$("#Arrow").css({"margin-left":$(this).position().left+($(this).width()/2)-2});
});
});
EDIT : For restoring the arrow orignal position use
$(function(){
currentPos = $("#Arrow").css("margin-left");
$("#MenuPosition").on("hover","td",function(){
$("#Arrow").css({"margin-left":$(this).position().left});
});
$("#MenuPosition").on("mouseout","td",function(){
$("#Arrow").css({"margin-left":currentPos});
});
});
NOTE : PLEASE SEE THE CALCULATION PART AND CORRECT IT.
PS: cant correct is because its my log out time from office ;) . but i thing you got the logic to do it

You can do something like this:
Using a span to add the bg arrow below the nav/menu lis in the HTML:
<ul class="nav">
<li>
Menu 1
<span class="arrow"> </span>
</li>
<li>
Menu 2
<span class="arrow"> </span>
</li>
</ul>
The CSS:
.nav {
font-size: anypx;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}
.nav li {
background: #whatev;
display: block;
float: left;
height: anypx;
line-height: anypx;
padding: 0;
text-align: center;
}
.nav li a {
color: #any;
display: block;
padding: any;
position: relative;
text-decoration: none;
width: auto;
}
.arrow {
background: url("images/arrow.png") no-repeat scroll 0 9px transparent;
display: none;
height: anypx;
text-indent: -9999px;
width: whatevs;
z-index: 9999;
}
And Finally the JS/Jquery that makes it work:
$(document).ready(function(){
Your_menu();
});
function Your_menu(){
$(".nav li").hover(function(){
$(this).find('.arrow').css({visibility: "visible",display: "none"}).show();
},function(){
$(this).find('.arrow').css({visibility: "hidden"});
});
}
Here is a site that is showing this :)
http://www.drexelmedicine.org/

href not loading link every time part of the li is clicked. Using javascript to make the whole li clickable

http://hemakessites.com
I'd like to click the About button to go to the About page. I'm using Javascript and JQuery to handle the behavior (make the whole li clickable). For some reason, clicking about in different areas of the li doesn't always load the page.
I'm open to not using jQuery if there's a better solution.
The "contact information" and "hobby projects" li don't have an href, so the links don't work. If you go to the About page, the menu works based on CSS without the javascript trying to make the whole li clickable. So there is no javascript on the about.html page, and you can see the menu problem without any javascript.
Thanks for your help!
index.html
<div class="navcontainer">
<ul><li>Link Title</
li><li>Second_Link Title</ <!-- fixes extra space with </li><li> -->
li></ul>
</div>
style.css
#nav li
{
display: inline-block;
List-Style-Type: None;
float:left;
text-align:Center;
width: 153px;
height:46px;
font-size: 80%;
border-Bottom: 1px solid #666666;
}
#nav li #about
{
z-index: 10000;
position: relative;
top: 18px;
text-decoration: underline;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
}

just add the following in your CSS:
#nav li.about a{
z-index:10000; }
and it will work

Your issue is not the javascript, but the CSS. You have a hover attribute that enlarges the <li>. When you click, the active attribute causes it to shrink, making the element smaller than it previously was. If you click in the upper corners of the enlarged element, it won't load because the element is now below the clickable area. If you click in the middle towards the bottom, it will.
Ultimately, for something like this, you might be better off using jQuery UI to manage your tabs or use Twitter Bootstrap. Out of the box it works, and you don't have to worry about CSS issues, plus they already look nice so no extra styling.
If you want to stick with you already have going, you may just want to ditch the fancy CSS. Get rid of the :active class and it should work okay I think.

The problem you have right now is that the li is bigger then the a. Clicking on the li, but outside the a will not make the link work, as you already found out.
In stead of applying all your styles and effects to the li element, you should apply them to the a element directly and set it to display as a block. This way the li will take the same size as the a, and whereever you click on the hovered item, your href will work just fine. Bigger links is always a good idea, definitly with the amount of tablets and other toutchscreen devices rizing every day.
Note that it will not be a straight copy / paste of your code, especially when it comes to floats and positioning, but it should not be to hard to achieve what you are after by applying the styles directly to the a element. If you have difficulty converting your code, feel free to set up a working example on jsfiddle and we will be happy to help out where possible.
This solution does not require any js what so ever. Using js for your main navigation is always a bad idea, as it will make it hard, if not impossible, to navigate your site for people with js disabled. Not exactly what i would call gracefull degrading...

JQuery autocomplete result style

I'm trying to change the style from my AutoComplete result.
I tried:
// Only change the inputs
$('.ui-autocomplete-input').css('fontSize', '10px');
$('.ui-autocomplete-input').css('width','300px');
I searches and could not find out what the class used by the result is, so that I can change its font size and maybe its width.
Thanks.
Using:
jQuery-UI AutoComplete
EDIT: I need change the css from my result, that comes from my JSON, not from the input. The code you posted, only changes the input, not the result. This is why I asked for the class used by the result list (at least, I believe that is a list). I tried to use fb from ff and could not find it. Thanks again for your patience.
EDIT2: I'll use the autocomplete from jQuery UI as example.
Check this to see the jQuery-UI auto-complete page
After I type "Ja" in the textbox from the front-page sample, Java and JavaScript will appear as Results, in the little box below the textbox.
This little box is what I want to change the CSS of. My code in the sample above only changes my textbox CSS (which I don't need at all).
I don't know if I'm being clear now. I hope so, but if not, please let me know; I'll try harder if needed to show my problem.
The class for the UL that will contain the result items is what I need.
SOLUTION
As Zikes said in his comment on the accepted answer, here is the solution. You just need to put ul.ui-autocomplete.ui-menu{width:300px} in your CSS file.
This will make all the the results box css have width:300px (like the sample).
I forgot that the results object does not exist on page load, and therefor would not be found and targetted by a call to $('...').css(). You'll actually need to put ul.ui-autocomplete.ui-menu{width:300px} in your CSS file, so that it will take effect when the results are generated and inserted into the page.
– Zikes

Information on styling the Autocomplete widget can be found here: http://docs.jquery.com/UI/Autocomplete#theming
Fiddle
HTML
<input type="text" id="auto">
jQuery
$('#auto').autocomplete({'source':
['abc','abd','abe','abf','jkl','mno','pqr','stu','vwx','yz']
});
CSS
ul.ui-autocomplete.ui-menu{width:400px}
/*
targets the first result's <a> element,
remove the a at the end to target the li itself
*/
ul.ui-autocomplete.ui-menu li:first-child a{
color:blue;
}

I was able to adjust by adding this css to the <head> of the document (above the autocomplete javascript).
Some of the following may be more relevant than others. You could make it specific to the autocomplete input if changing these affects other elements you don't want affected.
<style type="text/css">
/* http://docs.jquery.com/UI/Autocomplete#theming*/
.ui-autocomplete { position: absolute; cursor: default; background:#CCC }
/* workarounds */
html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
.ui-menu {
list-style:none;
padding: 2px;
margin: 0;
display:block;
float: left;
}
.ui-menu .ui-menu {
margin-top: -3px;
}
.ui-menu .ui-menu-item {
margin:0;
padding: 0;
zoom: 1;
float: left;
clear: left;
width: 100%;
}
.ui-menu .ui-menu-item a {
text-decoration:none;
display:block;
padding:.2em .4em;
line-height:1.5;
zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
font-weight: normal;
margin: -1px;
}
</style>

If you are using the official jQuery ui autocomplete (i'm on 1.8.16) and would like to define the width manually, you can do so.
If you're using the minified version (if not then find manually by matching _resizeMenu), find...
_resizeMenu:function(){var a=this.menu.element;a.outerWidth(Math.max(a.width("").outerWidth(),this.element.outerWidth()))}
...and replace it with (add this.options.width|| before Math.max) ...
_resizeMenu:function(){var a=this.menu.element;a.outerWidth(this.options.width||Math.max(a.width("").outerWidth(),this.element.outerWidth()))}
... you can now include a width value into the .autocomplete({width:200}) function and jQuery will honour it. If not, it will default to calculating it.

Just so you know you have two options for optimizing your code:
Instead of this:
$('.ui-autocomplete-input').css('fontSize', '10px');
$('.ui-autocomplete-input').css('width','300px');
You can do this:
$('.ui-autocomplete-input').css('fontSize', '10px').css('width','300px');
Or even better you should do this:
$('.ui-autocomplete-input').css({fontSize: '10px', width: '300px'});