We Keep Coding

Change CSS style sheet directly

I have a unique situation here. I have several buttons in HTML:
Normally they would look like the one on the left, but when I hover my mouse on them, they will animate and look like the right one.
I also added two color pickers which change the background and foreground respectively. (Both pickers effect the whole document as well as the buttons)
// Background color changer
var allb = document.getElementsByClassName('button');
for (var i = 0; i < allb.length; i++) {
allb[i].style.backgroundColor = bgcolor;
}
// Foreground color changer
var allf = document.getElementsByClassName('button');
for (var i = 0; i < allf.length; i++) {
allf[i].style.color = focolor;
allf[i].style.borderColor = focolor;
}
If I use both color pickers, then the animation will break and nothing will change when I hover hover the buttons. I understand why - the color pickers have a persisting effect on the style.
Is there a way to directly change the CSS file, or otherwise bypass this problem?
My code
.button {
font-family: SF, Arial, Helvetica, sans-serif;
background-color: #4c56af;
border: none;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 30px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
border-radius: 10px;
font-family: SF, Arial, Helvetica, sans-serif;
background-color: rgba(255, 255, 255, 0);
color: black;
border: 4px solid #4c56af;
}
.button1:hover {
border-radius: 10px;
font-family: SF, Arial, Helvetica, sans-serif;
background-color: #4c56af;
color: white;
}
Each button would look roughly like this:
<button type="button" onclick=func() class="button button1">Play</button>

You can modify the list of rules contained in a stylesheet. You can do that by means of StyleSheetList and CSSStyleSheet interfaces.
Select the stylesheet in question:
const styleSheet = document.styleSheets[0] // Use the index for the stylesheet whose rules you want to modify
Insert the rules using the insertRule() method:
const bgcolor = "green";
const focolor = "yellow";
styleSheet.insertRule(`
button {
background-color: ${bgcolor};
color: ${focolor};
border-color: ${focolor};
}
`, styleSheet.cssRules.length);
styleSheet.insertRule(`
button:hover {
background-color: ${focolor};
color: ${bgcolor};
}
`, styleSheet.cssRules.length);
If you need, you can remove those rules afterwards through the deleteRule() method.

This is a workaround.
Write your CSS animation code as a separate class, like this:
.button--animated {
border-radius: 10px;
font-family: SF, Arial, Helvetica, sans-serif;
background-color: #4c56af;
color: white !important;
}
Then use themouseenter event on all button elements for adding the transition class to it, and use the 'mouseleave' for removing it:
buttonElement.addEventListener("mouseenter", function() {
element.classList.add('button--animated')
});
buttonElement.addEventListener("mouseleave", function() {
element.classList.remove('button--animated')
});
If it doesn't work, add !important to the button--animated class's CSS. it's not ideal but may get the work done.

How to control the span characteristics based on given data

The following HTML code creates 3 elements, and allows the user to click on them / select them.
const changeColor = (evt) => {
if (evt.currentTarget.classList.contains("is-active")) {
evt.currentTarget.classList.remove("is-active");
} else {
evt.currentTarget.classList.add("is-active");
}
};
const EL_tagger1010_children = document.querySelectorAll(".tagger1010 span");
EL_tagger1010_children.forEach(EL => EL.addEventListener("click", changeColor));
.tagger1010 span {
padding: 6px 10px;
background: #D0E8E4;
border-radius: 18px;
color: #000000;
font-family: Roboto;
font-size: 12px;
margin: 0 4px 8px 0;
font-weight: 500;
display: inline-block;
word-wrap: break-word;
white-space: normal;
cursor: pointer;
user-select: none;
border: 1px solid BBD0CD;
}
.tagger1010 span.is-active {
background-color: #008fde;
color: #ffffff;
}
.tagger1010 span:hover {
background-color: #008fde;
color: #ffffff;
}
<div class="tagger1010">
<span>Google</span>
<span>Microsoft</span>
<span>Facebook</span>
<span>LinkedIn</span>
</div>
<div class="as-console-wrapper"></div>
<div class="as-console"></div>
What I am looking to do is pre-assign spans as "is-active" if the tag is included in a given list.
For example, if you run the above code, and the given list includes "Microsoft" and "LinkedIn" - I would like for "Microsoft" and "LinkedIn" to already be highlighted and have the background-color be #008fde, and the color be #ffffff.
Would anyone know how I could say, "if the text of this span is included in this list, make it have the is-active characteristics"

