Web Designing Made Easy

Custom Alert Message

2012-03-17T07:46:00.002-07:00

Custom Alert message is new dynamic section which is used in almost every website. This message is used to replace the default alert message which is triggered from Javascript i.e. window.alert. I will show how both the images look like..

You can see the difference between the above two images 1st image looks odd which the second image looks excellent. We customize the message in out own fashion which is an advantage.
The first step in designing this message is use the same old but useful "div" tag. Since Content is simple i will directly post the div content code here..
  <div id="divWindow">
  <table style="width:100%">
  <tr>
  <td colspan="2"  style="border-bottom:thin solid gray">
  <img id="imgClose" src="Close.jpg" width="20px" height="20px" align="right" />
  td>
  tr>
  <tr>
  <td colspan="2">
  <p>
  This is an alert message from the Web Site Please Check your User Name and Password.p>
  td>
  tr>
  <tr>
  <td align="right" style="width:50%">
  <input id="btnOk" type="button" value="ok" style="width:60px" />
  td>
  <td align="left">
  <input id="btnCancel" type="button" value="Cancel" />
  td>
  tr>
  table>
  div>
If you run the div in Html we would get an awkward design like shown below

Div Without Styles

Now we will apply some styling to the above div to make it look good by default so that we can use anywhere.
#divWindow
{
  width:0px;
  height:100%;
  border:thick solid gray;
  position:relative;
  top:0px;
  left:500px;
  visibility:hidden;
  z-index:99;
}
table
{
  visibility:hidden;
}
I used Visibility as Hidden in order to display dynamically if you use visibility as visible for both div and table we would get that message which i showed above.
I used table as hidden because i want to display the content after the div is loaded which is implemented using jQuery.
Now what we will do is that display the alert message with some animation such that the message expands from the middle of its width. Hence i set the width to 0px initially in the css as u can see the above css code.From 0px we will increase it to 400px to display the full message.
Here is the default web page

Initial Web Page

Here are the entire sequence of events which took place while loading the message dynamically.

With width 0px

With Width like 100px

After Div Loaded

After Table i.e. entire Content loaded

Here is the code for javascript which i have written while clicking the Custom Alert button.

Since the event should take place once every time i used count. Actually we are not expanding the div, we are showing the effect by expanding the width from 0px to 400px and simultaneously moving the div to left side. From the above code u can see left i.e. -=200px which is half of the width of the div content.

Again when the user clicks the cancel button we have to reinitialize all the css properties so that the again when we have to show the message we have to display using the initial setting.

$("#btnCancel,#imgClose").click(function(){
  $("#divWindow").css("visibility","hidden");
  $("#divWindow").css("width","0px");
  $("#divWindow").css("left","500px");
  $("table").css("visibility","hidden");
  count=0;
  });
  $("#btnAlertClick").click(function(){
  window.alert("This is an alert message from the Web Site Please Check your User Name and Password.");
  });
  });

Window.alert is the default javascript message.

Here is the entire javascript don't forget to use the jQuery library
var count=0;
  $(document).ready(function () {
$("#btnClick").click(function () {
if(count==0)
{
  $("#divWindow").css("visibility","visible");
  $("#divWindow").animate(
  {
  width:'400px',
  left:'-=200px'
  }, "fast",function (){
  $("table").css("visibility","visible");
  });
  }
  count=1;
  });
  $("#btnCancel,#imgClose").click(function(){
  $("#divWindow").css("visibility","hidden");
  $("#divWindow").css("width","0px");
  $("#divWindow").css("left","300px");
  $("table").css("visibility","hidden");
  count=0;
  });
  $("#btnAlertClick").click(function(){
  window.alert("This is an alert message from the Web Site Please Check your User Name and Password.");
  });
  });

Here is the Working Link for the above Custom Alert Message http://jsfiddle.net/prabhavithreddy/ZvCE8/2/

Collapsible Panel

2012-03-03T22:36:00.000-08:00

Collapsible Panel is a technique in Web Designing where we can show one Panel at a time. Panel is nothing but a section which contains description about a Title. Here I am going to create a 4 Collapsible panels which is similar this http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Accordion/Accordion.aspx

The above link contains controls regarding Asp.Net Ajax. In order to use that control you require all the necessary tools and frameworks. Instead of that we can make use of a browser friendly library called jQuery, which is free and open source.

