how to display footer at bottom of page

Hi Friends,

Once in my project, I came across with CSS is dynamic layout. I need to develop footer which stick to the bottom of a page. For example, consider the condition of regardless the height of the content of a page, the footer should stick to the bottom of the page.

When an HTML page contains a small amount of content then footer comes halfway up the page leaving a blank space underneath. This can look bad, particularly on a large screen.

There are several ways to make a footer stick to the bottom of a page using CSS, but the cleanest and most well tested method I have come across is CSS Sticky Footer.

You will need to structure your webpage in the following way in order to manage footer at the bottom of page.

This is your HTML part:

 
Page Content Comes Here ....... Page Content Comes Here .......
Page Content Comes Here ....... Page Content Comes Here .......

Page Content Comes Here ....... Page Content Comes Here .......
Page Content Comes Here ....... Page Content Comes Here .......

Page Content Comes Here ....... Page Content Comes Here .......
Page Content Comes Here ....... Page Content Comes Here .......

Page Content Comes Here ....... Page Content Comes Here .......
Page Content Comes Here ....... Page Content Comes Here .......

This is your CSS part:

html,body {
	margin:0;
	padding:0;
	height:100%;
}
#container {
	min-height:100%;
	position:relative;
}
#header {
	background:#c2dcf4;
	padding:10px;
}
#content {
	padding:10px 10px 80px 10px;
}
#footer {
	background:#ccc;
	width:100%;
	height:80px;
	position:absolute;
	bottom:0;
	left:0;
	padding:0px 10px 0px 10px;
}

The above CSS will keep your footer at the bottom of the page but you will need to make a few tweaks to the code.

You need to make sure that height of your footer and bottom margin of your content should be same. you can see in the above example.

You can see online demo from here, sticky_footer

Hope this will help you !!!.

How to show table cell element as a separate table row element

Hi friends,

Once in my project I want to show table cell element as a separate table row element So I have searched on it and find the solution on same.

Let me share it with you; we can do it by using css style properties

See the below example:



First Second Third Fourth

Here, you can see that there are one table row and four table cell. Now I want to all table cell as a separate table row element.

You can see that I have defined class in table cell i.e. “row”. In this class i have display element as a table-row which fulfill my requirements.

Hope this will also work for you !!!!.

How to show div vertical/horizontal scroll

Hello All,

All we know that by overflow property we can handle overflow of element. Sometime we want overflow only vertical or horizontal. To achieve this we can set overflow-x and overflow-y.

/* For vertical scroll */
scroll text....scroll text....scroll text....scroll text....scroll text....scroll text....scroll text.... scroll text....scroll text....scroll text....scroll text....scroll text....scroll text....scroll text....
/* For horizontal scroll */
scroll text....scroll text....scroll text....scroll text....scroll text....scroll text....scroll text.... scroll text....scroll text....scroll text....scroll text....scroll text....scroll text....scroll text....

Here white-space is also important to set overflow. With white-space we can set wrap and nowrap default white-space is wrap or normal.

Hope it will help someone.

How to hide close button from title bar in jquery UI Dialog

Hi Friends,

Today I have a requirement to hide the jquery ui dialog close button from title bar.

we can do this easily by using jquery css but this will hide globally from our project.

I want to hide it in just one page and other page will show the button when user opens the modal dialog.

I have used below code for above functionality.



    
    
    

Here, I have used jquery function on open event for hiding a close button; see the below line
open: function (event, ui) { $(this).closest(‘.ui-dialog’).find(‘.ui-dialog-titlebar-close’).hide(); }, which fulfill my requirement.

This is html part of my page :


Sample demo of jquery modal popup

click here top open dialog box

Sample content of modal popup window comes her

This is sample jquery modal popup window...

Design this as per your requirement


This is online demo for your help, jquery_title

Hope this will help you !!!

Simple html tooltip using css3

Hi Friends,

Sometimes we need to show content details as a tooltip in our project. We can do this by different ways.

Today I am going to show simple html tooltip using css3.

I have just use the title tag of anchor tag for showing the detail content in tooltip.

Lets see how can we implement it;




Define above style in html header section




Here, I have used anchor tag with title attribute which is used for showing the detail content as a tooltip.

You can see the demo from here, css3-tooltip

Increase textbox width onclick by jQuery

Hello Friends,

Today i want to share one small example of increase textbox width onclick by jquery. Actually to increase width of textbox we will animate textbox with jquery.

We will use following code to animate textbox.

        $(document).ready(function ()
        {
            $('#txtSearch').focus(function ()
            {
                /*to make flexible, store the current width in an attribute*/
                $(this).attr('width-default', $(this).width());
                $(this).animate({ width: 250 }, 'slow');
            }).blur(function ()
            {
                /* restore the original width */
                var w = $(this).attr('width-default');
                $(this).animate({ width: w }, 'slow');
            });
        });

Replace txtSearch with your textbox name and also change width in animate as appropriate your width. Enjoy!!!

How to open and close jquery UI dialog box

Hi Friends,

Today I am going to represent how to use jquery dialog box in html page.

In this article I will describe, How to open and close jQuery UI Dialog box on click of anchor tag.

Add below code in your html header section







I have added online jquery script reference. you can download it from those URL.

Now add below code in html body section


Sample demo of jquery modal popup

click here to open dialog box

Sample content of modal popup window comes her

This is sample jquery modal popup window...

Design this as per your requirement


That’s it.

Click here for online demo of jquerymodal

How to grayout google map

Hello,

Recently, one of my client need gray Google map. So, i have done it simple way which i want to share with you.

To add Google map and gray it out add following code.



In html add following code

Here, oceanStyle is for gray style and then add oceanMapType. In Options mapTypeIds add grayscale then set mapTypes in map.

All done. Now you will see your map in grayscale. enjoy!!!

Google Map integration using API v3

Hello,

Now a days google map integration is common solution to show the address and markers in web application.

Google Map API provides a flexible way to integrate maps in your web application.

Today I am going to provide information about the latest Google Maps API V3.

In the earlier versions of the Google Maps API, we need to register web application with Google for generating an API key but in new version google eliminates the registration process.

Lets take a simple example of google map, I have created one simple html page for displaying google map.
see below code for generating a google map:



    

    

    


    

I have used google map API V3 “https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false” in above code. you can see it in header section.

After execution of the above code, you will get below output.

map1

You can see that I have used different properties for google map control like zoom, mapTypeControl, scrollwheel, zoomControl etc. You can set it as per your requirements. For more details, please see this link google map properties

click here for demo.

I hope you enjoyed this post.

Rounded corner close button in html

Hello All,

Sometimes we need rounded corner close button and we are using background image for that but now in css3 we can do it by using “border-radius” property.

Please check this link for border-radius syntax and details.

Today I am going to represent how to make rounded corner close button on other element.

see below example



    
    


    
 
X

Here, I have created close button on top right cornet of image.

I have defines class “closebtn” in span which contains anchor tag with onclick event.

I have used top and left for positioning a button on image. You need to change this property as per your image size.

see the output of above code :
closebtn