Functions: find, parent, parents, children, first, last, closest

Suppose you need to manage some nodes nearby a link or a button on an event.

Say $(‘.button’).click(function(){

// code goes here

})

To get the current parent of triggered element, use $(this).parent()

To get the parent which has a class , use:
$(this).parents(‘.classname’);

To find any other element just above the node, use :
$(this).parents(‘.classname’).find(‘li’);

to get the first element in find, use find(‘li:first’)

and for last, use li:last

To get exactly the child nodes, use:
$(‘.classname’).children(‘some_selector_here’);

Here comes another very useful function, which is, closest

$(this).closest(‘td’) etc

So, this quick note will be helpful to you

Thanks

Sajith

You can create iPhone style flip using jQuery.

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

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

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

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.

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

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

• 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)

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.

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