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.
Related
Why is background image not showing up? I tried almost every method from google but I cannot see anything.
please give me a solution.
:(
Code is below.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="home">
</div>
</body>
</html>
CSS
.home {
display:flex;
width:100vw;
height:100vh;
}
.home::before {
content: '';
display:block;
background:url(https://pixabay.com/photos/workplace-team-business-meeting-1245776/);
position:absolute;
width:100vw;
height:100vh;
top:0;
left:0;
}
Download the image and write into url('...') path to the image OR you need path directly to the image:
https://cdn.pixabay.com/photo/2016/03/09/09/22/workplace-1245776_960_720.jpg
Right click on the image -> View Image
.home::before {
content: '';
display:block;
background:url(".home::before {
content: '';
display:block;
background:url("https://cdn.pixabay.com/photo/2016/03/09/09/22/workplace-1245776_960_720.jpg");
position:absolute;
width:100vw;
height:100vh;
top:0;
left:0;
});
position:absolute;
width:100vw;
height:100vh;
top:0;
left:0;
}
NOTE: Check if the image is useable. Check license before public using it
I think the problem is in your pic because I've tried with another pic, and it works
.home {
display:flex;
width:100vw;
height:100vh;
}
.home::before {
content: '';
display:block;
background:url('https://unsplash.com/photos/O2o1hzDA7iE/download?force=true&w=1920');
position:absolute;
width:100vw;
height:100vh;
top:0;
left:0;
}
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 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.
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>
I'm trying to create a continuous looping animation whereby one div img fades in and then the next fading out the last one this is what I have so far.
JavaScript:
function fadeLoop() {
$(".circle img").each(function(index) {
$(this).delay(1000*index).fadeIn(500);
});
};
$('.circle').delay(2000).fadeIn(2000,function() {
fadeLoop();
});
HTML:
<div class="circle" id="first-circle">
<img src="test.jpg"/>
ART
</div>
<div class="circle" id="second-circle">
<img src="test.jpg"/>
FASHION
</div>
<div class="circle" id="third-circle">
<img src="test.jpg"/>
DECOR
</div>
CSS:
.circle { border-radius:300px; width:300px; border:5px solid #ccc; height:300px;margin:10px; padding:0px; float:left; display:none; position:relative; }
.circle a { position:relative; z-index:999; margin:0 auto; line-height:300px; display:block; width:300px; text-align:center; font-family: sans-serif; font-weight:normal; text-transform:capitalize; color:#fff; font-size:60px; text-decoration:none; }
#first-circle img, #second-circle img, #third-circle img { display:none; }
#first-circle { background:#803131; }
#second-circle { background:#751c20; }
#third-circle { background:#803131; }
#first-circle img { border-radius:300px; width:300px; height:300px; position:absolute; top:0px; left:0px;}
#second-circle img { border-radius:300px; width:300px; height:300px; position:absolute; top:0px; left:0px;}
#third-circle img { border-radius:300px; width:300px; height:300px; position:absolute; top:0px; left:0px;}
Live demo: jsFiddle
I'm sure this can't be that far off all I need to do is fade out the last one and in the next one I have a sequence but need to expand it and make it loop.
This may help you
$(function(){
(function(){
var circles=$('.circle'), i=0;
function shuffle()
{
$(circles[i]).fadeIn(2000, function(){
i=(i < circles.length-1) ? (i+1) : 0;
setTimeout(function(){
$('.circle').fadeOut(2000);
shuffle();
}, 2000);
});
}
shuffle();
})();
});
DEMO.