I'm trying to build simple modal and for some reason the z-index doesn't work. what is the problem here?
document.addEventListener("DOMContentLoaded", function() {
var aTag = document.querySelector('.img-box');
aTag.addEventListener('click', function(e) {
e.preventDefault();
document.body.classList.add('overlay');
var img = document.createElement('img'),
modalBox = document.getElementById('modal-box')
img.src = this.href;
modalBox.appendChild(img);
})
});
.overlay {
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.4;
width: 100%;
height: 100%;
}
#modal-box {
z-index: 1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#modal-box img {
max-width: 100%;
}
<a href="http://placehold.it/400x200" class="img-box">
<img src="http://placehold.it/100x100" />
</a>
<div id="modal-box"></div>
Alternate demo: http://codepen.io/phpnetanel/pen/qEjJbo
The problem is that you add the .overlay class to the document body. The rest of the content is held in the document body and thus it stays on top. Create a new overlay div and add it to the body and apply the .overlay class to it.
Here's a working example: http://codepen.io/anon/pen/EaXdKw
You are applying the .overlay class to the body. This will not create an overlay above the content like you are expecting. You need to create another element.
This should do what you want.
You just need to change position to relative in place of absolute in the #modal-box and it will work
Related
Currently, I have layered 4 images on top of a background image. When your mouse hovers over each image, it disappears until the user refreshes. I would like to create 26 clones of an image. Ideally, I could position each image copy and the jquery would autogenerate id names like so (#myid(n)) a.k.a #myid1, #myid2. As I am unable to pull this image cloning off so far, I have to copy and paste each block of code over and over again. However, once I added my sixth image, I encountered performance problems, and my code stopped working.
I have included two codepens. This codepen works with 4 image copies : https://codepen.io/narutofan389/collab/NWGpQWo
This codepen doesn't work with 6 copies: https://codepen.io/narutofan389/collab/MWapQyO
I have heard too many mouseover events can create performance issues. I am not sure if this is what the source of my issues. I am also trying on a separate codepen to test image cloning with separate ids. This is the code so far taken from another stack overflow answer:
html
<body>
<div id="sand"></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
javascript
$(document).ready(function(){
for (var i = 0; i < 2; i++) {
var img = "<img src ='https://s3-us-west-2.amazonaws.com/s.cdpn.io/4405662/sandsmaller.png'
id='myid"+i+"'/>";
$("body #sand").append(img);
}
})
Again I am trying to generate different ids that I can position individually?
Since your cloning snippet is in jQuery, I hope a solution using it is acceptable.
First I had to add a #sand container missing from your markup, as it's where the code is appending the images. Also added a div wrapper to each image to mirror your codepen (although you might not need it), and added a sand class to the images.
Then, instead of adding an event for each element, I used Event delegation so I can attach just one handler to the wrapping element. I'm targeting all images inside the #sand container that are not already hidden.
And then simplified the css a bit removing redundant rules and moving common properties to the new classes.
for (let i = 1; i <= 6; i++) {
// Create the wrapping div
var $container = $("<div class='sand" + i + "'>");
// Create the img
var $img = $("<img src ='https://s3-us-west-2.amazonaws.com/s.cdpn.io/4405662/sandsmaller.png' class='sand' id='sand" + i + "'/>");
// Add image to container
$container.append($img);
// Add container to the document
$("body #sand").append($container);
}
// Listen when the mouse hovers an image
$('#sand').on('mouseenter', 'img.sand:not(.hide)', function() {
$(this).addClass('hide');
});
$('#sand').on('animationend', 'img.sand.hide', function() {
$(this).hide();
});
html {
background: url(https://i.postimg.cc/HWJvtDGx/lockcorrect.jpg) no-repeat center center fixed;
background-size: cover;
height: 100%;
overflow: hidden;
}
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
#-webkit-keyframes fade {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-moz-keyframes fade {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-o-keyframes fade {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes fade {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.sand {
position: absolute;
height: 90vh;
}
#sand6 {
top: 0px;
right: 200px;
}
#sand5 {
top: 300px;
left: 500px;
}
#sand4 {
top: 300px;
right: 200px;
}
.hide {
animation: fade 3s;
animation-fill-mode: forwards;
}
#sand3 {
height: 100vh;
top: 0px;
left: 700px;
}
#sand2 {
height: 100vh;
top: 0px;
left: 300px;
}
#sand1 {
position: relative;
height: 100vh;
right: 30px;
}
<div id="bg">
<img src="https://i.postimg.cc/HWJvtDGx/lockcorrect.jpg
" alt="lock">
</div>
<div id="sand">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I want to change the specific picture that I hover over. However, each pictures is underneath an overlay.
I found a solution to change the picture when I hover over the picture itself.
However, I only can hover over the overlay (parent div to the picture).
<script type='text/javascript'>
$(document).ready(function(){
$(".overlaydiv").hover(
function() {$(this).attr("src","images/aboutR.png");},
function() {$(this).attr("src","images/about.png");
});
});
</script>
I'm new with Javascript and very thankful any help.
Well, if your picture is in the said overlay, here's the code:
$(document).ready(function(){
$(".overlaydiv").hover(
function() {$(this).find('img').attr("src","images/aboutR.png");},
function() {$(this).find('img').attr("src","images/about.png");
});
});
This should update all <img> tags src attributes that are within the .overlaydiv.
If you have multiple image in your overlay, and each should have a specific "new" image on hover, you can add new src as attribute on each image tag, and change your JS to use this new url contained in your attribute to change the img src (instead of hardcoding new URL in your JS).
Example:
<div class="overlaydiv">
<img src="img1.jpg" default-src="img1.jpg" hover-src="img1-2.jpg>
<img src="img2.jpg" default-src="img2.jpg" hover-src="img2-2.jpg>
</div>
Javascript:
$(document).ready(function(){
$(".overlaydiv").hover(
function() {
$(this).find('img').each(function( index ) {
$(this).attr('src', $(this).attr('hover-src'));
});
},
function() {
$(this).find('img').each(function( index ) {
$(this).attr('src', $(this).attr('default-src'));
});
});
});
This is a bit more flexible, and prevent hardcoding URL in your JS. It's also make it compatible with multiple image, having different version on overlay hover.
Note that we need default-src attribute to be able to "remember" the original src to set back on hover leave (after hover callback, when user moving out). You could achieve the same using .data() to remember the default-src.
You can do it with pure CSS in multiple ways:
Using img elements:
div {
display: inline-block; /* or "inline-flex", "inline-grid" */
position: relative;
}
div:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: Aqua;
opacity: .5;
}
.hidden, div:hover .shown {display: none}
.shown, div:hover .hidden {display: block}
<div>
<img class="shown" src="https://placehold.it/200x200" alt="">
<img class="hidden" src="https://dummyimage.com/200x200" alt="">
</div>
Using background: url():
div {
position: relative;
width: 200px;
height: 200px;
background: url(https://placehold.it/200x200), url(https://dummyimage.com/200x200) no-repeat;
}
div:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: Aqua;
opacity: .5;
}
div:hover {
background-size: 0, cover;
}
<div></div>
Mix of both:
div {
width: 200px;
height: 200px;
position: relative;
}
div:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: Aqua;
opacity: .5;
}
img {display: block}
div:hover img {display: none}
div:hover {background: url('https://dummyimage.com/200x200') no-repeat}
<div>
<img src="https://placehold.it/200x200" alt="">
</div>
i am looking for this kind of template . Moving the page to left and then page to right. Can anyone tell me how can i make this or is there any javascript example similar to this.
Create two <div>s, put them next to each other, make them take up the whole window, and change them as needed.
HTML:
<div class="left">left</div>
<div class="right">right</div>
CSS:
body {
margin: 0;
}
.left {
background-color: green;
bottom: 0;
left: 0;
position: fixed;
top: 0;
transition: width 1s;
width: 0;
}
.left.active {
width: 200px;
}
.right {
background-color: red;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
transition: left 1s;
}
.right.active {
left: 200px;
}
JS (width jQuery):
$('.right').on('click', function() {
$('.left').toggleClass('active');
$('.right').toggleClass('active');
});
And here's a fiddle.
Using .toggle(effect,options,duration) method to moving the page to left to right.
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: 'right' };
// Set the duration (default: 400 milliseconds)
var duration = 700;
$('#Id').toggle(effect, options, duration);
Taken via this link
If you want it to animate smooth on all devices you should use css transitions and transforms. Hiding and showing would be as basic as toggling a class then.
The example in jsfiddle
<style media="screen">
.wrapper {
width: 100%;
overflow: hidden;
}
.menu {
height: 100vh;
width: 100px;
background: #ABC;
color: white;
position: absolute;
left:0;
transition: transform 0.3s;
transform: translateX(-100px);
}
.content {
transition: transform 0.3s;
}
.active .menu {
transform: translateX(0);
}
.active .content {
transform: translateX(100px);
}
</style>
<button class="toggle">Toggle</button>
<div class="wrapper">
<div class="menu">
My menu
</div>
<div class="content">
My content
</div>
</div>
<script type="text/javascript">
document.querySelector('.toggle').addEventListener('click', function(event) {
event.preventDefault();
document.querySelector('.wrapper').classList.toggle("active");
});
</script>
NB! Supported from IE10. IE 9 will support without the animation and you probably should add the needed -ms-, -webkit-, -moz-, etc prefixes to support the older browsers if needed for transition and transform properties.
Also I advise not animating body or html with this method and put the content of page in the wrapper (in .content in the examples case). Moving body and html directly may lead to unpleasant surprises later.
I am sorry for asking a very minor thing but I feel a bit helpless in this one. I have integrated a pre-loader image at my page load in a very simple way
This is my Page link
HTML: (Div for loading Pre-loader image)
<div class="se-pre-con"></div>
Jquery to trigger the pre-loader on page load
$(window).load(function() {
// Animate loader off screen
$(".se-pre-con").fadeOut();
});
A bit of Styling . CSS
<style>
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('http://www.rybena.com.br:8080/RybenaRepository/resource/img/loading.gif') center no-repeat #fff;
}
Problem
When Page loads, it splashes before the Pre-loader image one time and then loads after the pre-loader image complete its effect. Theoretically, pre-loader should display before page load. I hope anyone of you can figure out where and what I did wrong?
Regards
I think your HTML isn't well formatted on the link you provided:
What I would do is make sure the HTML page has a structure similar to this:
<html>
<head>
<script>
</script>
</head>
<body>
<div class="se-pre-con"></div>
<div class="site-content"></div>
</body>
</html>
And inside your script tag have the following method:
$(window).load(function() {
$(".site-content").show(); //or fadeIn (what ever suits your needs)
$(".se-pre-con").fadeOut();
});
And in your css make sure you set
.site-content{
display: none;
}
EDIT: (To answer your question in comment- call loader at any time)
I would probably create a function like this:
function toggleLoader(show){
if(show == true){
$(".se-pre-con").show();
$(".site-content").fadeOut();
}
else{
$(".site-content").show();
$(".se-pre-con").fadeOut();
}
}
Then on window load you would call: toggleLoader(false),
When you make a request call: toggleLoader(true),
And when you receive a response call: toggleLoader(false).
page content is also visible on page load along with loader element so there no any sequence which content load first, but you can manger by following code, Suppose you have two div, one pre-loader div another site container div
<body>
<div class="se-pre-con"></div>
<div id="container" style="display: none;">
<!-- site content here -->
</div>
</body>
in container div add display: none style so site content cant't blink on page load.. and when page load then you can show container div, see below code
$(window).load(function() {
// Animate loader off screen
$("#container").show();
$(".se-pre-con").fadeOut();
});
Just gone thru your page link and noticed that display:none; was added to .se-pre-con as shown below. Please remove the display:none; property. It works buddy!
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('http://www.rybena.com.br:8080/RybenaRepository/resource/img/loading.gif') center no-repeat #fff;
display: none;
}
/* page Loader dynamically call */
/* for particular div and all page */
/*html*/
<div id="divLoaderContainer">
<!--Lodar for body start-->
<div class="preLoaderPage nodisplay">
<img class="loading-image" src="~/Content/Images/preLoader.gif" alt="Loading..." />
</div>
<!--Lodar for body end-->
<!--Lodar for div start-->
<div class="preLoaderDiv nodisplay">
<img class="loading-image" src="~/Content/Images/preLoader.gif" alt="Loading..." />
</div>
<!--Lodar for div end-->
</div>
/*css*/
.preLoaderPage {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.8;
background-color: #dae3ec;
z-index: 99;
}
.preLoaderDiv {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
display: block;
opacity: 1;
background-color: rgba(255, 255, 255, 0.94);
z-index: 99;
}
.preLoaderPage .loading-image {
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
width: 180px;
height: 180px;
}
.preLoaderDiv .loading-image {
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
}
/*Loader here end*/
/*JS function*/
// for full loader
function showLoader(id) {
if (id == null || id == undefined || id == '') {
$("div.preLoaderPage").removeClass('nodisplay');
}
else {
showPartialLoader(id)
}
}
function hideLoader(id) {
if (id == null || id == undefined || id == '') {
$("div.preLoaderPage").addClass('nodisplay');
}
else {
hidePartialLoader(id)
}
}
// for specific div loader
function showPartialLoader(id) {
var loaderdiv = $("#divLoaderContainer div.preLoaderDiv").clone();
$(loaderdiv).removeClass('nodisplay');
var content = $("div#" + id).closest('div.x_content');
if (content.length > 0)
$("div#" + id).closest('div.x_content').append(loaderdiv);
else {
$("div#" + id).append(loaderdiv);
}
}
function hidePartialLoader(id) {
var content = $("div#" + id).closest('div.x_content');
if (content.length > 0)
$("div#" + id).closest('div.x_content').find('div.preLoaderDiv').remove();
else
$("div#" + id + ' div.preLoaderDiv').remove();
}
/*call by JS*/
$.ajax({
showLoader(id);// id of div or container
success: function (data) {
// your code
},
hideLoader(id)// id of above div or container
});
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('http://www.rybena.com.br:8080/RybenaRepository/resource/img/loading.gif') center no-repeat #fff;
display: none;
}
I've had one question involving this piece of code answered by the very helpful people here, but now I have another one which is slightly different. I have a placeholder image which sits in a carousel slide, which when clicked on gets replaced by a youtube video using the default youtube iframe embed.
What I would like to do is, after a user has clicked on the image and has played the video, when they click away from the carousel slide the video is embedded in (for example, by clicking on a carousel arrow or pagination dot) it resets it back to how it was before the video was displayed.
I hope that makes sense. Basically, I need help reverse engineering this code so that the video gets replaced again by it's placeholder image on a click of another element/div.
Here is the HTML:
<div class="youtube_video">
<img src="img/video_poster_carousel.jpg" width="986" height="308">
<!-- <iframe width="986" height="555" src="https://www.youtube.com/embed/Wt_Ruy_ejPY?enablejsapi=1&list=PL027E2B6D9900A88F&showinfo=0&controls=1" frameborder="0" allowfullscreen></iframe> -->
</div>
And the CSS:
/* video */
.youtube_video { position: relative; padding-bottom: 31.65%; height:0; }
.youtube_video img { position: absolute; display: block; top: 0; left: 0; /*width: 100%; height: 100%;*/ z-index: 20; cursor: pointer; }
.youtube_video:after { content: ""; position: absolute; display: block;
background: url(play-button.png) no-repeat 0 0;
top: 45%; left: 45%; width: 46px; height: 36px; z-index: 30; cursor: pointer; }
.youtube_video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* image poster clicked, player class added using js */
.youtube_video.player img { display: none; }
.youtube_video.player:after { display: none; }
And the Javascript:
$(function() {
var videos = $(".youtube_video");
videos.on("click", function(){
var elm = $(this),
conts = elm.contents(),
le = conts.length,
ifr = null;
for(var i = 0; i<le; i++){
if(conts[i].nodeType == 8) ifr = conts[i].textContent;
}
elm.addClass("player").html(ifr);
elm.off("click");
});
});
This below line actually does a innerHTML which means your img tag is lost
you may have to move the IMG tag out of the youtube_video container and do a hide and show toggle mechanism for the youtube_video container and the IMG tag
elm.addClass("player").html(ifr);