Pages

▼

Diiferance between mouseenter & mouseover similerly mouseleave & mouseout

mouseenter:- Fires when mouse enters specified element
mouseleave:- Fires when mouse leaves specified element


--------------------------------------------------------------
mouseout:-   Fires when mouse leaves specified element and parent
mouseover:- Fires when mouse enters specified element and parent


Remember always
No comments:

Select Element using more than one Class (css,jquery)

Your Html Code

<div class="book active">
data
</div>
<div class="book inactive">
data
</div>



Your Jquery

$('.book.inactive').css("background","red");
 $('.book.active').css("background","gray");

No comments:

Select Multiple Element in a single line No Write to Two time

Your Html Code

<body>
    <div id=’header’><h1>Book Club</h1></div>
    <div class=’book-one’>
        <p>Travel Guide to NYC</p>
    </div>
    <div class=’book-two’>
        <p>Travel Guide to San Francisco</p>
    </div>
    <div class=’book-three’>
        <p>Travel Guide to Seattle</p>
    </div>
    <div class=’book-four’>
        <p>Travel Guide to Miami</p>
    </div>
<body>

Write Jquery Smart Code

 <script>
  $(document).ready(function() {
    $(‘.book-one, .book-two, .book-three, .book-four, #header, #footer p’).css(‘background’’’,’#ccc’’’);
  });
  </script>



No need to Hard Coding Like
 


 $(‘.book-one')..css(‘background’’’,’#ccc’’’);
$(‘.book-two')..css(‘background’’’,’#ccc’’’);
No comments:

Apply More than one class on element(tag)

Your Html code  
<div class="red border box">
 </div>
 
 <div class="blue border box">
 </div>
 
 <div class="green border box">
 </div>
 
 <div class="red box">
 </div>
 
 <div class="blue box">
 </div>
 
 <div class="green box">
</div>
Your css :
           
                
.box {
 width: 100px;
 height: 100px;
 margin: 10px;
 float: left;
}
.red {
 background-color: red;
}
.blue {
 background-color: blue;
}
.green {
 background-color: green;
}
.border {
 border: 3px solid black;
}
No comments:

Plot more than one element in a single line

<body>
<div id="wrapper">
<div id="content">
Hello ! My Name Is ?
</div>
<div id="image">
hello ?
</div>
</div>
</body>

#wrapper
{
    display: inline-block;
    width: 800px;;
    height: 400px;;
    border: 2px dashed gray;
   
}
#content
{
   
    width: 300px;
    height: 100px;
    border: 1px solid black;

}
#image
{
    width: 300px;
    height: 100px;
    float: left;

} 

















No comments: