title: jquery steps : where to put this code
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php
  function htm_admin_header()
  {
   global $language_adm;
   
  ?&gt;
  
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" lang="fr-FR"&gt;
  
  &lt;head&gt;
  
  
    &lt;script src="assets/js/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
    &lt;script src="assets/js/jquery.steps.js"&gt;&lt;/script&gt;
    &lt;script src="assets/js/jquery.js"&gt;&lt;/script&gt;
    &lt;script&gt; $(document).ready(function() {
         var form = $("#example-advanced-form").show();
   
  form.steps({
      headerTag: "h3",
      bodyTag: "fieldset",
      transitionEffect: "slideLeft",
      onStepChanging: function (event, currentIndex, newIndex)
      {
          // Allways allow previous action even if the current form is not valid!
          if (currentIndex &gt; newIndex)
          {
              return true;
          }
          // Forbid next action on "Warning" step if the user is to young
          if (newIndex === 3 &amp;&amp; Number($("#age-2").val()) &lt; 18)
          {
              return false;
          }
          // Needed in some cases if the user went back (clean up)
          if (currentIndex &lt; newIndex)
          {
              // To remove error styles
              form.find(".body:eq(" + newIndex + ") label.error").remove();
              form.find(".body:eq(" + newIndex + ") .error").removeClass("error");
          }
          form.validate().settings.ignore = ":disabled,:hidden";
          return form.valid();
      },
      onStepChanged: function (event, currentIndex, priorIndex)
      {
          // Used to skip the "Warning" step if the user is old enough.
          if (currentIndex === 2 &amp;&amp; Number($("#age-2").val()) &gt;= 18)
          {
              form.steps("next");
          }
          // Used to skip the "Warning" step if the user is old enough and wants to the previous step.
          if (currentIndex === 2 &amp;&amp; priorIndex === 3)
          {
              form.steps("previous");
          }
      },
      onFinishing: function (event, currentIndex)
      {
          form.validate().settings.ignore = ":disabled";
          return form.valid();
      },
      onFinished: function (event, currentIndex)
      {
          alert("Submitted!");
      }
  }).validate({
      errorPlacement: function errorPlacement(error, element) { element.before(error); },
      rules: {
          confirm: {
              equalTo: "#password-2"
          }
      }
  });
      });&lt;/script&gt;
    
  
    
    
  &lt;link href="style/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      
  
                      &lt;/li&gt;
                       &lt;li&gt;
                          &lt;a  href="#"&gt; &lt;strong&gt; 
                          &lt;?php if (isset($_SESSION['login'])) {
  
                              echo $_SESSION['login'];
                          }
                           elseif (isset($_COOKIE['login'])) {
                              echo $_COOKIE['login'];
                          }
  
  
                           ?&gt; &lt;/strong&gt;&lt;/a&gt;
                      &lt;/li&gt;
  
                      &lt;li&gt;
                          &lt;a class="active-menu"  href="index.html"&gt;&lt;i class="fa fa-dashboard "&gt;&lt;/i&gt;Dashboard&lt;/a&gt;
                      &lt;/li&gt;
                      
  &lt;?php</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm discovering this plugin, but I don't know how to the integrate on my page. where I have to put the javascript code and below and how ? I have to put in the same file as the HTML or I have to put it in the jquery-steps.js file.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var form = $("#example-advanced-form").show();
   
  form.steps({
      headerTag: "h3",
      bodyTag: "fieldset",
      transitionEffect: "slideLeft",
      onStepChanging: function (event, currentIndex, newIndex)
      {
          // Allways allow previous action even if the current form is not valid!
          if (currentIndex &gt; newIndex)
          {
              return true;
          }
          // Forbid next action on "Warning" step if the user is to young
          if (newIndex === 3 &amp;&amp; Number($("#age-2").val()) &lt; 18)
          {
              return false;
          }
          // Needed in some cases if the user went back (clean up)
          if (currentIndex &lt; newIndex)
          {
              // To remove error styles
              form.find(".body:eq(" + newIndex + ") label.error").remove();
              form.find(".body:eq(" + newIndex + ") .error").removeClass("error");
          }
          form.validate().settings.ignore = ":disabled,:hidden";
          return form.valid();
      },
      onStepChanged: function (event, currentIndex, priorIndex)
      {
          // Used to skip the "Warning" step if the user is old enough.
          if (currentIndex === 2 &amp;&amp; Number($("#age-2").val()) &gt;= 18)
          {
              form.steps("next");
          }
          // Used to skip the "Warning" step if the user is old enough and wants to the previous step.
          if (currentIndex === 2 &amp;&amp; priorIndex === 3)
          {
              form.steps("previous");
          }
      },
      onFinishing: function (event, currentIndex)
      {
          form.validate().settings.ignore = ":disabled";
          return form.valid();
      },
      onFinished: function (event, currentIndex)
      {
          alert("Submitted!");
      }
  }).validate({
      errorPlacement: function errorPlacement(error, element) { element.before(error); },
      rules: {
          confirm: {
              equalTo: "#password-2"
          }
      }
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>HTML file</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>function htm_ajout_livraison(){
   ?&gt;  
  
          
   &lt;div id="page-wrapper" class="page-wrapper-cls"&gt;
      &lt;div id="page-inner"&gt;
   
   &lt;form id="example-advanced-form" action="#"&gt;
      &lt;h3&gt;Account&lt;/h3&gt;
      &lt;fieldset&gt;
          &lt;legend&gt;Account Information&lt;/legend&gt;
   
          &lt;label for="userName-2"&gt;User name *&lt;/label&gt;
          &lt;input id="userName-2" name="userName" type="text" class="required"&gt;
          &lt;label for="password-2"&gt;Password *&lt;/label&gt;
          &lt;input id="password-2" name="password" type="text" class="required"&gt;
          &lt;label for="confirm-2"&gt;Confirm Password *&lt;/label&gt;
          &lt;input id="confirm-2" name="confirm" type="text" class="required"&gt;
          &lt;p&gt;(*) Mandatory&lt;/p&gt;
      &lt;/fieldset&gt;
   
      &lt;h3&gt;Profile&lt;/h3&gt;
      &lt;fieldset&gt;
          &lt;legend&gt;Profile Information&lt;/legend&gt;
   
          &lt;label for="name-2"&gt;First name *&lt;/label&gt;
          &lt;input id="name-2" name="name" type="text" class="required"&gt;
          &lt;label for="surname-2"&gt;Last name *&lt;/label&gt;
          &lt;input id="surname-2" name="surname" type="text" class="required"&gt;
          &lt;label for="email-2"&gt;Email *&lt;/label&gt;
          &lt;input id="email-2" name="email" type="text" class="required email"&gt;
          &lt;label for="address-2"&gt;Address&lt;/label&gt;
          &lt;input id="address-2" name="address" type="text"&gt;
          &lt;label for="age-2"&gt;Age (The warning step will show up if age is less than 18) *&lt;/label&gt;
          &lt;input id="age-2" name="age" type="text" class="required number"&gt;
          &lt;p&gt;(*) Mandatory&lt;/p&gt;
      &lt;/fieldset&gt;
   
      &lt;h3&gt;Warning&lt;/h3&gt;
      &lt;fieldset&gt;
          &lt;legend&gt;You are to young&lt;/legend&gt;
   
          &lt;p&gt;Please go away ;-)&lt;/p&gt;
      &lt;/fieldset&gt;
   
      &lt;h3&gt;Finish&lt;/h3&gt;
      &lt;fieldset&gt;
          &lt;legend&gt;Terms and Conditions&lt;/legend&gt;
   
          &lt;input id="acceptTerms-2" name="acceptTerms" type="checkbox" class="required"&gt; &lt;label for="acceptTerms-2"&gt;I agree with the Terms and Conditions.&lt;/label&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;?php
   }
  ?&gt;</code></pre>
  </div>
  </div>
  </p>