Checkout here
https://jsfiddle.net/qmx3105s/
<script type="text/javascript">
const changeColor = (evt) => {
if (evt.currentTarget.classList.contains("is-active")){
evt.currentTarget.classList.remove("is-active");
localStorage.removeItem(evt.currentTarget.textContent);
} else {
evt.currentTarget.classList.add("is-active");
localStorage.setItem(evt.currentTarget.textContent,'true');
}
};
const EL_tagger1010_children = document.querySelectorAll(".tagger1010 span");
EL_tagger1010_children.forEach(EL => {
console.log('EL',EL)
if(localStorage.getItem(EL.textContent)){
EL.classList.add("is-active");
}
EL.addEventListener("click", changeColor);
});
</script>

Edited: Search by innerText and Find in Array added.
Original: I highly recommend adding id="X" to your html to make it easier to target the specific tag. Having to rely on the inner text is much more complicated and bad practice.
Then you need an array to hold your IDs and iterate it. Finally we add the .is-active
Here's what that looks like:
const changeColor = (evt) => {
if (evt.currentTarget.classList.contains("is-active")) {
evt.currentTarget.classList.remove("is-active");
} else {
evt.currentTarget.classList.add("is-active");
}
};
const EL_tagger1010_children = document.querySelectorAll(".tagger1010 span");
EL_tagger1010_children.forEach(EL => EL.addEventListener("click", changeColor));
var tag_names = ["Microsoft", "LinkedIn"];
var tags = document.getElementsByTagName("span");
for (var i = 0; i < tags.length; i++) {
if(tag_names.indexOf( tags[i].textContent ) != -1){
tags[i].classList.add('is-active');
}
}
.tagger1010 span {
padding: 6px 10px;
background: #D0E8E4;
border-radius: 18px;
color: #000000;
font-family: Roboto;
font-size: 12px;
margin: 0 4px 8px 0;
font-weight: 500;
display: inline-block;
word-wrap: break-word;
white-space: normal;
cursor: pointer;
user-select: none;
border: 1px solid BBD0CD;
}
.tagger1010 span.is-active {
background-color: #008fde;
color: #ffffff;
}
.tagger1010 span:hover {
background-color: #008fde;
color: #ffffff;
}
<div class="tagger1010">
<span>Google</span>
<span>Microsoft</span>
<span>Facebook</span>
<span>LinkedIn</span>
</div>
<div class="as-console-wrapper"></div>
<div class="as-console"></div>

I am trying to change the style of a html link with javascript functions. Why does my code not work?

In the console I get these types of errors:
ReferenceError: invalid assignment left-hand side
ReferenceError: changeButtonOnMouseOver is not defined
Here is my code:
<!DOCTYPE html>
<html>
<body>
<br />
<br />
<br />
<br />
<script>
function changeButtonOnMouseOver()
{
document.getElementById("btn").style.background-color = "#00806f";
document.getElementById("btn").style.cursor = "pointer";
}
function changeButtonOnClick()
{
document.getElementById("btn").style.box-shadow = "none";
document.getElementById("btn").style.top = "5px";
}
function changeButtonOnMouseOut()
{
document.getElementById("btn").style.border-radius = "15px";
document.getElementById("btn").style.background-color = "#009682";
document.getElementById("btn").style.box-shadow = "0 5px 0 #00332c";
document.getElementById("btn").style.color = "white";
document.getElementById("btn").style.cursor = "auto";
document.getElementById("btn").style.padding = "1em 1.5em";
document.getElementById("btn").style.position = "relative";
document.getElementById("btn").style.text-align = "center";
document.getElementById("btn").style.text-decoration = "none";
document.getElementById("btn").style.font-size = "x-large";
document.getElementById("btn").style.font-weight = "800";
document.getElementById("btn").style.outline = "none";
document.getElementById("btn").style.border = "none";
}
</script>
<a id="btn" href="#" onmouseover="changeButtonOnMouseOver()" onclick="changeButtonOnClick()" onmouseout="changeButtonOnMouseOut()"
style="border-radius: 15px;
background-color: #009682;
box-shadow: 0 5px 0 #00332c;
color: white;
padding: 1em 1.5em;
position: relative;
text-align: center;
text-decoration: none;
font-size: x-large;
font-weight: 800;
outline: none;
border: none;" >
Zur Anmeldung</a>
</body>
</html>
I made the link look like a button and I want to change the style with javascript functions for onmouseover or onclick events so it looks like you press a button when you click the link but I don't know why it doesn't work.

