Don’t start your project with an empty style sheet: there are many great snippets that can make your life easier and speed up web development. We are going to show you some handy snippets that you might find useful for kick-starting your next project.
This is a collection of some basic styles that can come in handy when creating your own style definitions. Learn how to make some useful classes for simple styles and how to apply them to a variety of elements.
How to get client ip address with jQuery
$.getJSON("http://jsonip.appspot.com?callback=?",function(data){
alert( "Your ip: " + data.ip);
});
How to parse XML with jQuery
file.xml:
<?xml version="1.0" ?>
<result>
<item>
<id>1</id>
<title>title1</title>
<description>desc1</description>
</item>
<item>
<id>2</id>
<title>title2</title>
<description>desc2</description>
</item>
<!-- ......
Check if cookies are enabled
$(document).ready(function() {
var dt = new Date();
dt.setSeconds(dt.getSeconds() + 60);
document.cookie = "cookietest=1; expires=" + dt.toGMTString();
var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;
if(!cookiesEnabled){
//cookies are not enabled
}
});
Toggle all checkboxes
var tog = false; // or true if they are checked on load
$('a').click(function() {
$("input[type=checkbox]").attr("checked",!tog);
tog = !tog;
});
Get the index of an element
$("ul > li").click(function () {
var index = $(this).prevAll().length;
});
Validate date of birth
$("#lda-form").submit(function(){
var day = $("#day").val();
var month = $("#month").val();
var year = $("#year").val();
var age = 18;
var mydate = new Date();
mydate.setFullYear(year, month-1, day);
var currdate = new Date();
currdate.setFullYear(currdate.getFullYear() - age);
if ((currdate - mydate) < 0){
alert("Sorry, only persons over the age of " + age + " may enter this site");
return false;
}
return true;
});
[adrotate group="2"]
Test if an element is visible
if($(element).is(":visible")) {
//The element is Visible
}
Counting child elements
<div id="foo">
<div id="bar"></div>
<div id="baz">
<div id="biz">
</div>
<span><span>
</div>
//jQuery code to count child elements
$("#foo > div").length
Center an element on the screen
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
return this;
}
//Use the above function as:
$(element).center();
Moving options from list A to list B
$().ready(function() {
$('#add').click(function() {
!$('#select1 option:selected').appendTo('#select2');
});
$('#remove').click(function() {
!$('#select2 option:selected').appendTo('#select1');
});
});
Select all checkboxes
$(document).ready(function(){
$("#checkboxall").change(function(){
var checked_status = this.checked;
$("input[name=checkall]").attr("checked", checked_status);
});
});
Get the current URL
$(document).ready(function() {
var pathname = window.location.pathname;
});
Check if and which key was pressed
$(function() {
$(document).keypress(function(e){
switch(e.which){
// "ENTER"
case 13:
alert('enter pressed');
break;
// "s"
case 115:
alert('s pressed');
break;
(...)
}
});
});
Message from TestkingWe are among the best ccie service provider to help you better prepare for ccna exam....