simple jquery, css drop down effect

In this post you will found that how to make simple jquery drop down effect on mouseover. For this first we will create the menus with the help of html and css. Here are some html :

code:

 
  
Home
  
About us
  
Products

   
    
Product 1
    
Product that we need
    
Product 3
    
Product 4
    
Product 5
   
  
  
Contact Us
  
Enquiry
 

After these html code now we have to give some css styles like this:

div scroll with jquery

Scrollable content area is looking more beautiful when we add some jquery events on it, beside this it will possible throught javascript as well, to make two functions that will call on the mouseover and the mouseout html attributes. But in this example we make it more easy with the help of .hover() event represented by jquery. You will found more about the .hover() event on the jquery official website.

#container{
 width: 500px;
 height: 200px;
 overflow: hidden;
 margin: 0 auto;
 padding: 3px;
 border: 2px solid #42826C;
 background: #A5C77F;
}
p{
 font: 13px/18px Verdana, Arial, Helvetica, sans-serif;
 padding-right:20px;
}

Here is the html part:

        
  
Enter the text here as much as you want. 
 

Now here is the jquery file:

$(function(){
 
 $('#container').hover(
  function(){
   $(this).css({'overflow':'auto'});
  },
  function(){
   $(this).css({'overflow':'hidden'});
  });
});

Beautify table with jquery selectors :even and :odd

If we talk about the Data Represent into the Website than it is better the best way to display your data into tables, cause IE6 creates lots of problem to in CSS to align the data. And Jquery plays his important roll to beautify that tables Data. The :even, :odd selectors make it beautiful to represent the data. Here is an example :

$('table').css({
	'border-collapse':'collapse'
});

$('tr th').css({'background':'#666666', 'color':'#ffffff', 'font-family':'verdana', 'font-weight':'normal'});

// Here using jquery selectors
$('tr:even').css({'background':'#c3c3c3'});
$('tr:odd').css({'background':'#e3e3e3'});

This code will output similar as like

echo the php code with the help of jquery and css

hello friends,
it's so cool to having work experience with multiple things. In this example i want to share tell a simple way to add css, jquery with php.
here is my example.

$string = "Hello world!";

now we have to give some css in our example

.p_style{
 color:#ff6600;
 background:#ccc;
 padding:5px;
 }

now lets work