Fork me on GitHub
Post Format

Free jQuery Count Down Plugin: County

This is our jQuery plugin after quite a long break and we hope you’ll enjoy this free plugin. Its time for count down, its county! County is a free jQuery count down plugin build with powerful jQuery library and loaded with various customization options. It allows you to control the animation, color schemes and many other parameters.

Free jQuery Countdown Plugin: County

Customizing County

County offers various customization options using parameters and by using these parameters you can’t only customize the look and feel of the plugin but also many other aspects. Here is the list of complete customization parameters.

  • endDateTime: The date and time where the count down will stop.
  • animation: Animation from count down element, ‘fade’ or ‘scroll’
  • speed: Animation speed for count down element, 500 milliseconds default.
  • theme: Color scheme for count down, ‘black’, ‘gray’, ‘red’ and ‘blue’
  • reflection: Whether to show reflection, true/false
  • reflectionOpacity: Opacity for reflection, 0.2 default

Using County

Using county is pretty straight forward, you just need need a block element(e.g. div) and call the county initialization function with required customization parameters. Here are the isolated steps.

  • Add a reference to latest jQuery library
  • Add a reference to county.js
  • Add a reference to county.css

Add the following to the head section of your HTML document.

    <link rel="stylesheet" type="text/css" href="css/county.css" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="js/county.js" type="text/javascript"></script>
  • Add a block element in body of HTML document
  • Call the initializer function with required parameters and your count down is ready
  <div id="count-down"></div>
$('#count-down').county({ endDateTime: new Date('2013/12/27 10:00:00'), reflection: true, animation: 'scroll', theme: 'black' });

Here is the complete working example.

<html>
<head>
    <title>County Example</title>
    <link href="css/county.css" rel="stylesheet" type="text/css" />
    <link href="css/demo.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="js/county.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#my-count-down').county({ endDateTime: new Date('2013/12/27 10:00:00'), reflection: true, animation: 'scroll', theme: 'black' });
        });
    </script>
</head>
<body>
    <div id="my-count-down">
    </div>
</body>
</html>

Download CountyView Demo

Related Posts

  1. jQuery Animated Bar Plugin: jqBar
  2. jQuery Broken Link Checker Plugin: jsLink
  3. Stylish jQuery Accordion Plugin (FREE): Akordeon
  4. jQuery Interactive Cycle Slides Plugin: jQSlid
  5. jQuery Plugin for On-demand Search Box: SeacrhMeme

5 comments

  1. Hi. thanks for great plugin.
    Could you fix an issue? in county.css you have add body, html {font-size: 12px; }. Sometimes it changes font size on site.

    Reply
  2. Pingback: jQuery System | Top Apprentice Blog

  3. Pingback: Free jQuery Count Down Plugin: County | EGrappler - Web 2.0 BLOG | Web 2.0 BLOG

Leave a Reply

Required fields are marked *.


6 + seven =