Add a css Class Using Jquery

To use Css Class in an HTML Tag we can use a Jquery function addClass(). This function add a css class into your HTML tag.The most intresting things is that you can use this class on a eventhandler also, To get effects when a client/user response on it.
This is an example to add a css class into a Html Tag

<script type="text/javascript">
$(document).ready(function(){
$('.click').click(function(){
$('p').addClass('green');
});
});
</script>
<style type="text/css">
.green{ color:green;}
</style>

Write this code into your body tag
<button class="click">Click Me</button>

What is Jquery and How it Works

Jquery is a Library fucntion of Javascript.It's very easy to write and very much faster than Javascript. When we use onLoad event handler on body tag ,the onload function will fired when all body content will download successfully ,that means all the image should download completely,then only this event will fired.But in Jquery when your Html DOM(Document Object Model) will load completely than the Jquery function can be fired,it's no need to wait for downloading any Image.That is why it is very nuch popular than other language/script.

For example I am going to give red color into all h1 tag When this page will loaded. For that i will write

<script type="text/javascript">
$(document).ready(function(){
$('h1').css('color','red');
});
</script>

Before Run this script You need to link JQUERY Library into your page which you can get from these links
http://code.jquery.com/jquery-1.4.2.min.js
or you can use this one
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

Attach any one of this script then You can see the effect only

Mouseover effect using Javascript and css

Mouse over effect can be done by css e.g(button:hover{background:red;}.But this css will not work in IE6. So it needs to use java script for mouse over effect in a button .By using Javscript it can be possible to show mouseover effect in every browser. The demo of this script is applied in the button given below.

This effect will work in every browser.The javascript of this button is given bellow

<input style="width:113px; height:31px; border:none; background:url(button.gif);" onmouseover="this.style.background='url(buttonHover.gif)';" onmouseout="this.style.background='url(button.gif)'" type="button" value="See here" />

Show a messagebox By javascript

If you want to give a message to User thesn Simply right a javascript.Basically most of the websites uses this messagebox to show any kind of error or message to the User

To Show this Message simply write a script in header Section of your Html
I have Used this message to show when somebody clicks on a buton

This is the code you need to write in header section of your html

<script type="text\javascript">
function message(){
     alert("Type your message here");
}
</script>

Write this code into your body part

<input type="button" onclick="message();" value="click me" />

CSS Hacks for Internet Explorer 8

Like IE6 and IE7,IE8 also needs some hacks .Let the css is something like given below

.style1{ width:320px;}

If this css will not show perfect only in IE8 then we need to write

.style1{ width:320px;width:300px\9;}

Using ( \9 ) sign indicates that this css will render by only in IE8 Browser not any browser will understand it's meaning.

CSS Hacks for Internet Explorer 7

Like IE6 ,IE7 also needs some hacks some times.For that we need to write the css something like given below

.style1{ padding:10px 0 0 20px;}

If this css will have any problems in IE7 then we need to write the css like

.style1{ padding:10px 0 0 20px; !padding:10px 0 0 18px;}

Using ( ! ) sign indicates that this css will render by both IE7 and IE6 not in other browser.

CSS Hacks for Internet Explorer 6

Css Hacks is the most important things for all the designer,if they want to show a page perfect in every browser. Basically all browser show perfect design,But all IE Browser have some problems to show the actual view for that it needs to give some css hacks

Css hacks For IE6

when we give the width of a block level element by css maybe that width increase in IE6 or when we give padding or margin of an Element Ie6 may show some more Padding or margin.That time it needs to write the _padding or _margin and decrease the padding or margin or width;By writing _width or _padding will effect only in IE6 browser not in other browser. For Example

.style1{ width:500px;}

If this width will not show in IE6 perfectly then we need to write this class like

.style1{ width:500px;_width:490px;}

Ie6 will render the 2nd width but all browser will render the first width

Show or hide an image by javascript

It is very easy to hide or show an image according to client's click.
simply call a js function in onclick event handler for example:-

Write this script into your header Tag

<script type="text/javascript">function showblock(){ var img=document.getElementById('image');img.style.display="block"; } function hideblock() { var img=document.getElementById('image') img.style.display="none"; } </script>

Write these code in to your body tag

<div id="image"><img src="http://img1.blogblog.com/img/navbar/icons_orange.png" /></div><input type="button" onclick="showblock();" value="Show image" /> <input type="button" onclick="hideblock();" value="Hide image" />

File Uploading by php

Uploading Files to server is not so hard it's very simple.
$dir="images/";  // Give your server path where to upload
$uploaddir=$dir.basename($_FILES['f1']['name']); // to Give a new file name
if(move_uploaded_file($_FILES['f1']['tmp_name'],$uploaddir))
    {
    }

XHTML VS HTML

I have asked many people about the difference between HTML and XHTML , Somebody given me the right answer and somebody couldn't. Lastly I got the difference between HTML and XHTML, which is given below.

1. XHTML documents Should be properly nested whether it's not important in HTML
2. XHTML tags should be always closed
3. XHTML documest should be only one root element
4. All XHTML tags should be writen in lowercase ,Uppercase is not allow