Add a countdown to your page using jQuery Responsive Countdown

If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here.

Table of Contents

  1. Brief Description
  2. Step 1 (Download, Unzip)
  3. Step 2 (Set options)
  4. Step 3 (Import required files)
  5. Step 4 (Create HTML container)
  6. Step 5 (Create and activate countdown)
  7. Resources

Brief Description – top


jQuery Responsive Countdown is a tool that gives you the ability to create a nice looking countdown, which uses flipping animation to display remaining time to a target date. Since it is based on the canvas object it cannot run natively in older browsers like IE8. The tool uses SVG data to draw the digits and the panels, so it is scalable and looks nice on larger resolutions too. It does not use images, so it is very easy to change colors and adapt the look of it to the design of your page. The tool has a large list of options, but it can also be activated with few lines of code.

In this tutorial I will show you how to add the tool to a coming soon page.

Step 1 (Download, Unzip) – top


Download the countdown package and unzip it in a folder on your web server. Load the index page, which features the Visual Builder.

Step 2 (Set options) – top


1. Using the Visual Builder you will be able to set the colors and all other options that will make your countdown unique. The tool shows the days, hours, minutes and seconds in two types of groups. Group one is used for the most right positioned group – usually that groups is the seconds group and then for every other group (usually hours). The other group is used alternatively.

2. For each group you can set the color of the digits (digit gr1, digit gr2) which is solid color. You can also set the color of the panels. Panels can use gradient color (gradient gr1, gradient gr2), or solid color if equal values for each group are entered. The Visual Builder allows the usage of background color, which gives you idea how the countdown will look against the background of your page. Each group can be hidden and number of day digits can be set. Let us imagine that the colors from the image below (fig. 1) are used in your html page design. Using the Visual Builder (fig. 2) the colors of the countdown can changed (fig. 3, fig. 4).

colors
fig. 1
vb1
fig. 2
vb2
fig. 3
vb3
fig. 4

3. Groups can be divided not only by color, but also by space. Normally digits have a bit of space between them, but you can add more between groups (spacing). That option is a number of additional space added to the normal that exists between digits. You can further divide groups by adding a spacer (spacer). It can be circles or squares. The spacer uses the color settings of the labels. Let us use circle dividers and 3x spacing (fig. 5).

vb4
fig. 5

4. Since the countdown resizes within the space available it may become very large. You can use the (max height) option to control the maximum size of it. Labels can be hidden (show labels) and their color (labels color) and glow color (labels glow) can be set. Glow color is used to soften the look of the labels, which in some browsers look too pixelated. Glow can be turned off though using the (glow = 0) option. The labels can have long and short caption. Short caption is used when there is not enough space to show the long caption. The labels resize along with digits, but if they reach the minimum size allowed (min size) the short caption is used. Max size can also be controlled for larger resolutions. Use fonts that are web friendly. The font size is calculated based on the size of the digits. So you need to set a percentage value. The gap above the labels that separates them from the digits is again set as a percentage but this time based on the size of the labels. Let for our example use these labels: DAYS, HOURS, MINUTES, SECONDS and set 33% for font size and 0% for gap (fig. 6).

vb5
fig. 6

5. Very important option to set is the target date and time zone. Let us imagine that we are creating coming soon page that will be live on the 14th of February 2016. Setting the time zone allows people from different portions of the world to see same time remaining to your target date. You can set it to your time zone or for example to the time zone where your site will be hosted. I will set time zone 2 for this example (fig. 7)

vb6
fig. 7

Step 3 (Import required files) – top


Import these in the head section of your page.

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.responsive_countdown.js"></script>

Step 4 (Create HTML container) – top


The tool needs a container to display in. For our example it can be a div element with 100% width. That means the countdown will try to cover all available browser width. Only the maximum height can prevent it from taking all available width for large resolutions. The div needs to have an id, which will be used when the tool is created. Another important setting is the relative position of the div. This is a must because the countdown creates absolutely positioned canvas elements.

<div id="first_countdown" style="position: relative; width: 100%; height: 50px;"></div>

Step 5 (Create and activate countdown) – top


