change css attributes of child when parent class is changed - javascript

I have a div inside another div. the parent has a particular class name that doesn't specifically have any css applied to it. the child element has css applied to it, specifically it's background color. so it looks like this...
<div id='myparent' class='someclass'>
<div id='mychild' class='somebgcolor'></div>
</div>
what I want to do is change the background color of the child div when the class of the parent div is changed. so I'm changing the class of the parent with this javascript...
document.getElementById('myparent').className = 'someotherclass';
and in my css...
.someclass .somebgcolor {
background-color: #369;
}
.someotherclass .somebgcolor {
background-color: #401;
}
but it doesn't work. for starters, the initial background color isn't even applied, and no background color is applied when i update the class of the parent div. am i missing something fundamental to the way applying css to nested elements works?

I don't think you're missing anything. I just tried it out and it works fine:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.someOtherClass {
background-color: yellow;
}
.someOtherClass .someBgColor {
background-color: red;
}
</style>
</head>
<body>
<div id="myParent" class="someClass">
<div id='myChild' class="someBgColor">
asdasadasd
</div>
</div>
<script>
var parent = document.getElementById('myParent');
parent.className = "someOtherClass";
</script>
</body>
</html>

Related

made a <div> display:block with onmouseover() but i can't click on it becasue as soon as I move my mouse away it disappears because of onmouseout()

