Develop Reference

Resize div to fit clicked button size and float over another div

I know that title here is hard to understand. I really need help changing this fiddle. So here is what I am trying to do:
When button is clicked, I want the div (coding) to resize to the size of the button itself and I want the button with div(coding) to float over the div (coding2). (coding2) div should resize to its full width at that time.
When button is clicked again, bring the view back to the way it was initially. Attached you will find an image of before and after of what I am looking for. All of this I hope to accomplish just using CSS.
<div id="coding">
<button id = "content" onclick="dosomething()">Click Me</button>
</div>
<div id = "coding2">
</div>

switch the width of the both divs between 0% to 50% for the first one and 49% to 100% for the second one:
function dosomething() {
if($('#coding').width() > 0){
$('#coding').width('0')
$('#coding2').width('100%')
}
else {
$('#coding').width('50%')
$('#coding2').width('49%')
}
}
#coding {
width: 50%;
border: 1px solid black;
height: 300px;
position:absolute;
left:0;
z-index:1;
overflow:visible;
background:yellow;
}
#coding2 {
border: 1px solid black;
height: 300px;
width: 49%;
position:absolute;
right:0;
z-index:0;
background:blue;
}
button {
width:70px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="coding" class="larger">
<button onclick="dosomething()">Click Me</button>
</div>
<div id = "coding2">
</div>

float used to be the way to create layouts, but nowadays we have tools like CSS Grid Layout and Flexbox to create awesome layouts with.
The example below use the former, Grid, which enables you to create a layout and place your child elements within that layout. All width and height calculations are done from the parent (#grid). All the children (#coding and #coding2) have to do is say where in the grid they need to go.
With JavaScript, and in this case jQuery, listen to a click on the button. Then toggle a class on the #grid element. With that class you can set styles on the children which can make them move around in the grid, and in this case, take the width of the entire parent (#grid).
$('#button').on('click', () => {
$('#grid').toggleClass('is-active');
});
#grid {
position: relative;
display: grid;
grid-template-rows: 200px;
grid-template-columns: 200px 1fr;
}
#button {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
}
#coding {
grid-row: 1 / 2;
grid-column: 1 / 2;
background: blue;
}
#coding2 {
grid-row: 1 / 2;
grid-column: 2 / 3;
background: yellow;
z-index: 1;
}
#grid.is-active #coding2 {
grid-column: 1 / 3;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="grid">
<button id="button">Click Me</button>
<div id="coding"></div>
<div id="coding2"></div>
</div>

