Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Apr 2011
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Question Div Slides Onto Page As It Loads?

    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 )

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,722
    Thanks
    41
    Thanked 191 Times in 190 Posts
    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

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #3
    New Coder
    Join Date
    Apr 2011
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    P.S: there is a slight bug in Chrome on that Juicenothing link, so use Firefox I guess?

  • #4
    New Coder
    Join Date
    Apr 2011
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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...

  • #5
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,722
    Thanks
    41
    Thanked 191 Times in 190 Posts
    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

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    New Coder
    Join Date
    Apr 2011
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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!

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #9
    New Coder
    Join Date
    Apr 2011
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Real good work vwphillips! I'm impressed! Thanks a million.

  • #10
    New Coder
    Join Date
    Apr 2011
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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!

  • #11
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    explain

    code the Easing
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #12
    New Coder
    Join Date
    Apr 2011
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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 :/

  • #13
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    LegoTrip (09-19-2011)

  • #14
    New Coder
    Join Date
    Apr 2011
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I don't know why it works, but it works! Thanks a million vwphillips, you da man!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •