I finally launched the never-ending home­page redesign project yes­ter­day for my com­pany, so far so good, not every­thing I want, but at least got what my bosses want. I didn’t like the way how it was put together, but I had fun script­ing with jQuery once again. This time, he wants to do “wipe up” sort of effects and he resisted that me HTML-ing the hid­den con­tents because he wants it “the way it is” for the con­tents. *dies* So I’m stuck with image maps… the load­ing time on the page is “glo­ri­ous” to say the least… hey… I do what I asked of me. He didn’t want to hear load­ing time, the web stan­dards, best prac­tices, and stuff like that. Although, I added the help­ful image pre­loader plu­gin to speed things up just a bit, bet­ter than noth­ing. Over the course of the project, I’ve learned some lit­tle inter­est­ing things…

Inter­est­ing things I’ve learned…

1. If you add “padding” around an image that has “hotspots” over it; IE (no mat­ter what ver­sion) WILL off­set the coor­di­nates by the padding – the “hotspots” will be off by the amount of padding you put around the image. But in Fire­fox, the image map hotspots behave the way it should be. So if you need to adjust the spac­ing of the images when using image maps, use “mar­gins”, don’t use “padding”. Took me a short while to fig­ure this out…
2. Rel­a­tive + absolute posi­tions will snap pic­tures in any cor­ner you want. In my case, I wanted the image to be lower left cor­ner to achieve the “wip­ing” effect – oth­er­wise, it’ll just “slide” the image out if you don’t absolute posi­tion it.

     	<div style="position:relative">
       	<div style="position: absolute; bottom: 0; left: 0;">Image here</div>
       </div>

3. Too many image map hotspots is like Fred­die Cougar’s face… ugly as hell and a freak­ing nightmare
4. jQuery $.each() saved pounds of my hair once again
5. Do not add neg­a­tive padding inside a jQuery.animate() – it will crash like a 100 cars pile-up on a highway…
6. Don’t try to explain to my boss why adding more image hotspots inside an image map is such a bad idea – he looks at me funny and starts get­ting pissy

Besides all the pain and suf­fer­ing for a month, the most fun I got out of this project was script­ing the ani­ma­tions and solv­ing the “image map within an image map” prob­lem. Here’s the run-down of the project:

1. There will be main menu at the bot­tom of the screen, when the user hov­ers over each of time, the cor­re­spond­ing con­tent (the image) will “wipe up” – I am call­ing this Tier 1 menu
   1. Now “wip­ing” and “slid­ing” are two dif­fer­ent ani­mals, and my mini-boss specif­i­cally wants “wip­ing”, not “slid­ing”. So I had quite a bit of fun try­ing to make the image con­tents “wipe” up
   2. Solu­tion: cre­ate a “wrap­per” div that wraps all the hid­den “con­tent images” – default the “wrap­per” to 0px, then use jQuery to ani­mate the height of the “Wrap­per” to the full height when hover over. So I basi­cally cre­ated a “mask” to do this hide the images. Attach the cor­re­spond­ing image, show, then “wipe” up
2. Each of those image will have image map hotspots (no prob­lem here)
3. Within Tier 1 menu’s con­tents, one of the con­tents has mul­ti­ple links within it and has a Tier 2 menu – bet­ter yet, the Tier 2 menu has four sub-contents WITH DIFFERENT unique image maps…

The Prob­lem

The prob­lem? If you use the same map for all the images, they will have other hotspots show­ing up in images that you don’t want. Let’s say Image A is using #map1, Image B needs to have the same menu but has dif­fer­ent hotspot links. When Image B uses #map1 again, well, all the hotspots intended for Image A will also shows up. Of course, the obvi­ous solu­tion is to have mul­ti­ple maps. The prob­lem is the Tier 2 Menu shows/hides its con­tents. So if you have mul­ti­ple maps, the Tier 2 Menu won’t able to hide and show con­tent accord­ingly unless you want to code each of the Tier 2 menu with its own lit­tle script. Repet­i­tive, inef­fi­cient, and prob­a­bly won’t work.

The Solution(s)

After los­ing a cou­ple hun­dreds of my hair, the solu­tion? Cre­ate sep­a­rate image maps for each of the unique hotspots map. So Image A gets its own map, Image B etc… use jQuery to clone the map accord­ing to the active menu and attach to the the “main map” (#map1), add a tem­po­rary class, and then remove them when the user hov­ers over a dif­fer­ent menu item. Mean­ing: #map1 is the Tier 2 main menu and is defaulted to Image A. #map1 has the Tier 2 main menu, and the rest has its own unique hotspots maps with­out the Tier 2 Menu. Let’s say Image C has unique hotspot links, so when the user hov­ers over Image C. jQuery will tell this Image C to append #map3 hotspots (<area>) to #map1. When the user hov­ers to a dif­fer­ent one, it removes all the pre­vi­ously attached “hotspots” – I iden­ti­fied them by adding a dummy class in each of the attached <area> map, then append another set if needed. Painful, but not bad for a workaround I think.

I find front-end devel­op­ment is like solv­ing puz­zles, and I love solv­ing puz­zles espe­cially when it involves jQuery. Well, that’s it folks.

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