Make overlapping html and svg based elements respond to click event

Make overlapping html and svg based elements respond to click event - javascript

Is there a way to make both the html based div and the SVG based line in the snippet below respond to javascript?
I know of the pointer-events css property. But it seems to be all or nothing to me - I want both elements to respond to events ...
#main {
position: relative;
width: 600px;
}
svg {
border: 1px solid blue;
red;
position: absolute;
top: 0;
width: 100%;
height: 100%;
stroke: rgb(155, 155, 155);
stroke-width: 10
}
#box-container {
display: flex;
}
.box {
width: 200px;
background-color: pink;
height: 100px;
}
<div>
<p>
Html based boxes should be clickable
</p>
<p>
SVG based line should be clickable
</p>
</div>
<div id="main">
<svg>
<line onClick="alert('line')" x1="0" y1="0" x2="600" y2="100" />
</svg>
<div style="display:flex;">
<div onClick="alert('one')" class="box">
One
</div>
<div onClick="alert('two')" style="margin-left:auto" class="box">
Two
</div>
</div>
</div>

#main {
position: relative;
width: 600px;
}
svg {
border: 1px solid blue;
red;
position: absolute;
top: 0;
width: 100%;
height: 100%;
stroke: rgb(155, 155, 155);
stroke-width: 10
}
#box-container {
display: flex;
}
.box {
width: 200px;
background-color: pink;
height: 100px;
}
<div>
<p>
Html based boxes should be clickable
</p>
<p>
SVG based line should be clickable
</p>
</div>
<div id="main">
<svg>
<line style="pointer-events:all;" onClick="alert('line')" x1="0" y1="0" x2="600" y2="100" />
</svg>
<div style="display:flex;">
<div onClick="alert('one')" class="box">
One
</div>
<div onClick="alert('two')" style="margin-left:auto" class="box">
Two
</div>
</div>
</div>

You can't. But you can trigger click event on another element like this.
function lineClick() {
alert('line')
document.querySelector("#one").click()
}
#main {
position: relative;
width: 600px;
}
svg {
border: 1px solid blue;
position: absolute;
top: 0;
width: 100%;
height: 100%;
stroke: rgb(155, 155, 155);
stroke-width: 10
}
#box-container {
display: flex;
}
.box {
width: 200px;
background-color: pink;
height: 100px;
}
<div>
<p>
Html based boxes should be clickable
</p>
<p>
SVG based line should be clickable
</p>
</div>
<div id="main">
<svg>
<line onClick="lineClick()" x1="0" y1="0" x2="600" y2="100" />
</svg>
<div style="display:flex;">
<div onClick="alert('one')" class="box" id="one">
One
</div>
<div onClick="alert('two')" style="margin-left:auto" class="box">
Two
</div>
</div>
</div>

You can set svg{pointer-events:none}(won't respond to mouse events). Next you can give the line{pointer-events:all}/(will respond to mouse events). If you need one to respond on the same event as the line use #dgknca's solution.
#main {
position: relative;
width: 600px;
}
svg {
border: 1px solid blue;
red;
position: absolute;
top: 0;
width: 100%;
height: 100%;
stroke: rgb(155, 155, 155);
stroke-width: 10;
pointer-events:none;
}
line{pointer-events:all;}
#box-container {
display: flex;
}
.box {
width: 200px;
background-color: pink;
height: 100px;
}
<div>
<p>
Html based boxes should be clickable
</p>
<p>
SVG based line should be clickable
</p>
</div>
<div id="main">
<svg>
<line onClick="alert('line')" x1="0" y1="0" x2="600" y2="100" />
</svg>
<div style="display:flex;">
<div onClick="alert('one')" class="box">
One
</div>
<div onClick="alert('two')" style="margin-left:auto" class="box">
Two
</div>
</div>
</div>

If you want a single delegated Event handler, you can use elementsFromPoint(x,y)
<script>
function clickHandler(evt) {
// get all Elements under this X,Y point
let elements = document.elementsFromPoint(evt.clientX, evt.clientY);
// disregard the SVG element
let element = elements[(elements[0].nodeName == "svg") ? 1 : 0];
console.log(elements);
console.log(element);
}
</script>
<style>
#main {
position: relative;
width: 600px;
}
svg {
position: absolute;
top: 0;
width: 100%;
height: 100%;
stroke: green;
stroke-width: 10
}
.box {
width: 200px;
background-color: pink;
height: 100px;
}
</style>
<div id="main" onclick="clickHandler(event)">
<svg>
<line x1="0" y1="0" x2="600" y2="100" />
</svg>
<div style="display:flex;">
<div class="box" id=ONE>
One
</div>
<div style="margin-left:auto" class="box" id=TWO>
Two
</div>
</div>
</div>

