Div Slides Onto Page As It Loads?

LegoTrip · 09-14-2011, 03:11 PM

Hey guys, hope this is in the right place...

Basically I was wondering if anyone could point me in the right direction or to an example of where a div slides onto the screen as soon as a page loads.

My client wants something like this: http://www.nytimes.com/packages/html...ion/index.html (without parallax or the fade-in) but I refuse to do it in Flash, obviously.

I have this gallery here: http://juicenothing.com/freelance/gallery.php
The div id is wrap.

Is this possible? I can't find a good example anywhere!!

Thanks
(i'm a bit of a n00b, so pls go easy on me

)

alykins · 09-14-2011, 03:29 PM

I am by no means a javascript expert but from that example site I think you could acheive the same thing with a carousel (or slideshow) and have it index on some other image/div/whatever other than 1... then have it transition all the back to one (automatically) with a time function and then just disable auto incrementing of the slideshow

LegoTrip · 09-14-2011, 03:34 PM

P.S: there is a slight bug in Chrome on that Juicenothing link, so use Firefox I guess?

LegoTrip · 09-14-2011, 03:35 PM

That sounds really good alykins, thanks. Not entirely sure how to do that tho, so any tips people could give would be perfect! Especially how to do it as the page loads...

alykins · 09-14-2011, 03:58 PM

here are some prebuilt ones. Then you will need to change somewhere the selected index to be something other than one... then depending on the slider you pick it might be as simple as adding
*not correct terminology; just concept (I'd have to look up how to do it all correctly)

Code:

<script type="text/javascript">
onLoad{
carousel(1)
}
</script>

this would be if the function is called "carousel" and also provided it took only one argument (the argument being the index)... the simple script would vary pending which pre-built you choose, but it should come with a transition animation already

vwphillips · 09-14-2011, 04:42 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
#slide {
  position:absolute;left:-900px;top:100px;width:800px;height:200px;background-Color:red;
}

/*]]>*/
</style><script type="text/javascript">
/*<![CDATA[*/

function Slide(o){
 var obj=document.getElementById(o.ID),to=o.Finish,to=typeof(to)=='number'?to:0,ms=o.Duration,ms=typeof(ms)=='number'?ms:1000;
 if (obj){
  this.animate(obj,obj.offsetLeft,to,new Date(),ms);
 }
}

Slide.prototype.animate=function(obj,f,t,srt,mS){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   obj.style.left=now+'px';
  }
  if (ms<mS){
   this.dly=setTimeout(function(){ oop.animate(obj,f,t,srt,mS); },10);
  }
  else {
   obj.style.left=t+'px';  }
 }

/*]]>*/
</script>

<script type="text/javascript">
/*<![CDATA[*/

function Init(){
 new Slide({
  ID:'slide',
  Finish:100,
  Duration:1000
 });

}

if (window.addEventListener){
 window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
 window.attachEvent('onload',Init);
}

/*]]>*/
</script>

</head>

<body>
<div id="slide" ></div>
</body>

</html>

LegoTrip · 09-14-2011, 08:37 PM

vwphillips - That works really well. The only issue is that it seems to bring up the bottom scroll bar, and also seems to interfere with the gallery menu:
http://juicenothing.com/freelance/gallery.php

alykins - looking into your suggestion right now, will report back

Thanks guys, definitely getting somewhere!

vwphillips · 09-15-2011, 04:06 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

#wrap {
  position:relative;overflow:hidden;left:100px;top:10px;width:80%;height:530px;border:solid red 1px;
}

.wrap {
  position:absolute;left:-5800px;top:10px;width:10000px;height:500px;border:solid red 0px;
}

.wrap IMG {
  position:relative;left:0px;top:0px;float:left;margin-Left:20px;
}

/*]]>*/
</style>

</style><script type="text/javascript">
/*<![CDATA[*/

function Slide(o){
 var obj=document.getElementById(o.ID),slider=obj.getElementsByTagName('DIV')[0],imgs=slider.getElementsByTagName('IMG'),ms=o.Duration,ms=typeof(ms)=='number'?ms:1000,tobj=document.getElementById(o.ThumbsID),timgs=tobj.getElementsByTagName('IMG'),z0=0;;
 this.obj=obj;
 this.slider=slider;
 this.imgs=imgs;
 this.ms=ms;
 this.slide(0);
 for (;z0<timgs.length;z0++){
  if (imgs[z0]){
   this.addevt(timgs[z0],'mouseup','slide',z0);
  }
 }
}

