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.

How to expand and collapse three div's side by side?

$(document).ready(function () {
$("#toggle").click(function () {
if ($(this).data('name') == 'show') {
$("#sidebar").animate({
width: '10%'
}).hide()
$("#map").animate({
width: '89%'
});
$(this).data('name', 'hide')
} else {
$("#sidebar").animate({
width: '29%'
}).show()
$("#map").animate({
width: '70%'
});
$(this).data('name', 'show')
}
});
});
html, body {
width:100%;
height: 100%;
}
#header {
width: 100%;
height: 20%;
float: left;
border: 1px solid;
}
#map {
width: 80%;
height: 80%;
float: left;
border: 1px solid;
}
#sidebar {
width: 19%;
height: 80%;
float: left;
border: 1px solid;
}
#toggle {
width: 10%;
height: 40%;
margin-right: 6.5%;
margin-top: 3.5%;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">HEADER
<input type="button" data-name="show" value="Toggle" id="toggle">
</div>
<div id="map">MAP</div>
<div id="sidebar">SIDEBAR</div>
I am a beginner in angularjs, jquery and css. I want to create three div with toggle side by side
Please help me how to do that in angularjs.
In normal mode Example:-
It will be like this.
If I expand center div it needs to be like this Example:-
If I expand last div it needs to be like this Example:-
Thanks..

Try this. All the div can be expanded in any order. To switch back into normal position, click on the expanded div again.
Width in compressed and expanded states are expressed in percentage and you can change them in the css, according to your requirement. Also I added transition property for smooth functioning.
Here's a pen.
$("a.expansion-btn").click(function (){
classes = this.className;
var divNumber = classes.slice(-1);
var toGetId = "#div-"+divNumber;
if ($(toGetId).hasClass("expanded-div")){
$(".normal-div").removeClass("compressed-div expanded-div");
}
else{
$(".normal-div").removeClass("compressed-div expanded-div").addClass("compressed-div");;
$(toGetId).removeClass("compressed-div").addClass("expanded-div");
}
});
*{
box-sizing:border-box;
}
.container{
margin:0;
padding:0;
width:100%;
height:400px;
}
.normal-div{
width:33.33%;
height:100%;
position:relative;
border:2px solid black;
float:left;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.expanded-div{
width:80%;
}
.compressed-div{
width:10%;
}
#div-1{
background-color:green;
}
#div-2{
background-color:red;
}
#div-3{
background-color:blue;
}
a.expansion-btn{
position:absolute;
top:10px;
right:10px;
font-weight:bold;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="normal-div" id="div-1">
<a class="expansion-btn exp-1">click</a>
</div>
<div class="normal-div" id="div-2">
<a class="expansion-btn exp-2">click</a>
</div>
<div class="normal-div" id="div-3">
<a class="expansion-btn exp-3">click</a>
</div>
</div>

If you just want to toggle between divs then do something like this.
// varible for holding div index
var i = 0,
// cache divs
$div = $('.div');;
// bind click event handler
$('.toggle').click(function() {
$div
// remove both class from all elements
.removeClass('active nonactive')
// get element by index
.eq(i)
// add active class
.addClass('active')
// get siblings
.siblings()
// add nonactive class
.addClass('nonactive');
// update index
i = ++i % $div.length;
})
.div {
height: 300px;
width: 30%;
border: solid 1px black;
display: inline-block
}
.active {
width: 75%;
}
.nonactive {
width: 10%;
}
.active,
.nonactive {
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle">toggle</button>
<br>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
Or if you want to toggle when clicked a button inside the div then do something like this.
$('.toggle').click(function() {
$(this)
// get div
.parent()
// remove nonactive class from clicked element
.removeClass('nonactive')
// toggle active class
.toggleClass('active')
// get sibling divs
.siblings()
// remove active class from siblings
.removeClass('active')
// toggle nonactive class based on the clicked element
.toggleClass('nonactive', $(this).parent().is('.active'));
})
.div {
height: 300px;
width: 30%;
border: solid 1px black;
display: inline-block
}
.active {
width: 75%;
}
.nonactive {
width: 10%;
}
.div,
.active,
.nonactive {
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="div">
<button class="toggle">toggle</button>
</div>
<div class="div">
<button class="toggle">toggle</button>
</div>
<div class="div">
<button class="toggle">toggle</button>
</div>
</div>

<div id="header">HEADER
<input type="button" data-name="show" value="Toggle" id="toggle">
</div>
<div id="maincont">
<div id="map" class="active">MAP</div>
<div id="sidebar" class="inactive">SIDEBAR</div>
<div id="sidebar1" class="inactive">SIDEBAR1</div>
</div>
script:
$(document).ready(function () {
$("#toggle").click(function () {
var $div = $('#maincont').find(".active");
$div.removeClass('active').addClass("inactive").next().addClass("active");
$('#maincont').find(".inactive").animate({
width: '10%'
})
$('#maincont').find(".active").animate({
width: '79%'
});
});
});
css.
html, body {
width:100%;
height: 100%;
}
#header {
width: 100%;
height: 100px;
float: left;
border: 1px solid;
}
#map {
height: 80%;
float: left;
border: 1px solid;
}
.active{
width:78%;
float: left;
height: 100px;
}
.inactive{
width:10%;
float: left;
border: 1px solid;
height: 100px;
}
#sidebar {
height: 80%;
float: left;
}
#toggle {
width: 10%;
height: 40%;
margin-right: 6.5%;
margin-top: 3.5%;
float: right;
}
fiddle link

