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

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

Use the below code to change the dimensions of an iframe in runtime.

<script type=”text/javascript”>

parent.$(“#fancy_outer”).width(100); parent.$(“#fancy_outer”).height(120);

</script>

Cheers

Sajith

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

Basically using xajax “You can directly call php functions from your javascript code”

Xajax will do the rest. 

For example, if you are going to write a javascript function Capitalize which captilaze your textbox content when you press a button.

Here is the pure html/javascript code for that:

=============================================

<script>

function Capitalize()

{

      var t = document.getElementById(‘cap’).value;

      document.getElementById(‘update’).innerHTML = t.toUpperCase() ;

}

</script>

<input type=”text” id=”cap” name=”cap” />

<input type=”button” id=”capbutton” value=”Capitalize” onclick=”Capitalize()” />

<div id=”update”></div>

==============================================

Now see the difference when we use xajax, we can write this Capitalize function in php code and can call from javascript.

function Capitalize($value)

{

    $objResponse = new xajaxResponse();

    $objResponse->assign(“update”,”innerHTML”,strtoupper($value));

    return $objResponse;

}

and you can call from your button’s onclick function:

 onclick=”xajax_Capitalize(document.getElementById(‘cap’).value)” 

Here the same functionality we moved from client to server. Thus the point is you can simply call all the functions you written in php (Server Side) from javascript code via onClick, onMouseOver or window.onLoad etc.

You can get the full source code of Capitalize example here:

http://www.sajithmr.com/downloads/capitalize.zip

To download and for documentation go: 

http://xajaxproject.org/

Thanks

Sajith

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

Lets watch a fun video with your browser interactive effect. Kill me if you dont like this flash + javascript effect.

Dont maximise (enlarge ) your browser window  after clicking the below link. Wait a moment  after the click.

REMEMBER, DONT MAXIMIZE the window

http://www.fly-a-balloon.be/

Regards

Sythoos

Error display while coding time is its another feature.

Auto filling is another feature.

For oops concepts, it will show the details of method and its parameter while you start  a pointer (a dot . or -> )

See example of javascript “document.getEle”  function.

A lot of javascirpt buit-in libraries are included.

Features like, console, break point, watch etc are there . There is a special  Apatana Ajax Monitor to debug ajax calls.

Download it , and use it. I liked this one than dreamweaver or quanta or PHP Editor

More over the software Aptana is Free !!!

In some cases, if you are in between any work of editing or typing a content, and you wont let the visitor to navigate away from the page without particular condition, say the document is not saved yet, you can block the navigation (even the closing of the browser window) with Javascript.

Here is the javascript code for that:

<script>

window.onbeforeunload = function (evt) {
var message = ‘Are you sure you want to leave?’;
if (typeof evt == ‘undefined’) {
evt = window.event;
}
if (evt) {
evt.returnValue = message;
}
return message;
}

</script>

Just paste this code anywhere in your html page. The condition settings , warning messages are up to you. In the above code, the warning will be displayed when ever a navigation happen (Even closing of browser window happen)

(pic from Binney V.A)