You should use camelCase property name for style in JavaScript:
function changeButtonOnMouseOver(){
document.getElementById("btn").style.backgroundColor = "#00806f";
document.getElementById("btn").style.cursor = "pointer";
}
function changeButtonOnClick(){
document.getElementById("btn").style.boxShadow = "none";
document.getElementById("btn").style.top = "5px";
}
function changeButtonOnMouseOut(){
document.getElementById("btn").style.borderRadius = "15px";
document.getElementById("btn").style.backgroundColor = "#009682";
document.getElementById("btn").style.boxShadow = "0 5px 0 #00332c";
document.getElementById("btn").style.color = "white";
document.getElementById("btn").style.cursor = "auto";
document.getElementById("btn").style.padding = "1em 1.5em";
document.getElementById("btn").style.position = "relative";
document.getElementById("btn").style.textAlign = "center";
document.getElementById("btn").style.textDecoration = "none";
document.getElementById("btn").style.fontSize = "x-large";
document.getElementById("btn").style.fontWeight = "800";
document.getElementById("btn").style.outline = "none";
document.getElementById("btn").style.border = "none";
}
<a id="btn" href="#" onmouseover="changeButtonOnMouseOver()" onclick="changeButtonOnClick()" onmouseout="changeButtonOnMouseOut()" style="border-radius: 15px;background-color: #009682;box-shadow: 0 5px 0 #00332c;color: white;padding: 1em 1.5em;position: relative;text-align: center;text-decoration: none;font-size: x-large;font-weight: 800;outline: none;border: none;">Zur Anmeldung</a>
You can achieve the same with pure CSS:
function changeButtonOnClick(){
document.getElementById("btn").style.boxShadow = "none";
document.getElementById("btn").style.top = "5px";
}
#btn, #btn:not(:hover){
border-radius: 15px;
background-color: #009682;
box-shadow: 0 5px 0 #00332c;
color: white;
padding: 1em 1.5em;
position: relative;
text-align: center;
text-decoration: none;
font-size: x-large;
font-weight: 800;
outline: none;
border: none;
}
#btn:hover{
background-color: #00806f;
cursor: pointer;
}
#btn:not( :hover ){
border-radius: 15px;
background-color: #009682;
box-shadow: 0 5px 0 #00332c;
color: white;
padding: 1em 1.5em;
position: relative;
text-align: center;
text-decoration: none;
font-size: x-large;
font-weight: 800;
outline: none;
border: none;
}
<a id="btn" href="#" onclick="changeButtonOnClick()" >
Zur Anmeldung</a>

You should camelCase for properties of style. Just remove - and make letter after - upperCase e.g background-color => backgroundColor. It will be same for for -. For example:
background-color => backgroundColor
border-left-width => borderLeftWidth
See An aside on variable naming rules.
You can call a variable pretty much anything you like, but there are limitations. Generally, you should stick to just using Latin characters (0-9, a-z, A-Z) and the underscore character
You shouldn't use other characters because they may cause errors or be hard to understand for an international audience

Your script is loaded, before the id btn even exists in the DOM. You should put your script after declaring the id or set your script to be loaded after the DOM isnfully build

As you cannot add/edit the CSS and use classes. Can you create a new style node containing the required styles with JS?
const styleNode = document.createElement('style');
styleNode.type = 'text/css';
const cssStyles = `
#btn {
border-radius: 15px;
background-color: #009682;
box-shadow: 0 5px 0 #00332c;
color: white;
padding: 1em 1.5em;
position: relative;
text-align: center;
text-decoration: none;
font-size: x-large;
font-weight: 800;
outline: none;
border: none;
}
#btn:hover{
background-color: #00806f;
cursor: pointer;
}
#btn:active {
box-shadow: none;
top: 5px;
}
`;
styleNode.appendChild(document.createTextNode(cssStyles));
document.getElementsByTagName('head')[0].appendChild(styleNode);
<a id="btn" href="#">Zur Anmeldung</a>