The Visual Builder outputs the needed javascript code for countdown creation and activation. You need to select that text and use it (fig. 8). Note that the id of the div you created matches the one used in the selector (first_countdown). You can paste that code in the body or in the head of your page.

vb7
fig. 8
<script>
  $(function() {
    $("#first_countdown").ResponsiveCountdown({
      target_date:"2016/2/14 00:00:00",
      time_zone:2,target_future:true,
      set_id:0,pan_id:0,day_digits:3,
      fillStyleSymbol1:"rgba(255, 227, 227, 1)",
      fillStyleSymbol2:"rgba(219, 228, 255, 1)",
      fillStylesPanel_g1_1:"rgba(154, 102, 52, 1)",
      fillStylesPanel_g1_2:"rgba(186, 123, 63, 1)",
      fillStylesPanel_g2_1:"rgba(51, 103, 153, 1)",
      fillStylesPanel_g2_2:"rgba(57, 115, 171, 1)",
      text_color:"rgba(0, 0, 0, 1)",
      text_glow:"rgba(168, 162, 162, 1)",
      show_ss:true,show_mm:true,
      show_hh:true,show_dd:true,
      f_family:"Verdana",show_labels:true,
      type3d:"single",max_height:300,
      days_long:"DAYS",days_short:"dd",
      hours_long:"HOURS",hours_short:"hh",
      mins_long:"MINUTES",mins_short:"mm",
      secs_long:"SECONDS",secs_short:"ss",
      min_f_size:9,max_f_size:30,
      spacer:"circles",groups_spacing:3,text_blur:2,
      font_to_digit_ratio:0.33,labels_space:1
    });
  });
</script>

Resources – top


The countdown can be used to show elapsed time too. It also has a custom mode, where it waits for outside calls that change the states of its digits. The tool has another set of digits. Different sets can be added easily using some SVG descriptions. Full documentation is available at jQuery Responsive Countdown Documentation. The tool is available at jQuery Responsive Countdown with Visual Builder.

If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here.

This post is written by Krasimir Dimov  who loves to play with jQuery and HTML5. You can reach him by clicking here

Why you should learn Javascript?

I am a strong web enthusiast that lead me into learning Javascript. But after learning this scripting language, I must say everyone who uses a computer must learn this language and there are many reasons for this, few of them I am going to list over here.

  • It is the easiest Object Oriented Programming language.
  • It is very flexible in syntax, unlike Java it is not a strictly typed language.
  • It is a cross platform language which can be run on mobile devices as well as laptops.
  • You don’t need anything to install, test, run and debug your JavaScript programs except a web browser.
  • Stackoverflow has highest number of questions tagged as Javascript. So, you will be getting best support from the web while learning this language.
  • With introduction of node.js Javascript, which often used to be a client side scripting language, it can now be used for server side programming as well.

For any Computer Science student or anyone looking a career in computing, it is essential to know the future of internet, and as predicted by many big companies internet cloud computing will be taking over conventional computing. This will drastically increase the use of JavaScript and HTML for front end web development. With the evolving standards like HTML5 and CSS3 Javascript looks even more beautiful with lesser amount of coding.

While starting this post, I mentioned that Javascript should be learned by anyone who is using computer and that’s because it can do task of 10 to 15 minutes in few seconds and it can do task of hours in few minutes. Some of  these tasks which can be done by using Javascript includes-

  • Text Handling
    • Finding and replacing particular text with various logical conditions.
    • Printing some thing repeatedly.
    • Printing something randomly.
  • Number Handling
    • You can almost do any mathematical calculation with logical constraints.
    • You can print random numbers for a game or something like that.

There is lot more to this, Javascript learning is pure fun. You can just open you web browser and start practicing it. I use chrome for most of my web browsing, you can use Ctrl + Shift + J to open Javascript console in Google Chrome. To start with, you can type in following command to print “Hello World!”

[code language=”Javascript”]
console.log("Hello World!");
[/code]

Hello World

The above code will print “Hello World!” in Javascript console. Similarly if you want to print this code into Document body. Write it like this-

[code language=”Javascript”]
document.write("Hello World!");
[/code]

I have learnt Javascript using a website, Code Academy, its fun and interactive, if you want you may checkout.

Develop iOS, Android and Windows applications using HTML – Part 2