Since you tagged your question with angularjs, here is a simple solution with no fancy CSS:
Suppose you have some array of objects that describe the panels/divs in the controller, e.g.
$scope.panels = [{
title: "One",
expanded: true
}, {
title: "Two"
}, {
title: "Three"
}];
The expanded flag just track which panel is actually expanded. By default the first one.
Then when you click on a panel, this function set the flag to the selected panel:
$scope.expandPanel = function(panel) {
$scope.panels.forEach(p => p.expanded = false);
panel.expanded = true;
}
And you display all that in a ng-repeat loop where the key thing is to set dynamically the class depending on the expanded flag with ng-class:
<div class="panel"
ng-class="{'expanded': panel.expanded, 'reduced': !panel.expanded}"
ng-repeat="panel in panels" ng-click="expandPanel(panel)">
<span>{{panel.title}}</span>
</div>
See it live with this plunker.
Note: .panel, .expanded and .reduced classes are define in the plunker css file.

CSS / JQuery / Javascript loading icon only works in firefox

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>

Fullscreen image with border that shrinks depending by device resolution

Hello everybody I want to make a homepage with a fullscreen image on the background with a border all around.
I have been able to do it as you can see from this jsfiddle
https://jsfiddle.net/dforce/3j5uo5qo/1/
but I would like that the border shrinks when the resolution is smaller or desappear on resolution is smaller than 979px.
I use this script to make the border:
<script>
$theBorder=35; //border around image (change top and left values of #bg accordingly)
$bg=$("#bg");
$bgimg=$("#bg #bgimg");
$preloader=$("#preloader");
//]]>
$(window).load(function() {
FullScreenBackground($bgimg,$bg);
$(window).resize(function() {
FullScreenBackground($bgimg,$bg);
});
});
$bgimg.load(function() {
var $this=$(this);
FullScreenBackground($this,$bg);
$preloader.fadeOut("fast");
$this.delay(200).fadeIn("slow");
});
function FullScreenBackground(theItem,theContainer){
var winWidth=$(window).width();
var winHeight=$(window).height();
var imageWidth=$(theItem).width();
var imageHeight=$(theItem).height();
var picHeight = imageHeight / imageWidth;
var picWidth = imageWidth / imageHeight;
if ((winHeight / winWidth) < picHeight) {
$(theItem).css("width",winWidth);
$(theItem).css("height",picHeight*winWidth);
} else {
$(theItem).css("height",winHeight);
$(theItem).css("width",picWidth*winHeight);
};
$(theContainer).css("width",winWidth-($theBorder*2));
$(theContainer).css("height",winHeight-($theBorder*2));
$(theItem).css("margin-left",(winWidth- $(theItem).width())/2);
$(theItem).css("margin-top",(winHeight- $(theItem).height())/2);
}
</script>
Thank you for your help!

