8 Replies - 2036 Views - Last Post: 04 April 2012 - 01:02 PM

#1 UnderTheBridge   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 04-October 07

Positioning Divs Over Each Other To Fade Images In And Out

Posted 28 March 2012 - 09:26 PM

I am attempting to rotate through 5 pictures by fading in and out with opacity. I tried to position 6 divs in the same location on my page. The top and bottom div each contain the same image. Everything is working but I'm not sure the correct way to position the divs. Right now in IE and Chrome the first div appears one pixel below and to the right of the next 5 divs. In Firefox 3.6.25 my first div is in the right place but the other 5 move to the top left of my screen. I've not tested in FF4.

http://daisymaygreet....com/index2.php

<table align="center">
			<tr>
				<td id="mainImagesTD" style="position: relative;>
										<div id="image0" style="width: 100%; position: absolute; left: 0; top: 0;">

						<img style='width:600px; height:400px;' src='mainImages/main4.jpg' alt='Daisy May Greeting Cards 0' />
					</div>
					<div id="image1" style="width: 100%; position: absolute; left: 0; top: 0;">
						<img style='width:600px; height:400px;' src='mainImages/main0.jpg' alt='Daisy May Greeting Cards 1' />
					</div>
					<div id="image2" style="width: 100%; position: absolute; left: 0; top: 0;">
						<img style='width:600px; height:400px;' src='mainImages/main1.jpg' alt='Daisy May Greeting Cards 2' />
					</div>
					<div id="image3" style="width: 100%; position: absolute; left: 0; top: 0;">

						<img style='width:600px; height:400px;' src='mainImages/main2.jpg' alt='Daisy May Greeting Cards 3' />
					</div>
					<div id="image4" style="width: 100%; position: absolute; left: 0; top: 0;">
						<img style='width:600px; height:400px;' src='mainImages/main3.jpg' alt='Daisy May Greeting Cards 4' />
					</div>
					<div id="image5" style="width: 100%; position: absolute; left: 0; top: 0;">
						<img style='width:600px; height:400px;' src='mainImages/main4.jpg' alt='Daisy May Greeting Cards 5' />
					</div>
				</td>

			</tr>
		</table>



function init(){
setTimeout("imageFade(5,100)",2000);
	}


function imageFade(nextObject, curOpacity){
		iObject = document.getElementById("image4");
		switch(nextObject)
		{
		case 1:
		  iObject = document.getElementById("image1");
		  break;
		case 2:
		  iObject = document.getElementById("image2");
		  break;
		case 3:
		  iObject = document.getElementById("image3");
		  break;
		case 4:
		  iObject = document.getElementById("image4");
		  break;
		case 5:
		  iObject = document.getElementById("image5");
		  break;
		}
		
		if(nextObject == 1 && curOpacity == 0){
			iObject2 = document.getElementById("image2");
			iObject3 = document.getElementById("image3");
			iObject4 = document.getElementById("image4");
			iObject5 = document.getElementById("image5");
		
			// IE.
			iObject5.style.filter = 'alpha(opacity=100)';
			iObject4.style.filter = 'alpha(opacity=100)';
			iObject3.style.filter = 'alpha(opacity=100)';
			iObject2.style.filter = 'alpha(opacity=100)';
			iObject.style.filter = 'alpha(opacity=100)';
			// Old mozilla and firefox
			iObject5.style.MozOpacity = 1;
			iObject4.style.MozOpacity = 1;
			iObject3.style.MozOpacity = 1;
			iObject2.style.MozOpacity = 1;
			iObject.style.MozOpacity = 1;
			// Everything else.
			iObject5.style.opacity = 1;
			iObject4.style.opacity = 1;
			iObject3.style.opacity = 1;
			iObject2.style.opacity = 1;
			iObject.style.opacity = 1;
			
			setTimeout("imageFade(5,100)",2000);
		}else{
			curOpacity = curOpacity - 4;
			
			// IE.
			iObject.style.filter = 'alpha(opacity=' + curOpacity + ')';
			// Old mozilla and firefox
			iObject.style.MozOpacity = curOpacity/100;
			// Everything else.
			iObject.style.opacity = curOpacity/100;
			
			if(curOpacity == 0 && nextObject != 1){
				nextObject = nextObject - 1;
				curOpacity = 100;
				setTimeout("imageFade(" + nextObject + "," + curOpacity + ")",2000);
			}else{
				setTimeout("imageFade(" + nextObject + "," + curOpacity + ")",20);
			}
		}
	}



