CODEWITHSUNDEEP
jqueryhtmlcss
MYNE
MYNE

Reputation: 333

Showing loading gif over image

I am making a website where by clicking on a next button, the browser requests a new image URL from the server and loads the image using jQuery. I want to show the loading image on top of the old image when the request happened (like Facebook).

HTML

<div1>
    <img id="rel" src="http://localhost/images/original.jpg" height="400" width="500"></img>
    <div2>
        <img id="rel" src="http://localhost/images/loading.jpg" height="40" width="50"></img>
    </div2>
</div1>

CSS

div1
{
    position:relative;
}

div2
{
    position:absolute;
    top:50%;
    left:50%;
}

When I try this in jsFiddle the image does not appear over the other image. I only know basic CSS. Forgive any blunders in the above code.

Upvotes: 0

Views: 2228

Answers (4)

Rob Sedgwick
Rob Sedgwick

Reputation: 5226

markup incorrect

    <div1><img id="rel" src="http://localhost/images/original.jpg" height="400" width="500"/>
    <div2><img id="rel" src="http://localhost/images/loading.jpg" height="40" width="50"/>
    </div2></div1>

should be like

   <div id="div1"><img id="rel1" src="http://localhost/images/original.jpg" height="400" width="500"/>
   <div id="div2"><img id="rel2" src="http://localhost/images/loading.jpg" height="40" width="50"/>
   </div></div>

your css

  <style type="text/css">
   #div1 { position:relative; }
   #div2 { position:absolute; top:50%; left:50%; }
 /* some answers here have some tips on better positioning center */

 </style>

Upvotes: 0

Ali Bassam
Ali Bassam

Reputation: 9969

<div id="parentDiv">
   <img id="rel1" src="http://localhost/images/original.jpg" height="400" width="500" />
   <img id="rel2" src="http://localhost/images/loading.jpg" height="40" width="50" />
</div>

CSS:

#parentDiv
{
   position:relative;
}

#rel2
{
   position:absolute;
   top:50%;
   left:50%;
}

There was some errors with your code:

<img></img> should be <img />

You should not have two same ID rel

You must put both images in the same Parent Div, give it a position:relative; so that the second image is considered absolute to this Parent Div, not to the whole page.

Check this http://jsfiddle.net/Kfxha/

To Position the second image right at the center, you must make some math calculations.

top = ( rel1.height - rel2.height ) / 2 =  ( 400 - 40 ) / 2 = 180px
left = ( rel1.width - rel2.width ) / 2 = ( 500 - 50 ) / 2 = 225px

Upvotes: 0

sandeep
sandeep

Reputation: 92873

Define width & height of the DIV. Write like this:

.div2
{
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-25px;
  margin-top:-20px;
  width:50px;
  height:40px;
}

For example check this http://jsfiddle.net/JYduU/

Upvotes: 3

Saju
Saju

Reputation: 3267

Change your html div1, div2 to 

<div class=div1><img id="rel" src="http://localhost/images/original.jpg" height="400" width="500">      </img>
<div class=div2><img id="rel" src="http://localhost/images/loading.jpg" height="40" width="50"></img>
</div2></div1>

.div1
{
  position:relative;
 }
.div2
{
  position:absolute;
  top:50%;
  left:50%;
}

if you are using id for image tag do not give both same id

Upvotes: 0

Related Questions