You can create iPhone style flip using jQuery.

Visit: http://lab.smashup.it/flip/ for more details

Tags: animate, animation, flip, Javascript, jquery, simple

A wide range of jQuery plugin which help us to create Facebook style designs are follows:

I got this huge collection from this website. I am just rewriting that post here.

1) Facybox

Website here

2) Facebox

http://famspam.com/facebox

3) FCBKComplete

Go to webstie

4) Facebook style registration

Go to website

5) Gmail/Facebook style jQuery chat

Go to website

6) Facebook style comment using jQuery

Go to website

7) Facebook style auto complete

Go to website

Facebook style picture edit

Go to website

Tags: ajax, facebook, facebook design, facebook layout, facebook style edit, facebox, facybox, jquery

jCarousel is a simple jQuery plugin to create continuous sliding effect.  I like the way they created the plugin.

http://sorgalla.com/jcarousel/

jCarousel uses both javascript array and structured html  for inputing data. The data can be modified with html using post callback functions. For example, you can show flicker images using jCarousel by importing the images as an javascript array. To format the appearance and style , you can use html in callback function.

If you need to you fully html based Carousel, use  jCarouselLite

Tags: animation, carousels, circular, html, images, jquery, script, sliding

I think, i am becoming jQuery fan day by day. If you have an iPhone or iPod Touch or iPad, try this url in your browser:

http://sajithmr.me/jqtouch/demos/main/

You will wonder for some minutes. Yes, it is not a application, it is a website and every action is created by our dearest jQuery using jQTouch library

This is the official site of jQTouch: http://www.jqtouch.com/

Wait for my post about integrating jQtouch in PhoneGap to create iPhone applications within minutes.

Tags: application, development, ipad, iphone, itouch, jqtouch, jquery, phonegap, website

Recently I created a sliding menu for a project using jQuery and ScrollTo functions.

See demo: Slider  Menu

We can use the jQuery function $(“.menubar”).scrollTo(id_of_element) to scroll any scrollable area to a particular location.

The idea behind every smooth sliding is using scroll function with overflow:hidden mode.

You can download the source code from : http://www.sajithmr.me/downloads/slider/slider.zip

Here div menu-bar is the scrollable div with overflow:hidden mode contains set of menu and a duplicate as a  buffer

At the bottom of the code, you can see a filler div, this is for filling the menu one by one to the right side menu-bar to make the sliding very smooth

The function setMotion(this) calls  the scroll function and it moves till the called DOM object’s id reaches

If you use an ajax call after the motion to load the content at the bottom, you can make this sliding menu for proper navigation purpose.

Thanks

Sajith

Tags: featured, html, Javascript, jquery, menu, scroll, slider, source code

Flash messages or notification messages are very essential part of every update/edit or delete operations. We either use ajax update messages like “You account has been updated” or “Your photo has been successfully deleted”

Here, a new plugin of jQuery can be used to display the flash messages like twitter. (see twitter’s settings page)

I added some more functions to this plugin to display the notification in different context, say information, warning or error message. The function show_flash(‘message here’); can be used for this purpose. Second parameter is the type of message. For example, show_flash(‘Error in deleting file’, ‘error’) OR  show_flash(‘Email address entered is invalid’, ‘warning’)

If you use sessions to save flash message , for example in codeigniter $this->session->set_flashdata(‘message’,'hello’); you can use this plugin to display them by adding a php code in the footer  (or header) of every page

<?php if($this->session->flashdata(‘message’) != ” )  : ?>

<script>show_flash(‘<?= $this->session->flashdata(‘message’) ?>’)</script>

<?php endif; ?>

Here you can download the full source code:  http://www.sajithmr.me/downloads/jbar.zip

Thanks

Sajith

Tags: ajax, delete, display, edit, error, flash, information, jbar, jquery, message, notification, plugin, update, warning

IF you are facing problem with layout issues inside iframe (which is normally not there in normal pages) just test these things.

• Iframe is considered as a separate html page. So it needs all the basic tags, from html, head, body.
• It does not get styles from parent, so you need to add manually in the header
• Take care of javascript calls  separated with parent and local (if anything related with parent , use parent. , for example, to access a jQuery script from parent use, parent.$.function_name)
• Avoid define styles inside body tag with <style> tags, place them in <head> tag
• To solve the layout issues, you must use the DOCTYPE tag at the beginning
• If you are using any autoheight scripts to control iframe height dynamically, remember, it may not work as expected in all browser. (jQuery autoheight plugin sometimes fails in OPERA)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

There is a saying that using iframe is a bad practise. I don’t know the fact, anyway gmail uses more than 5 iframes to implement all the features and works well. (See Gmail Architecture)

Tags: iframe, jquery, opera, tips

Finally I found a good light-box which really matches the name “Light box” in FancyBox.  It is a jQuery based light window. It has very less features while compare with any other light box, but simple to use. Compatible with all browsers.

Go here to find it : http://fancybox.net/

You need to add the below javascript in addition to the jquery js file.

<script type="text/javascript" src="path-to-file/jquery.fancybox.js"></script>

To create a link to open in fancybox, call the function fancybox. For example, if you have a link pointing an image <a href=”myimage.gif” id=”imglink” />

Call

<script>

$(“#imglink”).fancybox();

</script>

The window automatically resize with image. If you put title attribute, it shows the title below with the light window.

Instead of image, you can point a file. If you need to open that file in iframe, use class=“iframe”

Visit http://fancybox.net/howto for more usability.

Tags: ajax, fancybox, iframe, jquery, light, lightbox, plugin, window

If you are using mootool and jquery same time in your html pages, it normally won’t work. Because both are using $ variable for the base object. So only the last js file included will be active.

To avoid this, follow the steps:

Include mootool js first
Include jquery js file second

Like this:

<script src=”javascript/mootools-release-1.11.js” type=”text/javascript”></script>
<script src=”javascript/jquery-1.3.2.min.js” type=”text/javascript”></script>

Then type:

<script>
jQuery.noConflict();
</script>

For mootool functions, continue with $ object and jQuery function , user jQuery object

For example , instead of $(“#div”), user jQuery(“#div”), another example is jQuery(“.common”).load(‘myfile.php’)

Enjoy Coding !!!

– Sajith

Tags: conflict, Javascript, jquery, js, mootool

Start jquery for manipulating html file and execute javascript just like sql queries.

Simply pointer the dom object with a $  and manipulate with different built in function.

For example 

$(“p.neat”).addClass(“ohmy”).show(“slow”);

Don’t need to write javascript inside each node. It is like prototyping. Insted of adding an onClick=”function()” inside the node, jquery define the onclick function from the top level. Your html code will be clean and tidy. If CSS removes all the styling bits, Jquery removes all the javascript bits from html.

You can remap every default action from an html object.

For example normally when you click a link  (<a> tag) it navigate you through the href value. But if you add the jquery code as below:

$(document).ready(function(){
   $("a").click(function(event){
     alert("Thanks for clicking!");
   });
 })

It adds a thanks alert for every click in links.

and if you add :

event.preventDefault();
It prevents the default action also.
You can go to JQuery homepage: http://jquery.com/
and can learn more about JQuery.
The intention of this post was not an explaination about jquery, but some addition website which develops addons based on jquery.
Those are:
http://jqueryui.com/

jquerystyle.com/

visualjquery.com/

http://15daysofjquery.com/

http://usejquery.com/



http://blog.themeforest.net/?s=jquery

Comment me if you know any other jquery websites.
Logging out
-Sajith

Tags: ajax, html, Javascript, jquery, manipulation, style