Playground
The Playground features web experiments, concepts, and layouts that push the boundaries of traditional design and showcase the latest in animation techniques.
Awesome CSS3 & jQuery Slide Out Button
by Manoela Ilic
Here is an awesome little slide out button....
Self-resizing Navigation Menu with jQuery
by Manoela Ilic
Today I am going to share a nice CSS only (with some jQuery) navigation menu that adapts the size of its list items automatically....
Some Useful JavaScript & jQuery Snippets – Part 4
by cody
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> <!-- ......
Find Your First Twitter Follower
by chadking
This application aims to show you who your first follower was in twitter....
Some Useful JavaScript & jQuery Snippets – Part 3
by cody
How to hide all children div except a specific one with jQuery?...
Some Useful JavaScript & jQuery Snippets – Part 2
by cody
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....
Pause and Play Effect with jQuery
by cody
Here's an effect based on the one used in fml to stop and pause an event....
Scrolling to the Top and Bottom with jQuery
by cody
Here's a way to scroll to the top or bottom of your website with a simple click....
PrettyNumber – A jQuery Plugin for Formatting Numbers
by cody
Here's a jQuery plugin that transforms a number into a human readable format....
URL Image Getter/Uploader/Resizer
by chadking
I was wondering how to get images from a site the same way like Digg or Facebook do, where it is only necessary to provide a link, and images get automatically uploaded to your server and resized....
How I Speeded Up Our WordPress Blog
by Manoela Ilic
Our site was getting kind of slow, so I decided to read some articles about how to speed up a Wordpress blog....
jBookMark: A jQuery Marking Tool
by cody
Ever missed the bookmarking option of a good editor in a web site?...
TweetTheme: Color Theme Inspiration from Twitter Themes
by chadking
My next Twitter API experiment: Get the theme's colors from any Twitter account!...
Twitter API and jQuery Showcase: Display your Followers or Friends
by chadking
Today I was playing around with the Twitter API and created this little "widget" using jQuery and PHP....