hope this will help to you.try this
<html>
<head>
<title>Welcome !</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
body{
margin:0;
padding: 0;
}
.maindiv{
width: 100%;
height: 100%;
background-color:black;
position: absolute;
background-image: url(http://3.bp.blogspot.com/-dwPiL6_mLUo/UzPrdohyk0I/AAAAAAAADds/LNvY6Hyp4Tc/s1600/Programmer+HD+Wallpaper+by+PCbots.png);
background-position: center;
display: none;
}
</style>
<body>
<div class="maindiv"></div>
<script type="text/javascript">
$(document).ready(function(){
$(".maindiv").fadeIn(4000)
});
</script>
</body>
</html>
Note if you want to put a responsive image without using bootstrap,
set it as div background-image with width and height in % value.or
give your div
width:anyvalue%;
height:anyvalue%;
then put your image inside this div and for your image,set
width:100%;
height:100%;

What about responsive css?
Something like
<div id="mainimage">
<div class="img"></div>
</div>
and the css:
body{
margin:0;
padding:0;
background:#fff;
}
#mainimage {
box-sizing: border-box;
width: 100%;
height: 300px;
padding: 20px;
}
#media(max-width: 1300px) {
#mainimage{
padding: 10px;
}
}
#media(max-width: 979px) {
#mainimage{
padding: 0px;
}
}
.img{
height:100%;
width: 100%;
background: url(http://www.piedicosta.com/jnuovo/images/big.jpg) no-repeat center center;
background-size: cover;
}
You can add transitions to make the change smoother, something like
#mainimage {
-webkit-transition: all 0.50s ease-in-out;
-moz-transition: all 0.50s ease-in-out;
-ms-transition: all 0.50s ease-in-out;
-o-transition: all 0.50s ease-in-out;
}

jquery update div background

I'm trying to update a background-image on the body element of a page, when I hover links with data-* attributes. It works like a charm but I can't find a way to create a smooth fade between the images when a link is hovered. Here is my code :
$(document).ready(function(){
$('.link').hover(
function() {
var bg = $(this).data('fond');
// alert(bg);
$('body').css("backgroundImage", 'url(' + bg + ')');
},
function () {
$('body').css("backgroundImage", 'url(http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg)');
}
);
});
body {
margin:0;
background-image: url("http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg");
background-repeat: no-repeat;
background-size: cover;
transition: all 1s;
}
header {
width: 50%;
margin: 50px auto;
}
h1 {
text-align: center;
}
nav {
position: absolute;
width: 50%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
nav ul {
padding: 50px;
background-color: rgba(0, 0, 0, 0.95);
}
nav ul li {
display: inline-block;
padding: 0 20px;
}
nav ul li a {
color: white;
text-decoration: none;
}
<header>
<h1>Hover a link, bro</h1>
</header>
<!-- Main -->
<main>
<nav class="main-nav">
<ul>
<li data-fond ="img/belharra.jpg" class="link">Belharra</li>
<li data-fond ="img/jaws.jpg" class="link">Jaws</li>
<li data-fond ="img/mavericks.jpg" class="link">Mavericks</li>
<li data-fond ="img/nazare.jpg" class="link">Nazare</li>
<li data-fond ="img/teahupoo.jpg" class="link">Teahuppo</li>
</ul>
</nav>
</main>
Bonus: Someone can explain to me why I had to use a second function when the mouse leave a link to give the body the original background image? I thought the .hover() method automatically put a toggle on the targeted element...
The .hover() method binds handlers for both mouseenter and mouseleave events. You can use it to simply apply behavior to an element during the time the mouse is within the element.
Thanks a lot for the help !

I don't think this can be done with a smooth fade effect.
A better way to achieve this is to put all your images in a div container in your html. All your images need to have a css opacity property to 0. In this way, you can easily change the opacity property beetween your images and have your smooth fade effect.

body {
margin:0;
background-image: url("http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg");
background-repeat: no-repeat;
background-size: cover;
transition: all 1s;
}
please change your url link url("http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg");
it is not correct

you can try your jquery like this.
$('body').fadeOut(1000).css("your code").fadeIn(1000);
following html,I have created to get an idea.think this may help to you.just copy and try it.
<html>
<head>
<title>Welcome !</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
.myimage{
width:500px;
height: 500px;
overflow: hidden;
}
.myimage img{
width: 100%;
height: 100%;
}
</style>
<body>
<div class="myimage">
<img id="one" src="http://www.estero.co.nz/new/wp-content/uploads/2014/03/45901_new-zealand.jpg"/>
<img id="two" src="http://www.timeforkids.com/files/styles/tfk_rect_large/public/2011-07/nz_ss5.jpg?itok=0m-TtEYy"/>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#one").mouseenter(function(){
$(this).fadeOut(1000);
});
});
</script>
</body>
</html>