Scrolling Tables

Hi,

       This week I am presenting a tip that helps you to design sleek web pages.Before discussion of the tip let me explain the problem.Usually in projects we will show the report as a result of the user action that generates a too long table.This table will makes you to scroll whole web page which not a intuitive to look and effects the beauty of the web page.

        There are a couple solution to this problem one the manage Pagination i.e., dividing the all the result into some reasonable parts and displaying a limited part and for renaming we have to provide navigation buttons or links. Implementation of this Pagination is tough (Of course,we will discuss about it in latter weeks ). 

        Another Solution to this problem simply making the body part of the table to be Scrollable.The ideal thing to do is to scroll the body of the table while leaving the headings fixed. It is possible to have a table with a scrolling body and fixed header with only HTML and CSS.

        CSS overflow property for creating scrollable regions in your document. This property is currently only supported on DIV and SPAN elements that have a width or height defined if the content that we are going to present is over the specified width and height browser will automatically forces the DIV or SPAN to scroll and forcing a table to scroll. Therefore, creating a scrollable table is more an art that requires careful manipulation of HTML and CSS.

Scrolling Table Example
Head1	Head 2	Head 3	Head 4

R1 C1	R1 C2	R1 C3	R1 C4
R2 C1	R2 C2	R2 C3	R2 C4
R3 C1	R3 C2	R3 C3	R3 C4
R4 C1	R4 C2	R4 C3	R4 C4
R5 C1	R5 C2	R5 C3	R5 C4
R6 C1	R6 C2	R6 C3	R6 C4
R7 C1	R7 C2	R7 C3	R7 C4
R8 C1	R9 C2	R9 C3	R9 C4
R1 C1	R1 C2	R1 C3	R1 C4
R2 C1	R2 C2	R2 C3	R2 C4
R1 C1	R1 C2	R1 C3	R1 C4
R2 C1	R2 C2	R2 C3	R2 C4
R1 C1	R1 C2	R1 C3	R1 C4
R2 C1	R2 C2	R2 C3	R2 C4
R1 C1	R1 C2	R1 C3	R1 C4
R2 C1	R2 C2	R2 C3	R2 C4

          The contents in the table above are scrollable. The header row stays static above the scrollbars.this table is actually composed of two tables - one for the header row and a second for the actual contents.To clean-up the appearance, we added a border to the bottom and left side of the DIV.

Source Code

       <table cellspacing="0" cellpadding="1" border="1" width="300" >
         <tr>
            <th>col 1 heading</th>
            <th>col 2 heading</th>
         </tr>
       </table>
       <div style="width:325px; height:200px; overflow:auto;">
         <table cellspacing="0" cellpadding="1" border="1" width="300" >
           <tr>
             <td>col 1 data 1</td>
             <td>col 2 data 1</td>
           </tr>
           <tr>
             <td>col 1 data 1</td>
             <td>col 2 data 1</td>
           </tr>
           <tr>
             <td>col 1 data 2</td>
             <td>col 2 data 2</td>
           </tr>
           <tr>
             <td>col 1 data 3</td>
             <td>col 2 data 3</td>
           </tr>
           <tr>
             <td>col 1 data 2</td>
             <td>col 2 data 2</td>
           </tr>
           <tr>
             <td>col 1 data 3</td>
             <td>col 2 data 3</td>
           </tr>
            <tr>
             <td>col 1 data 1</td>
             <td>col 2 data 1</td>
           </tr>
           <tr>
             <td>col 1 data 2</td>
             <td>col 2 data 2</td>
           </tr>
           <tr>
             <td>col 1 data 3</td>
             <td>col 2 data 3</td>
           </tr>
           <tr>
             <td>col 1 data 1</td>
             <td>col 2 data 1</td>
           </tr>
           <tr>
             <td>col 1 data 2</td>
             <td>col 2 data 2</td>
           </tr>
           <tr>
             <td>col 1 data 3</td>
             <td>col 2 data 3</td>
           </tr>
         </table>  
       </div>

This code will makes the following output:

col 1 heading	col 2 heading

col 1 data 1	col 2 data 1
col 1 data 1	col 2 data 1
col 1 data 2	col 2 data 2
col 1 data 3	col 2 data 3
col 1 data 2	col 2 data 2
col 1 data 3	col 2 data 3
col 1 data 1	col 2 data 1
col 1 data 2	col 2 data 2
col 1 data 3	col 2 data 3
col 1 data 1	col 2 data 1
col 1 data 2	col 2 data 2
col 1 data 3	col 2 data 3

There are four values to this property
Value Description
visible       The overflow is not clipped. It renders outside the element's box
hidden      The overflow is clipped, and the rest of the content will be invisible
scroll        The overflow is clipped, but a scroll-bar is added to see the rest of the content
auto          If overflow is clipped, a scroll-bar should be added to see the rest of the content

Some Examples from my implementations.. 


Displaying Search Result with Vertical Scroll Bar

Showing the thumbnails of the images with Horizontal Scroll Bar..

