I have a number of images on a page. Each image has a CSS spinner that I want to show before each image is loaded. At the moment, I have it where when 'img' loads, the class 'spinner' is removed. This works but isn't what I want, as it removes the class 'spinner' whenever any 'img' is loaded.
Each img has it's own spinner and I want to only remove each 'individual' spinner class as each image loads.
Here is a basic jsfiddle example: http://jsfiddle.net/Forresty/xvx6maty/
Here is the code:
HTML:
<div class="work_items_wrapper">
<a class="work_item_link" href="#">
<div class="spinner"></div>
<img class="workImage" src="http://i151.photobucket.com/albums/s129/Aiki_liann/cosmos.jpg">
</a>
<a class="work_item_link" href="#">
<div class="spinner"></div>
<img class="workImage" src="http://i151.photobucket.com/albums/s129/Aiki_liann/cosmos.jpg">
</a>
<a class="work_item_link_no_margin" href="#">
<div class="spinner"></div>
<img class="workImage" src="http://i151.photobucket.com/albums/s129/Aiki_liann/cosmos.jpg">
</a>
</div>
scss:
.work_items_wrapper{
margin: 2.8em auto;
}
.work_item_link{
position: relative;
width: 32%;
height: auto;
float: left;
margin-right: 2%;
overflow: hidden;
img{
width: 100%;
display: block;
}
}
.work_item_link_no_margin{
position: relative;
width: 32%;
height: auto;
float: left;
overflow: hidden;
img{
width: 100%;
display: block;
}
}
.spinner{
width: 5em;
height: 5em;
background: red;
position: absolute;
}
Javascript:
$('img').on('load', function() {
$("div").removeClass("spinner");
}).each(function() {
if(this.complete) $(this).load();
});
I replaced the first line of javascript with this to test again:
$('img').on('click', function() {
When I clicked only one of the images, all 3 spinner classes were removed.
How can I go about doing it so that when one image loads, that image's individual spinner is removed. Is it a case of looping through the images or something?
Any help would be highly appreciated.
Thanks.
Try the following:
$(this).siblings('div').removeClass("spinner");
This will remove the class for the div which is on the same level and has the same parent as the img in question.
JS Fiddle Demo
Try changing the removeClass line to this:
$(this).prev().removeClass("spinner");
This will get the current selection, this, which is the img which was loaded, and get it's previous sibling, which is the div you want.
You need to use .prev() to find previous div
Use
$('img').on('load', function() {
$(this).prev("div").removeClass("spinner");
});
DEMO
Related
I need to one image overlap an another. But the second image have background color and I need the first image between the second and second's background-color. It is possible? Already tried to made a new "div class" instead of style="background-color". Now i am stuck with this:
.mainRunner {
position: relative;
}
.firstimage {
position: relative;
z-index: 2;
}
.secondimage {
position: relative;
z-index: 3;
top: -75px;
}
.background {
position: relative;
z-index: 1
}
<div class="firstimage" style="max-width: 1170px;"><img src="" alt="" title="" style="width: 100%;" max-width="1168" height="399" caption="false" /></div>
<div class="background" style="background-color: #f2e5df;">
<div class="secondimage">
<img src="" alt="" title="" />
</div></div>
You can't give certain properties of an element different z-index values. However for certain elements like a div you can use ::before and ::after pseudo elements. And you can set a z-index on those, effectively creating three layers. More information here.
In this case you can create a div with the middle img inside. Then add a ::before and ::after to that div. Giving one a background color and a z-index of -1. And the other a background image and a z-index of 1.
In the example below I also added some margin and a border around the inital div so you can better see what is going on.
.image {
margin: 20px 0 0 20px;
position: relative;
border: 3px solid coral;
width: 200px;
height: 300px;
}
.image::before,
.image::after {
content: '';
display: block;
width: 200px;
height: 300px;
position: absolute;
}
.image::before {
z-index: -1;
background: cornflowerblue;
top: 20px;
left: 20px;
}
.image::after {
z-index: 1;
background: url("https://www.fillmurray.com/200/300");
top: -20px;
left: -20px;
}
<div class="image"><img src="https://www.fillmurray.com/200/300" /></div>
If I understand right what you're trying to achieve, you probably should be placing the images within background div and placing the second image with position: absolute:
<style>
.mainRunner {
position: relative;
}
.firstimage {
position: relative;
z-index: 2;
}
.secondimage {
position: absolute;
z-index: 3;
top: 20px; /* use top and left values to place the image exactly where you want it over the first image */
left: 20px
}
.background {
position: relative;
z-index: 1;
background-color: #f2e5df;
}
</style>
<div class="mainRunner">
<div class="background">
<img src="image1.png" class="firstimage" />
<img src="image2.png" class="secondimage " />
</div>
</div>
It sets the background color as the back-most element, then on top of it the secondimage and the firstimage.
Thank everyone for their ideas. In the end the solution was simple. In the style was the double definition of second image. And the first of them was just partly commented. So my first post working right like this:
.secondimage img{
max-width: 100%;
height: auto;
position: relative;
top: -75px;
margin: 5px;
margin-bottom: 10px;
}
Now just need to find out how to close this question...
Thank you :)
The answer is simply no... there is no way to address a z-index to specifically a background of an element, z-index and all the other CSS properties work on the entire element, not on only its background.
You're going to have to find another way to do this, have you thought of using a div with not content, and the same size of the image, and then just setting a background color to that specific div?
I'm trying to make the #header div clickable by wrapping a link element around it, but I cannot do it when it already has another image link inside the div. How would I fix this?
#header {
border: 1px solid red;
background-color: red;
}
img {
width: 50px;
height: 50px;
}
<a href = 'index.php'>
<div id = 'header'>
<a href = 'profile.php?username=$username'>
<img src = 'https://www.iscattered.com/uploads/1590Chocolate_chip_cookies.jpg'>
</a>
</div>
</a>
Now while the image link works just fine, the #wrapper div is not clickable.
#header {
border: 1px solid red;
background-color: red;
position: relative; /* establish nearest positioned ancestor for abs. positioning */
height: 50px;
}
#header a:first-child {
display: block;
height: 100%;
}
#header a:last-child {
position: absolute; /* image now independently clickable */
top: 0; /* position image anywhere you want inside #header */
left: 0;
}
img {
width: 50px;
height: 50px;
}
<div id='header'>
<a href='index.php'></a>
<a href='profile.php?username=$username'>
<img src='https://www.iscattered.com/uploads/1590Chocolate_chip_cookies.jpg'>
</a>
</div>
NOTES:
If you wrap a hyperlink inside another hyperlink, how is the browser supposed to know which link to execute?
Instead, make the #header element entirely clickable, and absolutely position the image.
Now the image can be clicked separately and positioned anywhere inside the #header element.
Well I was trying to display a small logo image over another image (by default on all images) by using CSS but somehow nothing is displaying. Here is the CSS I used
img:after
{
content: '';
display: inline-block;
position: absolute;
width: 48px;
height: 48px;
top: 40px;
left: 40px;
z-index: 1px;
background: url(http://dl.dropbox.com/u/51558405/small.png) no-repeat;
}
The image on which I try to do this are standard 640x360 size. I thought using z index component for the background image might get it in front but no use. Since I wish to do this with all the images by default, I can't afford to use editing html manually so is there a way of doing this without having to edit html and just CSS or scripts?
Psudeo elements do not work on img tags.
See this question/answer: Why don't :before and :after pseudo elements work with `img` elements?
You can't use Psudeo Elements with img tags as evu points out, but you can wrap your image tags in an element and apply the psudeo element to the wrapped element. FIDDLE
<img src="http://placehold.it/250X250"/>
a.image {
position: relative;
display: inline-block;
}
a.image:after {
content: '';
display: inline-block;
position: absolute;
width: 48px;
height: 48px;
top: 40px;
left: 40px;
z-index: 1px;
background: url(http://dl.dropbox.com/u/51558405/small.png) no-repeat;
}
I think what you want is something like this: http://jsfiddle.net/4Z7H3/2/
Trick is to use position relative and absolute in order to create the effect: using a wrapper with position relative, you can absolute position elements over that element.
html:
<div class="wrapper">
<img class="bg-image" src="http://placehold.it/300x200" alt="">
<img class="logo" src="http://placehold.it/100x100" alt="">
</div>
css:
.wrapper { overflow: hidden; position: relative; }
.logo { position: absolute; top: 0; left: 0; border: 1px solid red; }
I'm trying to make animation when opening image kinda like is here: http://arzbhatia.com/ in portfolio section.
This is what I've already done, but it's not working properly.
Here is jFiddle of what I've done: jFiddle
The div is showing in the same place, no matter which image I click. If I remove position:absoulte from #test_div it seem to add div after image, moving rest of them to the bottom.
I did change your fiddle, and created rows. Try it like this:
http://fiddle.jshell.net/MYXcf/4/
You have to put another div named description into all you li.
Like this :
<div id="gallery">
<ul>
<li class="image_item">
<img class="gal_images" src="http://goo.gl/rpys4M">
<div class="description"></div>
</li>
<li class="image_item">
<img class="gal_images" src="http://goo.gl/rpys4M">
<div class="description"></div>
</li>
<li class="image_item">
<img class="gal_images" src="http://goo.gl/rpys4M">
<div class="description"></div>
</li>
<li class="image_item">
<img class="gal_images" src="http://goo.gl/rpys4M">
<div class="description"></div>
</li>
</ul>
</div>
And some css to style this up :
ul {
list-style-type: none;
}
#gallery {
height: 500px;
margin: 0 auto;
width: 500px;
margin-top: 100px;
}
.click_images {
vertical-align: top;
display: block;
position: relative;
}
.gal_images {
height: 220px;
width: 220px;
float: left;
font-size: 40px;
color: #fff;
margin: 5px;
}
.image_item {
width: 220px;
float: left;
}
#test_div {
position: absolute;
top: auto;
height: 200px;
width:100%;
background: #000;
overflow: hidden;
}
.description {
display: none;
}
And the jQuery, will toggle if the description is already opened or not, if its opened, it'll hide, else it'll open.
var opened = false;
$('.image_item').click(function () {
if (!opened) {
opened = true;
$(this).find('.description').slideDown('500').append('hahaha');
} else {
opened = false;
$(this).find('.description').slideUp('500');
}
});
You'll find a fiddle here: http://jsfiddle.net/fm9L4/
The div is in the same place because the images are being floated out of their parent (the LI). This is visible in the Chrome Dev Tools if you hover over the list elements.
The fix is to not float anything and to make the LIs display:inline-block so that they occupy space in the dom. You also need to add some Javascript to increase the height of the LI to accommodate #test_div when it gets added because it's positioning is absolute.
Full code here: http://fiddle.jshell.net/MYXcf/3/
Updated code here: http://fiddle.jshell.net/MYXcf/5/
Solved it! Sorry for putting the solution here, haven't got enough rep to post answer :(
I'm kinda new with JQuery and I've made myself a bit of a challange here. I have a homepage, with tiles as menu and every tile has a title, but when I hover my mouse over each tile, I'd like to hide the title and show an image instead. I was thinking to do it with a css background-image trick, through a JQuery script.
-------- Heavy Editing from here -------
So, I couldn't figure the problem, I went through all the stuff you guys wrote me and then I figured, I'm doing a bad approach. I changed it and voila! It's working!
Here's the html:
<li class="tile darkblue">
<div class="tile-title"><p>Flyers</p></div>
<div class="tile-image hide"><img src="images/flyers.png" alt="" /></div>
</li>
Here's the css:
.tile
{
float: left;
width: 100%;
height: 4.5em;
color: #fff;
padding: 0;
margin: 0;
font-size: 2em;
cursor: pointer;
}
.tile div
{
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
display: table;
}
.tile div p
{
display: table-cell;
vertical-align: middle;
}
.tile img
{
width: 100%;
height: 100%;
}
.tile .hide
{
display: none;
}
and the JQ script:
$(document).ready(function(){
$('.tile').each(function(){
$(this).mouseover(function(){
$('.tile-title', this).css('display', 'none');
$('.tile-image', this).css('display', 'table');
});
$(this).mouseout(function(){
$('.tile-title', this).css('display', 'table');
$('.tile-image', this).css('display', 'none');
});
});
});
Thank you for Your help, I would think the idea through again, without you're help!
It looks to me like you are using the bg variable without defining it.
DrCord is right, you're passing bg as a string containing the link to the image but there's nowhere in the script that defines what bg is
I think you need to replace :
$("tile")
to
$(".tile")
and of course check all syntax of code and using of undefined variables - such as 'bg'