To create a Collapsible Panel we need mainly two Div's one is for header and other one is for description about the header or title.

The below shows how the two div's are arranged...
<div id="Header"></ div>
<div id="Description">
</div>

This is the main structure from which we will start to create a fully functional Collapsible Panel

To start with Collapsible Panel first we have to define Header/Title and Description liks this

<div id="Html" class="Header" onclick="showDescription(this)">
  1.Html
  </div>
  <div id="HtmlDescription" class="Description">
  HyperText Markup Language (HTML) is the main markup language for web pages. HTML
  elements are the basic building-blocks of webpages. HTML is written in the form
  of HTML elements consisting of tags enclosed in angle brackets (like
  <html>
  ), within the web page content. HTML tags most commonly come in pairs like <h1>
  and <h1/>, although some tags, known as empty elements, are unpaired, for
  example <img>. The first tag in a pair is the start tag, the second tag is
  the end tag (they are also called opening tags and closing tags). In between these
  tags web designers can add text, tags, comments and other types of text-based content.
  </div>
This results the following output which is shown below

Header and Descriptio without styles

Now we will start to apply styles to the header and description. Below is the following css

.Header
{
width:600px;
height:30px;
text-align:left;
font-size:larger;
font-style:normal;
font-family:@Arial Unicode MS;
font-weight:bold;
background-color:#0033AA;
color:White;
border:thin solid green;
margin-top:2px;
}
.Description
{
width:600px;
height:150px;
border:thin solid gray;
color:Black;
background-color:Silver;
display:none;
}

Remember that I used display:none; inorder to make the description hidden when the page loads

Now with the Css the output appears as shown below...

Collapsible Panel with styles

Similarly Try to use 2 or more headers for the Collapsible Panel to make it look attracting here is the output when i used with 4 Panels

Collapsible Panels with 4 Panels with Description Hidden

Now we have to add effects so that the description is shown when we click the Header/Title, so do so there is a function called slideToggle which expands the panel when we click again it collapses to the original state when we again click on the header.

The function is...

$("#id of the element").slideToggle("slow");

slow is a parameter which specifies the effect rate.

Now we will apply this code to all the panels, here is the entire java script

Here is the final output...

Collapsible Panel where Css is Expanded and remaining Hidden

Here is the link for live demo http://jsfiddle.net/C97Qq/

Html Progress Bar

2012-03-02T23:41:00.001-08:00

Progress Bar is a good tool to display the progress of any content which takes time to load. Progress Bar helps the user to understand the status of the task running behind, otherwise users think that the page is not working when the page is performing some task like saving the content or loading the data.

Here in my post I am going explain a simple progress bar made of simple HTML tags and jQuery. You can learn jQuery here http://www.w3schools.com/jquery/default.asp which is very easy to learn.
Below is the progress bar which I implemented...

Progress Bar Running

Similar to my recent posts we will start from scratch. First the logic behind the progress bar is to use Parent and Child div's. Parent div will act as border and child div will act as a progress bar. Then when the user clicks on the next button we will just increase the width of the child div which appears as a progress bar to the user. Here we will use table to make the progress bar look good.

Below is the parent and child div...
<div id="Parent">
  <div id="Child">
   </ div>
</div>
Now we will wrap the progress bar with a table, below is the html code
<table id="tbl_progress" width="50%" border="1px">
  <tr>
  <td colspan="3" style="height: 20px">
  <div id="Parent">
  <div id="Child">
  </div>
  </div>
  </td>
  </tr>
  <tr>
  <td style="text-align: center">
  <input type="button" id="btn_prev" value="Prev" />
  </td>
  <td style="text-align: center">
  <input type="button" id="btn_next" value="Next" />
  </td>
  <td style="text-align: center">
  <input type="button" id="btn_clear" value="Clear" />
  </td>
  </tr>
</table>
Now we will apply some Css styling to order the contents and set the background color for the child div which is very important since it the main logic behind the working of progress bar
The Css code is shown below
#Parent
{
  position:relative;
  left:15%;
  width:200px;
  height:10px;
  border:thin solid Black;
}
#Child
{
  position:relative;
  left:0px;
  top:0px;
  width:200px;
  height:10px;
  background-color:Green;
}
#tbl_progress
{
  position:relative;
  left:30%;
  border-collapse:collapse;
  border-color:red
}
After applying Css the Html progress bar with progress 0% is shown below

