jQuery Forum

Hi guys
I am trying to use the runner UI http://plugins.jquery.com/runner/


I have all these file included (last 2 are for the runner class)

1.   <script type="text/javascript" src="js/jquery-ui.min.js"></script>
2.   <script src="js/jquery.ui.core.js" type="text/javascript"></script>
3.   <script src="js/jquery.ui.widget.js" type="text/javascript"></script>
4.   <script src="js/jquery.ui.slider.js" type="text/javascript"></script>
5.   <script src="js/jquery.ui.datepicker.js" type="text/javascript"></script>
6.   <script src="js/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
7.   <script src="js/jquery.runner.js" type="text/javascript"></script>
8.   <script src="js/jquery.runner-min.js" type="text/javascript"></script> 

Then I have this code to inisilize runner

1.     <script>
2.         $(function(){
3.             $('#triggerOn').datetimepicker({
4.             timeFormat: "hh:mm tt"
5.             });
6.            
7.            
8.             $('#timer').runner(
9.             { autostart: true }
10.             );
11.            
12.             $('#timerStart').click(function() {
13.                 $('#timer').runner('start');
14.             });
15.             $('#timerReset').click(function() {
16.                 $('#timer').runner('reset');
17.             });
18.             $('#timerStop').click(function() {
19.                 $('#timer').runner('stop');
20.             });           
21.            
22.         });
23.     </script>

this is my html code to display and click the button to start/stop/reset

1.               <div style="margin: 20px auto; width: 190px; padding: 20px; background-color: #fff; display: block; height: 80px; border: 1px solid #ccc;">
2.               <input type="text" id="timer" name="timer" value="" readyonly="true" style="width: 150px; height: 35px; font-size: 20px; font-weight: bold; text-align: center; background-color: #2D2D2D; color: #fff;"><br />
3.                   <div style="margin:0 auto; width: 150px;">
4.                   <div class="button" id="timerStart" style="display: inline;" >Start</div>
5.                   <div class="button" id="timerStop" style="display: inline;" >Stop</div>
6.                   <div class="button" id="timerReset" style="display: inline;" >Reset</div>
7.                   </div>
8.               </div>

Can somebody plkease tell me why it is not running? if i click on start it does not start and it does not autorun. it does not work at all and I get no errors in my console!.


Thanks