Name Mon Lu

Love jQuery/CSS

Blog about Webdev

Twitter supawaza

RSS Twitter Flickr

What I am up to:


Posts Tagged ‘jQuery’

Ver­sion in this arti­cle: jQuery 1.3.2 / CSV2Table 0.03-b-2.9

Lately I started to like CSV (Com­mon Sep­a­rated Val­ues) more and more com­par­ing to XML.XML is a pain to setup even as enter­ing data, then grab­bing the data requires Einstein’s brain plus 3 sleep­less and hair-pulling days of cod­ing… okay, I maybe exag­ger­ated a bit, but that’s how I feel about XML. My first encounter with CSV was InDe­sign, in there, you can import a bunch of data and gen­er­ates PDF like Word’s Mail Merge fea­ture. Then one day, some­one asked me if I can find a bet­ter and eas­ier way to help the non web peo­ple to main­tain a site. I started out with search terms like “jQuery read text files” or some­thing like that, one of the results returned as using CSV and there is a plu­gin called CSV2Table in the jQuery Plu­g­ins web­site by Toshiro Taka­hashi writ­ten ear­lier this year. Test­ing… (more…)

  1. jEd­itable passes val­ues as $_POST as default
  2. It grabs the ID from the con­tainer as value to the $_POST. Exam­ple: (more…)

One of the first few things I learned in jQuery, impor­tantly enough that I can’t live with­out this func­tion.  I like to note that when I first learned jQuery, I was a bit con­fused of the Selec­tors and the each() core func­tion. After I got a hang of how to use the Selec­tors, I slowly grasp the usage of each(). A few things to note about the two:

  • $(selec­tors) selects every­thing that you feed to it
  • The each() func­tion is used con­junc­tion­ally with $(selectors)
  • The each() func­tion sep­a­rates each of the returned item from the $(selec­tors) individually

Why you prob­a­bly can’t live with­out each()

Let’s say you want to change all the para­graphs (<p>) into I don’t know… say “No para­graph for you!” to all of them:

From:

This is a paragraph 1

Second paragraph

3rd paragraph

To:

No paragraph for you!

No paragraph for you!

No paragraph for you!

All you have to do is one fell swoop with jQuery:

	$("p").text("No paragraph for you!");

What if you want to change the text indi­vid­u­ally ONLY when the user clicks on each of the para­graph? That’s when each() comes in as hero of the day:

$("p").each(function(){
    $(this).click(function(){
        $(this).text("No paragraph for you!!!");
    });
});

The above exam­ple / Image Swap Exam­ple using each()

That’s just the most basic use of the each() func­tion, if you still don’t see the light with the above exam­ples, let me know.

Image Swap Example

  1. Cre­ate thumb­nails and dump them all in a “thumbs” folder with the same file names
  2. OR add some­thing to iden­tify the thumb­nails such as: image01-th.jpg, image02-th.jpg etc… (more…)