Sumon Math Game With jQuery

    jQuery Math Game

    In today post I want to share how I make a simple sumon math game based on JQuery, this game inspired by hyperandroid, this game it quite nice to practice your self concentration about math addition.

    This post will create that simple nice game, just to show that you can make it with simple jquery, please note that I only add the basic rule of the game, which are, we have to pick the total number that matched the appear random number thats all.

    Easily animate box shadows in jQuery

    jQuery box shadows animation

    With this jQuery plugin, you can extend the animate function to support the CSS box shadow-property. You can animate the color, the x- and y-offset, the blur-radius and spread-radius. Mark Carver contributed code to support rgba-colors (the alpha channel).

    Embellishing Your Google Map with CSS3 and jQuery

    Embellishing Your Google Map with CSS3 and jQuery

    Interactive maps are neat. It’s not hard to get a basic map embedded on your page, but Google provides a rich and easy to use API for embedding and decorating maps on your web page, so there should be no excuse for boring default maps.

    In this article I’ll share a technique I used recently to spice up the “Places to shop and eat” map on Vegan Melbourne, using a combination of the Google Maps API, jQuery animation, and some newer CSS effects.

    Textualizer a jQuery text animation plugin

    Textualizer a jQuery text animation plugin

    Textualizer is a jQuery plugin that allows you to transition through blurbs of text.Textualizer currently has the following effects: fadeIn, slideLeft, slideTop, and random. You can choose which effect to use by setting the effect option.

    Zebra Datepicker a lightweight jQuery date picker plugin

    jQuery date picker plugin

    Zebra Datepicker is a small, compact and highly configurable date picker plugin for jQuery and it is built using the fabulous jQuery Plugin Boilerplate. It is cross-browser – works in every major browser; also, it works in Internet Explorer 6 (where it uses an iFrameShim so that it stays above select controls).Offers an intuitive mechanism for disabling dates and date ranges through a syntax similar to cron syntax..

    Poshy Tip jQuery Plugin

    Poshy Tip jQuery Plugin

    Poshy Tip supports using a function for returning the tooltip content and the script also passes an update callback function as an argument to this function. By using this callback, you can easily update asynchronously the content of the tooltip after it has been displayed. The script also recalculates and updates the position of the tooltip when its content is updated.

    Item Blur Effect with CSS3 and jQuery

    jQuery css3 Blur Effect

    Today we want to show you how to create a simple blur effect for text-based items. The idea is to have a set of text boxes that will get blurred and scaled down once we hover over them. The item in focus will scale up. This will create some kind of “focus” effect that drwas the attention to the currently hovered item.

    We’ll be using CSS3 transitions and some jQuery to apply the respective classes. Since CSS3 transitions are not supported in order browsers, the demo should be best viewed in Safari or Chrome (here we got the smoothest transitions).

    Phono a jQuery Plugin turns any web browser into a Phone

    Phono a jQuery Plugin turns any web browser into a Phone

    Phono is a simple jQuery plugin and JavaScript library that turns any web browser into a phone; capable of making phone calls and sending instant messages. You can even connect to SIP clients; all with a simple unified API.

    jQuery ScrollToFixed

    jQuery ScrollToFixed

    This plugin is used to fix elements on the page (top, bottom, anywhere); however, it still allows the element to continue to move left or right with the horizontal scroll.

    Given an option marginTop, the element will stop moving vertically upward once the vertical scroll has reached the target position; but, the element will still move horizontally as the page is scrolled left or right. Once the page has been scrolled back down past the target position, the element will be restored to its original position on the page.