So I made a display: block when the mouse hovers over a certain , and display: none when the cursor moves away. '
A div I have made that displays only when the mouse hovers over a certain link
the div has a display: none when the mouse moves away from the link
this is the code I have used
HTML:
Login/Sign Up
JavaScript:
function LoginShow (){
document.getElementById("log").style.display="block";}
function LoginHide(){
document.getElementById("log").style.display="none";}
But I can't click on the div because as soon as I try to move my cursor to the buttons in the div, the div goes to display none as I have to move my cursor away from the link.
I am new to JS, but I have seen other web pages do it, what's the way for the div to display on mouseover and can be clicked on and goes to display: none only when I move away from the div.
I have also tried
Login/Sign Up
<div class="login" id="log" onmouseover="LoginShow()"
onmouseout="LoginHide()">
It kind of solves the problem, but for the div to go to display none I have to move the cursor away from the div, if the move the cursor away from the anchor tag, it doesn't go away.
You can do it without any js, take a look at below snippet.
let target = document.getElementById('target');
function showLog() {
target.style.display = 'block';
}
function hideLog() {
target.style.display = 'none';
}
.wrapper {
background: #eee;
}
.wrapper .inner-content {
display: none;
position: absolute;
background: red;
}
<div class="wrapper" onmouseover="showLog()" onmouseout="hideLog()">
I am the wrapper
<div class="inner-content" id="target">
<p>Here is some content inside wrapper element</p>
</div>
</div>
i think it can be done with css selectors as you can make other div as the switch to change other elements.
Reference for css selectors
And i think your div is part of button which is the reason why they disappear. if that is the case then you should try giving your button "position:relative" and then your div element the "position:absolute". it might work.
Edited:
here is what i tried, its not appealing but just look at it, if it is what you are trying to achieve.
function LoginShow (){
document.getElementById("log").style.display="block";
}
function LoginHide(){
document.getElementById("log").style.display="none";
}
.container{
width:400px;
height:400px;
background:lightgreen;
border:1px red solid;
}
#log{
background:#efefef;
padding:20px;
width:100px;
text-align: center;
display:none;
}
.log>button{
padding:20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="custom.css">
</head>
<body>
<div class="container">
Login/Sign Up
<div id="log" onmouseover="LoginShow()" onmouseout="LoginHide()"><button>Sign Up</button></div>
</div>
<script src="main.js"></script>
</body>
</html>

How to put background gif in an <a> link when hover

How can I put background image when I hover a link
<html>
<head> </head>
<body>
Insert Bg in this a when hover
</body>
</html>
You need set the display property of the anchor tag to block and give it a height for the background to fill in.
HTML:
<html>
<head> </head>
<body>
Insert Bg in this a when hover
</body>
</html>
CSS:
a{
display : block;
height : 100px;
}
a:hover{
background : url('http://i.giphy.com/xUySTCEXzJdGCeIj3W.gif');
}
Use css :hover psudo-class selector and set background-image property.
a:hover {
background-image : url(img.png);
}
a:hover {
background-image : url(https://placehold.it/100x15);
}
<html>
<head> </head>
<body>
Insert Bg in this a when hover
</body>
</html>
Try this CSS
a:hover {
background: url("http://wallpaper-gallery.net/images/grey-wallpaper-hd/grey-wallpaper-hd-23.jpg");
//Replace the URL with the desired image you want as a Bg
}
<html>
<head> </head>
<body>
Insert Bg in this a when hover
</body>
</html>

How could I apply visited pseudo-class for :tel URL

I got a problem with tag. I have list of clickable phone numbers on the page and I want to mark used urls.
I created small example and tried to use :visited selector to change color for clicked urls, but it doesn't work.
Let me show the code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.phone:visited {
color: red;
}
.phone {
color: blue;
}
</style>
</head>
<body>
<h1>Hi</h1>
<a class="phone" href="tel:#">Call me</a>
</body>
</html>
I found in Google Chrome inspector, that css works correctly (I manually added "visited" class and url's color was changed), but browser doesn't mark url as visited after click.
Is there any chance to fix this behavior?
Thank you!
Nothing will happen on desktop, because desktop browsers don't know what to do with tel:.
You could use something like jQuery to achieve this on desktop.
$('.phone').click(function() {
$('.phone').css({"color": 'red'});
});
You have to assign class through jquery.
$('.phone').click(function () {
$(this).addClass("visited");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.visited {
color: red !important;
background-color: yellow;
}
.phone {
color: blue;
}
</style>
</head>
<body>
<h1>Hi</h1>
<a class="phone" href="#">Call me</a>
<a class="phone" href="#">Calling you</a>
</body>
</html>
So manage with javascript session and additional css class will be handle your problem
<style type="text/css">
.selected {
color: red !important;
}
.phone {
color: blue;
}
</style>
JS
<script type="text/javascript">
var a = document.getElementsByTagName("a");
//I assumed there is only one a link so tried with index 0
if(sessionStorage.getItem("visited") != null) a[0].classList.add("selected"); //check visited link then add class selected
a[0].addEventListener("click",function(){
sessionStorage.setItem("visited","true");//set session visited
this.classList.add("selected");
});
</script>
You need to declare .phone first before .phone:visited in your css.

How to make 'onmouseout' event "understand", that the "span" height was increased?

I have a code:
<span id="one" onmouseover="AddString()" onmouseout="RemoveString()">First Line
<span id="two" style="display:block"></span>
</span>
<script>
function AddString() {
document.getElementById("two").innerHTML = 'Second Line';
}
function RemoveString() {
document.getElementById("two").innerHTML = '';
}
</script>
If you hover mouse over the first line,then the second one appears. If you put mouse out of the first line (and do that slowly enough), then the second line disappears.
What do I need: after you have hovered over the first line and the second line has appeared, then the second line must disappear only if the cursor is outside the first OR second line. Which means, that if move mouse from the first line to the second line, the latter should not disappear. At the moment it does.
I have tried the following:
<span id="one" onmouseover="AddString()">First Line
<span id="two" style="display:block"></span>
</span>
<script>
function AddString() {
var element = document.getElementById("one");
element.removeEventListener("mouseover", AddString);
document.getElementById("two").innerHTML = 'Second Line';
element.addEventListener("mouseout", RemoveString, true);
}
function RemoveString() {
var element = document.getElementById("two");
element.removeEventListener("mouseout", RemoveString);
element.innerHTML = '';
element.addEventListener("mousever", AddString, true);
}
</script>
and was advised to do the following:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#one:hover+#two,#two:hover {
display: block;
}
#two{
display: none;
}
</style>
</head>
<body>
<span id="one">First Line</span>
<span id="two">Second Line</span>
</body>
</html>
No help. All those variants do not work. What is the solution?
You can use your last example, just change the <span> tags to <div> tags and it works no problem. Or if you want to keep them as <span> tags you can add #one,#two { display:block; } to your css to make them block items (so they will act like div tags anyway).
You can also limit the width of the div to ensure that it doesn't appear when you hover just anywhere on the line.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#one,#two { width: 100px; background-color: beige; }
#one:hover+#two,#two:hover {
display: block;
}
#two{
display: none;
}
</style>
</head>
<body>
<div id="one">First Line</div>
<div id="two">Second Line</div>
</body>
</html>

How to show a popup

I'm trying to show a popup when the mouse is over "a" element.
The problem is that I want to keep the popup when the mouse is over the popup element but the popup disappear when the mouse is over it.
The popup is just under the <a> element (on the display).
This is my code
HTML:
<ul>
<li>
<a id="test">
<div>
Some text
</div>
<div id="popup">
<ul>
<li><a>text0</a>
</li>
<li><a>text1</a>
</li>
</ul>
</div>
</a>
</li>
<li> TEXT
</li>
</ul>
CSS:
#popup {
display:none;
}
#test:hover #popup {
display:block;
}
I tagged the question 'JAVASCRIPT / JQUERY' because if there is a solution with them, it would be welcome.
EDIT
THIS IS ACTUALLY MY CODE, and it doesn't works
Before your start coding take a look at jQueryUI Tooltip (http://jqueryui.com/tooltip/ ).
It does what you want with minimal programming requirements.
From the doku:
Customizable, themeable tooltips, replacing native tooltips.
Example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tooltip - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( document ).tooltip();
});
</script>
<style>
label {
display: inline-block;
width: 5em;
}
</style>
</head>
<body>
<p>Tooltips can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
ThemeRoller
will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
<p>Hover the field to see the tooltip.</p>
</body>
</html>
#popup {
display:none;
}
a:hover + #popup {
display:block;
}
Try this should work.
jsfiddle
If you really wanna make a nice popup use this:
http://getbootstrap.com/2.3.2/javascript.html#popovers
If you're not looking to use jQuery, you can make the div a child of the a tag and use some css trickery to make it all work (http://jsfiddle.net/TMBGm/):
<a>some text<div>popup text</div></a>
a {
position: relative;
}
a div {
display: none;
}
a:hover div {
display: block;
position: absolute;
}
The adjacent sibling selector is perfect for this example:
div {
display: none;
}
a:hover + div {
display: block;
}
Demo: http://jsfiddle.net/G4hd9/
Article: http://css-tricks.com/child-and-sibling-selectors/
This will keep the popup active while the user is hovering it if the element is not related, otherwise if its a child of the element it won't lose focus.
#popup:hover {
display:block
}

Categories