Slide.prototype={

 slide:function(nu){
  var img=this.imgs[nu],slider=this.slider;
  this.animate(slider,slider.offsetLeft,-img.offsetLeft+(this.obj.offsetWidth-img.width)/2,new Date(),this.ms);
 },

 animate:function(obj,f,t,srt,mS){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   obj.style.left=now+'px';
  }
  if (ms<mS){
   this.dly=setTimeout(function(){ oop.animate(obj,f,t,srt,mS); },10);
  }
  else {
   obj.style.left=t+'px';  }
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); });
 }

}
/*]]>*/
</script>

<script type="text/javascript">
/*<![CDATA[*/

function Init(){
 new Slide({
  ID:'wrap',
  ThumbsID:'thumbs',
  Duration:1000
 });

}

if (window.addEventListener){
 window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
 window.attachEvent('onload',Init);
}

/*]]>*/
</script>


</head>

<body>
 <div id="wrap">

 <div class="wrap">

      <img src="http://juicenothing.com/freelance/WeAreLucky/images/carouselimages/carouselimage01.jpg" alt="" />
      <img src="http://juicenothing.com/freelance/WeAreLucky/images/carouselimages/carouselimage02.jpg" alt="" />
      <img src="http://juicenothing.com/freelance/WeAreLucky/images/carouselimages/carouselimage03.jpg" alt="" />
      <img src="http://juicenothing.com/freelance/WeAreLucky/images/carouselimages/carouselimage04.jpg" alt="" />
      <img src="http://juicenothing.com/freelance/WeAreLucky/images/carouselimages/carouselimage01.jpg" alt="" />
      <img src="http://juicenothing.com/freelance/WeAreLucky/images/carouselimages/carouselimage02.jpg" alt="" />
      <img src="http://juicenothing.com/freelance/WeAreLucky/images/carouselimages/carouselimage03.jpg" alt="" />
      <img src="http://juicenothing.com/freelance/WeAreLucky/images/carouselimages/carouselimage04.jpg" alt="" />

  </div>


 </div>

 <div id="thumbs" class="" style="margin-top:50px">
      <img src="http://juicenothing.com/freelance/WeAreLucky/images/carouselimages/thumbs/carouselimage02_thumb.jpg" alt="2" />
      <img src="http://juicenothing.com/freelance/WeAreLucky/images/carouselimages/thumbs/carouselimage03_thumb.jpg" alt="3" />
      <img src="http://juicenothing.com/freelance/WeAreLucky/images/carouselimages/thumbs/carouselimage04_thumb.jpg" alt="9" />
      <img src="http://juicenothing.com/freelance/WeAreLucky/images/carouselimages/thumbs/carouselimage05_thumb.jpg" alt="5" />
      <img src="http://juicenothing.com/freelance/WeAreLucky/images/carouselimages/thumbs/carouselimage02_thumb.jpg" alt="7" />
      <img src="http://juicenothing.com/freelance/WeAreLucky/images/carouselimages/thumbs/carouselimage03_thumb.jpg" alt="8" />
      <img src="http://juicenothing.com/freelance/WeAreLucky/images/carouselimages/thumbs/carouselimage04_thumb.jpg" alt="5" />
      <img src="http://juicenothing.com/freelance/WeAreLucky/images/carouselimages/thumbs/carouselimage05_thumb.jpg" alt="10" />
    </div>
 </div>

</body>

</html>

LegoTrip · 09-16-2011, 01:11 PM

Real good work vwphillips! I'm impressed! Thanks a million.

LegoTrip · 09-18-2011, 11:19 PM

Sorry to bring this up again, but I feel I am soooo close except for one small detail. I can't say I fully understand the code vwphillips posted, so I am not sure what is the best place to code the Easing? I tried every place I could imagine it to go, but nothing worked!

http://juicenothing.com/freelance/WeAreLucky/

Thanks guys! Sorry I suck so bad!

vwphillips · 09-19-2011, 08:47 AM

explain

Quote:

code the Easing

LegoTrip · 09-19-2011, 11:55 AM

Basically I was hoping the DIV (#wrap) would slide onto the page with some easing, but I'm not sure where exactly to set that?

I know this should be simple, but I am still very much a beginner :/

vwphillips · 09-19-2011, 12:24 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

#wrap {
  position:relative;overflow:hidden;left:100px;top:10px;width:80%;height:530px;border:solid red 1px;
}

.wrap {
  position:absolute;left:-5800px;top:10px;width:10000px;height:500px;border:solid red 0px;
}