Related

How can I make the black part transparent to show the white background？

#myElement {
width: 50px;
height: 300px;
background: linear-gradient(0deg, #4a94cd, #fe49a6);
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
#myBar {
width: 100%;
height: 10px;
background: #000;
}
<div id="myElement">
<div id="myBar"></div>
<div id="myBar"></div>
<div id="myBar"></div>
<div id="myBar"></div>
<div id="myBar"></div>
<div id="myBar"></div>
<div id="myBar"></div>
<div id="myBar"></div>
<div id="myBar"></div>
<div id="myBar"></div>
</div>
How can I make the black part transparent to show the background behind，The background won't always be white，maybe a picture，The color part is a gradient of the whole

Change the id attribute to class for the div myBar and change the background to white.
We can target each of myBar elements using nth-child selector
.myBar:nth-child(1),.myBar:nth-child(2) and so on. I have added a sample below.
We can also use images as background by adding background-image property to the css definition.
#myElement {
width: 50px;
height: 300px;
background: linear-gradient(0deg, #4a94cd, #fe49a6);
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.myBar {
width: 100%;
height: 10px;
background: white;
}
.myBar:nth-child(1){
background:red;
}
----------
<div id="myElement">
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
</div>

I remember seeing in another post of yours that you want to make a progress bar (you should mention these things to make it easier for others to answer with relevant answers). And you probably want to change the height dynamically or something with this one div (to simulate the progress).
You can use the css property clip-path to achieve the effect of alternating between your gradient and a transparent background:
.container {
background: url(https://picsum.photos/id/999/360);
padding: 20px;
width: 320px;
}
#myElement {
width: 50px;
height: 320px;
background: linear-gradient(0deg, #4a94cd, #fe49a6);
clip-path: polygon(
0 0,100% 0,100% 20px,0 20px,
0 30px,100% 30px,100% 50px,0 50px,
0 60px,100% 60px,100% 80px,0 80px,
0 90px,100% 90px,100% 110px,0 110px,
0 120px,100% 120px,100% 140px,0 140px,
0 150px,100% 150px,100% 170px,0 170px,
0 180px,100% 180px,100% 200px,0 200px,
0 210px,100% 210px,100% 230px,0 230px,
0 240px,100% 240px,100% 260px,0 260px,
0 270px,100% 270px,100% 290px,0 290px,
0 300px,100% 300px,100% 320px,0 320px
);
}
<!--
I just added the container to show a background image behind
the element with the clip-path
-->
<div class="container">
<div id="myElement"></div>
</div>

You can create it easily using svg masking technique because using divs will not work
As you will see on running the snippet that the image is behind the svg but looks very clear as the black part is now transparent.
#myElement {
width: 50px;
height: 300px;
position: relative;
}
img{
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<svg width="50" height="300" id="myElement">
<defs>
<linearGradient xl=0 x2=0 y1=0 y2=1 id="Gradient">
<stop stop-color="#fe49a6" offset="0%" />
<stop stop-color="#4a94cd" offset="100%" />
</linearGradient>
<pattern id="pattern" x="0" y="0" width="50" height="30" patternUnits="userSpaceOnUse">
<rect x=0 y=0 width=50 height=20 fill="#999" />
</pattern>
<mask id="mask-gradient" x="0" y="0" width="50" height="300">
<rect x="0" y="0" width="50" height="300" fill="url(#pattern)" />
</mask>
</defs>
<rect id="rect1" fill=url(#Gradient) x="0" y="0" width="50" height="300" mask="url(#mask-gradient)" />
</svg>
</div>
<img src="https://images.unsplash.com/photo-1667400104714-53da4894bf18?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">
</body>
</html>

This is a job for mask
#myElement {
width: 50px;
height: 300px;
background: linear-gradient(0deg, #4a94cd, #fe49a6);
-webkit-mask: linear-gradient(0deg,#0000 10px, #000 0) 0 0/100% 10%;
}
body {
background: orange;
}
<div id="myElement">
</div>

How to add or remove using ID instead of classes?

How do I replace the the class highlight with an id instead, so when I click outside of the products, it doesn't highlight that area?
I included the window.onload section with what I want to do, however I don't know how to change the class highlight into id. I can't think of an easier way than changing the class and then using the window.onload.
let overlay;
document.querySelectorAll('.product').forEach(function(path) {
path.onclick = chooseProduct;
})
function chooseProduct(e) {
if (overlay) overlay.classList.remove('highlight')
overlay = e.target
overlay.classList.add('highlight')
}
//What I want to add to the highlight class using id to remove black border when click outside of the products
// window.onload = function(){
// var hide = document.getElementById('?');
// document.onclick = function(e){
// if(e.target.id !== '?'){
// hide.style.display = 'none';
// }
// };
// };
var el = document.getElementsByClassName("color");
for (var i = 0; i < el.length; i++) {
el[i].onclick = changeColor;
}
function changeColor(e) {
let hex = e.target.getAttribute("data-hex");
if (overlay) overlay.style.fill = hex;
}
body,
html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#container {
height: 200px;
width: 200px;
}
#product-svg {
position: relative;
z-index: 2;
background-size: 100%;
background-repeat: no-repeat;
background-position: 50%;
mix-blend-mode: multiply;
}
path {
fill: #CCCCCC;
}
#background-image {
position: absolute;
top: 0;
left: 0;
height: 200px;
width: 200px;
height: auto;
z-index: 1;
}
.colors {
display: flex;
position: fixed;
bottom: 2em;
right: 2em;
z-index: 3;
}
.color {
height: 36px;
width: 36px;
margin-left: 0.5em;
border-radius: 18px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
border: 2px solid #aaa;
cursor: pointer;
}
.highlight {
stroke-width: 10px;
stroke: #000;
}
<div id="container">
<svg id="product-svg" viewBox="0 0 744 1074">
<path class="product" d="M51 207.5L51 348L686 348L686 67L51 67L51 207.5Z" />
<path class="product" d="M51 544.5L51 685L686 685L686 404L51 404L51 544.5Z" />
<path class="product" d="M51 883.5L51 1024L686 1024L686 743L51 743L51 883.5Z" />
</svg>
<img id="background-image" src="boxes.jpg" alt="">
</div>
<div class="colors">
<div class="color" style="background-color: #ff0000" data-hex="#ff0000"></div>
<div class="color" style="background-color: #ffff33" data-hex="#ffff33"></div>
<div class="color" style="background-color: #3399ff" data-hex="#3399ff"></div>
</div>

your code is working as expected, except the part which you have mentioned in the question which highlight style of the selected product is not removed when you clicked outside the product.
In order to do that, simply I have added an Event Listener (removeHighlight()) by document.onclick = removeHighlight; to the whole document on click event. So whenever you click on anywhere in the DOM, that event listener will be triggered. What I'm do inside EventListener function is removing the class highlight from all products if and only if the click event was not triggered by clicking on either products or colours. Additionally I'm setting the overlay=null in order to remove the reference of the previously selected product, then clicking on colors won't fill the previously selected product with selected color if same conditions met and until you click again on a product.
let overlay;
document.querySelectorAll('.product').forEach(function(path) {
path.onclick = chooseProduct;
})
function chooseProduct(e) {
if (overlay) overlay.classList.remove('highlight')
overlay = e.target
overlay.classList.add('highlight')
}
var removeHighlight = function(e) {
var products = document.querySelectorAll('.product');
if(!e.target.classList.contains('product') && !e.target.classList.contains('color')){
overlay = null;
document.querySelectorAll('.product').forEach(function(prod){
prod.classList.remove('highlight');
});
}
}
document.onclick = removeHighlight;
var el = document.getElementsByClassName("color");
for (var i = 0; i < el.length; i++) {
el[i].onclick = changeColor;
}
function changeColor(e) {
let hex = e.target.getAttribute("data-hex");
if (overlay) overlay.style.fill = hex;
}
body,
html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#container {
height: 200px;
width: 200px;
}
#product-svg {
position: relative;
z-index: 2;
background-size: 100%;
background-repeat: no-repeat;
background-position: 50%;
mix-blend-mode: multiply;
}
path {
fill: #CCCCCC;
}
#background-image {
position: absolute;
top: 0;
left: 0;
height: 200px;
width: 200px;
height: auto;
z-index: 1;
}
.colors {
display: flex;
position: fixed;
bottom: 2em;
right: 2em;
z-index: 3;
}
.color {
height: 36px;
width: 36px;
margin-left: 0.5em;
border-radius: 18px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
border: 2px solid #aaa;
cursor: pointer;
}
.highlight {
stroke-width: 10px;
stroke: #000;
}
<div id="container">
<svg id="product-svg" viewBox="0 0 744 1074">
<path class="product" d="M51 207.5L51 348L686 348L686 67L51 67L51 207.5Z" />
<path class="product" d="M51 544.5L51 685L686 685L686 404L51 404L51 544.5Z" />
<path class="product" d="M51 883.5L51 1024L686 1024L686 743L51 743L51 883.5Z" />
</svg>
<img id="background-image" src="boxes.jpg" alt="">
</div>
<div class="colors">
<div class="color" style="background-color: #ff0000" data-hex="#ff0000"></div>
<div class="color" style="background-color: #ffff33" data-hex="#ffff33"></div>
<div class="color" style="background-color: #3399ff" data-hex="#3399ff"></div>
</div>
jsfiddle