How to link get focus after page refresh

My problem is this: When I click in a button and then refresh the page, I want my menu clear the previous visited links (turning them to normal again), but keeping the current visited link as a:visited in css.
I think it is simple, but I am beginning in web programming, so I need help. I have found a way to make this. But the problem is it is not working!! This is the code that I have:
< ul id="menuTop">
< li id="menu-link-1">
#Html.ActionLink("Home", "Index", null, null, new { id = "link-1-visited" }) < /li>
< li id="menu-link-2">
#Html.ActionLink("Produtos", "Products", null, null, new { id = "link-2-visited" }) < /li>
< li id="menu-link-3">
#Html.ActionLink("Fale Conosco", "ContactUs", null, null, new { id = "link-3-visited" }) < /li>
< li id="menu-link-4">
#Html.ActionLink("Quem Somos", "AboutUs", null, null, new { id = "link-4-visited" }) < /li>
< /ul>
This is my buttons, and the code to make them "visited" is that:
$(document).ready(function() {
$('#link-1-visited').click(function() {
$("#menu-link-1").removeAttr("menu-link-1");
$(this).addClass('link-1-visited');
window.alert("test 1 !!");
});
$('#link-2-visited').click(function() {
$(this).addClass('link-1-visited');
window.alert("test 2 !!");
});
$('#link-3-visited').click(function() {
$(this).addClass('link-1-visited');
window.alert("test 3 !!");
});
$('#link-4-visited').click(function() {
$(this).addClass('link-1-visited');
window.alert("test 4 !!");
});
});
My code in css is:
ul#menuTop li#menu-link-1 a {
background-image: url("../Content/images/Menu/menu-image-1-alt.png");
margin-right: 1px;
}
ul#menuTop li#menu-link-1 a:hover {
background-image: url("../Content/images/Menu/menu-image-1-hover.png");
margin-right: 1px;
}
.link-1-visited {
padding: 40px 20px 20px;
border-width: 3px;
border-bottom: 0px;
// more styles below...
}
ul#menuTop li a {
border: 3px #98fb98 solid;
border-bottom: 0px;
//more styles below...
}
ul#menuTop li a:hover {
padding: 40px 20px 20px;
border-width: 3px;
border-bottom: 0px;
border-style: solid;
//more styles below...
}
The problem is my code in menu-link-1 is not working. I want to remove the ul and li css and add class "link-1-visited" to it.
Do you have any ideas about how can I do that?

Basically you need to set your links to stay one color in your css, so ...
a, a:visited {
color: blue;
}
And then you just change the color with jQuery on the click event:
$("a").click(function() {
($this).css({"color":"white"});
});
Just change the values to fit what you are using and you should be all set.
For what your trying to do, look into session variables here: Java session variables

/* change the id name according to the page link you want to make focused */
var page = document.getElementById("index").href;
if (page == index) {
document.getElementById("index").className = "active";
}
ul {
list-style-type: none;
}
li a {
display: block;
cursor: pointer;
text-decoration: none;
padding: 10px 20px;
font-size: 13.8px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-transform: uppercase;
color: #555555;
font-style: normal;
white-space: nowrap;
border-radius: 10px;
transition: background-color .4s;
}
.active {
background-color: rgba(0, 0, 0, 0.9);
border-radius: 10px;
color: rgb(255, 204, 65);
}
<ul>
<li><a id="index" href="index.html">Overview</a></li>
<li><a id="wed" href="wed.html">Wedding</a></li>
<li><a id="engage" href="engage.html">Engagement</a></li>
</ul>

Adding more childs to a script

