Category Archives: Tutorials

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">
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
<td>row 1, cell 4</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
<td>row 2, cell 4</td>
</tr>
<tr>
<td>row 3, cell 1</td>
<td>row 3, cell 2</td>
<td>row 3, cell 3</td>
<td>row 3, cell 4</td>
</tr>
<tr>
<td>row 4, cell 1</td>
<td>row 4, cell 2</td>
<td>row 4, cell 3</td>
<td>row 4, cell 4</td>
</tr>
</table>
</div>

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:

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

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

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:

.tableContainer{
height: 150px;
width:300px;
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

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>
</div>

Box-Shadow

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!

info-box

CSS code


.shadow {
width:400px;
height:120px;
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

css-tutorial
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.

http://www.htmldog.com/guides/css/beginner/

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.

http://www.codeproject.com/Articles/755/JavaScript-For-Beginners

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.
http://www.html-form-guide.com/contact-form/php-contact-form-tutorial.html

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.
http://www.tizag.com/mysqlTutorial/index.php

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.
http://learn.jquery.com/ajax/