How to make a scrollable HTML table

There are times when scrollbars are needed in an html table. This is true in situations when a table is larger than its container. In such cases, without scrollbars, only part of the table will be visible. Take the table below for example:
scrollable table

The table has scrollbars. Without scrollbars, it looks as follows:

table no-scroll

Making a table scrollable is actually quite straightforward. It is a matter of adding scrollbars to the table’s container. That is how the above scrollbars were added. The scrollbars don’t belong to a table. They belong to a <div> which is a parent to the table.

This is how the html code looks like:

<div class="tableContainer">
<table border="1">
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
<td>row 1, cell 4</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
<td>row 2, cell 4</td>
<td>row 3, cell 1</td>
<td>row 3, cell 2</td>
<td>row 3, cell 3</td>
<td>row 3, cell 4</td>
<td>row 4, cell 1</td>
<td>row 4, cell 2</td>
<td>row 4, cell 3</td>
<td>row 4, cell 4</td>

Now, in order to make scrollbars appear, the container needs to be smaller than the table. For our example, we shall give “tableContainer” a width and height which is smaller than that of the table. We do this using the following CSS styles:

	height: 150px; 
.tableContainer table{
	height: 250px; 
	width: 320px

At this point, the table displays as follows on the webpage.

You’re probably wondering where the scrollbars are. Well, in order to make scrollbars appear, there is one CSS property which you need to add. It is the “overflow” property. This property determines what happens when portion of one element covers another element. In this case, the <div> covers part of the table. In order to add scrollbars, we have to give “overflow” a value of “auto”, as follows:

overflow: auto;

This rule is supposed to be added to the “tableContainer” style. This style now looks as follows:

height: 150px;
overflow: auto;
border: 2px solid black;

With this, our table now appears with scrollbars.

The above approach is great. However, in some cases, you may want to scroll the body of the table, without touching its head. To achieve this, you will need to use the HTML5 <thead> and <tbody> tags. When you want to add scroll bar to just one cell, you have to change the td width and then apply the scroll style.

Also see some more on creating HTML table here

How to Sort an Array in JavaScript

When working with large quantities and volumes of data, you may find it difficult to manage the data. But thanks to technology, the task has been made significantly simpler. One of the tools of data management and arrangement is JavaScirpt. phone applicationsJavaScript has emerged as one of the most dynamic and useful computer programming language used universally. The tool is standardized by the ECMAScript language and is most commonly used as a portion of browsers, game development, as well as desktop and mobile applications. It is also used in a number of other platforms such as site-specific browsers, PDF documents, desktop widgets and so forth. As a programming tool, JavaScript can be of good use when sorting data.

Sorting data allows your data to be more organized in a sensible manner. For instance, you can arrange texts in alphabetic order or the reverse and numbers in descending or ascending order. What this does is simplify your job by not having you do it by hand. Furthermore, the sort() function in JavaScript allows you to get the lowest and highest values. By default, the sort() method is programmed to sort the values of data as strings in ascending and alphabetical order. The sort() method is supported in all the browsers such as Firefox, Chrome, Safari, Internet Explorer, and Opera. This is pretty cool considering the amount of data to be processed. So how do you do it?

First off, an an associative array is the most popular sort of array used which is also sometimes referred to a hash or map structure. It is simply a set of value pairs stored in association with its own key.

Sorting an array in JavaScript involves plugging in the data you need and manually programming formulaentering the sorting formula which will then be applied to the data and in turn, sort it in the order you want. Though sometimes this function in and of itself is not sufficient in displaying correct data, optional parameters can be used to define the sort order. Without perimeters such as the compareFunction, the array is simply set and sorted according to the characters’ Unicode point value which is sometimes not sufficient to supply data sorting that makes sense.

For example, when sorting (Cherry, apples) without a compareFunction will result in (Cherry, apples) instead of (apples, Cherry). arr.sort([compareFunction]) is the code for the compareFunction which will sort the data correctly according to alphabetical order as (apples, Cherry). This also applies in the arrangement of numbers. The sort() function would value and sort numbers according to the first digit. So automatically, arranging 5, 12, 9, 80 will result in (12,5,80,90). However, using the compareFunction allows the numbers to be arranged according to their numerical value instead of just the first number.

This method can be applied to significantly larger volumes of data which can help in cutting back the time it would take to sort the data one by one manually. JavaScript allows this task to be completed expediently and with minimal errors, granting you time savings and some fun in your programming venture.


Sorting out JavaScript Array Sorting

Sophisticated Sorting in JavaScript

Numerical array sorting in JavaScript

How to Debug JavaScript Functions

These days, scripting has now become a complete class of web development on its own. With the modern day libraries available, most HTML/CSS developers are taking great interest in coding JavaScript. This can be quite challenging for programmers to handle, particularly when it comes to JavaScript code debugging. The true skills of a programmers can be measured by how he/she deals with errors and bugs.

debug javascript

There is a great probability that a programmer will make a mistake when writing his/her program. This mistake in the script is known as a bug. The process of finding and even fixing these bugs is what is known as debugging and it is a normal part of your development process.

For those who are just starting out in the programming industry, checking out the various tutorials available can be quite daunting. This is because the same technique may not work at all times. However, programmers need to be patient as the debugging process will be much easier and clearer with lots of practice. These guidelines will help you achieve what you want.

For you to debug the JavaScript function, you should first invoke it and stop the execution of JavaScript inside the function’s body. You should set up a breakpoint at the start of the function’s body, you can achieve this by clicking in the line number that is on the left side. If the breakpoint is properly set up, a blue marker will appear around that line number.

Perform a specific action that causes the function to launch, for example, you can click on the button on the web form, which is directly linked to the function.Some functions are not linked to a specific web element, however, they tend to be interconnected to a web page body or a global script. In such a case, you only need to press F5 so as to reload the webpage.

You can also invoke the function manually from the JavaScript console by typing the arguments and its name. You should look at the blue line and the red marker at the break point as this is an indication that you have entered your JavaScript function successfully.

debug javascript

You should then resume the execution of the script by clicking on the “Pause/Resume script execution”. This button is located on the top-right position of the Web Inspector window and it is below the field marked “Search Scripts”.

To execute your current JavaScript line you should click on the “Step over next function call” icon that is below the “Search Scripts” field. You can also click on the “Step out of current function” for you to get back to the parent function on the stack that invoked the function where the execution is stopped. To check out all the functions you can click on the “Call Stack” icon. This will display the function name, code line and module name where the execution was stopped.

You can also open and even inspect the JavaScript Console by clicking on the icon at the bottom of your Web Inspector window. This will allow you to check out the debugger messages, warnings and code errors. You can also set up additional breakpoints and continue drilling through your JavaScript functions even if the execution has already been stopped.

Image credits: Nathan SmithDmitry Baranovskiy

jQuery Plugins To Work With Date

As a developer, there is a necessity to contemplate a number of factors when developing a website. An application or a web may handle special date data such as a user’s birthday, an item’s purchase date and last log in date just to mention a few. Due to such variety of data and a developer’s preference, he may prefer to use a unique jQuery plugin to suit his need.

jquery plugins date

One of the well-known jQuery plugins to work with Date is DatePicker which was developed by Stefan Petre. His code provides very diverse methods of date customizations based on the user’s preference where a user can start at any date, month or year. Not only does DatePicker provide a possibility to limit the choices a user can make by passing distinct parameters into a jQuery function, but also the code is exceedingly lightweight such that initial code can be done with a single line of code. For example:


Stefan didn’t vacate after developing DatePicker. He reproduced an extension of it that brings out stunning styles; the jQuery UI Bootstrap designed to convey exquisiteness and ease-of-use of Twitter Bootstrap to jQuery widgets.

The Zebra_Datepicker is built using Boilerplate plugin. It’s small in size and weighs around 21KB. Also, despite it providing a mechanism to disable dates and date ranges, it’s compact and also offers an intuitive interface and easy navigation. It also supports internationalism and customization of weekend days for countries.

ptTimeSelect plugin is based on Stefan Petre’s DatePicker code with added contributions taken from Andrew Rowls and Jdewit. It is used for input fields that displays a pop up widget that allows a user to define time which is written back to an input field.

jquery plugins date

A jQuery Mobile DateBox plugin is a simple yet high intuitive plugin that enriches user interaction with dates on a given form. When clicked, it shows a popup calendar where users will only have to make a selection.

The jQuery UI Datepicker plugin supports animation effects when closing of opening datepicker. There’s a dropdown menu that enables you to select your fancy animation. There are also a variety of effects that the users can select from.

Also,among the jQuery plugins to work with Date is the jQuery ClockPicker. A clock-styled time picker plugin that supports both desktop and mobile devices. Also it supports nearly all touchscreen devices.

Mobiscroll jQuery UI Datepicker supports touchscreen devices also. It comprises of a wheel-scroller user control to easily scroll and select date or time.

A smaller and simpler jQuery plugin is the glDatePicker which automatically jumps to respective month upon selection. Apart from offering stylized current date and selected date, it also enables offset days of the week, for example, making Thursday to be the first day of the week. As a user, you can customize month names and days of the week names.

Mobi Pick has been yet another date picker widget for jQuery Mobile designed to support the Android Operating System and uses XDate date library. Mobi Pick allows progressive enhancement for date input fields using Modernizr.

Image credits: sandeep1657tacchini

Top jQuery Plugins 2014


LightCase It is an adaptive, conscious and extendable lightbox plugin conceived by using jQuery. It works beautifully with all the familiar web browsers such as Internet Explorer, Firefox, Chrome, Opera, Webkit, etc. It also supports image, video, HTML5 content, iframe, swf, ajax call, etc. Documentation Demo

Structured Filter

It is a common Web UI used for building structured search or filter questions. You can create structured search queries such as “Contact numbers starting with alphabet A and Birthdays after 1/1/1980 and States in (NY, FL, and CA)”. A full JQuery UI widget supports different configurations and themes. Demo Documentation


It is a simple jQuery plugin for flexible images in conscious web design. Created after a twist on the old LOWSRC IMG feature, which would deliver a lower file size image first while an image with larger file size appear in its place later. However, if the plugin finds faster network or high resolution, then a higher resolution image takes the place. Documentation


justifiedJustified.js creates a justified image framework of supplied images to fill the entire space. It constructs an elegant image gallery with different sizes of images. All the images of a row have the same height. Demo

Before and After

Before and After plugin allows you to view an “after” rendition of any image as a cover to the original image. There is a handle in the plugin that allows the user to choose how much of each image he/she wants to view. Apart from containing the main image, the “before” and “after” slides may also contain other HTML components like caption. More info

Scalable Lightbox

Scalable Lightbox used in building artistic, conscious picture lightboxes. It has an index module that provides a synopsis with thumbnails likewise a lightbox module that shows high-resolution images in a responsive demeanor. Scalable Lightbox


HashtegnyHashtegny accumulates “hashtags” from popular social media platforms like Twitter, Google Plus, Instagram, etc. User posts showed in a unique, engaging and vivid layout with endless features. Hashtegny


Gridstack is a plugin for widget outline. It is a drag and drop multi-column grid that allows user to create conscious bootstrap v3 favorable designs. Gridstack.js


A lightweight jQuery plugin enables dragging functionality on DOM elements without needing the jQuery UI library. The extension is also compatible with touch devices, trackpads, and other standard computer devices. jQuery.dragmove

jQuery Easy Ticker

jQuery Easy Ticker is a news ticker like extension that infinitely scrolls down the list. Easy ticker is also highly customizable as well as adjustable with endless features and works fine with all the leading web browsers. jQuery Easy Ticker

Classy Countdown

Classy Countdown plugin allows user easily create clear round countdowns. The extension is fully customizable and contains 12 elegant themes. These themes are modifiable and use HTML5 canvas to render the circles. Classy Countdown

Classy PayPal

Classy PayPal plugin allows user to add elegant PayPal buttons to their website for instant and secure payments. Classy PayPal


LazyFade is a jQuery extension that dissolves a row of elements with some lazy effects. Discoloration of each next element delayed marginally giving a valued touch to the entire development. LazyFade.js

Using the CSS box-shadow Property

The css box shadow property can be implemented for various display scenarios in your web design projects. Let’s take a situation where you are required to display some text in a div element and show it as an information box with the shadow effect. This will be done purely in css with the HTML being used for showing the information inside a div element. In the next few sections, we will go from having a chunk of text that is not quite attractive to an amazing information box having the same text but with better display. We will start off with the following chunk of HTML code.

<div class="shadow">
<p>Wes Anderson umami biodiesel YOLO, Terry Richardson helvetica tousled street art master cleanse selfies Godard cornhole 8-bit pork belly scenester. Blog blue bottle Neutra, polaroid pug cliche dreamcatcher. Ethnic wolf church-key, Wes Anderson tattooed meh tumblr direct trade pug.</p>


This property has been around since css2. However, it can now be applied to images, borders and even text. You can specify the size, color, blur and offset values. You can even define the shadow styling options further with a comma separated list of shadow values. These have a 2 to 4 length value expression specified in the order below.

  • horizontal and vertical offsets
  • blur distance
  • spread distance
  • optional color value
  • optional inset keyword value

The keyword value comes in very handy when you want to create an inner shadow instead of the default outer shadow. The general syntax for the CSS3 box shadow is as follows.

box-shadow: Xpx Ypx Bpx Lpx #color;

Xpx refers to the horizontal offset, Ypx the vertical offset, Bpx the blur effect, Lpx the length of the spread and #color the color.

Adding a bit of css code with the format specified above transforms our chunk of text into an amazing information box!


CSS code

.shadow {
border: 12px solid blue;
background-color: orange;
border-top-left-radius: 60px 90px;
border-bottom-right-radius: 60px 90px;
box-shadow: 25x 30px 15px 1px rgba(0,0,0,0.4),
12px 12px 0px 8px rgba(0,0,0,0.4) inset;
-moz-box-shadow: 25px 30px 15px 1px rgba(0,0,0,0.4),
12px 12px 0px 8px rgba(0,0,0,0.4) inset;
-webkit-box-shadow: 25px 30px 15px 1px rgba(0,0,0,0.4),
12px 12px 0px 8px rgba(0,0,0,0.4) inset;
padding: 5px 20px;

As you can see, we have a shadow on our box which does not necessarily have to be square or rectangle in shape. Rounded corners make your site interesting and fun. In this case, the rounded corners have been achieved with the border-top-left-radius and the border-bottom-right-radius elements in the css code. There is a lot more that you can do with the css box shadow property and it comes in very handy in transforming your site into an exciting and fun experience for the user.

You can always play around with the values of the blur and spread distance in order to achieve the effect you need. Always remember to resize your box to fit the text that you have inside the div element. As you can see, CSS3 relies on heavy use of div elements in order to achieve control over the look of the website. There is much more that you can do with the box shadow such as layering several shadows within the box-shadow property, shadow on text, transitioning properties and a bunch of other styling options presented by this element.

In conclusion, the box-shadow property comes in handy when you are looking to achieve that shadow effect and give your text a better look. With this property, your site is totally transformed to an interactive and exciting experience for the user.

Web Design From Easy To Expert: 6 Great Tutorials

It’s easier than you might think to learn web design from scratch as long as you follow the right tutorials. The biggest mistake that some people make is trying to learn web design in the wrong order. Just like anything else, web design progresses from simple concepts to advanced ones, with everything you learn building on itself.

Using this guide, you’ll go from learning the basics of web design with HTML and CSS, to intermediate steps like using JavaScript to access an API, and on to advanced concepts like building and querying a database with SQL and PHP or handing events in real-time with AJAX. If you take these tutorials in order and slowly work through the steps, you’ll be able to design any website or online app that you can imagine.

1. Start With HTML

easyhtmlcode HTML is the language that tells your browser how to display text, which pictures to show, and what special content is embedded in your webpage. Without a strong grasp of the fundamentals of HTML there’s no way to understand the steps that come later, so it’s important that you start to learn web design with this series of tutorials. Once you’ve finished, you’ll be able to make basic web pages and better understand what’s really going on behind the scenes inside of your web browser.

2. Learn CSS In Style

By incorporating CSS into your web design it will be easier to control how browsers display your content. From setting the margins to managing color schemes and even the very beginnings of conditional programming, CSS is a common and versatile tool that web designers use in a variety of ways every single day.

3. Fast Functionality With Javascript

javascript-tutorialMost of the time, when something dynamic happens on a webpage JavaScript has at least a little bit to do with it. This will be your first foray into conditional programming and dynamic content on the web, taking information about a user’s actions and using it to modify your web page and change what they see. From simple things like changing the color of text when the mouse passes over it, to advanced scripts and even simple applications, JavaScript is the language that makes the internet come to life.

4. Building Web Forms

formguideForms are essential part of any website. Forms give the users a chance to reach out to you. It is important that you know how to build web forms and how to get it online. You should learn to build contact forms, calculation forms, order forms and other business forms. The forms provide a way for websites to capture leads and sales.

5. PHP And SQL For Data Driven Design

When it comes to professional websites, most of them are driven by databases. SQL, which is the most common database used today, provides a way to store information on the server in order to access it later. SQL databases can hold diverse kinds of information, from user’s passwords and account information to which advertising banner should be displayed next. Using PHP, you’ll be able to get to that data and use it in a meaningful way. Not only does PHP provide the tools to turn SQL queries into HTML effortlessly, it also can be used to easily put information into a database. If you’ve ever created a profile on a website or browsed a forum, you’ve used PHP and SQL.

6. Add In Some Action With AJAX

Finally, AJAX is one of the latest developments in the world of web programming. Websites like GMail, which update and display information without the need to refresh the page, use AJAX or systems like it in order to selectively update certain portions of a web page. In addition to that, AJAX adds event-driven programming to the web, much like the kind used in desktop and phone applications. If you want to truly master web design, AJAX is the technology to learn.

Refresh a page using jQuery

Imagine you want to refresh the current page after a certain user action. In fact, you don’t need any special jQuery handling for this. Plain Javascript has location.reload(); function that you can use in your event handler.



Note, however that this may load the page from cache. If you want to do a “full refresh” that fell fetch the page from the server again, do


Format a date using jquery

There are many ways to format an a date to display on a page. In this tutorial we will see how to format a date using jQuery.

Using jquery-dateFormat plugin

This plugin is especially useful when you have a pre-selected date display format. jquery-dateFormat makes it easy to format the date based on a format string.
Here is a sample:

document.write($ Date(), "Today: dd/MM/yyyy"));

The code above prints the date like this:

Today: 18/12/2014

Here is the link to the format pattern reference.

Pretty date formatting

prettyDate() function gives you the relative date that you often see in social media sites.
for example:

jQuery.format.prettyDate(new Date())

returns “just now”

This is useful in certain cases where the relative time reference is makes more sense, like the time of a comment. The date will be displayed like this

“1 minute ago”
“2 days ago”

Taking it global

When you have audience from different cultures and languages, you need to format the date, time, currency and numbers according to those cultures. In those scenarios, it is not advisable to use a fixed date format. You have to format the date according to the user’s locale.

Globalize.js is perfect for this purpose.
Using Globalize.js you can format the date according to user’s locale preference.
See why globalization

Globalize.format() function takes the date and formats it based on user preference and locale.
You don’t have to worry whether it is dd/mm or mm/dd

more on globalize date format.

Animate background color using jQuery

So you want to animate the background color of an element for some nice effects.
Here are the best ways to do it.

Using the Bitstorm color animation plugin

The easiest would be using Bitstorm color animation plugin
The usage is simple:

$('#yourdiv').animate({backgroundColor: '#fff'})

This will animate the background color from current color to white in a smooth animation
This plugin supports animating the color of border or text color as well.

Demo | Download Source

Using jQuery UI

If you already have jQuery UI included in your page, there is no need to add any other plugin (like the Bitstorm plugin mentioned above). The code is same.

More info about the animate() jQuery function

You can create awesome background effects using CSS3 and HTML5. Here is a tutorial on background image