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 = ""
Related
I am attempting to make it to where the button in the paragraph is used to toggle the viewability of the javascript array on/off. I'm not quite sure how to do it though.
Here's my html:
<body>
<div class="flexbox-container">
<h1 class="underline-small">
Heading One
</h1>
</div>
<h3 class="paragraph">Remove the duplicates in 2 Javascript arrays (found in readme), add the results to an array and output the list of distinct names in an unordered list below this paragraph when <button type="button" onclick="unshow()" id="btnID" class="javabutton">this link</button> is clicked. If the operation has been completed already, notify the user that this has already been done.</h2>
<script>
function unshow() {
document.getElementById('image')
.style.display = "none";
}
</script>
</div>
<script type="text/javascript">
let array1 = ["Matt Johnson", "Matt Johnson", "Bart Paden", "Ryan Doss", "Jared Malcolm"]
array2 = ["Matt Johnson", "Bart Paden", "Ryan Doss", "Jared Malcolm", "Jordan Heigle", "Tyler Viles"]
let set = new Set([...array1, ...array2]);
let newArray = [...set];
for(i=0;i<newArray.length;i++) {
document.write(newArray[i] + "<br/>");
}
</script>
</div>
</body>
</html>
and here's my CSS for styling:
.paragraph {
font-weight: 400;
color: white;
align-self: center;
font-size: 17px;
margin: -30px 75px 0px 75px;
}
.javabutton {
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 16px;
color: #DEBF79;
text-decoration: none;
background-color: #222222;
}
How can I achieve from this
to this
when resizing the browser.
For your information, these are the lines of lyrics with chords. I want to achieve exact same fixed position of chords above lyrics to make it responsive. I am using HTML, CSS.
Anybody, please help.
.lines {
margin: 5px 0;
}
.lyrics,.notes {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: rgb(45, 45, 45);
font-weight: 600;
}
.lines>span:first-child:after {
content: "\A";
white-space: pre-line;
}
.notes {
color: rgb(0, 150, 0);
background-color: rgb(241, 241, 241);
}
<div class="lines">
<span> <span class="notes">G</span> <span class="notes">Em</span></span>
<span class="lyrics">Well, I found a girl, beautiful and sweet</span>
</div>
<div class="lines">
<span> <span class="notes">C</span> <span class="notes">D</span></span>
<span class="lyrics">Oh, I never knew you were the someone waiting for me</span>
</div>
this way...
(()=> // IIFE code on load for lyrics presentation
{
const rgxCut = /(?=\[)|(?<=\])/;
document.querySelectorAll('div.lyrics p').forEach( pLine =>
{
let newP = pLine.textContent
.replaceAll('] [','] [')
.split(rgxCut)
.map( el =>
{
if (el[0]!=='[') return el
let chord = el.substring(1,el.length-1)
return `<span class="chord" data-chord="${chord}"></span>`
})
pLine.innerHTML = newP.join('')
})
}
)()
/* --- for testing --- */
body {
font-family : Arial, Helvetica, sans-serif;
font-size : 20px;
}
.reSizable {
resize : both;
overflow : scroll;
padding : .5em;
border : 1px solid orange;
}
/* ------------------- */
div.lyrics p {
line-height : 2.5em;
}
div.lyrics p span[data-chord] {
position : relative
}
div.lyrics p span[data-chord]::after {
position : absolute;
top : -1.2em;
left : -.1em;
line-height : 1.2em;
padding : 0 .2em;
font-size : .9em;
color : darkgreen;
background : lightgrey;
content : attr(data-chord);
}
<div class="reSizable">
<div class="lyrics">
<p>Well, I found a [G]girl, beauti[Em]full and sweet</p>
<p>Oh, I never [C]knew you where the someone waiting for [D]me</p>
</div>
</div>
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.
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>
#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