.wrap IMG {
  position:relative;left:0px;top:0px;float:left;margin-Left:20px;
}

/*]]>*/
</style>

</style>

<script type="text/javascript">
/*<![CDATA[*/

function Slide(o){
 var obj=document.getElementById(o.ID),slider=obj.getElementsByTagName('DIV')[0],imgs=slider.getElementsByTagName('IMG'),ms=o.Duration,ms=typeof(ms)=='number'?ms:1000,tobj=document.getElementById(o.ThumbsID),timgs=tobj.getElementsByTagName('IMG'),z0=0;;
 this.obj=obj;
 this.slider=slider;
 this.imgs=imgs;
 this.ms=ms;
 this.slide(0);
 for (;z0<timgs.length;z0++){
  if (imgs[z0]){
   this.addevt(timgs[z0],'mouseup','slide',z0);
  }
 }
}

Slide.prototype={

 slide:function(nu){
  var img=this.imgs[nu],slider=this.slider;
  this.animate(slider,slider.offsetLeft,-img.offsetLeft+(this.obj.offsetWidth-img.width)/2,new Date(),this.ms);
 },

 animate:function(obj,f,t,srt,mS){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)*Math.sin(Math.PI/(2*mS)*ms)+f;
  if (isFinite(now)){
   obj.style.left=now+'px';
  }
  if (ms<mS){
   this.dly=setTimeout(function(){ oop.animate(obj,f,t,srt,mS); },10);
  }
  else {
   obj.style.left=t+'px';  }
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); });
 }

}
/*]]>*/
</script>

<script type="text/javascript">
/*<![CDATA[*/

function Init(){
 new Slide({
  ID:'wrap',
  ThumbsID:'thumbs',
  Duration:1000
 });

}

if (window.addEventListener){
 window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
 window.attachEvent('onload',Init);
}

/*]]>*/
</script>


</head>

<body>
 <div id="wrap">

 <div class="wrap">

      <img src="http://juicenothing.com/freelance/WeAreLucky/images/carouselimages/carouselimage01.jpg" alt="" />
      <img src="http://juicenothing.com/freelance/WeAreLucky/images/carouselimages/carouselimage02.jpg" alt="" />
      <img src="http://juicenothing.com/freelance/WeAreLucky/images/carouselimages/carouselimage03.jpg" alt="" />
      <img src="http://juicenothing.com/freelance/WeAreLucky/images/carouselimages/carouselimage04.jpg" alt="" />
      <img src="http://juicenothing.com/freelance/WeAreLucky/images/carouselimages/carouselimage01.jpg" alt="" />
      <img src="http://juicenothing.com/freelance/WeAreLucky/images/carouselimages/carouselimage02.jpg" alt="" />
      <img src="http://juicenothing.com/freelance/WeAreLucky/images/carouselimages/carouselimage03.jpg" alt="" />
      <img src="http://juicenothing.com/freelance/WeAreLucky/images/carouselimages/carouselimage04.jpg" alt="" />

  </div>


 </div>

 <div id="thumbs" class="" style="margin-top:50px">
      <img src="http://juicenothing.com/freelance/WeAreLucky/images/carouselimages/thumbs/carouselimage02_thumb.jpg" alt="2" />
      <img src="http://juicenothing.com/freelance/WeAreLucky/images/carouselimages/thumbs/carouselimage03_thumb.jpg" alt="3" />
      <img src="http://juicenothing.com/freelance/WeAreLucky/images/carouselimages/thumbs/carouselimage04_thumb.jpg" alt="9" />
      <img src="http://juicenothing.com/freelance/WeAreLucky/images/carouselimages/thumbs/carouselimage05_thumb.jpg" alt="5" />
      <img src="http://juicenothing.com/freelance/WeAreLucky/images/carouselimages/thumbs/carouselimage02_thumb.jpg" alt="7" />
      <img src="http://juicenothing.com/freelance/WeAreLucky/images/carouselimages/thumbs/carouselimage03_thumb.jpg" alt="8" />
      <img src="http://juicenothing.com/freelance/WeAreLucky/images/carouselimages/thumbs/carouselimage04_thumb.jpg" alt="5" />
      <img src="http://juicenothing.com/freelance/WeAreLucky/images/carouselimages/thumbs/carouselimage05_thumb.jpg" alt="10" />
    </div>
 </div>

</body>

</html>

LegoTrip · 09-19-2011, 01:13 PM

I don't know why it works, but it works! Thanks a million vwphillips, you da man!