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>
<html>
​
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.min.js"></script>
  <script src="script.js"></script>
</head>
​
<body>
  <div id="steps">
    <h3>Write question</h3>
    <section>
      <input type="text" id="question" placeholder="Question goes here">
      <button id="save">Save and do something else</button>
    </section>
​
    <h3>Preview</h3>
    <section>
      <p id="preview"></p>
    </section>
​
    <h3>Done</h3>
    <section>
      <p>Congratulations text goes here</p>
    </section>
  </div>
</body>
​
</html>
 
// Code goes here
​
var buttonEnabled = true;
var globalTimeout = 0;
​
  function disableNext(){
    var nextButton = $(".actions ul li:nth-child(2) a");
    buttonEnabled = $(".actions ul li:nth-child(2)").addClass("disabled").attr("aria-disabled", "true");    
  }
​
  function enableNext(){
    var nextButton = $(".actions ul li:nth-child(2) a");
    buttonEnabled = $(".actions ul li:nth-child(2)").removeClass("disabled").attr("aria-disabled", "false");    
  }
​
function updateButton(){
          var text = $("#question").val();
          if(text === ''){
            disableNext();
            return false;
          }else{
            enableNext();
            return true;
          }  
}
​
function initTimer() {
    if (globalTimeout) clearTimeout(globalTimeout);
    globalTimeout = setTimeout(updateButton, 400);
}
​
$(function(){
    $('#steps').steps({
        headerTag: "h3",
        bodyTag: "section",
        transitionEffect: "slideLeft",
        stepsOrientation: "vertical",
        onStepChanging: updateButton
    });
     $("#question").change(initTimer).keyup(initTimer);
  
    disableNext();
});
​
​
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers