Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
/*jQuery Wizard css design*/
/*----------------------------------------------------------*/
*{margin:0; padding:0;} /* clear all default CSS */
  
body {font:13px arial,helvetica,clean,sans-serif;}
​
#mainNav li a em, h4 {font-size: 114%} /* =15 */
​
#mainNav{clear:both}
#mainNav li{
    height:71px;
    list-style:none;
    float:left;
    background-color:#EBEBEB;
    background-image: url('http://img693.imageshack.us/img693/2260/navbtn.gif');
    background-repeat: no-repeat;
    background-position: right top;
}
​
#mainNav li.current{
    background-color:#C36615;
    background-image: url('http://img693.imageshack.us/img693/631/navcurrentbtn.gif');
}
​
#mainNav li.lastDone{
    background-color:#7C8437;
    background-image: url('http://img163.imageshack.us/img163/2003/navlastdonebtn.gif');
}
​
#mainNav li.done{
    background-color:#7C8437;
    background-image: url('http://img705.imageshack.us/img705/5984/navdonebtn.gif');
}
​
#mainNav li a, #mainNav li a:link, #mainNav li a:visited, #mainNav li a:hover, #mainNav li a:active {
color:#ccc;
}
​
#mainNav li.lastDone a, #mainNav li.lastDone a:link, #mainNav li.lastDone a:visited, #mainNav li.lastDone a:hover, #mainNav li.lastDone a:active, #mainNav li.current a, #mainNav li.current a:link, #mainNav li.current a:visited, #mainNav li.current a:hover, #mainNav li.current a:active, #mainNav li.done a, #mainNav li.done a:link, #mainNav li.done a:visited, #mainNav li.done a:hover, #mainNav li.done a:active {
color:#fff;
}
​
#mainNav li.done a:hover, #mainNav li.lastDone a:hover  {
color:#FFFF99;
cursor:hand;
}
​
#mainNav li a em{
width:85%;
display:block;
margin:6px 0 0 5px;
font-style:normal;
font-weight:bold;
}
​
#mainNav li a span{
width:90%;
display:block;
margin-left:5px;
font-weight:normal;
}
​
#mainNav li.mainNavNoBg{
background-image:none;
}
​
#mainNav li a{
height:71px;
display:block;
}
​
/* #mainNav.sixStep */
#mainNav.sixStep li{width:151px;}
#mainNav.fourStep li.mainNavNoBg{width:155px;}
#mainNav.sixStep li a{width:151px;}
​
​
/* #mainNav.fiveStep */
#mainNav.fiveStep li{width:182px;}
#mainNav.fiveStep li a{width:182px;}
​
/* #mainNav.fourStep */
#mainNav.fourStep li{width:227px;}
#mainNav.fourStep li.mainNavNoBg{width:229px;}
#mainNav.fourStep li a{width:227px;}
​
/* #mainNav.threeStep */
#mainNav.threeStep li{width:303px;}
#mainNav.threeStep li.mainNavNoBg{width:304px;}
#mainNav.threeStep li a{width:303px;}
​
/* #mainNav.twoStep */
#mainNav.twoStep li{width:455px;}
#mainNav.twoStep li a{width:455px;}
​
#wizard{width:920px;}
​
#wizardContainer{width:920px;}
​
​
​
/* BUTTONS */
.buttons{margin:10px;clear:both}
#next {float:right}
#previous {float:left}
/*----------------------------------------------------------*/
/*End of Wizard css design*/
​
​
/*----------------------------------------------------------*/
/* Form Designer*/
</style>
</head>
<body>
​
<div id="wizard">
   
    <div class="buttons">
      <button type="submit" id="previous"> <img src="http://img163.imageshack.us/img163/6048/arrowleftc.png" alt=""/> Back </button>
      <button type="submit" id="next"> Next <img src="http://img31.imageshack.us/img31/5779/arrowrighti.png" alt="" /> </button>      
    </div>
    <ul id="mainNav" class="sixStep">
      <li><a title=""><em>1: Naziv usluge</em><span>Osnovne informacije o usluzi</span></a></li>
      <li><a title=""><em>2: Now we're </em><span>Do some more cool </span></a></li>
      <li><a title=""><em>3: Fun Fun Fun</em><span>Wow, 3 steps of cool!</span></a></li>
      <li><a title=""><em>4: Almost There!</em><span>This is getting ridiculous</span></a></li>
      <li><a title=""><em>5: Almost There!</em><span>Nemke dodao �esti korak</span></a></li>
      <li class="mainNavNoBg"><a title=""><em>Step 6: The Finale</em> <span>Yeah!</span></a></li>
    </ul>
    <div style="clear:both"></div> 
    <%--<h3>Korak </h3>--%>
   
  </div>
