Develop Reference

Can I expand a div to full screen that is nested underneath another div?

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>

responsive position absolute using javascript

I have create a code snippet to demo my problem.
img {
border:1px solid;
}
.bubble1 {
width:50px;
height:50px;
background:pink;
opacity:0.8;
position:absolute;
top:65px;
left:45px;
}
.bubble2 {
width:50px;
height:50px;
background:cyan;
opacity:0.8;
position:absolute;
top:135px;
left:155px;
}
.bubble3 {
width:50px;
height:50px;
background:orange;
opacity:0.8;
position:absolute;
top:190px;
left:68px;
}
.bubble4 {
width:50px;
height:50px;
background:red;
opacity:0.8;
position:absolute;
top:220px;
left:213px;
}
<img src="http://i.imgur.com/62GOyK9.png" />
<div class="bubble1"></div>
<div class="bubble2"></div>
<div class="bubble3"></div>
<div class="bubble4"></div>
There are 4 boxes I want to map the positions on a background, and I did it using position absolute.
But the problem is it can't be responsive. On larger / smaller screen, the image stretched and the mapping became off target. How to solve my issue using javascript?

Do you really need a javascript solution for this?
Why cant you use percentage in CSS position styles?
img {
border:1px solid;
}
.bubble1 {
width:50px;
height:50px;
background:pink;
opacity:0.8;
position:absolute;
top:15%;
left:10%;
}
.bubble2 {
width:50px;
height:50px;
background:cyan;
opacity:0.8;
position:absolute;
top: 30%;
right:30%;
}
.bubble3 {
width:50px;
height:50px;
background:orange;
opacity:0.8;
position:absolute;
bottom: 30%;
left:30%;
}
.bubble4 {
width:50px;
height:50px;
background:red;
opacity:0.8;
position:absolute;
bottom: 20%;
right:10%;
}
<div class="bubble1"></div>
<div class="bubble2"></div>
<div class="bubble3"></div>
<div class="bubble4"></div>

$(function (){
var init_width = $(window).width();
var all_div = $('div');
var init_left = function (){
var result = [];
all_div.each(function (i){
var left = parseInt($(all_div[i]).css('left'));
result.push(left);
});
return result;
}();
$(window).resize(function (){
var width = $(window).width();
all_div.each(function (i){
var now_left = init_left[i]/init_width * width;
$(all_div[i]).css('left',now_left);
});
});
});
img {
border:1px solid;
}
.bubble1 {
width:50px;
height:50px;
background:pink;
opacity:0.8;
position:absolute;
top:65px;
left:45px;
}
.bubble2 {
width:50px;
height:50px;
background:cyan;
opacity:0.8;
position:absolute;
top:135px;
left:155px;
}
.bubble3 {
width:50px;
height:50px;
background:orange;
opacity:0.8;
position:absolute;
top:190px;
left:68px;
}
.bubble4 {
width:50px;
height:50px;
background:red;
opacity:0.8;
position:absolute;
top:220px;
left:213px;
}
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<div class="bubble1"></div>
<div class="bubble2"></div>
<div class="bubble3"></div>
<div class="bubble4"></div>
I make a draft DEMO to achieve the responsive layout. The key mind is:
when the DOM ready you could get a set of numbers of these div's leftand then you must handle these data to percent for responsive
you should recalculate the window width when resize.
actually, when you work out the first key mind, you will make it. the** resize ** just make the DEMO have more adapted.

Showing a Wait Message When Submitting Long Javascript Requests

