Results 1 to 6 of 6

Thread: How can I make the slide-in box slide in more smoothly?

  1. #1
    Join Date
    Oct 2012
    Posts
    147
    Thanks
    18
    Thanked 1 Time in 1 Post

    Default How can I make the slide-in box slide in more smoothly?

    If you go to this page: http://qwikad.com/index.php?view=pos...id=263&lang=en you will see that when the box slides in it doesn't really have much "grace" about it (please, note: it slides in once per browser session, so if you want to see it again, you will have to close and open the browser again).

    Here's the js part of the code:

    Code:
    <script type="text/javascript">
    
    /***********************************************
    * Amazon style Drop-in content box-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit DynamicDrive.com for hundreds of DHTML scripts
    * This notice must stay intact for legal use
    * Go to http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    var dropboxleft=200 //set left position of box (in px)
    var dropboxtop=100 //set top position of box (in px)
    var dropspeed=16 //set speed of drop animation (larger=faster)
    
    //Specify display mode. 3 possible values are:
    //1) "always"- This makes the fade-in box load each time the page is displayed
    //2) "oncepersession"- This uses cookies to display the fade-in box only once per browser session
    //3) integer (ie: 5)- Finally, you can specify an integer to display the box randomly via a frequency of 1/integer...
    // For example, 2 would display the box about (1/2) 50% of the time the page loads.
    
    var displaymode="oncepersession"
    
    ///Don't edit beyond here///////////
    
    if (parseInt(displaymode)!=NaN)
    var random_num=Math.floor(Math.random()*displaymode)
    var ie=document.all
    var dom=document.getElementById
    
    function initboxv2(){
    if (!dom&&!ie)
    return
    crossboxcover=(dom)?document.getElementById("box1") : document.all.box1
    crossbox=(dom)?document.getElementById("box2"): document.all.box2
    scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
    crossbox.height=crossbox.offsetHeight
    crossboxcover.style.height=parseInt(crossbox.height)+"px"
    crossbox.style.top=crossbox.height*(-1)+"px"
    crossboxcover.style.left=dropboxleft+"px"
    crossboxcover.style.top=dropboxtop+"px"
    crossboxcover.style.visibility=(dom||ie)? "visible" : "show"
    dropstart=setInterval("dropinv2()",50)
    }
    
    function dropinv2(){
    scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
    if (parseInt(crossbox.style.top)<0){
    crossboxcover.style.top=scroll_top+dropboxtop+"px"
    crossbox.style.top=parseInt(crossbox.style.top)+dropspeed+"px"
    }
    else{
    clearInterval(dropstart)
    crossbox.style.top=0
    }
    }
    
    function okgotit(){
    if (window.dropstart) clearInterval(dropstart)
    crossboxcover.style.visibility="hidden"
    }
    
    function truebody(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    
    function get_cookie(Name) {
    var search = Name + "="
    var returnvalue = ""
    if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search)
    if (offset != -1) {
    offset += search.length
    end = document.cookie.indexOf(";", offset)
    if (end == -1)
    end = document.cookie.length;
    returnvalue=unescape(document.cookie.substring(offset, end))
    }
    }
    return returnvalue;
    }
    
    if (displaymode=="oncepersession" && get_cookie("droppedinv2")=="" || displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0){
    if (window.addEventListener)
    window.addEventListener("load", initboxv2, false)
    else if (window.attachEvent)
    window.attachEvent("onload", initboxv2)
    else if (document.getElementById || document.all)
    window.onload=initboxv2
    if (displaymode=="oncepersession")
    document.cookie="droppedinv2=yes"
    }
    
    </script>
    Is there a generic function that can be added to the code to make the box slide in more smoothly?

  2. #2
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    593
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    what do you mean "more smoothly"?

    faster,or do you want to change the appearance?
    Thanks,

    Bud

  3. #3
    Join Date
    Oct 2012
    Posts
    147
    Thanks
    18
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by ajfmrf View Post
    what do you mean "more smoothly"?

    faster,or do you want to change the appearance?
    I want it to slide in without jerking. It's not quite smooth as of now. It has something to do with animation. But what code can accomplish that?
    Last edited by qwikad.com; 03-11-2013 at 04:17 PM.

  4. #4
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    593
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    Other then changing the speed of the dropin from 15 to 5(lower then 15) I could not change things from as what you got now. I tried the integer -put 2 in instead of the oncepersession like you have it ,but I was not able to a difference
    Thanks,

    Bud

  5. #5
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,775
    Thanks
    2
    Thanked 411 Times in 406 Posts

    Default

    the animation is much smoother when set to always so try a timout on the first load

    Code:
    /***********************************************
    * Amazon style Drop-in content box-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit DynamicDrive.com for hundreds of DHTML scripts
    * This notice must stay intact for legal use
    * Go to http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    var dropboxleft=200 //set left position of box (in px)
    var dropboxtop=100 //set top position of box (in px)
    var dropspeed=16 //set speed of drop animation (larger=faster)
    
    //Specify display mode. 3 possible values are:
    //1) "always"- This makes the fade-in box load each time the page is displayed
    //2) "oncepersession"- This uses cookies to display the fade-in box only once per browser session
    //3) integer (ie: 5)- Finally, you can specify an integer to display the box randomly via a frequency of 1/integer...
    // For example, 2 would display the box about (1/2) 50% of the time the page loads.
    
    var displaymode="always"
    
    ///Don't edit beyond here///////////
    
    if (parseInt(displaymode)!=NaN)
    var random_num=Math.floor(Math.random()*displaymode)
    var ie=document.all
    var dom=document.getElementById
    
    function initboxv2(){
    if (!dom&&!ie)
    return
    crossboxcover=(dom)?document.getElementById("box1") : document.all.box1
    crossbox=(dom)?document.getElementById("box2"): document.all.box2
    scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
    crossbox.height=crossbox.offsetHeight
    crossboxcover.style.height=parseInt(crossbox.height)+"px"
    crossbox.style.top=crossbox.height*(-1)+"px"
    crossboxcover.style.left=dropboxleft+"px"
    crossboxcover.style.top=dropboxtop+"px"
    crossboxcover.style.visibility=(dom||ie)? "visible" : "show"
    dropstart=setInterval("dropinv2()",50)
    }
    
    function dropinv2(){
    scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
    if (parseInt(crossbox.style.top)<0){
    crossboxcover.style.top=scroll_top+dropboxtop+"px"
    crossbox.style.top=parseInt(crossbox.style.top)+dropspeed+"px"
    }
    else{
    clearInterval(dropstart)
    crossbox.style.top=0
    }
    }
    
    function okgotit(){
    if (window.dropstart) clearInterval(dropstart)
    crossboxcover.style.visibility="hidden"
    }
    
    function truebody(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    
    function get_cookie(Name) {
    var search = Name + "="
    var returnvalue = ""
    if (document.cookie.length > 0) {
     offset = document.cookie.indexOf(search)
     if (offset != -1) {
      offset += search.length
      end = document.cookie.indexOf(";", offset)
      if (end == -1)
       end = document.cookie.length;
      returnvalue=unescape(document.cookie.substring(offset, end))
     }
    }
    return returnvalue;
    }
    
    if (displaymode=="oncepersession" && get_cookie("droppedinv2")=="" || displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0){
     if (window.addEventListener)
      window.addEventListener("load", Display, false)
     else if (window.attachEvent)
      window.attachEvent("onload", Display)
     else if (document.getElementById || document.all)
      window.onload=Display
    }
    
    function Display(){
    setTimeout(function(){ if (displaymode=="oncepersession"){ document.cookie="droppedinv2=yes";  } initboxv2(); },2000);
    }
    
    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/

  6. #6
    Join Date
    Oct 2012
    Posts
    147
    Thanks
    18
    Thanked 1 Time in 1 Post

    Default

    No can do, vwphillips, simply because I need it to show it just once per session. Is ANYTHING I can do to add to the animation to make it more smooth at the current speed and load per session???

Similar Threads

  1. How to Make TOC and Slide Link to Same URL
    By ETpro in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 08-11-2012, 05:14 PM
  2. Can you make this auto-slide back?
    By bizzeedub in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-29-2012, 11:52 AM
  3. Make the Dynamic-FX Slide-In Menu (v 6.5) not sliding
    By golgoth in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 10-11-2009, 03:18 PM
  4. Need help to make a flash intro slide
    By pkl1 in forum Looking for such a script or service
    Replies: 1
    Last Post: 12-19-2008, 08:10 PM
  5. How can I make 'AnyLink Drop Down Menu' slide down?
    By doughnutsareforever in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 09-13-2006, 07:19 PM

Bookmarks

Posting Permissions

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