I am trying to create a dark mode toggle button with a checkbox (I will eventually change to a toggle in CSS). So far, I was able to change the elements in my Javascript canvas to be in "dark mode" and changed their color easily but is there a way I can use this same switch/checkbox in the Javascript to also toggle the CSS portion? I do not want to create another checkbox to change the background color of the HTML. I tried the method below with no result. I want the checkbox to basically turn the background of the webpage black and go back to white if unchecked. My full code is on CodePen https://codepen.io/Fragile404/pen/VxZVxm
body {
background-color: white;
}
body.checkbox: checked;
{
background-color: black;
}
You'll need to use JavaScript for this. Change your final if to:
if(darkMode.checked) {
toggleColor = (0,0,0);
document.body.style.backgroundColor= 'black';
} else {
toggleColor = (255,255,255);
document.body.style.backgroundColor = 'white';
}
Why? CSS only parses forwards and downwards. Which means you can use a parent condition in order to style a child and you can use a condition on a previous sibling to style up a later one, but not the other way around.
There were many discussions around the subject and attempts to change the status-quo but, in reality, if CSS would also parse backwards, web would be ten fold slower, at least.
Related
I am trying to change the color of the active category/page.
I don't want to modify files and anyway, I can't, so I am trying to change it through:
Appearance > Menus
Putting the HTML code into the Navigation Label of the page I want to customize.
I found one code and it seems to work properly:
<span style=”color: #a57a6b;”>Home</span>
But this code changes the color at all.
How could I transform it to work only while in the active module?
Run in Browser console
Array.prototype.slice.call(document.querySelectorAll('span')).filter(function (el) {return el.textContent === 'Home'})[0].style.color = "blue";
Where ...color = "blue" is color what you want
HTML by itself has static properties.
Changing the color must change the color: parameter in the HTML language itself. Do you want to consider using additional languages like CSS?
If you only rely on full HTML, color change can be done by redirecting a different page with the same data and a different color: attribute.
I have button which is <a> element with href, which doesnt have any background set on :active/:focus/:visited, but on force/3dTouch tap it gets this weird #b8b8bc background under the text only (while <a> doesnt have any children e.g. <span> etc so I suppose this is the text node highlight).
here's the gif to illustrate the behavior.
I've tried adding -webkit-tap-highlight-color: transparent but it changes only regular tap color, not the forced/3d one
also I thought maybe that's selection color (as I can reproduce this on various websites) so tried to use selection selectors which didn't help as well
::selection {
background: transparent;
}
::-webkit-selection {
background: transparent;
}
::-moz-selection {
background: transparent;
}
Any ideas about possible origin of this?
Good job digging up.
I had the same issue plus another one and here are my solutions.
Post is old but someone could find it useful like me today.
First of all, the forced background was covering my link text totally because I was using user-select: none; on my header links.
So that's something to check, just in case.
Regarding the background color, Force Touch doesn't use the link parent element background but the one that's under it.
If you want to "feel it", we could say that Forced Touch digs into the direct parent background and let the under layer appears.
So, to counter that without having to touch to background color, I use some z-index in the parent element to elevate it, preventing Forced Touch to "dig" :)
So if your links parent element is named card, you can add to your CSS:
.card {
isolation: isolate;
z-index:1;
}
Now, Force Touch will use the parent background color as we want to.
Okay so I found sort of "solution" based on parent's color.
Try to set *{background: red}.
If worked try set same on few parents .parent1 { background: pink}, .parent2 { background: lightblue}, .parent1 { background: salmon} etc.
In my case I found the color applied to force touched text was menu wrapper's background that takes most of the screen when menu is opened.
Side effect of this change - all forcetouched elements will have same color, no option to specify :hover or :active colors (you can see the color is slightly different on the 1st click) and ALL links will have same background:
I imagine you can try setting wrapper's background via JS based on what is clicked. Not sure if that will work. see docs here:
WebKit DOM Programming Topics
So far this seems to me too fragile to touch and I would not recommend doing this. Though you can change this color I've decided to let OS do what it wants here.
I've been looking for a way to easily style checkboxes even in those cases where I don't have labels but I haven't found any answer that completely satisfied me so I decided to try and find a way by myself so that all the others might find it useful.
This is what I ended up with.
CSS Checkbox without label
What I do is basically style the after elements and set pointer-events to none so you'll be able to click true the after element.
This allows us to let the checkbox handle the click and change its state from checked to unchecked and we'll then style the after element depending on the checkbox state.
This will be the unchecked style
.check:after{
pointer-events: none;
background: white;
content: ...
....
}
And then we'll have our checked style
.check:checked:after{
background: green; /* Change background and maybe image */
....
}
Please notice that the original checkbox will be still visible under the after element since we can't hide it (hiding it will end up hiding after and before elements too) so you can't play with transparency on your after element but you can still play with background image position and background color as I did in the example.
I hope this will help you with your styles! :)
I know it's a really basic thing but I can't change the button background colour using javascript. I want to change it using the class so i can do it for multiple classes. The javascript does link to the html.
The button code is:
<button class ="buttonlink" onmouseover='hoverOver()'onclick="location.href='aboutme.html'">About Me</button><br>
The function i tried is:
function hoverOver(){
var x = document.getElementsByClass('buttonlink');
alert("x");
}
I know this question has been asked before probably but I look and I couldn't find anything that directly linked, I am really new to this and don't really know what I am doing.
Changing a buttons background color using a mouse hover is not done with Javascript(although it can be). The proper way to do it is with CSS using:
a.button:hover
If you want the background of a button to change when hovering over another part of the screen, then use javascript.
Here's a quick example:
a.button a:hover{
background: #FF0;
}
I'm trying to create a rather unique effect. It's actually not that complicated, what I'm trying to do is build an experimental site, which I have already done. I just can't seem to figure out how to go about doing the final step.
So this is my site I'm tinkering with http://www.dig.ital.me/sandbox/about-me/
And what I'm trying to do is collapse the left-side bar that has the text in it : "Made in blah blah blah, etc." By clicking on the : " Click this to hide this " .
And I've tried going about doing an anchor link associated with a name link and calling the display:none when that link is clicked. However, it isn't working. So I thought I would try stackoverflow, on how I could about achieving this kind of effect where it collapses, and re-opens again.
#hide-option { color:#FFF; width:500px; height:500px; padding-left:170px;}
#hide-option:hover .fixedfooter {
display:none;
cursor:pointer; }
Here's a snippet of the hide-option div id. I've exhausted a lot of routes to try and achieve this effect but I cannot seem how to figure it out. I've tried the :onClick class, and nth-child classes, but nothing seems to work.
// Store the footer as a variable, so we don't have to keep calling jQuery's selector engine
// It's slower than a tortoise stuck in a traffic jam.
var target = $('.fixedfooter');
// Every time the hide-option link is clicked
$('#hide-option a').click(function() {
// If the left position of the target is 0
if(parseInt(target.css('left')) == 0) {
// Check the target is not animated and, if it is, animate off screen
!target.is(':animated') && target.animate({left: -751}, 250);
} else {
// Assume it's hidden, and put it back to the start
!target.is(':animated') && target.animate({left: 0}, 250);
}
// Stop the link being followed
return false;
});
JQuery, the JavaScript library, will solve it all for you.
$("el").bind("onclick",function(){$("el").toggle('slow');});
If you only want CSS3 (if you don't care about IE6-8), here's something you could try: http://jsbin.com/isunoz/6/edit
I've commented it as much as possible, I hope it helps :)
What I've done is to use a checkbox input to decide if the sidebar should be shown or not.
By putting the checkbox input element right before the sidebar element (div.fixedfooter) and changing your anchor (the arrow) into a label for that checkbox, I'm able to use the :checked pseudo class and the + selector to target the sibling element (in this case, the sidebar div.fixedfooter). If the checkbox is checked, the sidebar is moved out of the screen and if it's not checked, the sidebar is shown (left: 0).
For the animation I've used some css3 transition (transition: left .4s ease) :)