31
Jan
Archive for the ‘jQuery’ Category
jQuery framework
30
Dec
This is Child element 1This is Child element 2
css
.parent_class
{
color:blue;
}
jquery
$('#child2').parent().removeClass('parent_class');
29
Nov
This function is very handy in returning the relative mouse function. This function will return the mouse position (x and y) according to its parent element.
function returnMousePosition(elementID, mouseX, mouseY) {
var offset = $('#'+elementID).offset();
var x = mouseX - offset.left;
var y = mouseY - offset.top;
return {'x': x, 'y': y};}
01
Aug
The following script will illustrate the use of child selector using jQuery:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script> </head>
<body>
<ul class="main">
<li>Product1</li>
<li>Product2
<ul> <li>Sub Product 1</li>
<li>Sub Product 2</li>
<li>Sub Product 3</li> </ul>
</li>
<li>Product 3</li> </ul>
<script>
jQuery("ul.main > li").css("border", "1px solid #999999");
</script>
</body>
</html>29
Jul
$( "#datepicker" ).datepicker("option", "minDate", YourMinDate);
$( "#datepicker" ).datepicker("option", "maxDate", YourMaxDate);
21
Apr
The following example shows you how to use makeArray function:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<div>United States</div>
<div>Japan</div>
<div>Germany</div>
<div>England</div>
<div>France</div>
<script>
// Collects contents from div
var elems = document.getElementsByTagName("div");
//Creates myarray
var myarray = jQuery.makeArray(elems);
//reversing array
myarray.reverse();
// Appending the array to the existing content
$(myarray).appendTo(document.body);
</script>
</body>
</html>
05
Apr
jQuery has it’s own functions to handle browser events.
The resize() function will call when the browser resized. The usage is given below:
jQuery(window).resize(function() {
jQuery('#para1').append('<div>Window Resized.</div>');
});
Scroll() handles the scroll event. Usage given below:
$('#para1').scroll(function() {
$('#result').append('<div>Scroll event called.</div>');
});
28
Mar
jQuery’s slideDown() function is used to create slide down effect in the following example:
<html>
<head>
<style>
div { background:#ee0000; margin:3px; width:100px;
height:50px; display:none; float:left; }
</style>
<script src=”http://code.jquery.com/jquery-1.5.js”></script>
</head>
<body>
Click here to silde down
<div></div>
<div></div>
<div></div>
<script>
$(document.body).click(function () {
if ($(“div:first”).is(“:hidden”)) {
$(“div”).slideDown(“slow”);
} else {
$(“div”).hide();
}
});
</script>
</body>
</html>
25
Mar
-
Follow us