Create 4 classes, two for each div. The just use .toggleClass() to add or remove it on button click.
function dosomething() {
$("#coding").toggleClass("clicked unclicked");
$("#coding2").toggleClass("clicked2 unclicked2");
}
#coding {
background-color: lightgreen;
}
#coding2 {
background-color: yellow;
}
.clicked {
width: auto;
height: auto;
position: absolute;
border:1px solid black;
}
.unclicked {
width: 50%;
border:1px solid black;
height:300px;
float: left;
}
.clicked2 {
width: 100vw;
height: 300px;
border:1px solid black;
float: none;
}
.unclicked2{
border:1px solid black;
height:300px;
float: right;
width: 49%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="coding" class="unclicked">
<button onclick="dosomething()">Click Me</button>
</div>
<div id="coding2" class="unclicked2">
</div>

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 show full image with overlay in jquery?

Could you please tell me how to show big or large image on button click with overlay. I am making a image slider in which user click on image and it shows the full image with overlay. I tried like this
https://plnkr.co/edit/7AqAHSSPwZyj7cipXMrq?p=preview
.overlay {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
background-color:black;
z-index:9999;
color:white;
}
$(function() {
var counter = 0;
$('#next').click(function() {
if (counter < $('.imageBlock').length-1) {
counter++;
$('.imageBlock').hide();
$('.imageBlock').eq(counter).show();
}
})
$('#pre').click(function() {
if (counter > 0) {
counter--;
$('.imageBlock').hide();
$('.imageBlock').eq(counter).show();
}
})
$('.imageBlock').click(function(){
$('body html').addClass('overlay')
})
})

Here's an example where clicking the image - we take the src, and add it to a hidden div (.overlay img) and then show the div.
clicking the overlay hides it again.
Hope this is helpful
$('.thumb').on('click', function(){
$('.overlay img').attr('src', $(this).attr('src'));
$('.overlay').show();
});
$('.overlay').on('click', function(){
$('.overlay').hide();
});
.thumb {
width: 250px;
}
.overlay {
display: none;
position: absolute;
top:0px;
background: #000;
width: 100%;
height: 100vh;
white-space: nowrap;
text-align: center;
}
.overlay img {
width: 100%;
border:5px solid #000;
vertical-align: middle;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<img class="thumb" src="https://images.unsplash.com/photo-1428094479093-8973a318bd76?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=">
<div class="overlay"><span class="helper"></span><img src=""></div>
Here's a fiddle: https://jsfiddle.net/BradChelly/kbode1cx/

For starters $('body html').addClass('overlay') doesn't work, because that selects an html element inside a body element.. which doesn't exist.
I think you meant to target either class (to make it cross-browser):
$('body,html')
You could toggle the class:
$('body,html').toggleClass('overlay')
Then adjust your css. Probably something like this:
.overlay .imageBlock .small img {
display: none;
}
.overlay .imageBlock .large img {
display: block;
}
BTW, if you only need the .small and .large wrappers with img just for the overlay feature, then you're making things harder than needed...

If you want to use a library, you can use prettyPhoto that does everything you need.
If you don't want to use a library, you can do that in your code (last jQuery event of your JS file) :
$('.imageBlock').click(function(){
$('body').toggleClass('overlay');
$('.imageBlock').eq(counter).find('.large img').toggle();
})

div popup not working

What I am doing wrong?
When you click on class divtop, it should show a div popup in the middle of the page. At that time back page should become not clickable. escape or a button in popup will close it.
<html lang="en" class=" en">
<head>
<title>My Test Popup</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
.divtop
{
width: 800px;
height: 300px;
border:solid;
}
.divbottom
{
top: 400px;
}
.localmenu {
border: 1px solid black;
background: #fff;
margin-left : auto;
top: 50px; width: 300px;
padding-top: 25px;
margin-top: 100px;
height: 150px;
}
.appContent{
width: 800px;
border:solid;
height: 600px;
display: block;
margin-left: auto;
margin-right: auto;
}
.maincontent{
width: 100%;
}
</style>
</head>
<body>
<div class="appContent" >
<div class="maincontent" >
<div class="divtop" >Top</div>
<div class="divtop divbottom" >Bottom</div>
</div>
<div id="popup" style="width : 100%; height: 600px;display: none;">
<div class='localmenu'>
Text in Div Popup<br/>
<button id="btnHide">Close</button><br/>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.divtop').click(function() {
$('#popup').show().css("top", "500px").animate({top: 50}, 200);
$('.mainContent').css("background-color", "grey");
});
$('#btnHide').click(function() {
$('#popup').hide();
});
});
</script>
</body>
</html>

Fiddle
I added some CSS to your #popup and it's now all in the CSS (not inline in the html). Changed also your jQuery animate to 50px, instead of just 50.
I think you have small adjustments to do to the CSS, like in .localmenu I'm not sure why you have both padding-top: 25px; margin-top: 100px;.
CSS
#popup {
position:absolute;
display: none;
float: left;
left:30%;
z-index:1;
}
#popoverlay {
position: fixed;
display:none;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.5;
}
jQuery
$(document).ready(function () {
$('.divtop').click(function () {
$('#popoverlay').show();
$('#popup').show().css("top", "500px").animate({
top: "50px"
}, 200);
$('.mainContent').css("background-color", "grey");
});
$('#btnHide').click(function () {
$('#popup').hide();
$('#popoverlay').hide();
});
});
HTML
<div class="appContent">
<div class="maincontent">
<div class="divtop">Top</div>
<div class="divtop divbottom">Bottom</div>
</div>
<div id="popup">
<div class='localmenu'>Text in Div Popup
<br/>
<button id="btnHide">Close</button>
<br/>
</div>
</div>
</div>