This post is in the continuation of my previous post . In this post, I will tell you about :

  • How to deploy HTML code to build iOS , Android and Windows application.
  • How to retrive the value of the data from the form that we created in my previous post.

The submit button that we created in our previous does nothing. In this, we will add some functionality to it. We will show a popup after we press submit showing the values that we entered in the text boxes. To do this, you need to write a function in a javascript. It is a good idea to create a separate folder for all your scripts. I have created a folder named “js” and created a file called “custom.js” in that.

 

For the popup, you need create a separate “div” tag. Place the code shown above the closing “</body>” tag .

<div data-role="popup" id="submitPopup" data-inline="true"  data-transition="slideup" data-position-to="origin" >

 


 

    <span id="popupText"></span>

 

</div>

The “data-role” defines that the element will be a pop-up and the id  “popupText” will be explained later.  Now we will call this popup on click of the submit button. For this, we need to write a function that will show this. Open your text editor and create a new file “custom.js” in the “js” folder that you have just created and paste the code below :

var name, email, id ; //every parameter is a variable in javascript, no int, strings or floats, just variables

 

function getData()

 

{

 

    name= document.getElementById("name").value; //code to get the user input of "name" field

 

    phone= document.getElementById("phone").value; //code to get the user input of "phone" field

 

    address= document.getElementById("address").value;    //code to get the user input of "address" field

 


 


 

    $("#submitPopup").popup("open"); // this will open the pop up

 

    $("#popupText").html("Hi " +name+", please verify your phone :"+phone +" and address : "+address+". Thanks."); //setting the value in the "popupText" id span

 


 


 

}

Here we are binding the “div” id(s) to the function.

Now we need to call the “getData()” function on the press of the “Submit” button. To do this, add

onClick="getData()"

 

in the <a> tag in index.html. Also, in the index.html, link the script file. The complete file looks like this :

<!DOCTYPE>

 

<html>

 

<head>

 

    <meta charset="UTF-8" />

 

    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

 

    <title>ChillGeeks</title>

 

    <link href="jquery-mobile/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css" />

 

    <script src="jquery-mobile/jquery-1.8.2.min.js" type="text/javascript"></script>

 

    <script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>

 


 


 

    <script src="js/custom.js" type="text/javascript"></script>

 

</head>

 


 

<body>

 

    <div data-role="header" data-theme="b">

 

        <h1>Chill Geeks</h1>

 

    </div>

 

    <div data-role="content">

 

        <h3>

 

            This demo will show you how to add form elements

 

        </h3>

 

    </br>

 

    <input type="text"  id="name" value="" placeholder="Enter Your Name">

 

    <input type="tel"  id="phone" value="" placeholder="Enter Your Phone Number">

 

    <input type="text" id="address" value="" placeholder="Enter Your Address">

 

</div>

 

</br>

 

<div style="text-align:center">

 

    <a href="#" data-role="button" data-inline="true" data-theme="b" onClick="getData()" >Submit</a>

 

</div>

 


 

<div data-role="popup" id="submitPopup" data-inline="true" data-transition="slideup" data-position-to="origin" >

 


 

    <span id="popupText"></span>

 

</div>

 


 

</body>

 

</html>

Just run the code, and you will see the following screenshot after pressing Submit  button :

popup

Now comes the main part to deploy this code on actual mobile. We will do this with the help of Phonegap. To know what actual is Phonegap and what it does, click here.

You need to download the “cordova.js”. You can download it from here. Paste the contents (3 JS files)  in “HelloWorld” folder . Update the “index.html” to give it the reference of the Cordova files. The complete code looks like this :

<!DOCTYPE>

 

<html>

 

<head>

 

    <meta charset="UTF-8" />

 

    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

 

    <title>ChillGeeks</title>

 

    <link href="jquery-mobile/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css" />

 

    <script src="jquery-mobile/jquery-1.8.2.min.js" type="text/javascript"></script>

 

    <script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>

 


 


 


 

    <script src="js/custom.js" type="text/javascript"></script>

 


 


 

    <script src="cordova.js" type="text/javascript"></script>

 


 


 


 

</head>

 


 

