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

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");

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’’’);

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;
}

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;

}


Jquery Ajax Setting

$.ajax({
    beforeSend: function(req) {
        req.setRequestHeader("Accept", "text/xml");
    },
    type: "GET",
    url: "[proper url]",
    contentType: "text/plain; charset=utf-8",
    dataType: ($.browser.msie) ? "text" : "xml",
    username: '---',
    password: '-------',                                
    success: function(data) {
        var xml;
        if (typeof data == "string") {
            alert("Data is string:" + data);
            xml = new ActiveXObject("Microsoft.XMLDOM");
            xml.async = false;
            xml.loadXML(data);
        } else {
            xml = data;
            alert("Data is not string:" + $(xml).text());
        }
        // Returned data available in object "xml"
        //alert("Status is: " + xml.statusText);
        $("#ingest_history").html($(xml).text());
    }              
}); 
 
If you never view this kind of setting than this is time for you read this article  why set this setting ? ans is here : 

beforeSend :    A pre-request callback function that can be used to modify the jqXHR (in jQuery 1.4.x, XMLHTTPRequest) object before it is sent. Use this to set custom headers.  

 Type :    "get" or "post" set HTTPRequest type.if u set "get" than ur data is view in url.so my advice  is use "Post" 

contentType:  if you set contentType to plain/text than your result allways accept plain/text    

dataType:   what kind of data you want ? xml , html ,text  

  success:   call user define function if your ajax request successfully executed