I'm trying to make a kind of window which pops up when a customer add a product to his/her cart. This is what it would look like : Red and green divs are the background. There is a div which makes it darker (#overlay-daddy), and the white div is its child (#overlay).
Using JS I added an event listener on #overlay-daddy which (is supposed to) set its display property to none. My problem is it also triggers an event when I click on #overlay. Thanks in advance !
Here's my code :
#overlay-daddy {
position: absolute;
z-index: 1;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#overlay {
position: absolute;
z-index: 2;
top: 30%;
left: 20%;
width: 60%;
height: 40%;
background-color: #fff;
}
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/batiprox_common.css">
</head>
<body>
<div style="height: 50%; background-color: red"></div>
<div style="height: 50%; background-color: green"></div>
<div id="overlay-daddy">
<div id="overlay">
</div>
</div>
<script type="text/javascript">
var dad = document.getElementById('overlay-daddy');
//dad.addEventListener("click", function() { this.style.display = "none";});
dad.addEventListener("click", function() { alert(this); });
</script>
</body>
</html>
You need to stop the event from being propagated. Just add e.eventPropagation() in the event listener for overlay.
var dad = document.getElementById('overlay-daddy');
var overlay = document.getElementById('overlay');
overlay.addEventListener("click", function(e) {
e.stopPropagation();
});
dad.addEventListener("click", function() {
alert(this);
});
#overlay-daddy {
position: absolute;
z-index: 1;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#overlay {
position: absolute;
z-index: 2;
top: 30%;
left: 20%;
width: 60%;
height: 40%;
background-color: #fff;
}
<div style="height: 50%; background-color: red"></div>
<div style="height: 50%; background-color: green"></div>
<div id="overlay-daddy">
<div id="overlay">
</div>
</div>
Also register a click handler on #overlay where you preventDefault();
Off the top of my head, that could look like this:
document.getElementById('overlay').addEventListener('click', function(e) {
e.preventDefault();
e.cancelBubble();
e.stopPropagation();
}, true);
Note that you probably don't need all three calls but it's been a while and my memory isn't clear on which you really need.
In order to disable the click event in the overlay's children, you need to test if the clicked element is the overlay itself, and not one of its children, with if(event.target===this) :
#overlay-daddy {
position: absolute;
z-index: 1;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#overlay {
position: absolute;
z-index: 2;
top: 30%;
left: 20%;
width: 60%;
height: 40%;
background-color: #fff;
}
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/batiprox_common.css">
</head>
<body>
<div style="height: 50%; background-color: red"></div>
<div style="height: 50%; background-color: green"></div>
<div id="overlay-daddy">
<div id="overlay">
</div>
</div>
<script type="text/javascript">
var dad = document.getElementById('overlay-daddy');
//dad.addEventListener("click", function() { this.style.display = "none";});
dad.addEventListener("click", function(event) {
if(event.target===this) alert(this);
});
</script>
</body>
</html>
The click event on your 'overlay' element is being propagated to its parent. You can add event.stopPropogation of your 'overlay' element.
You may modify your overlay element like below.
<div id="overlay" onclick="event.stopPropagation();">
</div>
I guess your code need bottom and right in #overlay-daddy
#overlay-daddy {
position: absolute;
z-index: 3; // edited
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0; // added bottom
right: 0; // added right
}
So if you want to click in #overlay-daddy you need to set z-index for it greater than #overlay
I hope it can help you.
Related
I am trying to make the content of a div change when the page is scrolled to a certain point using jQuery. Currently, I am trying to accomplish this by adding a class when the page is scrolled past 800 and removing it and adding a different class when the page is above 800. Here is my current code on jsfiddle: https://jsfiddle.net/shgfrdm8/
Here is the jQuery code:
$(window).scroll(function() {
let windowTop = $(window).scrollTop();
if (windowTop < 800) {
$('image-content').addClass('scrolledDown');
$('image-content').removeClass('scrolledUp');
} else {
$('image-content').addClass('scrolledUp');
$('image-content').removeClass('scrolledDown')
}
})
The CSS ids/classes:
.main {
width: 100%;
height: 700px;
overflow: hidden;
position: relative;
}
.main-image {
width: 100%;
position: fixed;
left: 50%;
transform: translate(-50%) scale(500%);
}
.filler {
height: 400vh;
}
.main-text {
left: -14px;
width: 99.3vw;
height: 4000px;
text-align: center;
background-color: red;
position: relative;
}
#image-content::before {
white-space: pre;
position: absolute;
bottom: 20px;
left: 20px;
font-family: Impact;
font-size: 55px;
font-weight: 550;
color: white;
z-index: 4;
opacity: 1;
position: fixed;
}
#image-content.scrolledDown::before {
opacity: 1;
content: 'ABC';
}
#image-content.scrolledUp::before {
opacity: 1;
content: "DEF";
}
The HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="zoom.css">
</head>
<body>
<div class="image-container">
<div class="zoom main">
<img src="images/sourcecode.jpg" class="main-image">
</div>
<div id="content-anchor"></div>
<div id="image-content"></div>
</div>
<div class="filler">
</div>
<div class="main-text">
</div>
I am wondering how I can make this work because I far as I can tell the classes either not being added or the classes are not working.
Suggesting the following changes:
$(window).scroll(function() {
var windowTop = $(window).scrollTop();
if (windowTop < 800) {
$('.image-content').addClass('scrolledDown');
$('.image-content').removeClass('scrolledUp');
} else {
$('.image-content').addClass('scrolledUp');
$('.image-content').removeClass('scrolledDown')
}
});
This ensures you have the correct Class selector.
I do this :
I need to separate the circle , I want to draw something like dart game, and I need to calculate the time that mouse still inside the circle.
If you can help me to do this ?
And how to make this responsive with mobile ?
And can any one build like this with android or react ?
html :
<body>
<div id="outer-circle" onmouseover="stext()" onmouseout="rest1()">
<div id="inner-circle" onmouseover="htext()" onmouseout="stext()">
<div id="inner-circle1" onmouseover="htext()" onmouseout="stext()">
</div>
</div>
</div>
</body>
css :
#outer-circle {
background: #385a94;
border-radius: 50%;
height: 500px;
width: 500px;
position: relative;
/*
Child elements with absolute positioning will be
positioned relative to this div
*/
}
#inner-circle {
position: absolute;
background: #a9aaab;
border-radius: 50%;
height: 300px;
width: 300px;
/*
Put top edge and left edge in the center
*/
top: 50%;
left: 50%;
margin: -150px 0px 0px -150px;
/*
Offset the position correctly with
minus half of the width and minus half of the height
*/
}
js:
function stext() {
var x = document.getElementById("outer-circle");
x.style.background = 'blue';
}
function rest1() {
var x = document.getElementById("outer-circle");
x.style.background = '#385a94';
}
function htext() {
var x = document.getElementById("outer-circle");
var y = document.getElementById("inner-circle");
y.style.background = 'red';
x.style.background = 'blue';
}
You can use Date.now() at two times (mouseover & mouseout) and calculate difference.
Get time difference between two dates in seconds
Edit:
Here's the code. It's responsive and it haves perfectly centered circles.
css transform
css units (length)
Enjoy your code!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>asd</title>
<style>
body {
margin: 0px;
}
#outer-circle {
background: #385a94;
border-radius: 50%;
height: 100vmin;
width: 100vmin;
position: relative;
margin: auto;
}
#middle-circle {
position: absolute;
background: #a9aaab;
border-radius: 50%;
height: 60vmin; /*responsive */
width: 60vmin;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); /*center the circle*/
}
#inner-circle {
position: absolute;
background: #f99;
border-radius: 50%;
height: 20vmin;
width: 20vmin;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div id="outer-circle" onmouseover="stext()" onmouseout="rest1()">
<div id="middle-circle" onmouseover="htext()" onmouseout="stext()"></div>
<div id="inner-circle" onmouseover="htext()" onmouseout="stext()"></div>
</div>
</body>
</html>
I am building my own jQuery light box but am running into a small issue. The html page has 6 images on it and when one is clicked an overlay is displayed over the whole page with the image in the center.
The issue I am running into is that the animation that controls the light box displaying is not smooth, it produces a sort of outwards in effect and I would like it to all be effected as one. The animation to fade it out works perfectly though, so I am not sure what I am missing ?
Here is a jsFiddle: http://jsfiddle.net/hqsapk5a/
My HTML:
<div class="page-wrapper">
<div class="grid">
<div class="image-thumb-wrapper">
<img src="img/Casinogames_2MillionBC.jpg" class="image-thumb" />
</div>
<div class="image-thumb-wrapper">
<img src="img/casinogames_7thheaven.jpg" class="image-thumb" />
</div>
<div class="image-thumb-wrapper">
<img src="img/casinogames_10sOrBetter.jpg" class="image-thumb" />
</div>
<div class="image-thumb-wrapper">
<img src="img/casinogames_21BurnBlackjack.jpg" class="image-thumb" />
</div>
<div class="image-thumb-wrapper">
<img src="img/Casinogames_AfterNightFalls.jpg" class="image-thumb" />
</div>
<div class="image-thumb-wrapper">
<img src="img/casinoGames_AllAmerican.jpg" class="image-thumb" />
</div>
</div>
</div>
<div class="light-box">
<div class="light-box-overlay">
</div>
<div class="light-box-wrapper">
<img src="" id="light-box-image" />
</div>
x
</div>
My jQuery:
$(document).ready( function() {
$('.image-thumb').click( function() {
var image = $(this).attr('src');
$('#light-box-image').attr('src', image);
$('.light-box').css('opacity', '0').fadeTo(100, 1, function() {
$('.light-box').css('z-index', '2');
});
});
$('.light-box-close').click( function(e) {
event.preventDefault(e);
$('.light-box').css('opacity', '1').fadeTo(100, 0, function() {
$('.light-box').css('z-index', '0');
}); });
});
My CSS:
.page-wrapper {
height: 100%;
position: absolute;
width: 100%;
z-index: 1;
}
.grid {
width: 600px;
height: 552px;
position: absolute;
bottom: 0;
left: 0;
top: 0;
right: 0;
text-align: center;
margin: auto;
background-color: #DFDFDF;
border: 2px solid #999;
border-radius: 5px;
padding: 20px 0px;
}
.image-thumb-wrapper {
width: 228px;
display: inline-block;
margin: 5px;
}
.image-thumb:hover {
cursor: pointer;
}
.light-box {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 0;
}
.light-box-overlay {
position: absolute;
top: 0;
left: 0;
background-color: #000;
height: 100%;
width: 100%;
opacity: 0.8;
}
img#light-box-image {
z-index: 10;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 2px solid #fff;
background-color: #999;
padding: 25px;
border-radius: 5px;
}
.light-box {
opacity: 0;
}
a.light-box-close {
color: #fff;
font-size: 1.2em;
position: absolute;
text-decoration: none;
right: 10px;
top: 5px;
}
a.light-box-close:hover {
text-decoration: underline;
}
You are changing the z-index of .light-box after the fade in animation completes which is why you see it display strangely as it jumps in front of the other content.
Change this block:
$('.image-thumb').click( function() {
var image = $(this).attr('src');
$('#light-box-image').attr('src', image);
$('.light-box').css('opacity', '0').fadeTo(100, 1, function() {
$('.light-box').css('z-index', '2');
});
});
To this:
$('.image-thumb').click( function() {
var image = $(this).attr('src');
$('#light-box-image').attr('src', image);
$('.light-box').css({'z-index': '2','opacity':'0'}).fadeTo(100, 1);
});
DEMO
Is this what you are looking for?
You just have to make $('.light-box').css('z-index', '2'); before it fades in.
What is happening is that you are putting the z-index: 2 while it fades in that's why it acts weird.
Expanding on previous answers, beyond changing the z-index in css, try this ...
$('.light-box').css('z-index', '2').animate({ opacity: 0 }, 500).fadeTo(100, 1);
This will give you a much smoother animation; the time can be adjusted higher or lower from the 500ms.
Referring various sources, I've written a code to minimize and maximize a div tag in my JSP code which goes as follows,
<style type="text/css" media="screen" > #editor {
position: absolute;
top: 0;
right: 20%;
bottom: 0;
left: 0;
}
#widnow {
position: absolute;
top: 72.5%;
right: 0;
bottom: 0;
left: 0;
width: auto;
border: solid 1px;
}
#title_bar {
background: #FEFEFE;
height: 25px;
width: 100%;
}
#button {
border: solid 1px;
width: 25px;
height: 23px;
float: right;
cursor: pointer;
}
#box {
height: 250px;
background: #DFDFDF;
}
</style >
=============================
<div id="widnow">
<div id="title_bar">
<div id="button">-</div>
</div>
<div id="box">
</div>
</div>
============================
<script type="text/javascript">
$("#button").click(function(){
if($(this).html() == "-"){
$(this).html("+");
}
else{
$(this).html("-");
}
$("#box").slideToggle();
});
</script>
This gives me a div tag something like this,
But when I click the minimize button (i.e - on the top right) nothing happens.
The code works fine as shown in this demo but does not work in my jsp.
what to do? where is my mistake?
Did you Check for JavaScript conflicts? I had such issues before.
Removed
<script src="js/jquery.autocomplete.js"></script>
from head in JSP and added
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
This worked fine.
Hy everybody,
My task is to realize a slider with pure HTML / Jquery code.
The template is the follow
and the html code for the upper template is the follow
<div id="viewport-container">
<section id="sliding-container">
<article id="slide-0" class="slide"><span></span></article>
<article id="slide-1" class="slide"><span></span></article>
<article id="slide-2" class="slide"><span></span></article>
<article id="slide-3" class="displayed-slide"><span></span></article>
</section>
</div>
<nav id="slider-nav">
</nav>
We start with button {#slide-0} which display article {ID="slide-0"}; when we select another button, let's say {#slide-3} then article with {ID="slide-0"} fade out and article with {ID="slide-3} fade in; when we select another button, let's say {#slide-1} then article with {ID="slide-3"} fade out and article with {ID="slide-1} fade in; and so on.
I started to struggle with this aim a week ago and so I ask your precius help.
Many many thanks
This will get you going.
You will need:
- http://jquery.com/ - JQuery
- http://jqueryui.com/ -JQueryUI
With these two your work is easy.
First reference JQuery in your website then you reference JQueryUI.
Then you will do something like this in your own JQuery Code:
The HTML:
<div id="slider">
<div id="firstSlide">
<img class="active" src="pics/home/1.1.gif"/>
<img src="pics/home/1.2.gif"/>
<img src="pics/home/1.3.gif"/>
</div>
</div>
The CSS:
#slider
{
position: relative;
height: 180px;
border-bottom: 3px solid black;
z-index: 1;
box-shadow: 0px 0px 10px black;
}
#firstSlide
{
position: absolute;
width: 198px;
height: 100%;
left: 0%;
border: 1px solid black;
}
#firstSlide img
{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 1;
}
#firstSlide img.active
{
z-index: 3;
}
The JQuery:
var howLongEffectLasts = 1000;
var timerInterval = 7000;
var slideDelay = 300;
var slideEffect = 'slide';
var slideDirection = 'up';
var timer = setInterval('DoIt1()', timerInterval);
function DoIt1()
{
var $active = $('#firstSlide' + ' .' + 'active');
var $next = ($active.next().length > 0) ? $active.next() : $('#firstSlide' + ' ' + 'img:first');
$next.css('z-index',2);
$active.toggle(slideEffect, { direction: slideDirection }, howLongEffectLasts, function() {
$active.css('z-index',1).show().removeClass('active');
$next.css('z-index',3).addClass('active');
});
setTimeout(function() { DoIt1(); }, slideDelay);
}
In the JQuery, just change the var's to your needs. Also, change the CSS etc to your own needs. The Z-INDEXes are VERY important here - so be careful when you change theCSS I gave you.
Why don't you put a javascript function in your href that can just change the class of your article.
When you change the class of your article, you can display them or not (like we can see, class=slide or displayed-slide)
I don't know if it's what you want to do ?
Have you try some things ?
I did it (phew!!)
Now this is the css
#viewport-container {
height: 250px;
width: 980px;
margin: 0 auto;
overflow: hidden;
}
#sliding-container {
width: 100%;
}
#slide-0 {
background-image: url(/Images/slide_home.jpg);
height: 250px;
width: 980px;
position: absolute;
}
#slide-1 {
background-image: url(/Images/slide_informatica.jpg);
height: 250px;
width: 980px;
position: absolute;
}
#slide-2 {
background-image: url(/Images/slide_musica.jpg);
height: 250px;
width: 980px;
position: absolute;
}
#slide-3 {
background-image: url(/Images/slide_recensioni.jpg);
height: 250px;
width: 980px;
position: absolute;
}
#slider-nav {
text-align: center;
margin: 10px 0 0 0;
}
#slider-nav a {
width: 10px;
height: 10px;
display: inline-block;
background: #ddd;
border-radius: 50%;
}
#slider-nav a.active {
background: #999;
}
this is the html
<head>
<title></title>
<script src="Scripts/jquery-2.0.3.min.js"></script>
<link href="CSS/Slider.css" rel="stylesheet" />
</head>
<body>
<div id="viewport-container">
<section id="sliding-container">
<article id="slide-0" class="displayed" style="display:block;"><span></span></article>
<article id="slide-1" style="display:none"><span></span></article>
<article id="slide-2" style="display:none"><span></span></article>
<article id="slide-3" style="display:none"><span></span></article>
</section>
</div>
<nav id="slider-nav">
<a id="btn-0" href="#slide-0" class="active"></a>
<a id="btn-1" href="#slide-1"></a>
<a id="btn-2" href="#slide-2"></a>
<a id="btn-3" href="#slide-3"></a>
</nav>
and this is the script
<script>
$(document).ready(function () {
var $navButtons = $("#slider-nav > a");
$navButtons.click(
function () {
var $selectedButton = $(this);
var rawIdSlideToFadeIn = $selectedButton.attr("href");
$navButtons.removeClass("active");
$selectedButton.addClass("active");
crossFading(rawIdSlideToFadeIn);
});
function crossFading(rawIdSlideToFadeIn) {
var $slideToFadeIn = $(rawIdSlideToFadeIn);
var $slideToFadeOut = $("article.displayed");
var idSlideToFadeIn = $slideToFadeIn.attr("id");
var idSlideToFadeOut = $slideToFadeOut.attr("id");
if(idSlideToFadeIn != idSlideToFadeOut)
{
$slideToFadeOut.removeClass("displayed").css("style", "none").fadeOut();
$slideToFadeIn.addClass("displayed").css("style", "block").fadeIn();
}
}
});
</script>
Yes, some part of this code has to be improved, but the kernel is built,
Special thanks to SushiBalboha: his hint showed me the right way.
Thank you very much