Develop Reference

How open a URL in another tab when click on modal

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.

Keep Footer At Bottom Of Page

I've got the following:
<div class="wrapper">
<div class="top">
</div>
<div class="left">
</div>
<div class="main">
</div>
<div class="footer">
</div>
</div>
With the following CSS:
.top {
position: absolute;
left: 0;
height: 80px;
width: 100%;
}
.left {
position: absolute;
left: 0; top: 80px; bottom: 100px;
width: 200px;
margin-left: 5px;
}
.main {
position: absolute;
left: 200px; top: 80px; bottom: 100px;
width: 84%;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
}
I'd like to keep the footer at the bottom of the page (after left and main, and regardless of how big/small main is), but with position: fixed the footer scrolls up/down as you scroll through the page. I've tried position: absolute and that doesn't push the footer all the way to the bottom. I've tried some of the other solutions found here and none have worked. How can I keep the footer at the bottom of the page (similar to the footer at the bottom of this page)?
Thanks in advance!

Try this:
.footer{
position:absolute;
bottom:0
}
Position absolute moves footer according to the element that contains it. Bottom 0 keeps the footer at the bottom of it's parent.
This will work if the parent of the absolute positioned element has relarive position. To say it more particular, your wrapper needs to have the following code:
.wrapper{
position: relative
}

Fixed does what you're describing, locks elements with your viewport. Absolute makes an element ignore the flow of the rest of your page, so if you want to make it go beneath everything else you'll run into problems. Give this a shot, it'll put it underneath all your content.
footer{
position: relative
width: 100%
float: left
}
If you need it to stay at the very bottom of the screen when you have very short content, you can add a wrapper element around everything and try something like this
.wrapper{
display: block;
min-height: 100vh;
position: relative;
padding-bottom: footer height (set this to how tall your footer is)
}
footer{
position: absolute;
bottom: 0;
}

Give this a go:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
.left {
float:left;
width: 200px;
margin-left: 5px;
}
#right {
float:left;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
And for older browsers:
#container {
height:100%;
}

Don't use position for every <div> you only need to add position to .footer
Here is a working example...

Unveiling a fluid-width header image

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 ...

How to add animation to a bar graph with jQuery?

I am trying to make a animated bar graph in jQuery but how can I make the bar slide up from the bottom?
There are images for a bar and background. I set the place on CSS and am trying to add animation to the bar. After the bar shows up, I want to show a pop image. The animation works but I want to show the bar from the bottom.
$(document).ready(function() {
$(window).load(function(){
$("#graph_bar").animate({
"height":"toggle"
},2000,function(){
$("pop").show();
});
});
});
#graph_bg{
position:relative;
}
#graph_bar{
position: absolute;
top:270px;
left: 182px;
display: none;
}
#pop{
position: absolute;
top:50px;
left: 50px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="graph_bg" alt="graph_bg" src="graph_bg.jpg"/>
<img id="graph_bar" alt="graph_bar" src="graph_bar.jpg"/>
<img id="pop" alt="pop" src="image.jpg"/>

#graph_bg{
position:relative;
width:350px;
height:300px;
background-color:yellow;
overflow:hidden;
}
#graph_bar{
position: absolute;
top: 350px;
left: 50px;
height:300px;
width:50px;
background-color:blue;
}
#pop{
position: absolute;
top:50px;
left: 50px;
width:50px;
height:50px;
background-color:red;
display: none;
}
<div id="graph_bg">
<div id="graph_bar"></div>
<div id="pop"></div>
</div>
$("#graph_bar").animate({"top":"50px"}
,2000
,function(){
$("#pop").show();
}
);
http://jsfiddle.net/zacwolf/cgsdcwp3/1/
Since I didn't have your images I used background-colors instead, but you could just change those to background-image to use your images. The thing you were missing is that the background container needs to be the parent to the other two elements, then you can use "overflow-hidden" in the background container, and set the initial absolute position of the bar so that it is outside the visible limits of the background container. Then you just animate it to the "top" position where you want it to be. Also, you forget the # in your show()

jquery smooth scrolling in Chrome NOT in Internet Explorer

I am trying to a fixed header on top of the page. So when the user scroll down, the header stay up on top. However this is only work in Chrome, FireFox and Opera which scrolls smoothly.
If you have a look the code below. Open with IE and Google Chrome. You will see the difference! The header must stay in the wrapper.
Example Code
I would like to know how to make the scrolling smooth when repositioning objects inside the div elements when set to absolute to keep it floating at the top of the box.
HTML:
<div id="wrapper">
<header>
<h2>Title Header</h2>
</header>
Content page
</div>
CSS:
#wrapper{
height:200px;
overflow-y:scroll;
position:relative;
}
#wrapper > p {
position: absolute;
z-index: 0;
}
#wrapper header {
background-color:#ccc;
position: absolute;
z-index: 10;
display: block;
top: 0px;
padding:10px;
width: 100%;
}
#wrapper header h2 { margin:0 }
Javascript:
$(function(){
$('#wrapper').scroll(function(e){
$('header').css('top',parseInt($('#wrapper').scrollTop())+'px');
});
});

I'd rather use this CSS and remove the JS for cross-browser compatibility:
// same CSS...
#wrapper p {
margin-top: 50px; //no positioning just a top margin
z-index: 0;
}
#wrapper header {
background-color:#ccc;
position: fixed; // from absolute to fixed
z-index: 10;
display: block;
top: 0px;
padding:10px;
width: 100%;
}
//same CSS...
Demo.