Okay guys,
This is up-to this week..I have collect the information from various websites and specified on only some examples which are solutions to problems in some non-functional requirements.. Let us meet next week with another tip and trick..

Thank Q,

bye bye

My Best Wishes
Happy Sankranti....!

regards,
M.Agni
Assistant Professor
ACE Team member
Aditya Edu. Group.

HTML 5

Hi All, 

This week I am coming up to your with a New and Interesting topic i.e., HTML5.

       HTML5 is an exciting and powerful standard for the development of advanced web pages. It offers the ability for web designers to integrate many convenient and flexible features into their web pages and greatly enhances the enjoyment and effectiveness of these sites.
        They have been developed by some very talented web designers and offer a great deal of information and support in terms of being able to adopt and use the HTML5 standard.

Features of HTML5

This the latest version have been considered as the new platform for streaming video capabilities into browser applications. JavaFX, Adobe Flash and Microsoft Silverlight obsolete are some of the potential plug-ins that can be used with this language.

It comes endowed with many interesting features like:

• Canvas technology: To draw graphics on web page, JavaScript has been used. Here are some of the drawing methods like circles, paths, boxes, characters and images that have been used by canvas element.
• Web videos: These days, most video are shown by plug-ins like Flash. HTML5 includes standard way with the video element for quality videos.
• Audio on web: mostly, all audios are played using plug-ins like Flash whereas, HTML5 indicate standard audio element to play sound files.
• Web Storage: There are two methods namely session storage and local storage used for storing data without any effect the website's performance.

Some Interesting Examples on HTML5 

Videos on the Web

       It is easy to embed videos in to webpage just using a simple <video> tag.Today, most videos are shown through a plug-in (like flash). However, different browsers may have different plug-ins.HTML5 defines a new element which specifies a standard way to embed a video/movie on a web.

Example

Source Code:

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />  
</video>

Support: IE 9,Chrome 6,Safari 5

New Input Types

Input type Email
      We have to make a hard coding to validate an email address to satisfy all then standard type. usually we use Regular Expressions to validate the Email. But now HTML5 will provides email type input by which our life will makes easier to validate the field.

Example:

E-mail:

Source Code:

    <form action="demo_form.asp" method="get">
         E-mail: <input type="email" name="user_email" /><br />
         <input type="submit" />
    </form>

Support: Firefox 4, Opera 9, Chrome 10

Input type Number

      It is a great challenge to the programmers to validate the numeric fields like age, marks,no.of persons, team size.The challenge is that the fields have to take only digits as input, the fields may have minimum and maximum value restrictions and a lot according to the application.. For all these things HTML5 is ready with a simple input type called number

Example:

Age:

Source Code:

        <form action="#" method="get">

       Age: <input max="30" min="18" step="3" name="points"          

                              type="number" value="18" />

       <input type="submit" />

   </form>

Support: Opera 9, Chrome 7, Safari 5

Input type Range
       HTML 5 Defines a new control for entering a number whose exact value is not important (like a slider control). You can also set restrictions on what numbers are accepted:

Example:

Red:

Green:

Blue:

Source Code:

<form method="get" name="f1">
Red: <input type="range" name="r" min="0" max="255"/><br>
Green: <input type="range" name="g" min="0" max="255" /><br>
Blue: <input type="range" name="b" min="0" max="255" /><br>
</form>


Support:  Opera 9, Chrome 4, Safari 4

New Form Attributes

multiple Attribute

The multiple attribute specifies that multiple values can be selected for an input field.

Note: The multiple attribute works with the following <input> types: email, and file.

Example:

Select images:

Try selecting more than one file when browsing for files.

Source Code:

<form action="demo_form.asp" method="get">
Select images: 
<input type="file" name="img" multiple="multiple" />
<input type="submit" />
</form>

Support: Firefox,Opera,Chrome,Safari

pattern Attribute
       The pattern attribute specifies a pattern used to validate an input field. the browser will automatically Validates the text with specified patterns
Example:

Pin Code:

Source Code:
<form method="get">
Pin Code: 
<input type="text" name="country_code" pattern="[0-9]{6}"
title="6 digit Pin Code" />
<input type="submit" />
</form>

Support: Firefox, Opera, Chrome

contenteditable Attribute
       It will enables the user to edit the paragraph on an web pages..
Example:

This is a paragraph. It is editable. Try to change this text.

Source Code:
<p contenteditable="true">This is a paragraph. It is editable. 
Try to change this text.</p>
Support: Almost all Browsers

References

1. http://www.w3schools.com/html5/default.asp
2. http://www.thehtml5tutorials.com 
3. http://html5tutorial.net/

Okay guys,
This is upto this week..I have collect the information form different websites and specified on only some examples which are solutions to problems in some non-functional requirements.. Let us meet next week with another tip and trick..

Thank Q,

bye bye

My Best Wishes

regards,

M.Agni

Assistant. Professor

ACE Team member

Aditya Edu. Group.