To get it to work properly, even if there is a vertical scroll bar, you have to use position "fixed". Place popup as a direct child of body and make it's position: fixed, and width and height 100%. Place localmenu as a direct child of body as well. Working example at jsbin.
Html:
<div id="popup">
<!--// This is to stop the user from interacting with the content in the back
// and to give a visual clue about that
-->
</div>
<div class='localmenu'>
<div>
Text in Div Popup<br/>
<button id="btnHide">Close</button><br/>
</div>
</div>
<div class="appContent" >
<div class="maincontent" >
<div class="divtop" >Top</div>
<div class="divtop divbottom" >Bottom</div>
</div>
</div>
CSS:
//Use opacity to give a visual clue. Please note that this doesn't work in -all- browsers
#popup {
position: fixed;
width: 100%;
height: 100%;
display: none;
background: black;
opacity: .5;
top: 0;
left: 0;
}
//This is just to be able to center the actual menu
.localmenu {
top: 20%;
left: 0;
width: 100%;
position: fixed;
height: 150px;
display: none;
}
.localmenu > div {
border: 1px solid blue;
background: #fff;
margin-left : auto;
margin-right: auto;
width: 300px;
height: 150px;
}
Javascript: (This is mostly the same, although I removed the animate, because I don't know exactly how it works and it needs to end at 'top: 0'. As localmenu and popup are seperate, we show them seperate as well.)
$(document).ready(function() {
$('.divtop').click(function() {
$('#popup').show().animate(200);
$('.localmenu').show();
//$('.mainContent').css("background-color", "grey");
});
$('#btnHide').click(function() {
$('#popup').hide();
$('.localmenu').hide();
});
});

To block the div tags at the back from being clickable:
Add a div with the following style in your HTML. Im gonna call it overlay.
.overlay {
width: 100%;
height: 100%;
background-color: #000;
left: 0;
opacity: .8;
position: absolute;
top: 0;
z-index: 10000;
display: none;
}
This will essentially cover up your page when shown up.
To center your popup:
I added some extra styles to #popup and removed some from .localmenu. You were missing position: absolute and z-index, added those in. (z-index of popup must be > z-index of overlay)
#popup {
background: #fff;
position :absolute;
left : 40%;
width : 300px;
height: 600px;
height: 150px;
display: none;
z-index: 10001;
}
.localmenu
{
border: 1px solid black;
}
Then, in your JS,
In your animate method, I changed 50px to 30% to center div#popup
Added code to hide and show .overlay along with #popup.
After the changes,
$(document).ready(function () {
$('.divtop').click(function () {
$('#popup').show().css("top", "500px").animate({
top: "30%"
}, 200);
$('.overlay').show();
});
$('#btnHide').click(function () {
$('#popup,.overlay').hide();
});
});
Demo
http://jsbin.com/olasog/1
Code
http://jsbin.com/olasog/1/edit

Try this:
$(document).ready(function() {
$('.divtop').click(function() {
var div = $('.appContent');
$('.localmenu').css({'margin': '200px auto'});
$('#popup').show().css({top: "500px", position: 'absolute', width: div.width(), height: div.height()}).animate({top: 0}, 200);
$('.mainContent').css("background-color", "grey");
});
$('#btnHide').click(function() {
$('.mainContent').css("background-color", "");
$('#popup').hide();
});
});

The best way to do overlay

<div id="main">
<div>TITLE</div>
<div>BODY</div>
<div>COMMENT</div>
<div><textarea></textarea></div>
</div>
<button>overlay</button>
#main {
width: 200px;
height: 200px;
background-color: yellow;
}
live: http://jsfiddle.net/9DLyE/1/
How is the best way to do overlay in jQuery? If i click on button overlay then i would like overlay (same as fancybox) all div#main, for example background-color: blue and transparency 0.5.

Use position:absolute to place the overlay div and use jquery toggle to show it.
CSS
#main {
width: 200px;
height: 200px;
background-color: yellow;
position:relative
}
#overlay{
background:rgba(0, 84, 214, 0.5);
height:100%; width:100%;
position:absolute;
top:0; left:0;
display:none
}
jquery
$('button').click(function(){
$('#overlay').toggle();
});
DEMO

What you have tried..??try to put click event like
$('button').on('click',function(){
//Do your stuff
});
Try this FIDDLE