Tips and Tricks: January 2012

Sunday, January 29, 2012

JavaScript APIs

Hi All,
This is the 4th week of my Blog Tips and Tricks. I am thankful to one and all for giving me such an encouragement.

This week I am coming with some interesting topics called
JavaScript APIs

Image Viewer

When we are working in development of a Social Networking Platform Projects or a college website or some other else where there is great importance presenting the pictures, images, as a gallery or album in the application. As per the requirement we will simply use <img> tag with some navigation buttons(previous,next) at bottom of the image.

This is simple solution upto your requirement but to make it more impressive there should be a image viewer just like Picasa, Nero, FastStone, ACDSee PhotoViewer.

For This There are some predefined JavaScript APIs that provides these image viewer. In my practice I use Highslide JS to show some images as a gallery. As you see in facebook, google+ and remaings social networking website they are having their own implementations to view the user images. These APIs will provide javascript and css which have to put between the <head> tags. Greatness is we can implement highslide easily. As an Example here is a small viewer

You can download this API from
http://highslide.com/download-confirm.php?file=download%2Fhighslide-4.1.13.zip

Simple Usage

<html>
<head>

<script type="text/javascript" src="../highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="../highslide/highslide.css" />

<script type="text/javascript">
hs.graphicsDir = '../highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
hs.dimmingOpacity = 0.75;
// define the restraining box
hs.useBox = true;
hs.width = 640;
hs.height = 480;
// Add the controlbar
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: 1,
position: 'bottom center',
hideOnMouseOut: true
}
});
</script>
</head>
<body>

<div class="highslide-gallery">

<a href="../images/gallery1.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="../images/gallery1.thumb.jpg" alt="Highslide JS"
title="Click to enlarge" />
</a>

</body>

</html>

This will does not effect any of your application it simply add the special feature to it...

Date and Time Picker

Generally we have to take Date as input into a application to search the records, to view history, and so on..usually we will give an input field to enter the date with a caption besides is as (dd/mm/yyyy) specifying the date format to entered. Client may go wrong at any time with a invalid date entry. So we have to validate the this Date Value So, again we have to code for date validation. To this problem here is a simple solution that is Date Picker. they are a lot of APIs available in the internet providing such API with sample pages.

In my projects use the JavaScriptCalendar to pick the date. It will provides a simple implementation will excellent configuration settings

You can download this API from this link
http://javascriptcalendar.org/thanks.php

Source Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jsDatePick Javascript example</title>
<link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.min.css" />
<script type="text/javascript" src="res/jsDatePick.min.1.3.js"></script>
<script type="text/javascript">
window.onload = function(){
new JsDatePick({useMode:2,
target:"inputField",
dateFormat:"%d-%M-%Y"
});
};
</script>
</head>
<body>
Make a focus to the textfield to select the date
<input type="text" size="12" id="inputField" value=""/>
</body>
</html>

Richtext Editors

Regularly we are having textarea that makes the user to enter the multiply lines if the client have to enter the text to formatted i.e., to align, to makes so text fields a bold, and so usual formatting jus like a composer in gmail.. for this I found a API (web service) that provides a huge functionality that is NicEdit. Using the we can transform all the textareas as RichText Editors....

For Example

Source Code

Include the following tags in <head> tag

all the textareas will changes to Richtext areas...

References:

Ok guys,

Hope my example are usefull to you...
Let us meet next week with some more Interesting topics

My Best Wishes.

regards,
M.Agni
Assistant Professor
ACE Team member
Aditya Edu. Group.
Ph: 9491520200
Email: agni2020@gmail.com
agnim@aec.edu.in

Saturday, January 21, 2012

Work on Images

Hi All,

This week in presenting you few topics on images i.e., way of presentation of the images and the remaining things.
When we are designing our web pages there is huge headache on the alignment if the images in a paragraph. Regularly our intention is to keep the images besides a paragraph, form just pictorial presentation of the context. for this usually for this we will prefer a table in which one data part contains images and another contains remaining content. actually this is not a exact solution to our problem.
Now, I am presenting float,vertical-align property of CSS that makes you to float images, tables, list,..etc in different alignments.

Align images to the left

This is the way of aligning a image to left for this we have to define
<img src="jadoo.jpg" style="float:left"/>
else we can also define a class that applies to all images
img{
float:left; }
<img src="jadoo.jpg"/>

Align images to the right
Need your image to go to the right of your text and stay there like a good little image
<img src="jadoo.jpg" style="float:right"/>

Align images to the center (vertical)

This will makes your text line up to the middle of an image using CSS, useful for small button images and such.

.middle {
vertical-align:middle;
margin: 5px;
}
<img src="jadoo.jpg" class="middle">

Aligning text to the top of an image using "vertical-align:top;".
Aligning text to the bottom of an image using "vertical-align:bottom;".

Transparency of the Images

The three images above are all from the same source image. The only difference between them is what is called their "opacity level".It is done by make use of opacity CSS.
If you observe in some sites when menu items change when a mouse floats over the image as seen below (move your mouse over the images below to see this effect).

