Archive for 2011

    Create a grid Image Gallery that has intersecting highlights with jQuery and CSS

    jQuery CSS grid Image Gallery

    In this image gallery, I wanted to create the effect of intersecting lines to highlight the selected image in a grid like a crosshair. I used differing opacities of images horizontally across from the current image and vertically above or below the image to achieve this effect. This gallery uses jQuery Masonry to achieve the animated resizing effect of the grid.

    Image Upload and Cropping with PHP and Jquery

    PHP and Jquery Image Upload and image cropping

    Image cropping is the most important and required part in social media projects. In this post my friend had implemented image cropping functionalities such as upload image file into physical location, cropping image using jquery and resizing image into small resolution.

    Simple use of Event Delegation

    jQuery Event Delegation

    Event delegation may be some techie term that you’d rather shy away from, but if you’ve not already used it, this example will show you a simple but powerful use of event delegation.

    jQuery Image Load

    jQuery Image Loader

    Found a tutorial about image loading using Jquery written by Remy Sharp while trying to create the same function for company i am working at. Remy has publish the core script and here i will modify it to make it work for multiple images, and load in sequencing order.

    Preview window – jquery Description view plugin

    jquery Preview window

    In this guide you will lern how to make a box that shows a preview of the description on mouseover.

    Simple jQuery Text Resizer

    jQuery Text Resizer

    The idea of this plugin is very simple: you click on the text size you want, and a class is added to the body to indicate which size the user has selected. Then, it will take advantage of that body class when you are writing your CSS to size the different elements appropriately.

    Analog JQuery clock

    JQuery Analog clock

    In this tutorial we will use JQuery and a plugin named jQueryRotate.The main idea behind making this watch is to rotate the three images according to the actual time tt/mm/ss. We split that time up in hours, minutes and seconds. Then use some math to convert each of the three values into an angle between 0 and 360. one for each of our three pointers. Then we use a timer function in JQuery to do that every second. That will make it look like the pointers is ticking like a real watch.

    VisualSearch.js – jQuery modern search boxes

    jQuery search boxes

    VisualSearch.js enhances ordinary search boxes with the ability to autocomplete faceted search queries. Specify the facets for completion, along with the completable values for any facet. You can retrieve the search query as a structured object, so you don’t have to parse the query string yourself.

    Easiest “check all” ever with jQuery

    jQuery check all

    This code checks/unchecks all checkboxes within the same fieldset. Simple and semantic.

    jQuery “Form Highlight” plugin

    jQuery Form Highlight

    Highlight increases usability by highlighting elements as you interact with the page.

    Its primary use is for forms, but it can also be used for tables, lists, or any element you specify. It can also be used to toggle elements on and off, for example, table rows.