Step by Step example - Automatic show

Settings for this demo:

stepbystep-fullauto.js

  YAHOO.CH.stepByStepConfig = {
    autostart:true,
    autoplay:true,
    delay:1000,
    panelFade:true,
    fadeSpeed:500,
    nextLabel:'next >',
    prevLabel:'< prev',
    endLabel:'close',
    cancelLabel:'close',
    steps:[
      {
        id:'journey',
        orientation:'tl-bl',
        header:'Your checkout Journey',
        body:'At any time of the process you can see where you are and go back if you need to',
        width:'500px',
        time:4000
      },{
        id:'billing',
        orientation:'tl-tr',
        header:'Your billing address',
        body:'Enter your billing address',
        width:'200px',
        time:4000
      },{
        id:'sameAddress',
        orientation:'tl-tr',
        header:'Save yourself time',
        body:'If you don`t need a different delivery address, check this box',
        width:'200px',
        time:4000
      },{
        id:'delivering',
        orientation:'tl-tr',
        header:'Enter your delivery address',
        body:'Make sure to tell us the right country, as the delivery rate is dependent on that',
        width:'300px',
        time:4000
      },{
        id:'buttons',
        orientation:'tl-bl',
        header:'Make your choice',
        body:'You can always go back one step, save your information or go to the next step.',
        width:'500px',
        time:4000
      }
    ]
  };