I finally launched the never-ending homepage redesign project yesterday for my company, so far so good, not everything 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 scripting with jQuery once again. This time, he wants to do “wipe up” sort of effects and he resisted that me HTML-ing the hidden contents because he wants it “the way it is” for the contents. *dies* So I’m stuck with image maps… the loading time on the page is “glorious” to say the least… hey… I do what I asked of me. He didn’t want to hear loading time, the web standards, best practices, and stuff like that. Although, I added the helpful image preloader plugin to speed things up just a bit, better than nothing. Over the course of the project, I’ve learned some little interesting things…

Interesting things I’ve learned…

1. If you add “padding” around an image that has “hotspots” over it; IE (no matter what version) WILL offset the coordinates by the padding – the “hotspots” will be off by the amount of padding you put around the image. But in Firefox, the image map hotspots behave the way it should be. So if you need to adjust the spacing of the images when using image maps, use “margins”, don’t use “padding”. Took me a short while to figure this out…
2. Relative + absolute positions will snap pictures in any corner you want. In my case, I wanted the image to be lower left corner to achieve the “wiping” effect – otherwise, it’ll just “slide” the image out if you don’t absolute position 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 Freddie Cougar’s face… ugly as hell and a freaking nightmare
4. jQuery $.each() saved pounds of my hair once again
5. Do not add negative 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 getting pissy

Besides all the pain and suffering for a month, the most fun I got out of this project was scripting the animations and solving the “image map within an image map” problem. Here’s the run-down of the project:

1. There will be main menu at the bottom of the screen, when the user hovers over each of time, the corresponding content (the image) will “wipe up” – I am calling this Tier 1 menu
   1. Now “wiping” and “sliding” are two different animals, and my mini-boss specifically wants “wiping”, not “sliding”. So I had quite a bit of fun trying to make the image contents “wipe” up
   2. Solution: create a “wrapper” div that wraps all the hidden “content images” – default the “wrapper” to 0px, then use jQuery to animate the height of the “Wrapper” to the full height when hover over. So I basically created a “mask” to do this hide the images. Attach the corresponding image, show, then “wipe” up
2. Each of those image will have image map hotspots (no problem here)
3. Within Tier 1 menu’s contents, one of the contents has multiple links within it and has a Tier 2 menu – better yet, the Tier 2 menu has four sub-contents WITH DIFFERENT unique image maps…

The Problem

The problem? If you use the same map for all the images, they will have other hotspots showing 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 different hotspot links. When Image B uses #map1 again, well, all the hotspots intended for Image A will also shows up. Of course, the obvious solution is to have multiple maps. The problem is the Tier 2 Menu shows/hides its contents. So if you have multiple maps, the Tier 2 Menu won’t able to hide and show content accordingly unless you want to code each of the Tier 2 menu with its own little script. Repetitive, inefficient, and probably won’t work.

The Solution(s)