<form id="Form1" >
<div id="wizardContainer">
  <!-- Place markup for wizard content for each step below -->
  <div class="wizardpage" id="step_1">
  Step 1
  <br/>
  <br/>
   <input type="text"/>
  </div>
  
   <div class="wizardpage" id="step_2">
  
  Step 2
   <br/>
  <br/>
   <input type="text"/>
  </div>
  
  <div class="wizardpage" id="step_3">
  
  Step 3
   <br/>
  <br/>
   <input type="text"/>
  
  </div>
  
  <div class="wizardpage" id="step_4">
    Step 4
     <br/>
  <br/>
   <input type="text"/>
    
​
</div>
  
  <div class="wizardpage" id="step_5">
        
​
​
</div>
​
  <div class="wizardpage" id="step_6">
  Six step
   <br/>
  <br/>
   <input type="text"/>
   
    
   
  </div>
</div>
  
  
 
​
​
  </form>
​
</body>
</html>
 
 $(document).ready(function() {
          $("#mainNav").children(":first").addClass("current");
          // Hide all pages save the first.
          $("#wizardContainer").children(".wizardpage").hide();
          $("#wizardContainer").children(".wizardpage:first").addClass("active").show();
          $("#previous").attr("disabled", "disabled");
                   
        
​
          $("#next").click(function() {
​
​
              var activePage = $("#wizardContainer > .active");
              if (!activePage.is(":last-child")) {
                  activePage.hide();
                  nextPage = activePage.next();
                  nextPage.fadeIn();
                  activePage.removeClass("active");
                  nextPage.addClass("active");
              }
​
​
              var currentNavigation = $("#mainNav > .current");
              if (activePage.next().is(":last-child")) {
                  //Button next is disabled for last wizard page
                  $('#next').attr("disabled", "disabled");
                  currentNavigation.next().addClass("current mainNavNoBg");
                  currentNavigation.removeClass("current").addClass("lastDone");
                  currentNavigation.prev().removeClass("lastDone").addClass("done");
              }
              else {
                  $('#next').removeAttr("disabled");
                  $('#previous').removeAttr("disabled");
                  currentNavigation.next().addClass("current");
                  currentNavigation.removeClass("current");
                  currentNavigation.addClass("lastDone");
                  currentNavigation.prev().removeClass("lastDone").addClass("done");
              }
          });
​
​
          $("#previous").click(function() {
​
              var currentNavigation = $("#mainNav > .current");
              currentNavigation.prev().removeClass("lastDone").addClass("current");
              currentNavigation.prev().prev().removeClass("done").addClass("lastDone");
              currentNavigation.removeClass("current mainNavNoBg");
              currentNavigation.attr("class", "");
              //currentNavigation.prev().addClass("done");
              var activePage = $("#wizardContainer > .active");
              if (!activePage.is(":first-child")) {
​
                  activePage.hide();
                  prevPage = activePage.prev();
                  prevPage.fadeIn();
                  activePage.removeClass("active");
                  prevPage.addClass("active");
              }
              if (activePage.prev().is(":first-child")) {
                  $('#previous').attr("disabled", "disabled");
              } else {
                  $('#next').removeAttr("disabled");
                  $('#previous').removeAttr("disabled");
              }
          });
      });
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers