My modal display an intern URL with iFrame. I'm looking to open this intern URL when you click inside the modal.
My code bellow doesn't work. When I click inside the modal nothing happening. The code works only when I click on the close button.
Thanks for help
See the code updated with your answer. It still doesn't work. My close button doesn't work anymore
$('#cosmeto').click(function() {
$('#cosmetomodal').show().addClass('modal-open');
});
$('#closec').click(function() {
var elem = $('#cosmetomodal');
elem.removeClass('modal-open');
setTimeout(function() {
elem.hide();
},200);
});
$('#myiframe').on('click', function(){
elem.removeClass('modal-open');
elem.hide();
window.open('google.fr','');
});
.cosmetomodal {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color: rgba(0,0,0,0.8);
z-index:9999;
padding-top: 100px; /* Location of the box */
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
}
.cosmeto-content {
position:fixed;
width:60%;
top:55%;
left:50%;
padding:15px;
background-color:#fafafa;
box-sizing:border-box;
opacity:0;
transform: translate(-50%,-50%);
transition:all 300ms ease-in-out;
margin: auto;
border-radius: 5px;
overflow: scroll;
text-align: center;
}
.cosmetomodal.modal-open #cosmeto-content {
opacity:1;
top:50%;
}
#myiframe {
position: fixed;
left:0;
z-index: 999;
top:0;
right:0;
bottom:0;
cursor: pointer;
}
<div id="cosmetomodal" class="cosmetomodal" style="display:none;">
<div id="cosmeto-content" class="cosmeto-content">
<div id="myiframe"></div>
<iframe src="principes_actifs.html" onload="iframeResize(this);" style="border:none;" ></iframe>
<button id="closec" type="button">Close </button>
</div>
</div>
<div id="file" class ="container">
<input id="vegetal" type="image" src="IMAGES/PNG/vegetal.png" height="250px" width="250px" />
</div>
You can place an invisible div <div class="myiframe"></div> that covers the area of the popup being set to absolute, and use javascript to say when it's clicked go to url. Have to set the correct z-indexes with css.
Working jsfiddle: http://jsfiddle.net/e351ck0d/1/
Remove ,'_blank' from window.open('https://google.com','_blank'); and write instead ,'_self' if want to open the url in the same window.
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div id="file" class ="container">
<input id="cosmeto" type="image" src="IMAGES/PNG/principes_actifs.png" height="250px" width="250px"/>
</div>
<div id="cosmetomodal" class="cosmetomodal" style="display:none;">
<div id="cosmeto-content" class="cosmeto-content">
<div class="myiframe"></div>
<iframe src="principes_actifs.html" onload="iframeResize(this);"></iframe>
<button id="closec" type="button">Close </button>
</div>
</div>
CSS:
.cosmetomodal {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color: rgba(0,0,0,0.8);
z-index:9999;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
}
.cosmeto-content {
position:fixed;
margin-bottom: 150px;
width:70%;
left:50%;
padding:15px;
background-color:#fafafa;
box-sizing:border-box;
opacity:0;
transform: translate(-50%,-50%);
transition:all 300ms ease-in-out;
border-radius: 5px;
overflow: scroll;
text-align: center;
z-index: 1;
}
.cosmetomodal.modal-open #cosmeto-content {
opacity:1;
top:50%;
overflow: scroll;
}
.myiframe {
position: absolute;
left:0;
z-index: 2;
top:0;
right:0;
bottom:0;
cursor: pointer;
}
#closec {
position: absolute;
z-index: 99999;
}
JS:
var elem = $('#cosmetomodal');
$('#cosmeto').click(function() {
$('#cosmetomodal').show().addClass('modal-open');
});
$('.myiframe').on('click', function(){
elem.removeClass('modal-open');
elem.hide();
window.open('https://google.com','_blank');
});
$('#closec').click(function() {
elem.removeClass('modal-open');
setTimeout(function() {
elem.hide();
},200);
});
EDIT: to fix the scroll bar, you can set the absolute overlay div to start 30px (or use %) from right, like this:
.myiframe {
position: absolute;
left:0;
z-index: 2;
top:0;
right:30px;
bottom:0;
cursor: pointer;
}
and the iframe to occupy the whole modal width:
.cosmeto-content iframe {
width: 100%;
}
EDIT 2: a slightly different approach, while i start to understand what you're looking for: http://jsfiddle.net/e351ck0d/2/
I've set the iframe to show in its entire height, but a fixed height to the popup, so you'll only scroll the popup, keeping both the invisible div with link and scroll functionality). Also i had to place the button outside (check the html part too.
Related
I have a design I want to code and want the blue div to expand on click, despite it being nexted behind the yellow div. Can anyone help with this?enter image description here
Thank you!
Maybe you need something like this:
$('.back').on('click',function(){
if ( $(this).hasClass('expanded') ) { $(this).removeClass('expanded'); }
else $(this).addClass('expanded');
})
.box {
width: 100px;
height: 100px;
}
.back {
position: absolute;
z-index:0;
top:0px;
left:20px;
background-color:blue;
}
.front {
position: absolute;
z-index:1;
top:20px;
left:0px;
background-color:yellow;
}
.expanded {
z-index:2;
width:100%;
height:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box front"></div>
<div class="box back"></div>
I limited click event to :after pseudo-element using click-event:auto and created a span to bind an event inside the parent element. Why the span does not work?
function toggle(){
var button=document.querySelector('.toggle');
var bar=document.querySelector('.slide');
if(bar.className==='slide up'){
bar.className='slide down';
}else{
bar.className='slide up';
}
}
function click(){
document.body.innerHTML+='<div>Hello</div>';
}
span{
position:relative;
top:90px;
background:green;
cursor:pointer;
pointer-event:auto;
}
*{
margin:0px;
padding:0px;
height:100%;
width:100%;
}
.box{
overflow:hidden;
background-image: url('http://tombricker.smugmug.com/Travel/San-Francisco-California/i-jk2Z7D7/0/L/san-francisco-golden-gate-bridge-morning-sun-bricker-L.jpg');
background-size: cover;
background-position:center;
}
.slide{
position: relative;
left:39vw;
width: 55vw;
height: 77vh;
background: red;
pointer-events:none;
}
.slide:before {
pointer-events:auto;
cursor:pointer;
content: '';
position:absolute;
top:-3vh;
width: 0px;
height: 0px;
border-left:27.5vw solid transparent;
border-right:27.5vw solid transparent;
border-bottom:3vh solid white;
}
.slide.down{
transform:translateY(100vh);
}
.slide.up{
transform:translateY(23vh);
}
.slide.up:before{
transform:translateY(3vh) rotateX(180deg);
}
.slide{
transition:transform 0.4s ease-out;
}
<div class='box'>
<div class='slide up' onclick='toggle()'><span onclick='click()'>Hello</span></div>
</div>
The white triangle is .slide:before. I use click-event:auto; on it. I am NOT sure if I should use AUTO or ALL. Then I use click-event: none; on .slide class, which is the red rectangle below it. So now, I cannot click on the red rectangle just the white triangle to make it slide up and down. But I do still want to click on part of the red rectangle to do other things(not sliding necessarily).So I added a span(green Hello) inside the div that is the rectangle+the triangle. I then write the JS code so that if the green Hello is clicked, a div will Hello will be added to the body of the HTML. But it does NOT work.
I learned this span method here, but I dont quite understand it.
A few things:
Avoid events on pseudo-elements
Don't add elements by reassigning the entire body innerHtml - you lose all event bindings on all elements
Try to avoid putting JavaScript in your HTML
//listen for click event on toggle element
document.querySelector(".toggler").addEventListener("click", function(){
this.parentElement.classList.toggle("up");
});
//listen for click event on hello
document.querySelector(".clicker").addEventListener("click", function(){
var div = document.createElement("div");
var text = document.createTextNode("Hello");
div.appendChild(text);
document.body.appendChild(div);
});
html, body{
height:100%;
}
*{
margin:0px;
padding:0px;
}
.clicker{
position:relative;
top:90px;
background:green;
cursor:pointer;
}
.box{
overflow:hidden;
background-image: url('http://tombricker.smugmug.com/Travel/San-Francisco-California/i-jk2Z7D7/0/L/san-francisco-golden-gate-bridge-morning-sun-bricker-L.jpg');
background-size: cover;
background-position:center;
height:100%;
width:100%;
}
.slide{
position: relative;
left:39vw;
width: 55vw;
height: 77vh;
background: red;
transform:translateY(100vh);
transition:transform 0.4s ease-out;
}
.slide.up{
transform:translateY(23vh);
}
.toggler {
cursor:pointer;
content: '';
position:absolute;
top:-3vh;
width: 0px;
height: 0px;
border-left:27.5vw solid transparent;
border-right:27.5vw solid transparent;
border-bottom:3vh solid white;
}
.slide.up .toggler{
transform:translateY(3vh) rotateX(180deg);
}
<div class='box'>
<div class='slide up'>
<span class='toggler'></span>
<span class='clicker'>Hello</span>
</div>
</div>
Even better:
This effect can be done completely without JavaScript. Use sibling selectors, a label, and a checkbox instead. See working demo here
I have a very simple loading icon, the div is full screen and the image is just a gif:
<div id="loading" class="a">
<img id="loading-gif" src="img/general/712.gif" width="50px" height="50px" class="b" />
</div>
Here are the styles:
.a {
display: none;
position: absolute;
z-index: 9999;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.3);
}
.b {
display: block;
position: absolute;
margin: 0 auto;
}
When I want to display it, I do so like this:
var hCenter = (Math.floor(window.innerWidth/2)) - 25;
var vTop = window.pageYOffset || document.documentElement.scrollTop;
var vCenter = (Math.floor(window.innerHeight/2)) - 25;
$("#loading-gif").css({top: vTop + vCenter, left: hCenter});
$("#loading").show();
And to hide:
$("#loading").hide();
This works fine in firefox but doesn't seem to work in Chrome or on my iPhone. I can't see an error anywhere - any idea why some browsers don't like it?
Thanks
You should do something like this:
.hidden {
display:none;
}
Then you can add and remove the class to show and hide it.
To hide:
$("#loading").addClass("hidden");
To show:
$("#loading").removeClass("hidden");
Try this one
JavaScript
$(window).load(function() {
$('#status').delay(100).fadeOut('slow');
$('#preloader').delay(200).fadeOut('slow');
$('body').delay(200).css({'overflow':'visible'});
});
CSS
/* cover complete screen */
#preloader {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
background-color:#FFF;
z-index:9999; /* makes sure it stays on top */
-webkit-transition:none;
transition:none;}
/* preloader container at the middle */
#status {
width:200px;
height:200px;
position:absolute;
left:50%; /* centers the loading animation horizontally one the screen */
top:50%; /* centers the loading animation vertically one the screen */
background-repeat:no-repeat;
background-position:center;
margin:-100px 0 0 -100px; /* is width and height divided by two */
text-align:center;
}
HTML
<body>
<div id="preloader">
<div id="status">
<h4>Loading...</h4> <!-- include your loading img here -->
</div>
</div>
<h3>This is a body text</h3>
</body>
When i hover on top of div tag then am showing one css overlay and i like to add couple of buttons (Like and Share) on top of overlay how can i do that?
this is my code for hover
.portfolio-item img {
width:100%;
vertical-align:top;
}
.portfolio-item:after {
content:'\A';
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.portfolio-item:hover:after {
opacity:1;
}
#like {
position: absolute;
top: 50%;
left: 50%;
width: 70px;
height: 70px;
margin: -35px 0 0 -35px;
z-index: 10;
}
javascript used to create div
var element = document.createElement("div");
element.setAttribute("id",listItem"+i);
element.setAttribute("class","col-md-4 portfolio-item");
output.appendChild(element);
javascript to show overlay icon
var ele = document.createElement("div");
ele.setAttribute("id","like");
ele.setAttribute("class","like"+i);
document.getElementById("red"+i).appendChild(ele);
html code
<div id="output" class="col-lg-12 container"></div>
Now it look like this on hover"
and am expecting something like this:
You can create a child div inside the main container
<div id="output" class="col-lg-12 container">
<img src="SOMETHING"/>
<div><i class="fa fa-heart"/><span class="counts">23</span></div>
</div>
In css
#output img {
width:100%;
height:100%;
}
#output > div{
display:none;
position: absolute;
top: 50%;
left: 50%;
width: 70px;
height: 70px;
z-index: 10;
}
#output > div:hover{
display:block;
}
Assuming you have setup font awesome properly,
you could do something like this when you are creating the overlay.
var ele = document.createElement("div");
ele.setAttribute("id","like");
ele.setAttribute("class","like"+i);
var faHeart = document.createElement("div");
faHeart.setAttribute("class","fa fa-heart-o");
ele.appendChild(faHeart);
I am trying to unveil a responsive background image. Basically, I have a value on load. Let's say 50%. So I want half of my image to be sharp, and the other half to be blurred.
Never done this before so I had the idea to produce two images : one plain, one blurred.
HTML - Two empty divs. Those divs are in a container-fluid div, so their width change at every window resize, that's important.
<div class="col-lg-9 left-header">
<div class="overlay">
</div>
<div class="bg">
</div>
</div>
<div class="col-lg-3 right-header">
// some stuff
</div>
Now, everything else has to be js and css.
So I start to style my divs accordingly.
Blurred bg, notice absolute positionning :
.overlay {
background:url('../img/overlay.jpg');
height:580px;
width:100%;
background-position:right;
background-size:cover;
position:absolute;
right:0;
}
Non-blurred bg
.bg {
background:url('../img/bg.jpg');
background-size:cover;
background-position:right;
height:580px;
}
As you can see in the jsfiddle https://jsfiddle.net/yqdx9vgc/, there is a big problem especially at large widths. Indeed, I wanted to play with the width parameter of the .overlay. But then, the two background cover images aren't of the same proportions, so the effect is not working.
Ideally, in the end, I want to set the width with jquery. For instance, if my value is 50%, then I tell jquery to put .overlay at 50% width. But my solution isn't working, how could I keep the same dimensions for both background images with different div sizes ? While keeping the responsive effect
I achieved this effect with pure CSS, enjoy:
https://jsfiddle.net/fk9rbgv5/1/
Here is the code:
.unveil-container {
width:100%;
position:relative;
overflow:hidden;
background-size:100% 100%;
background-image:url('http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg');
padding:0;
/* This is for keeping proportion - remove if you do not want */
display: inline-block;
width:100%;
}
/* this whole before is for proportion */
.unveil-container::before {
content:'';
display: block;
margin-top: 50%;
}
.overlay {
background:url('http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg');
height:100%;
/* PLAY WITH WIDTH */
width:50%;
top:0;
background-position:100% 0;
background-size:200% 100%;
position:absolute;
left:50%;
-webkit-filter: blur(5px);
}
.bg {
position:absolute;
left:0;
top:0;
width: 50%;
background:url('http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg');
background-size:200% 100%;
background-position:0%;
height:100%;
}
<div class="col-lg-9 left-header unveil-container">
<div class="overlay"></div>
<div class="bg"></div>
</div>
<div class="col-lg-3 right-header">// some stuff</div>
You can set 2 elements, one inside the other, and then translate them in opposite directions using translate.
Animating them is easy with javascript.
With this layout, the elements are 100% width, and the background can be cover (or contains)
var target1, target2, step;
function move () {
target1.style.transform = "translateX(" + step + "%)";
target2.style.transform = "translateX(-" + step + "%)";
step -= 1;
if (step < 0) step = 100;
}
function start () {
target1 = document.getElementById('moving');
target2 = target1.children[0];
step = 50;
setInterval(move, 20);
}
.base {
width: 80%;
height: 300px;
position: relative;
overflow: hidden;
}
.image {
position: absolute;
width: 100%;
height: 100%;
top; 0px;
left: 0px;
background-image: url('http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg');
background-size: cover;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
top; 0px;
left: 0px;
z-index: 2;
overflow: hidden;
transform: translateX(50%);
}
.overlayimage {
position: absolute;
width: 100%;
height: 100%;
top; 0px;
left: 0px;
background-image: url('http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg');
background-size: cover;
transform: translateX(-50%);
-webkit-filter: blur(5px);
-webkit-filter: invert();
}
<div class="base">
<div class="image"></div>
<div class="overlay" id="moving">
<div class="overlayimage">
</div>
</div>
</div>
<button onclick="start();">start</button>
I changed your filter to make it more visible ...