Progress Bar with 0%

Without any java script our code will not work. When the page loads the progress bar should be empty, to do so we have to set the width of the child div to 0px below is the code
$("#Child").width("0px");
Now when we click the Prev Button the width of the child div have to decrease by some quantity in my case I took it as 20% since my parent div width is 200px so here it will decrease by 20px.
Here is the corresponding javascript...

$("#btn_prev").click(function () {
if ($("#Child").width() == "0") {
window.alert("Progress Bar reached starting point cannot be decreased");
}
else {
$("#Child").width(($("#Child").width()-$("#Parent").width()/10)+"px")
}
});
Similarly when we click the Next button the child div width is increased by 20%

$("#btn_next").click(function () {

if ($("#Child").width() == $("#Parent").width()) {

window.alert("Progress Bar reached ending point cannot be increased");

}

else {

$("#Child").width(($("#Child").width() +( $("#Parent").width() / 10))+"px")

}

});

And last but not the lest when we click clear we have to reset the child div width to 0px below is the code...

$("#btn_clear").click(function () {
$("#Child").width("0px")
});

Here is the entire javascript code... Not to forget the main jQuery Library

Here is the final Output when we run the page...

Progress Bar at 100%

Customized Tool Tip

2012-02-26T01:56:00.001-08:00

These days Tool Tip has became a great tool for displaying dynamic data without refreshing the page. There is a default Tool Tip which is a simple rectangle which looks odd. Now I am going to create a customized tool tip like shown below...

Oval Tool Tip

First thing in designing this tool tip is to find out the logic. The oval which you are seeing is nothing but a background image, which is placed inside a div tag.

To create this image open MS Paint and draw three small ovals and one big oval as shown below...

Oval Shape

Save this Image as Oval.jpg and add it to your folder where Html page is placed. Now create some Vertical menus. I am directly pasting the code how to create menus see my HTML Menus Post.
Html Content:

<div id="Menu">
  <div id="html" class="MenuItems">
  Html
  </div>
  <div id="ajax" class="MenuItems">
  AJAX
  </div>
  <div id="javascript" class="MenuItems">
  JavaScript
  </div>
  <div id="css" class="MenuItems">
  CSS
  </div>
  <div id="jquery" class="MenuItems">
  JQuery
  </div>
  <div id="Oval">
  <div id="Content">
  div>
  </div>
  </div>
#Menu
{
width:10%;
position:relative;
left:0px;
}
.MenuItems
{
border:thin solid Gray;
text-align:center;
position:relative;
background-color:Maroon;
color:White;
height:20px;
}
.MenuItems:Hover
{
background-color:Red;
}

This create the following Page:

Vertical Menus

The id's Oval and Content are nothing but parent and child div which is used to hold the Oval image as their background. To set their background use the css style property background-image. Below is the actual code...

#Oval

{

background-image:url('../Oval.jpg');

width:300px;

height:150px;

}

Since my Image is in my parent directory i use ../ This css settings create the parent div tag as below...

Oval Div

Now we have to add child Div to enable to write content so that the text appears to be in the oval. In order to show the child div i use background color...
The Css for child div is :
#Content
{
width:165px;
height:100px;
position:relative;
background-color:Gray;
left:30%;
top:30px;
}

These Css settings create the child div as follows:

Child Div with background color

Later we have to remove the background-color property to make it as a real oval content. Now the position of the entire Parent Div is below the Vertical menus what we want is when the user moves the mouse over the menu item we have to show them a tool tip hence initially we will hide the Div and later we will show the Div using Jquery.
You can learn JQuery from http://www.w3schools.com/jquery/default.asp as it is very easy.
Modify the Css content of the Parent and Child Div's as shown below.
#Oval
{
background-image:url('../Oval.jpg');
width:300px;
height:150px;
visibility:hidden;
position:absolute;
}
#Content
{
width:165px;
height:100px;
position:relative;
left:30%;
top:30px;
}

Now add the following script inside the head content, first provide a link for the jQuery library as shown below...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
script>

Now when the user moves his mouse over the menu item we have to display the tool tip at the end of the menu item to do that we use the Css property's called position, left and top. Since the Parent Div i.e Oval is inside of Menu(div) hence it displays relatively to the Menu Items.
To set the position of the tooltip at the end of the menu item use the following logic..
$("#Oval").css("left", ($(this).position().left+$(this).width()+2) + "px");