Implementation of Opacity
It just uses a normal image tag.

Opacity has levels, which means a numerical value. Different browsers have different ways of dealing with this, but for simplicity let's talk in percentage. The below image is the same image as above, but with 30 percent opacity...
The above image has opacity 30 applied to it, and to apply that opacity we have added a "class" to image like so...

.opacity30 {
filter:alpha(opacity=30); /* For IE */
-moz-opacity:0.3; /* For Mozilla */
-khtml-opacity: 0.3; /* Other */
opacity: 0.3; /* Other */

}

It works not only for Images but also for other tags as you see below..

This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box.

Source Code
<html>
<head>
<style type="text/css">
div.background
{
width:500px;
height:250px;
background:url(klematis.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
</style>
</head>

<body>

<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>

</body>
</html>

Reveal Transitions
Reveal transition filters are time-varying visual filters allowing content to be transformed in a prescribed manner. Their role is to visually transition a control from one state to another. Scripting languages must be used to change between the beginning and ending states for the 23 possible Reveal transition types. Transition filters can also be specified using syntax in the HTML META element to create blend transitions between page loads.
Syntax

Selector { filter: revealtrans([duration], [transition-type]) }
[duration] - Floating point value representing the length of time used for the transition. Value is given in seconds and milliseconds
[transition-type] - Integer code value (0-23) indicating the shape of the Reveal transition.

Transition Type	Description
0	Box In - Starts at box outside boundary and goes to center in a rectangular transition.
1	Box Out - Starts at box center and goes to outside boundary in a rectangular transition.
2	Circle In - Starts at box outside boundary and goes to center in a circular transition.
3	Circle Out - Starts at box center and goes to outside boundary in a circular increasing radius transition.
4	Wipe Up - Starts at bottom of box and transition works its way upward.
5	Wipe Down - Starts at top of box and transition works its way downward.
6	Wipe Right - Starts at left side of box and transition works its way to the right.
7	Wipe Left - Starts at right side of box and transition works its way to the left.
8	Vertical Blinds - Segments the box into vertical strips. Transition moves from left to right.
9	Horizontal Blinds - Segments the box into horizontal strips. Transition moves from top to bottom.
10	Checkerboard Across - Segments the box into a grid of squares. Transition moves from left to right.
11	Checkerboard Down - Segments the box into a grid of squares. Transition moves from top to bottom.
12	Random Dissolve - Randomly changes pixels in the box to their new state over the course of the duration time.
13	Split Vertical In - Starts at the left and right sides of the box and moves toward the center (closing sliding double door.)
14	Split Vertical Out - Starts at the center of the box and moves toward the left and right sides (opening sliding double door.)
15	Split Horizontal In - Starts at the top and bottom sides of the box and moves toward the center.
16	Split Horizontal Out - Starts at the center of the box and moves toward the top and bottom sides.
17	Strips Left Down - Starts at upper right corner of box moving toward the bottom left corner in diagonal line (page turn from top right.)
18	Strips Left Up - Starts at bottom right corner of box moving toward the top left corner in diagonal line (page turn from bottom right.)
19	Strips Right Down - Starts at upper left corner of box moving toward the bottom right corner in diagonal line (page turn from top left.)
20	Strips Right Up - Starts at bottom left corner of box moving toward the top right corner in diagonal line (page turn from bottom left.)
21	Random Bars Horizontal - Transition to new state occurs horizontal pixel line-by-line in random fashion until complete.
22	Random Bars Vertical - Transition to new state occurs vertical pixel line-by-line in random fashion until complete.
23	Random - One of the previous 23 reveal filter types is randomly used.

Implementation
Download the implementation by clicking here. It works only in IE.

There are few more topics to be discuss.. Let us see them in next week..

Thank Q guys,

regards,
M.Agni,
Assistant Professor,
ACE Team member,
Aditya Edu. Group.
email: agni2020@gmail.com

Saturday, January 14, 2012

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.

Saturday, January 7, 2012

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:

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:
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:

Source Code:

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

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

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

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:

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:
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

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.

Wednesday, January 4, 2012

Introduction to my Intention

Hi All,
I started this blog to help you design "a better web page". Here you will find the answers for most of your web design problems.

I will provide a useful guide that helps you in your projects as we have any problem in designing a functional and non-functional requirements. Usually my concentration is mostly on Projects and the solution for the problems we will face.....

From now every week I'll come up with a Problem and a simple technique to solve the problem. I am sure that my post will help you a lot...

Thank Q Guys

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

Tips and Tricks

Sunday, January 29, 2012

JavaScript APIs

Source Code

Saturday, January 21, 2012

Work on Images

Saturday, January 14, 2012

Scrolling Tables

Saturday, January 7, 2012

HTML 5

Videos on the Web

New Input Types

Wednesday, January 4, 2012

Introduction to my Intention

About Me

AdSense

...

SideShare