Develop Reference

Getting jQuery to push a value from an 'a' link

Hoping this is fairly simple and I've just overlooked something...
I currently have a page with a bunch of checkbox options. Each checkbox will execute a very simple script adding its value to a string, where it then gets passed over to PHP to do the rest.
The html part for the checkboxes looks like this (repeated for multiple years):
<input type="checkbox" value="2017" class="value_year" onclick="filterdb()" />2017
And the script looks like this:
var year = [];
$('.value_year').each(function(){
if($(this).is(":checked"))
{
year.push($(this).val());
}
});
year = year.toString();
This works perfectly for a checkbox. However, I'm giving the site a makeover now and want to replace checkboxes with regular 'a' links, that I've styled up in CSS to look much prettier when selected/unselected. The problem is I can't figure out how to replicate the behaviour of the script when clicking the link as opposed to checking a checkbox.
The html for the new link looks like this:
<a class='filter value_year' id='filter2017' value='2017' onclick='filterdb()' href='javascript:void(0);'>2017</a>
Is there a simple way to adapt the script to work here?
Many thanks

Don't use an <a>nchor, value isn't supported, it's type of interaction is different than a form control, stick to what you already have. Just hide the checkboxes (they are pain to style) and add a <label> for each checkbox.
In the example below, each <label> is associated to the <input> positioned before it. When a <label> is associated with an <input>, the <label> becomes an extension to the <input> -- clicking the <label> causes the associated <input> to act as it was clicked as well. This association is enabled by assigning the <label> the following:
<label for="ID_of_input_it_is_associated_with"></label>
The JavaScript can stay as it is, in the example, it is modified as an event handler for demo purposes, but there's no harm in using it if it actually serves your purposes.
CSS has details commented in example. Note: hiding checkboxes and a few other rulesets are valid but they are not good for accessibility. Seeing that you're new to this facet, that concern is probably not a factor yet.
let years = [];
$('.year').on('change', function() {
years.length = 0;
$('.year').each(function() {
if ($(this).is(':checked')) {
years.push($(this).val());
}
});
console.log(years.toString());
});
/* ✣ Not good for accessability */
html {
font: 2ch/1.25 Consolas
}
/* Each checkbox is hidden ✣ */
.year {
display: none;
}
label {
display: inline-block;
font: inherit;
margin: 2px;
padding: 2px 4px;
color: navy;
border: 1px groove rgba(129, 129, 129, 0.3);
border-radius: 6px;
cursor: pointer;
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
/*
These two rules remove the
highlighting for Chrome and
Android ✣
*/
-webkit-tap-highlight-color: transparent;
user-select: none;
}
/*
The "+" means apply styles to <label>
if there is a ".year" that is ":checked"
positioned before it.
Google "adjacent sibling combinator"
*/
.year:checked+label {
color: cyan;
background: #000;
}
.year:checked+label:hover {
color: lightblue;
background: rgba(0,0,0,0.5);
}
label:hover,
label:active {
color: white;
background: rgba(51, 51, 51, 0.4);
}
label:active {
transform: scale(0.90);
transform-origin: center;
transition: all 0.3s ease-out;
}
/* Remove Chrome blue outline ✣ */
:focus {
outline: none !important;
}
/*
Demo purposes only -- styles for console
*/
.as-console-row::after { width: 0; font-size: 0; }
.as-console-row-code { width: 100%; word-break: break-word; }
.as-console-wrapper { max-height: 50% !important; max-width: 100%; }
<input id='chx1' class='year' type='checkbox' value='2017'>
<label for='chx1'>2017</label>
<input id='chx2' class='year' type='checkbox' value='2018'>
<label for='chx2'>2018</label>
<input id='chx3' class='year' type='checkbox' value='2019'>
<label for='chx3'>2019</label>
<input id='chx4' class='year' type='checkbox' value='2020'>
<label for='chx4'>2020</label>
<input id='chx5' class='year' type='checkbox' value='2021'>
<label for='chx5'>2021</label>
<input id='chx6' class='year' type='checkbox' value='2022'>
<label for='chx6'>2022</label>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