<body>

 

    <div data-role="header" data-theme="b">

 

        <h1>Chill Geeks</h1>

 

    </div>

 

    <div data-role="content">

 

        <h3>

 

            This demo will show you how to add form elements

 

        </h3>

 

    </br>

 

    <input type="text"  id="name" value="" placeholder="Enter Your Name">

 

    <input type="tel"  id="phone" value="" placeholder="Enter Your Phone Number">

 

    <input type="text" id="address" value="" placeholder="Enter Your Address">

 

</div>

 

</br>

 

<div style="text-align:center">

 

    <a href="#" data-role="button" data-inline="true" data-theme="b" onClick="getData()" >Submit</a>

 

</div>

 


 

<div data-role="popup" id="submitPopup" data-inline="true" data-transition="slideup" data-position-to="origin" >

 


 

    <span id="popupText"></span>

 

</div>

 


 

</body>

 

</html>

 

Create a new file in your text editor and name it “config.xml” that will give Phonegap the basic information about the application and save it in “HelloWorld” folder . Paste the following code in it :

<?xml version="1.0" encoding="UTF-8" ?>

 

    <widget xmlns = "http://www.w3.org/ns/widgets"

 

        xmlns:gap = "http://phonegap.com/ns/1.0"

 

        id        = "com.headstrong.stockintelligence"

 

        versionCode="10"

 

        version   = "1.0.0">

 


 

    <!-- versionCode is optional and Android only -->

 


 

    <name>Chill Geeks</name>

 


 

    <description>

 

        Created with the help of www.ChillGeeks.com .

 

    </description>

 


 

    <author>

 

    Chill Geeks

 

    </author>

 


 

     <feature name="http://api.phonegap.com/1.0/device" />

 


 

    <preference name="phonegap-version" value="2.9.0" />

 

    <preference name="orientation"      value="default" />

 

    <preference name="target-device"    value="universal" />

 

    <preference name="fullscreen"       value="false" />

 


 

    <icon src="icon.png" height="72" width="72" />

 


 

</widget>

 

You are almost done. Now create a new account on https://build.phonegap.com . Once created, you need to upload your code using a .zip format. Just zip all the contents of the Helloworld and upload and you will see something like this :

 

HTML app using phonegap 

Just scan the code using any bar code reader on your mobile and run the app. It will run smoothly.

To run on iOS device, you need to upload the developer certificate and configuration file.

 

This was all about building Android, iOS and Windows app using HTML5 and CSS. We will be sharing more tutorials in few days.

Develop iOS, Android and Windows applications using HTML – Part 1

Prerequisites: Basic knowledge of HTML , CSS and jQuery Mobile

 

This is the part one of the series, You can directly to second part from Develop iOS, Android and Windows applications using HTML – Part 2

 

There are different ways to develop mobile applications. One is to develop the applications using the Native Software Development Tools ( like developing Android applications using Eclipse in JAVA, or developing iOS application using XCode in Objective C) and the other one is to develop cross platform (i.e. platform independent applications, iOS, Android, Windows,  BBM) applications using Hybrid Development Tools in HTML5 and CSS.   To know about the difference between Native and Hybrid application development, please refer here . This tutorial will be a part of the series and some more tutorials will follow after this post.

 

Step 1

Donwload a Text Editor to write HTML code. Proffered ones are Notepad++ and Sublime Text. I am using a great Text Editor called Sublime Text 2 which you can download here.

Step 2

Download  Wamp Server from here.  After installation, run it and go to localhost. You will see an image as shown below.

wamp

 

Step 3

Go to the wamp server installation directory and create a folder named “HelloWorld” in www . (path: C:wampwww)

HelloWorld

Download jQueryMobile reference files from here to  Include the jQuery Mobile Scripts into your html page . Download Minified: jquery.mobile-1.3.1.min.js and Minified with Default theme: jquery.mobile-1.3.1.min.css (Right Click and Save As).

After this, Download jQuery scripts from hereDownload the compressed, production jQuery 1.10.1 and create a new folder in “HelloWorld” by the name of “jquery-mobile” .

jquery-mobile

Step 4

Go to “HelloWorld” folder and create a new .html file using using sublime text.

