Tag Archives: Code

September 24, 2010

Keeping footer always at the Bottom of the Page

By Deep C

In a recent website work I had to keep footer always at the bottom regardless of the content. If there is no content or very less content then footer use to come up instead of sticking at bottom of the page. Here is the CSS solution I found for the same:

Lets say the page structure is something like this:

<html>
<head><title>TITLE</title></head><body>
<div id="page">
 <div id="header">HEADER</div>
 <div id="content">CONTENT</div>
 <div id="footer">FOOTER</div>
</div>
</body>
</html>

Then we just need to use the following CSS code for footer which we need to keep in head section or some CSS file which will linked in head section:

<!--
#page
{
 position:relative;
 height:100%;
}
#content
{
 padding-bottom:40px;   /* Height of the footer */
}
#footer
{
 position:absolute;
 bottom:0;
 width:100%;
 height:40px;   /* Height of the footer */
}
-->

and we are done. Just test in any browser :)

This can be quite easily done without using any CSS if we are using <table> tag with height attribute instead of <div> tag. for e.g.

<html>
<head><title>TITLE</title></head>
<body>
 <table width="100%" height="100%">
 <tr><td valign="top">HEADER</td></tr>
 <tr><td valign="middle">CONTENT</td></tr>
 <tr><td valign="bottom">FOOTER</td></tr>
</table>
</body>
</html>

Here table height is set to 100% to use whole page and valign is used for vertical alignment of .  height attribute can be avoided using style element.

This will work fantastic but might fail in W3C validation as height attribute is no more supported so better use the solution with <div> tag with CSS.

Note: I tested this in Chrome browser only.

Have Fun ;-)

4 comments   |  tags: , , , , , , | posted in CSS, Knowledge, Technical

July 9, 2008

Dynamically Adding and Removing Text Boxes using JavaScript

By Deep C

After many days I was just trying to work with PHP, MySQL and JavaScript yesterday. In one of the page I wanted to add/remove text boxes on demand (or say dynamically) so after much thought and search i found the solution in using JavaScript. Here is the sample of code which I used for my purpose and may also be beneficial for you web developers who wanted to add or remove text boxes dynamically.

It simply uses two functions:
addElement(): It first gets the element id where we want to include a new element followed by creation of new element and appending it inside the element.
removeElement(): It removes the last added new element.

<html>
<head>
<title>Adding and Removing Text Boxes Dynamically</title>
<script type=”text/javascript”>
var intTextBox=0;

//FUNCTION TO ADD TEXT BOX ELEMENT
function addElement()
{
intTextBox = intTextBox + 1;
var contentID = document.getElementById(‘content’);
var newTBDiv = document.createElement(‘div’);
newTBDiv.setAttribute(‘id’,'strText’+intTextBox);
newTBDiv.innerHTML = “Text “+intTextBox+”: <input type=’text’ id=’” + intTextBox + “‘ name=’” + intTextBox + “‘/>”;
contentID.appendChild(newTBDiv);
}

//FUNCTION TO REMOVE TEXT BOX ELEMENT
function removeElement()
{
if(intTextBox != 0)
{
var contentID = document.getElementById(‘content’);
contentID.removeChild(document.getElementById(‘strText’+intTextBox));
intTextBox = intTextBox-1;
}
}
</script>
</head>
<body>
<p>Demo of Adding and Removing Text Box Dynamically using JavaScript</p>
<p><a href=”javascript:addElement();” >Add</a> <a href=”javascript:removeElement();” >Remove</a></p>
<div id=”content”></div>
</body>
</html>

Just drop me a comment if you have any suggestion, comments or query.

35 comments   |  tags: , | posted in JavaScript

Follow

Get every new post delivered to your Inbox.