New html block added, Navbar changed with scrollspy. First section started.

nirajr1992 · nirajr1992 · commit d4f0c11db00b · 2017-06-02T00:42:45.000+05:30
diff --git a/index.html b/index.html
@@ -20,10 +20,10 @@
       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
     <![endif]-->
   </head>
-  <body>
+  <body data-spy="scroll" data-target="#navbar-example">
 
     <!-- Navbar -->
-    <nav class="navbar navbar-default navbar-fixed-top">
+    <nav class="navbar navbar-default navbar-fixed-top" id="navbar-example">
       <div class="container">
         <!-- Brand and toggle get grouped for better mobile display -->
         <div class="navbar-header">
@@ -39,6 +39,9 @@
         <!-- Collect the nav links, forms, and other content for toggling -->
         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
           <ul class="nav navbar-nav navbar-right">
+            <li>
+              <a href="#demo1">Demo1</a>
+            </li>
             <li>
               <a href="https://github.com/nirajrajgor/jquery-upload-image-customization" target="_blank">
                 <i class="fa fa-github"></i> Github
@@ -50,38 +53,39 @@
     </nav>
 
     <div class="container">
-      <div class="row">
-        <h1>Image Upload with Preview, Restriction on file Size &amp; Dimensions</h1>
-      </div>
-      <div class="row">
+      <div class="row" id="demo1">
         <div class="col-xs-12">
-          <form action="#" method="post">
-            <div class="row">
-              <div class="form-group">
-                <label class="col-sm-2 col-sm-offset-2 control-label">Profile Picture</label>
-                <div class="col-sm-6">
-                    <label class="btn btn-primary btn-outline profile" for="my-profile-file-selector">
-                        <input id="my-profile-file-selector" type="file">
-                            Upload
-                    </label>
-                    <span class='' id="upload-profile-file-info"></span>
-                    <h4 id="upload-profile-error" class="text-danger"></h4>
-                    <img id="upload-profile-image" src="" class="img-responsive" alt="">
-                    <button class="btn btn-primary btn-outline" id="remove-profile-btn">Remove</button>
-                </div>
-              </div>
-            </div>
-          
+          <h2 class="title">Demo1 - Simple Image Preview</h2>
+        </div>
+        <div class="col-sm-4 col-md-4 col-xs-12">
+          <div class="block-heading">
+            <h3>Select Image</h3>
+          </div>
+
+          <form action="#" method="post" id="demo1-form">
+            <label class="btn profile" for="my-profile-file-selector">
+                <input id="my-profile-file-selector" type="file">Upload
+            </label>
+            <span class='' id="upload-profile-file-info"></span>
+            <h4 id="upload-profile-error" class="text-danger"></h4>
+            <img id="upload-profile-image" src="" class="img-responsive" alt="">
+            <button class="btn" id="remove-profile-btn">Remove</button>
           </form>
 
         </div>
       </div>
+
     </div>
 
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
     <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
     <!-- Include all compiled plugins (below), or include individual files as needed -->
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <script src="js/uploader.js"></script>
+    <script>
+      $(function(){
+        $('body').scrollspy({ target: '#navbar-example' })
+      });
+    </script>
   </body>
 </html>
