Archive for 2011

    Formly – the jQuery form glamorizer

    Formly – the jQuery form glamorizer

    An unbelievably easy way to add style and validation to your forms. Forms are everywhere and, usually, suck. Formly makes adding forms to your site a bit more exciting. Easily add style, validation, and a more impressive user interaction with a single function.This is easy way to add cool looking of any your forms. Also it possible to add validation (from user side) to your forms too.

    How to Build an RSS Reader with jQuery Mobile

    jquery RSS Reader

    Today, we’ll dive into jQuery Mobile, which, at the time of this writing, is in a RC1 state. We’ll build a simple Tuts+ RSS reader, using PHP and jQuery Mobile. When we’re finished, you’ll have the ability to add this simple project to your iPhone or Android phone with the click of a button, as well as the skills to build your own custom mobile web apps!

    Slideshowify jQuery plugin for generating a Ken Burns Effect slideshow

    Slideshowify jQuery plugin for generating a Ken Burns Effect slideshow

    Slideshowify is a jQuery plugin for generating a “*Ken Burns Effect”-style slideshow from images that match a selector. Images that don’t fit the window proportions exactly (generally the case) are cropped and panned across the screen.

    jQuery Draggable Image Boxes Grid

    jQuery Draggable Image Boxes Grid

    Today we want to create a template with a fullscreen grid of images and content areas. The idea is to have a draggable grid that shows boxes of thumbnails and menu like items. Once clicked, the thumbnail will expand to the full size image and the menu item box will expand to a fullscreen content area.

    Adding Weather to Your Site with jQuery and YQL

    Adding Weather to Your Site with jQuery and YQL

    If you’re working on a travel, news or other locally-oriented site, adding a display of the current weather conditions in the local area is the perfect touch. In the past, this was a relatively difficult task, involving server-side integration with weather APIs and more. Today, however, jQuery and YQL (a free web service offered by Yahoo) can be used to easily add a customized weather display to your site. In this article I’ll guide you through the process from start to finish.

    Animated Rocket with jQuery and CSS transform

    Animated Rocket with jQuery and CSS transform

    The examples on this page will work properly in Safari, Chrome and Opera. In the Firefox prior to version 4 you will see the transforms, but without any animation. Some effects may also work now in Internet Explorer 9 if you use the -ms- vendor prefix.

    The implementation of animation in CSS involves setting up a transformation to take place in response to a mouseover or other event. Then, rather than applying the effect instantly, we assign a transition timing function which applies the transformation/s over a set time period.

    Hover and Click Trigger for Circular Elements with jQuery

    Hover and Click Trigger for Circular Elements with jQuery

    Applying a :hover pseudo-class to an element is widely known as the classic “hovering” over an element on a web page. A problem that arose with the introduction of the border-radius property is the non-realistic triggering of the hover event when entering the bounding box of the element and not just the actual visible area. This becomes extreme when we create a circle by setting the border-radius of a square to 50% (half of its outer width and height).

    Today we want to share one possible solution to the circle hovering problem. We’ll create a plugin that will take care of the ‘mouseenter’, ‘mouseleave’ and ‘click’ events to be triggered only on the circular shape of the element and not its bounding box.

    jQuery Elastic Image Slideshow with Thumbnail Preview

    jQuery Elastic Image Slideshow with Thumbnail Preview

    Today we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and we can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option.

    To make this slideshow responsive, we will use a mixture of JavaScript and CSS techniques.

    jQuery FeedFetcher

    jQuery FeedFetcher

    FeedFetcher is a jQuery plugin that aggregates and embeds feed(s) from Facebook users, applications, and fan pages as well as tweets from given users and/or mentioning given users.

    It has convenience features including a post-fetch callback, ability to use multiple display formats, stripping out Twitter @ replies, and filtering Facebook wall posts by type and/or author.

    UItoTop jQuery scroll to top dynamic Plugin

    UItoTop jQuery scroll to top dynamic Plugin

    Inspired by the great idea of David Walsh’s jQuery topLink Plugin, I made a similar plugin but with two key differences, this one does not require you to add extra html markup or extra plugins to function. It will only work when JavaScript is turned on ( on purpose ), It’s easy to setup with only one line of code, and it works cross-browser nicely ( Tested: IE6-8, FF, Safari ).

    Optionally it can benefit from the jQuery Easing plugin with a different easing animation for the page scrolling.