Is This A Good Question/Topic? 0
  • +

Replies To: Positioning Divs Over Each Other To Fade Images In And Out

#2 revolutionx   User is offline

  • D.I.C Head

Reputation: 60
  • View blog
  • Posts: 229
  • Joined: 23-July 09

Re: Positioning Divs Over Each Other To Fade Images In And Out

Posted 29 March 2012 - 01:56 AM

For the top left issue, you need to remove the table, and set indexImagesContainer to position:relative;
Was This Post Helpful? 1
  • +
  • -

#3 Macjohn   User is offline

  • D.I.C Regular
  • member icon

Reputation: 80
  • View blog
  • Posts: 407
  • Joined: 10-April 09

Re: Positioning Divs Over Each Other To Fade Images In And Out

Posted 29 March 2012 - 02:31 AM

Hey,

I took a tour to your website and hope you don't mind me saying this but, the way your doing it(fade in fade out) is taking to much time to load it all, it took me up to 13sec to have it all.
It works and if you're happy with it, its ok for me!

Just trying to help :bigsmile:

This post has been edited by Macjohn: 29 March 2012 - 02:33 AM

Was This Post Helpful? 0
  • +
  • -

#4 UnderTheBridge   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 04-October 07

Re: Positioning Divs Over Each Other To Fade Images In And Out

Posted 29 March 2012 - 07:49 AM

Thanks revolutionx, that seems to have fixed that issue. Looks like Firefox want to order them differently than other browsers but I think I just need to read up on z-index.

And Macjohn, I use settimeout for these and it is super slow in IE and a little to fast for me in Chrome. I will probably end up doing different settimeout calls depending on browser once I have Firefox working.

Thanks guys.
Was This Post Helpful? 0
  • +
  • -

#5 UnderTheBridge   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 04-October 07

Re: Positioning Divs Over Each Other To Fade Images In And Out

Posted 29 March 2012 - 07:04 PM

I guess I should see if you mean it takes you that long to load the images or to flip through them all. The images are quite large so that might be an issue.
Was This Post Helpful? 0
  • +
  • -

#6 Macjohn   User is offline

  • D.I.C Regular
  • member icon

Reputation: 80
  • View blog
  • Posts: 407
  • Joined: 10-April 09

Re: Positioning Divs Over Each Other To Fade Images In And Out

Posted 30 March 2012 - 04:08 AM

I'm using chrome and the 12sec is to load all the images !
You may wanna create or find a gallery that suites your needs...
Was This Post Helpful? 0
  • +
  • -

#7 UnderTheBridge   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 04-October 07

Re: Positioning Divs Over Each Other To Fade Images In And Out

Posted 31 March 2012 - 02:00 PM

I doubt the code is affecting the loading speed of the images. I'm sure it's a combination of large images and cheap server. I'll take a look and see if the images can be shrunk some without losing quality but that's about all I can do about that.
Was This Post Helpful? 0
  • +
  • -

#8 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: Positioning Divs Over Each Other To Fade Images In And Out

Posted 31 March 2012 - 02:23 PM

You may wnat to look into changing the display to none for the images that are not being show at load!
Just an Idea!

Also, Jquery is very useful for this type of animation.

This post has been edited by laytonsdad: 31 March 2012 - 02:28 PM

Was This Post Helpful? 0
  • +
  • -

#9 UnderTheBridge   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 04-October 07

Re: Positioning Divs Over Each Other To Fade Images In And Out

Posted 04 April 2012 - 01:02 PM

Good call on the display none. I haven't bothered to learn any jQuery yet because so much of the stuff made with it are overly flashy and not user friendly. Is there any benefit to using it in this case?

Thanks
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1