I have a cool script that works with two buttons. I need to add THREE more buttons as options for a total of FIVE altogether.
Does the whole script have to be re-written or could I just add more DIV classes? Not sure how to approch. Working for days on this...
Here is my link: http://jsfiddle.net/9cr4F/9/
HTML:
<div id="r6">
<div class="bx bx1">6</div>
<div id="sp"></div>
<div class="bx bx2">Gender</div>
<div id="sp"></div>
<div id="bxGender">
<input type="button" class="gnM" >
<div id="sp"></div>
<input type="button" class="gnF">
<div id="sp"></div>
<input class="req-string gender" id="gender" name="gender"></div>
</div>
CSS:
#r6 {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.bx {
height:60px;
line-height:60px;
float:left;
font-size:105%;
margin-top:15px;
color: #000;
background-color: #E8E8E8
}
.bx1 {
width:60px;
text-align:center
}
.bx2 {
width:175px;
padding-left:20px
}
#sp {
width: 15px;
height:60px;
float:left;
}
.gnM {
width:137px;
height: 60px;
background:#E8E8E8 url('http://www.41q.org/admin/img/male.png') 0px 0px no-repeat;
margin-top:0px;
padding: 0;
border: 0;
margin-left: 0px;
float: left;
outline: none;
text-align:center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 105%;
font-style:normal;
color:#03F;
}
.gnF {
width:137px;
height: 60px;
background:#E8E8E8 url('http://www.41q.org/admin/img/female.png') 0px 0px no-repeat;
margin-top:0px;
padding: 0;
border: 0;
margin-left: 0px;
float: left;
outline: none;
text-align:center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 105%;
font-style:normal;
color:#03F;
}
#r6 #bxGender .button-toggle-on {
background-position: 0 -120px
}
#bxGender {
width:486px;
height:60px;
float:left;
margin-top:15px
}
#r6:hover div.bx, #r6:hover input {background-color: #A9A9A9; cursor:pointer}
#r6:hover .gnM, #r6:hover .gnF {background-position: 0 -60px; cursor:pointer}
jQuery:
$(function() {
var $buttons = $("input[type='button']");
$buttons.click(function() {
$(this).parent().siblings('.bx, #bxGender .gender').css({'background':'#2F2F2F','color':'#fff'});
$buttons.not(this).removeClass('button-toggle-on');
$(this).toggleClass('button-toggle-on').attr('style','');
var varval = '';
if ($(this).hasClass('button-toggle-on')) {
varval = $(this).hasClass('gnF') ? 'Female' : 'Male';
$(this).siblings('input[type="button"]').css('background-position','0 -180px');
}
else {
$(this).siblings('input[type="button"]').attr('style','');
$(this).parent().siblings('.bx').attr('style','');
}
$("#gender").val(varval);
});
});

First thing you need is a markup to validate, at the moment it is not, IDs in a document must be UNIQUE so when you do
<div id="sp"></div>
you should do
<div class="sp"></div>
and try to get the clone nicely nested, even if it copies badly in here sometimes it helps to even have just few spaces here and there :)
In your CSS don't repeat the same properties if it applies to multiple elements, for example I restructured your gnF and gnM class, so all the properties are together and only the background image property is seperate.
.gnM,
.gnF,
.gnA {
background:#E8E8E8 0px 0px no-repeat;
text-indent:-10000px;
width:137px;
height: 60px;
margin-top:0px;
padding: 0;
border: 0;
margin-left: 0px;
float: left;
outline: none;
text-align:center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 105%;
font-style:normal;
color:#03F;
}
.gnA {
background-image:url('http://www.41q.org/admin/img/alien.png');
}
.gnM {
background-image:url('http://www.41q.org/admin/img/male.png');
}
.gnF {
background-image:url('http://www.41q.org/admin/img/female.png');
}
You can simplify the jquery side by using the value attribute on your button, if you set a text-indent then the text wont show, and then you can simply retrieve the value using $(this).val();
$(function() {
var $buttons = $("input[type='button']"),
varval;
$buttons.click(function() {
// this should be done using a class to keep the js cleaner
$(this).parent().siblings('.bx, #bxGender .gender').css({
'background': '#2F2F2F',
'color': '#fff'
});
$buttons.removeClass('button-toggle-on');
$(this).addClass('button-toggle-on');
$("#gender").val($(this).val());
});
});​
This gives you a lot more flexibility as you can have as many button as you want but if you are building a form with multiple rows, as it seems, I would suggest also using a class for the input that contains the result and modify the value assignment so that it grabs the closest result input and update that, so that way it works for all rows.
Here is the modified fiddle http://jsfiddle.net/9cr4F/14/ - the third buttons styling is screwed of course but I'm sure it gives you what you need :)
Edited: Optimized CSS a bit more
Edited 2: Optimized the jquery code and move the background positioning to the class button-toggle-on as it is on when the background position need to be applied.