When a behavior is a result of a click event occurring anywhere but the tags meant to be clicked, it's most effective to register the document Object as the click event listener and control all clicks by Event Delegation.
register the document Object as the click event listener
document.onclick = selectPath;
the click event handler is selectPath(e)
collect all .product into a NodeList
const paths = document.querySelectorAll('.product');
if the user clicked any .product remove .highlight class from all .product and then add .highlight class to the .product user clicked
if (e.target.matches('.product')) {
paths.forEach(path => path.classList.remove('highlight'));
e.target.classList.add('highlight');
but if the user clicked any .color, then get it's [data-hex] value, and fill .highlight with the hex color if it exists (re: .highlight)
else if (e.target.matches('.color')) {
let hex = e.target.dataset.hex;
let selected = document.querySelector('.highlight');
if (selected) selected.style.fill = hex;
otherwise just remove the .highlight class if it exists.
paths.forEach(path => path.classList.remove('highlight'));
document.onclick = selectPath;
function selectPath(e) {
const paths = document.querySelectorAll('.product');
if (e.target.matches('.product')) {
paths.forEach(path => path.classList.remove('highlight'));
e.target.classList.add('highlight');
} else if (e.target.matches('.color')) {
let hex = e.target.dataset.hex;
let selected = document.querySelector('.highlight');
if (selected) selected.style.fill = hex;
} else {
paths.forEach(path => path.classList.remove('highlight'));
}
};
body,
html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.container {
height: 200px;
width: 200px;
}
.svg {
position: relative;
z-index: 2;
background-size: 100%;
background-repeat: no-repeat;
background-position: 50%;
mix-blend-mode: multiply;
}
path {
fill: #CCCCCC;
}
.background {
position: absolute;
top: 0;
left: 0;
height: 200px;
width: 200px;
height: auto;
z-index: 1;
}
.circles {
position: fixed;
bottom: 2em;
right: 2em;
z-index: 3;
}
.color {
display: inline-block;
height: 36px;
width: 36px;
margin-left: 0.5em;
border-radius: 18px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
border: 2px solid #aaa;
cursor: pointer;
}
.highlight {
stroke-width: 10px;
stroke: #000;
}
<div class="container">
<svg class="svg" viewBox="0 0 744 1074">
<path class="product" d="M51 207.5L51 348L686 348L686 67L51 67L51 207.5Z" />
<path class="product" d="M51 544.5L51 685L686 685L686 404L51 404L51 544.5Z" />
<path class="product" d="M51 883.5L51 1024L686 1024L686 743L51 743L51 883.5Z" />
</svg>
<img class="background" src="boxes.jpg" alt="">
</div>
<div class="circles">
<div class="color" style="background-color: #ff0000" data-hex="#ff0000"></div>
<div class="color" style="background-color: #ffff33" data-hex="#ffff33"></div>
<div class="color" style="background-color: #3399ff" data-hex="#3399ff"></div>
</div>

You are setting "highlight" class only for products so you don't need id for what you are going to do.
you can just check if element which you clicked on has "product" class then first you remove all "highlight" classes and then add it to clicked product. If element doesn't have a "product" class then you just remove all "highlight" classes.
window.onload = function(){
document.onclick = function(e){
if(e.target.classList.contains("product")){
resetClass()
e.target.classList.add("highlight")
}else{
resetClass()
}
};
};
function resetClass(){
document.querySelectorAll(".highlight").forEach(item => {
item.classList.remove("highlight")
})
}

Add image below a certain class of element using css

What I want to do:
I want to add a "walkingMan" image under an element when its class is changed to activeCell. I know how to do it when the image is added to the front or back of the element using pseudo class, but as far as I know, there isn't something like :below that I can use to achieve the same effect. Is there a way in css I can use to micmic this?
What I have done:
I have added image below every upper cell and make it visible when the class is changed to activeCell. But I hope to find a more simple solution.
What it looks like:
Code: Simplified Code Example

You can use a single pseudo element on the .cell element and place a background image on it when it's active.
let activeIndex = 0;
const cells = [...document.querySelectorAll('.cell')];
setInterval(() => {
cells.forEach(cell => {
cell.classList.remove('activeCell')
});
cells[activeIndex].classList.add('activeCell');
activeIndex = activeIndex === cells.length - 1 ? 0 : (activeIndex + 1);
}, 300)
.cell {
display: inline-block;
border: 1px solid black;
margin-bottom: 1.2em;
}
.activeCell {
background-color: lightgrey;
position: relative;
}
.activeCell::after {
content: "";
position: absolute;
width: 1em;
height: 1em;
top: 1.3em;
left: calc(50% - .5em); /* Center the stickman. Position it half of its width before the parent center*/
background-image: url('https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png');
background-size:cover; /* Scale the stickman to completely cover the background area. */
}
<div>
<div class='top'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
<div class='bottom'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
</div>

What about this: https://jsfiddle.net/147prwy5/3/
HTML
<div class="cell active">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell active">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
CSS
.cell {
display: inline-block;
}
.cell a {
border: 1px solid black;
}
.cell.active a {
background-color: lightgrey;
}
.cell img {
width: 20px;
height: 20px;
display: none;
}
.cell.active img {
margin-top: 5px;
width: 20px;
height: 20px;
display: block;
}

I've never been a fan of the ::before and ::after pseudo classes mainly because I've personally noticed some oddities when trying to position things in Chrome vs IE (damn it IE!). Since most people here are going to give a solution using these pseudo classes (because that's somewhat what you asked) I thought I'd give a different solution using flexbox and more divs.
Not the most optimal for download size but I do like that it's not absolute positioning elements and if the squares get bigger or smaller it's pretty easy to handle that as a scss variable at the top of the file. This all uses only two values, your padding between boxes and the size of the boxes so it should be easy to update and maintain.
Anyway, have fun! Awesome question by the way :-)
.blocks {
display: flex;
}
.block {
flex: 0 0 20px;
margin: 0px 5px;
display: flex;
flex-direction:column;
}
.block > .square {
flex: 0 0 20px;
margin: 5px 0px;
background: grey;
}
.block > .space {
flex: 0 0 20px;
margin: 5px 0px;
}
.block.activeCell > .space {
background: green;
}
<div class="blocks">
<div class="block activeCell"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
</div>
<div class="blocks">
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
</div>

Using jQuery you can toggle the class upon clicking with this:
$('.cell').click(function() { //catch clicks on .cell
$('.cell').removeClass('activeCell'); //remove class "activeCell" from all
$(this).addClass('activeCell'); //add class "activeCell" to .cell clicked
});
Apply position: relative; to .top and .bottom:
.top,
.bottom {
position: relative;
}
And use the psuedoclass :before to create a image under the .activeCell
.activeCell:before {
content: "";
position: absolute;
bottom: -20px;
height: 20px;
width: 20px;
background-image: url("https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png");
background-size: 20px 20px;
}
And remove this:
.walkingMan {
width: 20px;
height: 20px;
display: inline-block
}
And this:
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" class='walkingMan'/>
And to add space between the divs .top and .bottom put a <br> between them.
$('.cell').click(function() {
$('.cell').removeClass('activeCell');
$(this).addClass('activeCell');
});
.cell {
display: inline-block;
border: 1px solid black;
cursor: pointer;
}
.top,
.bottom {
position: relative;
}
.activeCell {
background-color: lightgrey;
}
.activeCell:before {
content: "";
position: absolute;
bottom: -20px;
height: 20px;
width: 20px;
background-image: url("https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png");
background-size: 20px 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
<div class='top'>
<a class='cell activeCell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
<br>
<div class='bottom'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
</div>

add .RunManActive Class for Active element
//clicking add active Class
$(".RunMan").click(function() {
$(".RunMan").removeClass('RunManActive');
$(this).toggleClass('RunManActive');
});
//timing add active Class
var i=0;
var $elm=$(".Animate");
setInterval(function(){
$elm.removeClass('RunManActive');
$elm.eq(i).toggleClass('RunManActive');
i=$elm.length<=i?0:i+1;
}, 1000);
.RunMan{
width:35px;
height:35px;
background-color:lightgray;
border:3px solid #fff;
float:left;
position: relative;
}
.RunManActive{
background-color:#eee;
border:3px solid lightgray;
}
.RunManActive > div{
width:35px;
height:35px;
position: absolute;
background-image:url(http://www.iconsfind.com/wp-content/uploads/2013/11/Objects-Running-man-icon.png);
background-size:cover;
top:100%;
margin-top:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="RunMan"><div></div></div>
<div class="RunMan RunManActive"><div></div></div>
<div class="RunMan"><div></div></div>
<div class="RunMan"><div></div></div>
<div class="RunMan"><div></div></div>
<br><br><br><br><br><br>
<div style=" width:100%">
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan "><div></div></div>
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan"><div></div></div>

You can do something like this, using CSS only. With :target selector you can apply a style to the element you need to hide / show.
.container {
display: inline-block;
width: 100px;
height: 200px;
}
.link {
display: block;
width: 100px;
height: 100px;
background: #ccc;
}
.walking-man {
display: none;
width: 100px;
height: 100px;
background: red;
}
#p1:target {
display: block;
}
#p2:target {
display: block;
}
#p3:target {
display: block;
}
#p4:target {
display: block;
}
height: 90px;
float: left;
}
.walking-man img {
width: 100%;
}
.walkin-man:target {
display: block;
}
<div class="container">
<div id="p1" class="walking-man"></div>
</div>
<div class="container">
<div id="p2" class="walking-man"></div>
</div>
<div class="container">
<div id="p3" class="walking-man"></div>
</div>
<div class="container">
<div id="p4" class="walking-man"></div>
</div>