$(this).position().left represents the current menu item position
$(this).width() represents the current menu item width
2(px) is used for adjusting the tool tip away from the end of the menu item

Similarly adjust the position of the top property as shown below
$("#Oval").css("top", $(this).position().top + "px");

Now display the Tool Tip when the user moves his mouse over the menu...
$("#Oval").css("visibility", "visible");

Now add the content dynamically to show the effect...
$("#Content").html("Hi this is from inner div." +
"This div is the clild div." +
"The parent div has Oval as background." +
"This is currently showing from " + $(this).text());

Now the final one is that when the user moves his mouse away from the menu item we should hide the tool tip to do so add the following script...
$(".MenuItems").mouseout(function () {
$("#Oval").css("visibility", "hidden");
});

The entire JavaScript is shown below...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
  </script>
  <script type="text/javascript">
  $(document).ready(function () {
  $(".MenuItems").mouseover(function () {
  $("#Oval").css("left", ($(this).position().left+$(this).width()+2) + "px");
  $("#Oval").css("top", $(this).position().top + "px");
  $("#Oval").css("visibility", "visible");
  $("#Content").html("Hi this is from inner div." +
  "This div is the clild div." +
  "The parent div has Oval as background." +
  "This is currently showing from " + $(this).text());
  });
  $(".MenuItems").mouseout(function () {
  $("#Oval").css("visibility", "hidden");
  });
  });
  </script>

Hence the following result is shown below...

Final result for the Customized Tool Tip

HTML Menus

2012-02-18T23:32:00.000-08:00

In web designing the most important component is Menus. Almost 90% of the web sites we see today contains menus. Now we are going to see how can we make these menus through HTML without using any advanced tools like Adobe Dreamweaver etc..
There are many ways to create menus
1)Using Div's
2) Using Lists

We will see the first one i.e Div which is very flexible

Step-1: Open any html editor or an IDE and write the following html code
<html>
  <head>
  <title>Menustitle>
  <head>
  <body>
  <div class="Menu">
  <div class="MenuItems">
  <a href="#">Homea>
  </div>
  <div class="MenuItems">
  <a href="#">Htmla>
  </div>
  <div class="MenuItems">
  <a href="#">Cssa>
  </div>
  <div class="MenuItems">
  <a href="#">JavaScripta>
  </div>
  <div class="MenuItems">
  <a href="#">AJAXa>
  </div>
  </div>
  </body>
</html>
You will see the following output as shown below:

From the above image we can see that the div items are aligned vertically and due to anchor tag's default css properties the text got underlined. Now to remove the underline add the css lines to your code as shown below
a
{
text-decoration:none;
}
which results in the following output:

Now we have to align them horizontally to do this add the css properties to the MenuItems as
.MenuItems
{
  width:200px;
  height:30px;
  vertical-align:middle;
  display:table-cell;
  text-align:center;
}

which results in the following output:

From the above output we can see that there is a small gap between the border and the MenuItems and also we can use border so make it look more beautiful.

To remove the gap add the css property to the Menu
.Menu
{
position:absolute;
top:0px;
left:0px;
}
To add the border use css border-style and border-width properties as shown below
.Menu
{
  position:absolute;
  top:0px;
  left:20%;
  width:60%;
  border-style:solid;
  border-width:thin;
}
This results as

Almost done we have to add more styling and make it look beautiful, add the following css lines to Menu and MenuItems
.Menu
{
  position:absolute;
  top:0px;
  left:20%;
  width:60%;
  border-style:solid;
  border-width:thin;
}
.MenuItems
{
  width:200px;
  height:30px;
  vertical-align:middle;
  display:table-cell;
  text-align:center;
  background-color:gray;
  border-style:solid;
  border-top-width:0px;
  border-bottom-width:0px;
  border-left-width:0px;
  border-right-width:thin;
}

see from the above that we are using width as 60% and left as 20% which means that we are aligning the menu towards the center of the screen

And the final thing when we move the mouse over the menu the background color should change so that user know's the response.
To do so as the following css

div.MenuItems:hover
{
background-color:#424242;
}

That's it designing a Menu is as simple as that.