I am trying to make kind of dark mode switcher for night reading, the problem is how to switch all the black text to white (black text in different p tags and different h tags each have it's own class, see the snippet)
i am fine with the colored text, don't need to switch it,
i tried with attribute selector, but no much luck
body.dark-mode [color=black] {
color:white;
}
function toggleDarkLight() {
var body = document.getElementById("body");
var currentClass = body.className;
body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
}
.three{
color:green;
}
.first{
color:blue;
}
.one {
color:red;
}
.another{
color:black
}
body.dark-mode {
background-color: #111;
}
body.dark-mode button {
background-color: #eee;
color: #111;
}
body.light-mode {
background-color: #eee;
}
body.light-mode button {
background-color: #111;
color: #eee;
}
<body id="body" class="dark-mode">
<h1 class="three">Dark/Light Mode Switcher</h1>
<button type="button" name="dark_light" onclick="toggleDarkLight()" title="Toggle dark/light mode">🌛</button>
<div>
<h1 class="first">title</h1>
<h1 class="some">title 2</h1>
<p class="one">Just press the button above to toggle!</p>
<p class="another"> some text</p>
</div>
</body>
In css there is no selector like that (and for a good reason - it would cause an infinite feedback loop, after all). You need to just target every single class by hand - or, if it's reasonable, just use body.dark-mode * { color: white; } to color everything white - and just then exclude elements you want to stay differently colored.
Maybe you can use js. Then something like this could help:
https://codepen.io/anon/pen/OdyPJG
document.querySelectorAll("*"),
i=0, ii=allElements.length;
for(i; i<ii; i++){
let element = allElements[i]
if(getComputedStyle(element).color === 'rgb(0, 0, 0)'){
element.classList.add('white')
}
}
This should do it.
function toggleDarkLight() {
var body = document.getElementById("body");
var currentClass = body.className;
body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
}
.three{
color:green;
}
.first{
color:blue;
}
.one {
color:red;
}
.another{
color:black
}
.dark-mode .some {
color:white
}
.dark-mode .another{
color:white
}
body.dark-mode {
background-color: #111;
}
body.dark-mode button {
background-color: #eee;
color: #111;
}
body.light-mode {
background-color: #eee;
}
body.light-mode button {
background-color: #111;
color: #eee;
}
<body id="body" class="dark-mode">
<h1 class="three">Dark/Light Mode Switcher</h1>
<button type="button" name="dark_light" onclick="toggleDarkLight()" title="Toggle dark/light mode">🌛</button>
<div>
<h1 class="first">title</h1>
<h1 class="some">title 2</h1>
<p class="one">Just press the button above to toggle!</p>
<p class="another"> some text</p>
</div>
</body>
You could create an extra class which makes specific elements styling change depending on the class of the body.
As far as I know you cannot create styling that is dependent on a specific color that the element already has.
function toggleDarkLight() {
var body = document.getElementById("body");
var currentClass = body.className;
body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
}
.three{
color:green;
}
.first{
color:blue;
}
.one {
color:red;
}
.another{
color:black
}
body.dark-mode {
background-color: #111;
}
body.dark-mode button {
background-color: #eee;
color: #111;
}
body.light-mode {
background-color: #eee;
}
body.light-mode button {
background-color: #111;
color: #eee;
}
body.dark-mode .canToggle{
color: #eee;
}
<body id="body" class="dark-mode">
<h1 class="three">Dark/Light Mode Switcher</h1>
<button type="button" name="dark_light" onclick="toggleDarkLight()" title="Toggle dark/light mode">🌛</button>
<div>
<h1 class="first">title</h1>
<h1 class="some canToggle">title 2</h1>
<p class="one">Just press the button above to toggle!</p>
<p class="another canToggle"> some text</p>
</div>
</body>
Related
I was able to change the color of the text but i am not able to understand how to change the background color of the p tag. If someone can please let me know hoe to do it. Below is my HTML and JS code.
function button(){
var btn = document.getElementById('btn');
btn.addEventListener('click', function onClick(event) {
// Change text color globally
document.body.style.color = 'red';
});
}
button();
<style>
p{
box-sizing: border-box;
border: 1px solid black;
height: 20px;
width: 300px;
text-align: center;
}
</style>
<p>Welcome To My Domain</p>
<button id="btn">Button</button>
You could add a class to the p tag and then query that within your event listener and set its style attribute, document.querySelector('.classname').style.backgroundColor = 'somecolor'
function button() {
var btn = document.getElementById('btn');
btn.addEventListener('click', function onClick(event) {
// Change text color globally
document.body.style.color = 'red';
document.querySelector('.welcome').style.backgroundColor = 'black';
});
}
button();
<style>
p {
box-sizing: border-box;
border: 1px solid black;
height: 20px;
width: 300px;
text-align: center;
}
</style>
<p class="welcome">Welcome To My Domain</p>
<button id="btn">Button</button>
Another way would be to toggle a class that styles your element for you. With this example add the class and style it in your css and then use the classList in javascript to toggle the class.
document.querySelector('.className').classList.toggle('someclass')
function button() {
var btn = document.getElementById('btn');
btn.addEventListener('click', function onClick(event) {
// Change text color globally
document.querySelector('.welcome').classList.toggle('instance-change')
});
}
button();
.instance-change {
color: red;
background-color: black;
}
p {
box-sizing: border-box;
border: 1px solid black;
height: 20px;
width: 300px;
text-align: center;
}
<p class="welcome">Welcome To My Domain</p>
<button id="btn">Button</button>
I am currently trying to change the entire page background when I hover over two different links, rather than the background of the link which is occurring now. Any help on this would be greatly appreciated!
home.component.html
<div class="home">
<app-header></app-header>
<div class="locations">
<p>4698 5th Ave - New York, NY </p>
<a routerLink="/gotham" routerLinkActive="active">GOTHAM</a>
<a routerLink="/zion" routerLinkActive="active">ZION</a>
</div>
</div>
home.component.css
a {
color: white;
text-decoration: none;
display: inline;
font-size: 4vw;
margin: 0;
font-weight: normal;
padding: 30px;
}
a:hover {
text-decoration: underline;
background-image: url('https://images.unsplash.com/photo-1531973819741-e27a5ae2cc7b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80');;
}
is that you want something like this
a {
color: white;
text-decoration: none;
display: inline;
font-size: 4vw;
margin: 0;
font-weight: normal;
padding: 30px;
}
.locations:hover {
text-decoration: underline;
background-image: url('https://images.unsplash.com/photo-1531973819741-e27a5ae2cc7b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80');;
}
<div class="home">
<app-header></app-header>
<div class="locations">
<p>4698 5th Ave - New York, NY </p>
<a routerLink="/gotham" routerLinkActive="active">GOTHAM</a>
<a routerLink="/zion" routerLinkActive="active">ZION</a>
</div>
</div>
You can use this syntax if they are siblings.
a:hover + .siblingClass {
property: value;
}
IMO you'd need plain JS for this. First assign Ids to each of your links. Then set up listeners for mouseover and mouseout events.
https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event
https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseout_event
document.getElementById("link1").onmouseover = (e) => document.body.style.backgroundImage = "url(https://your.image.url.for.link1)"
document.getElementById("link2").onmouseover = (e) => document.body.style.backgroundImage = "url(https://your.image.url.for.link2)"
document.getElementById("link1").onmouseout = (e) => document.body.style.backgroundImage = ""
document.getElementById("link2").onmouseout = (e) => document.body.style.backgroundImage = ""
Code image
I can change color when I try clicking from red to purple, but jQuery doesn't seem to changing color when I click from purple to red buttons. Please help.
body { font-weight: 400; } .red { color: red; } .green { color: green; } .yellow { color: yellow; } .purple { color: purple;
This is a heading!
<!-- jQuery -->
<button id="red">Red</button>
<button id="green">Green</button>
<button id="yellow">Yellow</button>
<button id="purple">Purple</button>
<script>
$("#red").click(function () {
$("#heading1").addClass("red");
});
$("#green").click(function () {
$("#heading1").addClass("green");
});
$("#yellow").click(function () {
$("#heading1").addClass("yellow");
});
$("#purple").click(function () {
$("#heading1").addClass("purple");
});
I hope you can try as shared. Usage of removeClass would do
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
body { font-weight: 400; } .red { color: red; } .green { color: green; } .yellow { color: yellow; } .purple { color: purple;
</style>
<h1 id="heading1">This is a Heading</h1>
<!-- jQuery -->
<button id="red">Red</button>
<button id="green">Green</button>
<button id="yellow">Yellow</button>
<button id="purple">Purple</button>
<script>
$("#red").click(function () {
$("#heading1").removeClass();
$("#heading1").addClass("red");
});
$("#green").click(function () {
$("#heading1").removeClass();
$("#heading1").addClass("green");
});
$("#yellow").click(function () {
$("#heading1").removeClass();
$("#heading1").addClass("yellow");
});
$("#purple").click(function () {
$("#heading1").removeClass();
$("#heading1").addClass("purple");
});
</script>
if you want to change background color you have to use: background-color: red;
I had a multi-page website in that there are four links on the navbar. Out of four links two links redirects to other new pages. There is a section of content related to those links that are there on my landing page. I would like to enable those also. Kindly help in this situation the code I have implemented till today
<link href='https://fonts.googleapis.com/css?family=Lato:100,400,700' rel='stylesheet' type='text/css'>
<nav class="navigation" id="mainNav">
<a class="navigation__link" href="#1">home</a>
<a class="navigation__link" href="#2">about</a>
<a class="navigation__link" href="test.html">test</a>
<a class="navigation__link" href="#test1.html">test1</a>
</nav>
<div class="page-section home" id="1">
<h1>Smooth scroll, fixed jump menu with active class</h1>
</div>
<div class="page-section about" id="2">
<h1>Section Two</h1>
</div>
<div class="page-section" id="3">
<h1>Section Three</h1>
</div>
<div class="page-section" id="4">
<h1>Section Four</h1>
</div>
<div class="page-section test" id="5">
<h1>Section Five</h1>
</div>
<div class="page-section test1" id="6">
<h1>Section Six and this section is test section</h1>
</div>
<div class="page-section" id="7">
<h1>Section Seven and this section is test1</h1>
</div>
* {
font-family: 'Lato', sans-serif;
font-weight: 300;
transition: all .1s ease;
}
html, body {
height: 100%;
}
h1 { font-size: 64px; }
.page-section {
height: 480px;
width: 50%;
margin-left: 35%;
margin-top: 5%;
padding: 3em;
background: linear-gradient(45deg, #43cea2 10%, #185a9d 90%);
color: white;
box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.5);
}
.navigation {
position: fixed;
width: 30%;
margin-left: 2%;
background-color: #999;
color: #fff;
&__link {
display: block;
color: #ddd;
text-decoration: none;
padding: 1em;
font-weight: 400;
&:hover {
background-color: #aaa;
}
&.active {
color: white;
background-color: rgba(0,0,0,0.1);
}
}
}
$(document).ready(function() {
$('a[href*=#]').bind('click', function(e) {
e.preventDefault(); // prevent hard jump, the default behavior
var target = $(this).attr("href"); // Set the target as variable
// perform animated scrolling by getting top-position of target-element and set it as scroll target
$('html, body').stop().animate({
scrollTop: $(target).offset().top
}, 600, function() {
location.hash = target; //attach the hash (#jumptarget) to the pageurl
});
return false;
});
});
$(window).scroll(function() {
var scrollDistance = $(window).scrollTop();
// Show/hide menu on scroll
//if (scrollDistance >= 850) {
// $('nav').fadeIn("fast");
//} else {
// $('nav').fadeOut("fast");
//}
// Assign active class to nav links while scolling
$('.page-section').each(function(i) {
if ($(this).position().top <= scrollDistance) {
$('.navigation a.active').removeClass('active');
$('.navigation a').eq(i).addClass('active');
}
});
}).scroll()
For more custom assignments of when what should happen, there is a (very old, but still working) jQuery plugin. See:
Github: jquery.inview
Tutorial: Element 'in view' Event Plugin
Usage:
$('#mySection1').on('inview', function(event, isInView) {
if (isInView) {
$('#myNavOption1').addClass('active');
} else {
$('#myNavOption1').removeClass('active');
}
});
What you are looking for is a scrollspy:
Scrollspy · Bootstrap
or if that is not suitable for you just google "scrollspy" and find other frameworks that may fit you more.
#hello{
font-size: 4em;
}
div.about{
display: none;
}
#hello:hover div.about {
display: block;
}
<pre id="hometext"><span id="hello">Hello!</span></pre>
<div class="about" id="about"><p>hello</p></div>
First of all, I am new to stackoverflow. Secondly, I want to over a specific part of a paragraph, the span, and then let this div appear. But it doesnt seem to work..
You dont have to use javascript:
#hometext:hover + #about { display:none; }
I am not quite sure if this is what you asked for, but you can utilize the span element's onmouseover and onmouseout attributes.
With a little bit of javascript, you can achieve what I think you want to do:
function hideDiv() {
document.getElementById("divToHide").style.visibility = 'hidden';
}
function showDiv() {
document.getElementById("divToHide").style.visibility = 'visible';
}
#divToHide {
height: 100px;
width: 100px;
background: red;
}
#hoverMe {
cursor: pointer;
}
<div id="divToHide">
</div>
<br />
<p>
This is a paragraph. If you hover <span id="hoverMe" onmouseover="hideDiv()" onmouseout="showDiv()">here</span>, it will hide the red box.
</p>
I think you need some javascript there:
function showOtherDiv() {
document.getElementById("about").style.display = "block";
}
function hideOtherDiv() {
document.getElementById("about").style.display = "none";
}
#hello {
font-size: 4em;
}
div.about {
display: none;
}
#hello:hover div.about {
display: block;
}
<pre id="hometext">
<span id="hello" onmouseover="showOtherDiv()" onmouseout="hideOtherDiv()">Hello!</span>
</pre>
<div class="about" id="about">
<p>hello</p>
</div>
Here is a codepen