Showing element in front of common backdrop

We want to find a solution to show just the green box in front of the backdrop (#back). And this without modifying the html.
HTML:
<div id="body" style="z-index:1;position:relative;">
<div id="div1" style="z-index:4;position:relative;">
</div>
<div style="z-index:4;background-color: red; width: 70px;position:relative;height: 70px;">
<div id="div2" style="z-index:7;background-color:green;position:relative;">
</div>
</div>
<div id="back" style="z-index:5;">
</div>
</div>
CSS:
#body {
background-color: blue;
width: 500px;
height: 500px;
position: relative;
}
#div1 {
position:relative;
background-color: white;
width: 100px;
height: 100px;
}
#back {
position: absolute;
top:0;
width: 100%;
height: 100%;
opacity: 0.7;
background-color: black;
}
div {
width: 50px;
height: 50px;
}
There is a fiddle of our problem :
https://jsfiddle.net/ruj23c60/3/

<div style="z-index:4;background-color: red; width: 70px;height: 70px;">
<div id="div2" style="z-index:7;background-color:green;position:relative;">
</div>
</div>
Removing the style position: relative from the parent of #div2 is sufficient already

There are two way as i know.
First:
You need to give z-index:3 to #back. (less than #div2 parent div) then you can make it front of #back
But this way whole div come in front of black(#back) div.
Fiddle
Second:
Make position:adsolute; to #div2 and remove position:relative; from it's parent.
Fiddle
Note: I have comment opacity: 0.7; from #back to understand properly.

How to create an SVG tooltip with help of the Menucool JS plugin?

I have an SVG “map”, and I want to implement a simple tooltip when the mouse is hovered over a rectangle.
For the tooltip I want to use this plugin.
Here is how I link SVG to HTML:
<object data="map.svg" type="image/svg+xml" id="map" width="1840" height="940"></object>
The First Try was like this:
var svgobject = document.getElementById('map');
if ('contentDocument' in svgobject) {
var svgdom = $(svgobject.contentDocument);
$("#rect4578").tooltip.pop(this, '#ToltipContent');
}
And the tooltip container is as follows:
<div style="display:none;">
<div id="ToltipContent">
<h2>Header</h2>
<img src="img/img.jpg" style="float:right;" />
Some text
</div>
</div>
I also added the toolpip class to the rect4578 as it is explained on the plugin site. However it didn't work.
Then I tried to add the plugin invocation inside onmouseover attribute of the SVG rectangle.
onmouseover="tooltip.pop('#rect4578', '#ToltipContent')"
And also I got nothing.
However, if I change the opacity of the rectangle by using either of above described methods it works.
And the question is what is the right way to use this plugin to implement tooltip for the SVG?
Thank you.

Since I didn't have access to your object, I used an svg from w3schools and it seemed to work fine. Here's what I did to get it to work:
.hide {display:none;}
#object {width: 100px; overflow: hidden; margin: 0 auto;}
#object svg {padding: 20px;}
div#mcTooltip h2 {
margin-top: 10px;
line-height: 1;
}
#mcTooltip ul, #mcTooltip ol {
padding-left: 20px;
}
div#mcTooltip {
line-height: 16px;
border-width: 1px;
color: #333;
border-color: #bbb;
padding: 20px;
font-size: 12px;
font-family: Verdana, Arial;
border-radius: 6px;
box-shadow: 0 1px 4px #aaa;
}
div#mcTooltip, div.mcTooltipInner {
background-color: #eee;
}
div#mcTooltip a {
color: #069;
}
div#mcTooltip a:hover {
color: #333;
}
div#mcTooltipWrapper {
position: absolute;
visibility: hidden;
overflow: visible;
z-index: 9999999999;
top: 0;
}
div#mcTooltip {
float: left;
border-style: solid;
position: relative;
overflow: hidden;
}
div.mcTooltipInner {
float: left;
position: relative;
width: auto;
height: auto;
}
div#mcTooltip, div#mcTooltip div {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
div#mcttCo {
position: absolute;
text-align: left;
}
div#mcttCo em, div#mcttCo b {
display: block;
width: 0;
height: 0;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://www.menucool.com/Content/widgets?v=pWIjgyLaRd3JgPu8kRMWTBEFhPIETaPsvP81TXLgnbE1"></script>
<div class="hide">
<div id="toolTipContent">Tooltip text goes here</div>
</div>
<br/>
<br/>
<br/>
<object id="object" type="image/svg+xml" data="http://www.schepers.cc/svg/blendups/smiley.svg"><svg width="100" height="100">
<rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" onmouseover="tooltip.pop(this, '#toolTipContent', {position:2})" />
</svg><svg width="100" height="100">
<rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" onmouseover="tooltip.pop(this, '#toolTipContent', {position:2})" />
</svg><svg width="100" height="100">
<rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" onmouseover="tooltip.pop(this, '#toolTipContent', {position:2})" />
</svg></object>

It looks like the problem with your original approach is that the object tag does not support 'onmouseover' https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object. I am using the an img tag instead. This is a very minor change from the first answer.
var svg = document.getElementById('kiwi');
svg.onmouseover = function() {tooltip.pop(this, '#tooltip');}
.hide {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://www.menucool.com/Content/widgets?v=pWIjgyLaRd3JgPu8kRMWTBEFhPIETaPsvP81TXLgnbE1"></script>
<div class="">
<img id="kiwi" height="200" width="200" src="http://s.cdpn.io/3/kiwi.svg">
</div>
<div class="hide">
<span id="tooltip" >
This is a tooltip.
</span>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Make overlapping html and svg based elements respond to click event - javascript

Related

How can I make the black part transparent to show the white background？

How to add or remove using ID instead of classes?

Add image below a certain class of element using css

Showing element in front of common backdrop

How to create an SVG tooltip with help of the Menucool JS plugin?

Categories

Resources