Home/ Questions/Q 9059213
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T14:55:04+00:00

I’m new to Jquery and have been following some tutorials but this has me

  • 0

I’m new to Jquery and have been following some tutorials but this has me stuck. I found a tutorial to make a Jquery clock that works great but I’m trying to convert it to a plugin. The problem I’m having is I have seen how to call a plugin based on a singe div but this has me stumped. Could you have a look at the code for me and show me how I would go about calling the plugin? Thanks

HTML: 

    <head>
    <script src="jquery.min.js"></script>
    <script src="clock.js"></script>
    <script>
        // Need to call

    </script>

    <style> 
            #clock {
              position: relative;
              width:280px;
              height: 285px;
              margin: 20px auto 0 auto;
              background: url(images/clockface.png);
              list-style: none;
            }

            #sec, #min, #hour {
              position: absolute;
              width: 7px;
              height: 70px;
              top: 125px;
              left: 140px;
            }

            #sec {
              background: url(images/second.png);
              z-index: 3;
            }


            #min {
              background: url(images/min.png);
              z-index: 2;
            }

            #hour {
              background: url(images/hour.png);
              z-index: 1;
            }
    </style>
</head>
<body>
    <ul id="clock"> 
      <li id="sec"></li>
      <li id="hour"></li>
      <li id="min"></li>
    </ul>
</body>

JS…

 (function($){
$.fn.mclock = function(){
    var defaults = {
        var seconds = new Date().getSeconds();
        var sdegree = seconds * 6;
        var hdegree = hours * 30 + (mins / 2);
        },
        options = $.extend(defaults, args);
        console.log(options);

    this.each(function(){
      setInterval( function() {
  var seconds = new Date().getSeconds();
  var sdegree = seconds * 6;
  var srotate = "rotate(" + sdegree + "deg)";

  $("#sec").css({ "transform": srotate });

  }, 1000 );

  setInterval( function() {
  var hours = new Date().getHours();
  var mins = new Date().getMinutes();
  var hdegree = hours * 30 + (mins / 2);
  var hrotate = "rotate(" + hdegree + "deg)";

  $("#hour").css({ "transform": hrotate});

  }, 1000 );

  setInterval( function() {
  var mins = new Date().getMinutes();
  var mdegree = mins * 6;
  var mrotate = "rotate(" + mdegree + "deg)";

  $("#min").css({ "transform" : mrotate });

  }, 1000 );    })(jQuery);
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    UPDATE: Stripping back to hello world revealed missing brace }

    NOTE: You aren’t return(ing) this.each which might break your plugin

    Skeleton plugin

    /*
 * PLUGIN-NAME
 * PLUGIN-DESCRIPTION
 *
 * Copyright 2011 YOUR-NAME YOUR-WEBSITE-URL
 * Released under the MIT License
 */

(function($){

$.fn.PLUGIN_NAME = function(options) {

    var opts = $.extend({}, $.fn.PLUGIN_NAME.defaults, options);

    return this.each(function() {

    });

};

$.fn.PLUGIN_NAME.defaults = {
};

})(jQuery);
    • 0