I would like to show an animated gif after a form button is clicked.
UPDATE: I found a solution here: http://www.corelangs.com/css/box/fulloverlay.html
I combined that with an animated gif (instead of the login form) to get the effect I wanted.
I used the .show() method in my script like this:
$(document).ready(function () {
$("#my_submit").click(function(e) {
console.log("please wait...");
$( "#processing_gif" ).show();
$( "#cover" ).show();
In my form I used these divs:
<div id="processing_gif"></div>
<div id="cover"></div>
And I used this CSS:
#processing_gif {
position:fixed;
top:0;
left:0;
z-index:999;
width:100%;
height:100%;
opacity:0.8;
background: url('/files/animation_processing.gif') center center no-repeat;
display:none;
}
#cover{
position:fixed;
top:0; left:0;
background:rgba(256,256,256,0.9);
z-index:1;
width:100%;
height:100%;
display:none;
}
Here is the full original tutorial:
<!DOCTYPE html> <html > <head> <style type="text/css"> .button { width: 150px; padding: 10px; background-color: #FF8C00; box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2); font-weight:bold; text-decoration:none; } #cover{ position:fixed; top:0; left:0; background:rgba(0,0,0,0.6); z-index:5; width:100%; height:100%; display:none; } #loginScreen { height:380px; width:340px; margin:0 auto; position:relative; z-index:10; display:none; background: url(login.png) no-repeat; border:5px solid #cccccc; border-radius:10px; } #loginScreen:target, #loginScreen:target + #cover{ display:block; opacity:2; } .cancel { display:block; position:absolute; top:3px; right:2px; background:rgb(245,245,245); color:black; height:30px; width:35px; font-size:30px; text-decoration:none; text-align:center; font-weight:bold; } </style> </head> <body> <div align="center"> <br><br><br><br> Click here to Log In </div> <div id="loginScreen"> × </div> <div id="cover" > </div> </body> </html>

You can just add $("my_image_selector").show() before $.ajax(params) and hide it when "success" or "error" occurs by adding there $("my_image_selector").hide()
Or you can use .ajaxStart and .ajaxStop. see jquery docs

ah jquery - sigh.
You're going to have to tweak this to get the styling/presentation you want, but I'm going to point you in the general direction using plain old JavaScript.
Add an image tag with the gif you want to use on the page where you want it
< img src='loading.gif'/>
Add an id and "display:none" to the image style to hide it
<img id='loadingImg' style='display:none;' src='loading.gif'/>
get rid of the onclick handler in your submit button tag and instead put code like this below your form
<script>
//listen for click on your button
document.getElementById('add-all-to-cart').addEventListener('click',
function(event){
//this is the code that runs when the button is clicked
//get the button we clicked on
var target=event.target||event.srcTarget;
//set that button to disabled
target.disabled=true;
//display the loading image
document.getElementById('loadingImg').style.display='block';
}
</script>

overlaying image on another image using javascript

the following code i have tried in fiddle but when i actually get it on my desktop it seems not even working.
the images are tried to be overlayed on main image using javascript.
i guess i am going somewhere wrong in referencing.
a little help will be appreciated.
code:
<html>
<head>
<style>
div {
position:absolute;
}
#main {
width:256px;
height:256px;
}
#overlay {
position:absolute;
height:100px;
width:100px;
top:0;
left:0;
display:none;
}
.overly {
position:absolute;
height:100px;
width:100px;
bottom:0;
right:0;
display:none;
}
</style>
<script>
$(document).ready(function() {
$("#main").mouseenter(function() {
$("#overlay").show();
});
$("#main").mouseleave(function() {
$("#overlay").hide();
});
});
$(document).ready(function() {
$("#main").mouseenter(function() {
$("#overly").show();
});
$("#main").mouseleave(function() {
$("#overly").hide();
});
});
</script>
</head>
<body style="margin:0px; padding-top:0px">
<div>
<a href="">
<img id="main" src="image/productold.JPG" />
<img id="overlay" src="image/over1.jpg"/>
<img class="overly" src="image/over2.jpg"/>
</a>
</div>
</body>
</html>

Try adding z-index properties to the styling of the two divs. That should allow you to put one on top of the other. For example:
#main {
width:256px;
height:256px;
z-index: 0;
}
#overlay {
position:absolute;
height:100px;
width:100px;
top:0;
left:0;
display:none;
z-index: 1;
}
.overly {
position:absolute;
height:100px;
width:100px;
bottom:0;
right:0;
display:none;
z-index: 2;
}
For more information on this property, see the W3Schools page on the Z-Index property here.

Javascript and CSS Dynamic-Width Float Glitch When Resizing

I've got a snippet of code working fairly well thus far, but there's a small glitch that needs to be worked out.
The goal is to have two items next to each other where one is a fixed width and the other fills the remaining available width within a given container.
The fluid item is resizing appropriately, however there's a little hiccup every so often as the browser/container is resized.
See: http://jsfiddle.net/tedgrafx/kTeCC/
The two items are floating, but as you resize the width, at certain widths they don't float, and appear vertically stacked - pushing one below the other.
What can be done to remedy this little glitch so it appears seamless during resizing?
Any/all help would be appreciated.
HTML:
<div class="panel">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
CSS:
html, body{
margin:0;
padding:0;
}
.panel {
float:left;
width:100%;
margin:0;
padding:0;
}
.left {
float:left;
width:50px;
height:10px;
margin:0;
background:red;
}
.right {
float:right;
width:100%;
height:10px;
margin:0;
background:blue;
}
Javascript:
// Resize Top-Right Panel section on the Entity Panels.
$(document).ready(function () {
resizeRight();
$(window).resize(function () {
resizeRight();
});
});
function resizeRight() {
// Subtract the width of the TopLeft section from the width of the entityPanel div:
var right_width = $('.panel').width() - ($('.left').width());
// Set the width of the TopRight to an even number:
if (right_width % 2 == 0) { // Using the modulus operator to determine if 'mid_width' even number.
right_width = right_width + 1; // Now we set 'mid_width' to an odd number.
// Set the width of the TopRight section:
$('.right').css({ 'width': right_width });
}
}

You don't need the javascript really, you can lose the float on #right.
Unless I misunderstood what you wanted.
http://jsfiddle.net/kTeCC/7/
html, body{
margin:0;
padding:0;
}
#main {
width:100%;
margin:0;
padding:0;
}
#left {
float:left;
width:30px;
height:20px;
margin:0;
background:red;
}
#right {
height:30px;
margin:0;
padding-left: 5px;
background:blue;
}
br {
clear: both;
}

http://jsfiddle.net/kTeCC/16/
simple solution that only use position,top, left, right
html, body{
margin:0;
padding:0;
}
#main {
position:relative;
width:100%;
margin:0;
padding:0;
}
#left {
position: absolute;
left:0;
top:0;
width:30px;
height:30px;
margin:0;
background:red;
color:#fff;
}
#right {
position:absolute;
left:30px;
right:0;
top:0;
height:30px;
margin:0;
background:blue;
color:#fff;
}

Just as an addendum to what OneOfOne suggested; to have #left and #right not overlap (while not floating #right) you can add padding-left to #main and position #left with a negative margin-left: http://jsfiddle.net/rasmusfl0e/33pVN/
html, body{
margin:0;
padding:0;
}
#main {
padding-left: 30px;
background-color: pink;
}
#main:after {
clear: both;
content: " ";
display: table;
}
#left {
float: left;
margin-left: -30px;
width: 30px;
background: red;
}
#right {
background: blue;
}
And BTW - floating blocks will stack on top of eachother if their combined width is bigger than their container; the modulus thing you're doing to get even pixel widths on #right is your culprit.