After losing a couple hundreds of my hair, the solution? Create separate 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 according to the active menu and attach to the the “main map” (#map1), add a temporary class, and then remove them when the user hovers over a different menu item. Meaning: #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 without the Tier 2 Menu. Let’s say Image C has unique hotspot links, so when the user hovers over Image C. jQuery will tell this Image C to append #map3 hotspots (<area>) to #map1. When the user hovers to a different one, it removes all the previously attached “hotspots” – I identified 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 development is like solving puzzles, and I love solving puzzles especially when it involves jQuery. Well, that’s it folks.

No related posts.

Lately I started to like CSV (Common Separated Values) more and more comparing to XML.XML is a pain to setup even as entering data, then grabbing the data requires Einstein’s brain plus 3 sleepless and hair-pulling days of coding… okay, I maybe exaggerated a bit, but that’s how I feel about XML. My first encounter with CSV was InDesign, in there, you can import a bunch of data and generates PDF like Word’s Mail Merge feature. Then one day, someone asked me if I can find a better and easier way to help the non web people to maintain a site. I started out with search terms like “jQuery read text files” or something like that, one of the results returned as using CSV and there is a plugin called CSV2Table in the jQuery Plugins website by Toshiro Takahashi written earlier this year. Testing… testing… and hot damned! It’s like magic!!!

The awesome thing about CSV is you can enter all the data using Excel, then simply save the file as something.csv and it’s ready to be used. No stupid header <xml></xml> tags, inner tags, child tags or whatever the heck tags. Just simple data. If you really, really want to be fancy; you can even add HTML such as <img> – believe it not, it worked like a charm. Although, it’s silly to format your CSV data within while you have your hands on the god-awsome jQuery framework to manipulate all of those data. Then to generate the table, all you simply have to do is:

	$(document).ready(function(){
    	$("#div").csv2table(csvfile,{ <em>options</em> });
    });

Well, I’m not going to get into the options detail but you can refer back to the CSV2Table docs. You can manipulate how the data display, format, colorize, draw a dragon or whatever. This plugin is very flexible when it comes to formatting the results. Some people describe me as lazy, but I like to describe myself as “efficient” because I don’t like to repeat myself or do extra work. So it doesn’t make sense to write the code above everytime I need to reuse it, that’s just not the Mon’s way, here’s Mon’s way:

	function csvReader(container,csvfile){
			$(container).csv2table(csvfile,{
				sortable: true,
				removeDoubleQuote : true,
				nowloadingMsg: "Loading "+$("#eblastsYear").val()+" eblasts archive...",
				errorMsg : "Error loading "+$("#eblastsYear").val()+" eBlasts archive. Archive either doesn't exist or renamed. Please contact Mon (mlu@equuscs.com) for support.",
				onload : function(id,op,data,ary){
					$("#totalEblasts").text(ary.length-1); //Display the total rows of the eblasts
					$(container+' tr:even').css('background','#efefef'); //Every even row gets colorized
					$(container+' th').css({"text-align":"left"}); //Just setting the TH rows will be left aligned
				 }
			});
		}

I wrote a function that because I know I’m going to reuse the code to load the exact same data, just maybe the CSV file or the DIV container might be different. Instead of writing re-writing again. If I ever need it, all I have to do is:

	csvReader("#csvContainer","data.csv");

Done. Now, you probably wonder, what the heck did I use it for? Well, see screenshot:

So when the user clicks on “View Archive”, it loads a new CSV file like this:

$("#selectYear").live('click',function(){
    csvReader("#csv","eblasts/"+$("#eblastsYear").val()+".csv");
});

Less work = better. One minor thing I felt missing was when the file is missing or failed to load, it just get stuck on the default “Now loading” message. I dug under the hood of the CSV2table codes, it uses $.get() to process the data which doesn’t really can tell whether the XHR request was successful or not; nor it can detect it unless you add the ajax.error() handle. So I’ve decided to change it to using the actual $.ajax() to call the data, and detect if there is a 404 error, it’ll display an error message accordingly instead of just “Loading…” – while I was at it, I felt, well, I and I’m pretty sure most people want to customize their sucessful load and error messages, right? So I added two more settings inside the plugin which are: nowloadingMsg and errorMsg. If you are so darn lazy and don’t want to customize it, it defaults to “Now loading…” (fades out) and “CSV file not found.”. Here’s the modifications:

	op = $.csv2table.setting[id] = $.extend({
			url                : url,
			nowloadingImg      : $.csv2table.loadImg,              //Image of now loading...
			nowloadingMsg      : null,     						   //Message of now loading...
			errorMsg		   : null,							   //Error Message
       	// The rest of the codes...

Do a search for “op.nowloadImg” and you’ll see “$.get()”. I modified as follow around line 130 if you added what’s above:

	//Default loading message if not set in settings
    if(op.nowloadingMsg == null){ op.nowloadingMsg = "Now loading..."; }
    $(contents).before('
<div class="csv2table-loading"><img src="'+op.nowloadingImg+'" alt="" /> '+op.nowloadingMsg+'</div>
' )
 
    //Default error message
    if(op.errorMsg == null){ op.errorMsg = "CSV file not found."; }
 
    $.ajax({
       type: "GET",
       url: url+"?"+(new Date()).getTime(),
       data: $.csv2table.data[id],
       success: function(data,textSatus){
         $(".csv2table-loading").hide();
         $(".csv2table-loading").remove();
         $(contents).css("display","none").html(mkRowsAry(id,data));
         setCSS(id);
         $(contents).fadeIn();
         if(op.use_api=='jqchart'){
            if(op.use_api_type=='jqchart:line')op.type=$.csv2table.setting[id].type='line';
            else if(op.use_api_type=='jqchart:bar')op.type=$.csv2table.setting[id].type='bar';
            useChart(id,op,data,$.csv2table._rowsAry[id]);
         }
         if($.csv2table.setting[id].onload)$.csv2table.setting[id].onload(id,op,data,$.csv2table._rowsAry[id]);
       },
       error : function (xhr, e) {
          if (xhr.status == 404) {
            // page not found
            $(".csv2table-loading").addClass("csv2table_error").text(op.errorMsg);
          }
        }
    });

To sum it up for the CSV2Table mod, these are the changes I’ve made:

• 2 extra settings: nowloadingMsg / errorMsg (defaults to “Now loading…” and “CSV file not found.”)
• Changed $.get() method to $.ajax()
• Added 1 extra CSS class: csv2table_error

My modded: jquery.csv2table-mod

No related posts.

<div id="item01">Editable text</div>

<div id="unique-id-1" class="editable">This is the editable text</div>
<div id="unique-id-2" class="editable">This is the editable text</div>

This is item 1
 
This is item 2
 
This is item 2

		$(document).ready(function() {
            $('.editable').editable( 'jedit.php', {
                "indicator" : 'Saving...',
                "tooltip"   : "Click to edit...",
                "type"		: "textarea",
                "cancel"	: "Cancel",
                "submit"	: "Save"
            });
        });

If you want to pass multiple parameters, you can either use JSON or trick the ID to pass multiple fields. I have a hard time with JSON, so I tricked the ID part to pass multiple fields by using the PHP explode() function. For example:

<div id="fieldname-&lt;?=$id?&gt;-tablename" class="editable">This is editable text</div>

Newb, but works.

No related posts.

• $(selectors) selects everything that you feed to it
• The each() function is used conjunctionally with $(selectors)
• The each() function separates each of the returned item from the $(selectors) individually

Why you probably can’t live without each()

Let’s say you want to change all the paragraphs (<p>) into I don’t know… say “No paragraph 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 individually ONLY when the user clicks on each of the paragraph? 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 example / Image Swap Example using each()

That’s just the most basic use of the each() function, if you still don’t see the light with the above examples, let me know.

No related posts.

1. Create thumbnails and dump them all in a “thumbs” folder with the same file names
2. OR add something to identify the thumbnails such as: image01-th.jpg, image02-th.jpg etc…
3. Place a container that holds the big image and give it an unique ID such as “big-image” OR give the image an unique ID - need a default image

   <div id="big-image"><img src="imagename.jpg" alt="" /></div>

   OR

    	<img id="big-image" src="bigimage01.jpg" alt="" />

4. Place all of the thumbnails within a container such as: UL, unique ID div, or add a class to each of the thumbnail

   <ul id="thumbnails">
   	<li><img src="image01.jpg" alt="" /></li>
   	<li><img src="image02.jpg" alt="" /></li>
   	<li><img src="image03.jpg" alt="" /></li>
   </ul>

   OR

   <div id="thumbnails">
           <img src="image01.jpg" alt="" />
           <img src="image02.jpg" alt="" />
           <img src="image03.jpg" alt="" /></div>

   OR

     	<img class="thumbnails" src="image01.jpg" alt="" />
       <img class="thumbnails" src="image02.jpg" alt="" />
       <img class="thumbnails" src="image03.jpg" alt="" />

   Note: The last method is more flexible, it doesn’t have to be inside a container meaning the thumbnail can be placed anywhere. Just as long as the bigger image is shown at the exact same place.

5. Tell jQuery to find all the thumbnails, and every time the user hovers over each of the thumbnail – replace the “big-image” with the corresponding thumbnail path or file name

To replace the path:

	$(document).ready(function(){
		$('#thumbnails img').each(function(){
			$(this).hover(function(){
				var src = $(this).attr('src').replace('thumbs', ''); // take out /thumbs/ before the file name
				$('#big-image').attr({src: src, title: src, alt: src});
			});
		});
	});

To remove the “_th” identifiers:

	$(document).ready(function(){
		$('#thumbnails img').each(function(){
			$(this).hover(function(){
				var src = $(this).attr('src').replace('_th', ''); // take out '-th'
				$('#big-image').attr({src: src, title: src, alt: src});
			});
		});
	});

To find all the “thumbnails” classes: Simply replace $(‘#thumbnails img’) with $(‘.thumbnails’)

No related posts.