CODEWITHSUNDEEP
jquery
Somnath Kayal
Somnath Kayal

Reputation: 393

Progress Bar is not working

Can anyone tell me how the progress bar work? In my HTML

<html>
   <head>
      <link rel="stylesheet" type="text/css" href="mystyle.css">
      <script type="javascript/text">
         var progress = setInterval(function() {
             var $bar = $('.bar');

             if ($bar.width()==400) {
                clearInterval(progress);
                $('.progress').removeClass('active');
             } else {
                $bar.width($bar.width()+40);
             }
             $bar.text($bar.width()/4 + "%");
         }, 800);
      </script>
    </head>
<body>
   <div class="container">
     <div class="progress progress-striped active">
        <div class="bar" style="width: 0%;"></div>
     </div>
   </div>
</body>

In my CSS:

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
   margin-top: 30px;
   width: 400px;
}

what's wrong with it? I can't get anything after run it. I was run it at sever too. I get it from here: http://jsfiddle.net/xXM2z/ please help.

Upvotes: 0

Views: 1273

Answers (2)

Simon M
Simon M

Reputation: 2941

Try using <script type='text/javascript'> instead of <script type='javascript/text'> in your code...

Or even just <script> without the type attribute, pretty much all browsers will interpret it as javascript these days.

EDIT - @killer_PL also has a point - that file will need to be included as well. Didn't think of that...

Upvotes: 1

Piotr M&#252;ller
Piotr M&#252;ller

Reputation: 5548

You don't include bootstrap.js in your code - in fiddler this is included dynamically by checkbox on leftside. Install bootsrap properly in your standalone code.

Upvotes: 2

Related Questions