Reference the scripts downloaded in Step 3 and create the basic HTML Structure as shown below :

   1:  <!DOCTYPE>

 

   2:  <html>

 

   3:  <head>

 

   4:      <meta charset="UTF-8" />

 

   5:      <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

 

   6:      <title>ChillGeeks</title>

 

   7:      <link href="jquery-mobile/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css" />

 

   8:      <script src="jquery-mobile/jquery-1.8.2.min.js" type="text/javascript"></script>

 

   9:      <script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>

 

  10:  </head>

 

  11:  

 

  12:  <body>

 

  13:  

 

  14:  </body>

 

  15:  </html>

This is the basic page without any content. Now go to http://view.jquerymobile.com/1.3.1/dist/demos/ and click on Header Toolbar. View the source of any header you like to insert. I am in love with blue color so I am using that.

Insert the below code in the <body> tag :

   1:  <div data-role="header" data-theme="b">

 

   2:          <h1>Chill Geeks</h1>

 

   3:  </div>

 

After this your code looks like this :

   1:  <!DOCTYPE>

 

   2:  <html>

 

   3:  <head>

 

   4:      <meta charset="UTF-8" />

 

   5:      <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

 

   6:      <title>ChillGeeks</title>

 

   7:      <link href="jquery-mobile/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css" />

 

   8:      <script src="jquery-mobile/jquery-1.8.2.min.js" type="text/javascript"></script>

 

   9:      <script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>

 

  10:  </head>

 

  11:  

 

  12:  <body>

 

  13:      <div data-role="header" data-theme="b">

 

  14:          <h1>Chill Geeks</h1>

 

  15:      </div>

 

  16:  </body>

 

  17:  </html>

Save it and run http://localhost/helloworld/ on your Chrome. It should look like this :

appWithHeader

This won’t give you the feel of how it would look on Mobile. To do this, download the mobile simulator ripple from here and add it to Chrome.  Enable it and your app will look like this :

appWithHeaderEmulator

 

You can put any type of the element using jQueryMobile demo website. Just visit here .

After this initial header, let us just add some form elements. We will be adding textboxes and buttons.

Now after the closing div tag of the header, just add the following code :

 

<div data-role="content">

 

        <h3>

 

            This demo will show you how to add form elements

 

        </h3>

 

        </br>

 

        <input type="text" name="text" id="name" value="" placeholder="Enter Your Name">

 

        <input type="tel" name="text" id="phone" value="" placeholder="Enter Your Phone Number">

 

        <input type="text" name="text" id="address" value="" placeholder="Enter Your Address">

 

</div>

 

The data-role element in the above code defines the role of the content and then map its designing as based on the jQueryMobile scripts. After this , let’s add a submit button.

</br>

 

    <div style="text-align:center">

 

        <a href="#" data-role="button" data-inline="true" data-theme="b" >Submit</a>

 

    </div>

After this, your complete code looks like this :

<!DOCTYPE>

 

<html>

 

<head>

 

    <meta charset="UTF-8" />

 

    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

 

    <title>ChillGeeks</title>

 

    <link href="jquery-mobile/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css" />

 

    <script src="jquery-mobile/jquery-1.8.2.min.js" type="text/javascript"></script>

 

    <script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>

 

</head>

 


 

<body>

 

    <div data-role="header" data-theme="b">

 

        <h1>Chill Geeks</h1>

 

    </div>

 

    <div data-role="content">

 

        <h3>

 

            This demo will show you how to add form elements

 

        </h3>

 

        </br>

 

        <input type="text" name="text" id="name" value="" placeholder="Enter Your Name">

 

        <input type="tel" name="text" id="phone" value="" placeholder="Enter Your Phone Number">

 

        <input type="text" name="text" id="address" value="" placeholder="Enter Your Address">

 

    </div>

 

</br>

 

    <div style="text-align:center">

 

        <a href="#" data-role="button" data-inline="true" data-theme="b" >Submit</a>

 

    </div>

 


 

</body>

 

</html>

Save the document and run http://localhost/helloworld/ on your Chrome. It should look like this :

App

 

This is the basic application, and does nothing but helps you to understand how to create mobile application. This currently runs on your browser, however, in the next tutorial, I’ll show you how to run this on your mobile.