If you insist on using <a> elements as your option switches (see #RobinZigmond and my comments above) then maybe this might be helpful:
var year = [];
document.querySelectorAll("a.value_year").forEach(l=>l.onclick=ev=>{
ev.preventDefault();
l.classList.toggle("checked");
console.log([...document.querySelectorAll("a.value_year.checked")].map(l=>l.getAttribute('href')).join(","));
})
.checked {color:red}
<a class='filter value_year' href='2017'>2017</a>
<a class='filter value_year' href='2018'>2018</a>
<a class='filter value_year' href='2019'>2019</a>
<a class='filter value_year' href='2000'>2020</a>
The click handler for the a.value_year elements does two things:
it sets the checked class for the clicked element
it loops over all a.value_year.checked elements and collects all their .href attribute values into an array.

Load additional CSS file w/ a toggle switch when switched

I have a additional css file I would like to load, once enabled through a toggle switch.
& inversely allow it to be unset and revert back to the default .css file when un-switched.
I seem to be having a bit a troubles in successfully adding this, as writing java-script is a bit tricky for me sometimes. So I call on the community to offer their input & how they would go about adding this ability. Thanks to everyone in advance for you're time & reading!
Here is the URL for the site: (https://phpstack-726541-2423367.cloudwaysapps.com/) You can see the toggle switch in the top right corner
It would be greatly appreciated for the simplest solution possible to this :)
????
Bootstrap toggle switch, so no custom or additonal css to include.
The path for the intended css file is 'assets/css/dark-theme.css'
<div class="custom-control custom-switch" style = "display: inline-block; padding: 0px 10px 0px 10px;">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1"></label>
</div>

TL;DR. Switch CSS classes to control color themes
You might want to review this answer: https://stackoverflow.com/a/63087710/7216508
I understand you are using Bootstrap, and thus the code snippet below might not be ready-to-use by simple copy-paste. But hope it'd give you a general understanding of how this could be achieved.
In a nut-shell, you could assign theme colors in CSS variables and override their values depending on the user selection. In your case you might want to merge the two CSS files and refactor the structure a bit.
document.querySelector('.switch').addEventListener('click', () => {
document.body.classList.toggle('dark');
});
:root {
--bg-nav: #333;
--bg-body: #f0f0f0;
--text-nav: #fff;
--text-body: #202020;
}
body {
margin: 0;
min-height: 100vh;
position: relative;
display: flex;
flex-direction: column;
background-color: var(--bg-body);
color: var(--text-body);
}
body.dark {
--bg-nav: #112200;
--bg-body: #333;
--text-nav: #fff;
--text-body: #fff;
}
main {
flex: 1;
padding: 15px;
}
header, footer {
background-color: var(--bg-nav);
color: var(--text-nav);
padding: 10px;
}
<header>Header Nav</header>
<main>
<h1>Test Page</h1>
<p>Here is a sample page</p>
<button class="switch">Switch theme</button>
</main>
<footer>Footer Nav</footer>

How to fill the input type = range in chrome?

I have to use an input type = range in my web app.
The problem is that it seems to not fill properly.
Have a look:
This is my code:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular-csp.min.css" integrity="sha512-nptw3cPhphu13Dy21CXMS1ceuSy2yxpKswAfZ7bAAE2Lvh8rHXhQFOjU+sSnw4B+mEoQmKFLKOj8lmXKVk3gow==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js" integrity="sha512-7oYXeK0OxTFxndh0erL8FsjGvrl2VMDor6fVqzlLGfwOQQqTbYsGPv4ZZ15QHfSk80doyaM0ZJdvkyDcVO7KFA==" crossorigin="anonymous"></script>
<input type="range" min="0" max="3" value="0" #change='${this.handleTableColumns}'>
(The function called #change hides the table column with the index equal to e.target.value).
Do you have any idea to fix this issue?
Thanks in advance!

Ok guys, I found the bug: there was a css that styled inputs in an inusual way. I changed it styling in this way only the specific input tags and not the range input tag.
This was the css rule that broke the range input. This explains also why the code snipped posted here is working. Thanks to all! Have a good day
.styled-input {
padding: 4px 20px;
margin: 0 4px;
font-size: 14px;
border-radius: 2px;
border: 1px solid;
outline: none;
}

How do I style an input[range]'s thumb using ONLY javascript?

So I have a range/slider <input type="range">And I got some css to make it look like this:
I would like the thumb to change color as it slides, I got the JS down that I can get the color based on it's value 1-100 but I don't know how to access the range's thumb. Everywhere I look I can access the thumb via CSS but nothing on JS.
My attempts been similar to:
slider.thumb //undefined
slider.shadowRoot //null
slider.style.webkitSliderThumb // undefined
slider.style.thumb // undefined
slider.childNodes // []
slider.children // []

The best way is to use CSS Variables to then pass on the color to the psuedoselector. I have put a very simple example together below:
const input = document.querySelector( 'input' );
input.addEventListener( 'input', event => {
// This assigns the strength of the color to a CSS variable, which will in turn style the slider.
input.style.setProperty( '--color', `rgba(${input.value},0,0,1)`);
})
:root {
--color: rgba(0,0,0,1);
}
input[type=range] {
width: 100%;
height: 1em;
appearance: none;
-webkit-appearance: none;
background: linear-gradient( 90deg, black, red );
}
input[type=range]::-webkit-slider-thumb {
background: var(--color, white);
appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 20px;
border: 1px solid white;
}
<input type="range" value="1" min="0" max="255" step="1" />
The elegant bit here is that its nice compatible with all old browsers as well, as you can define the default of white for those people who couldnt be bothered to get modern browsers.
And no, there is no access for pseudo elements in JS as they are... not technically there.

Jquery - Textbox having two values which are uneditable

Original Design:
Desired Design:
I want to have a Textbox having Predefined characters SD and users can add another characters or numbers. But SD cannot be deleted nor edited. Is it possible?
Thanks in Advance

You can work around like this
<div style="position:relative">
<input type="text" style="padding-left:25px" />
<span style="position: absolute; padding: 3px 0; left: 5px">SD</span>
</div>
don't forget to change the padding and left values to suit your font and size.

You can experiment a bit with two inputs and removed left / right borders. A quick solution I just created may look like this:
CSS:
input {
border: 1px solid black;
}
input[readonly] {
border-right: 0;
width: 20px;
}
input:not([readonly]) {
border-left: 0;
}
HTML:
<input type="text" value="SD" readonly="readonly"><input type="number" value="123">
Demo: http://dabblet.com/gist/9593231
It is up to you to adapt this to your overall design.