jQuery code assist in Eclipse 3.7

This is something I have wanted for ages. jQuery code assist AKA code completion AKA autocomplete AKA intellisense, in my favourite IDE Eclipse.

1. Install Aptana 3 plugin: go Help > Install New Software, and use this URL: http://download.aptana.com/studio3/plugin/install
2. Enable jQuery bundle: make sure you are using the Aptana ("Web") perspective and go Commands > Bundle Development > Install Bundle > jQuery
3. Use the Aptana JavaScript editor, rather than the default Eclipse / WTP one: go Window > Preferences > General > Editors > File Associations, and click *.js and then make the "JavaScript Source Editor" the default.

And that should be it - open a JavaScript file, and type $("input").cli and then hit Space and it should automatically add the code for a jQuery click() event handler.


ALTERNATIVE
You could also try jQueryWTP, or JSDT jQuery which is available in the Eclipse Marketplace, but I have no experience with these. Please add comments if you these plugins are actually any good.

REFERENCES
http://stackoverflow.com/questions/4721124/how-to-enable-jquery-support-in-aptana-studio-3

Google Analytics: track clicks on #hash anchor links

If on your website you want to treat different page anchors as different pages (e.g. if you load your pages using Ajax), then you need a way to tell GA (Google Analytics) about this. Unfortunately there's no simple settings change you can make in the GA tracking code snippet - you actually have to run some GA code yourself when the event occurs. It turns out this is quite simple:

_gaq.push(['_trackPageview', location.pathname + location.search + location.hash]);

But where do you use this? You could add it to the click event (either in your JavaScript, or in the markup, using the onClick attribute). But if you want a global solution, you need to fire it for all hashchanges. This can be done using the jQuery hashchange plugin:

$(window).hashchange(function() {
    // put any other hashchange magic you might want to do here
    _gaq.push(['_trackPageview', location.pathname + location.search + location.hash]);
});

REFERENCES
http://www.searchenginepeople.com/blog/how-to-track-clicks-on-anchors-in-google-analytics.html

Problems with jQuery fades using semi-transparent PNG images in IE8

I had some PNG images containing some semi-transparency (there were parts that were not completely transparent i.e. a shadow). I then used jQuery to fade between these images, as shown in the code below. This worked in all browsers except for IE, which showed a dark grey ring around each image while it was fading (it looked fine before and after each animation). I think IE was replacing each semi-transparent pixel with a fully opaque dark grey one. The solution was to apply Microsoft's AlphaImageLoader filter to each image, as shown in the CSS at the bottom.

HTML

JQUERY

setInterval(function() {
   var $active = $("#header-splats .active");
   var $next = $active.next().length ? $active.next() :
                                $("#header-splats div:first");
        
   $active.fadeOut("slow", function() {
      $active.removeClass('active');
   });
   $next.fadeIn("slow").addClass('active');
  
}, 3000);

CSS

#header-splats, #header-splats div {
   width: 106px;
   height: 106px;
}
/* overlap each other */
#header-splats div {
   position: absolute;
   top: 0;
   left: 0;
   display: none;
}
#header-splats div.active {display: block;}

This looks great in all browsers except IE, as you can see in these images:

THE SOLUTION: apply the following Microsoft filter in the CSS to each image (make sure you update the image path for each one).

CSS

#splat-1 img {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='/images/splats/splat1.png');}
#splat-2 img {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='/images/splats/splat2.png');}
#splat-3 img {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='/images/splats/splat3.png');}

Drupal 6 - Webforms: Loading GIF on Submit

If you have a slow mail server, then submitting webforms can sometimes appear to do nothing for a while. For me, this is anywhere between 2 and 8 seconds, but I have read about a lot of other people in similar situations. While the problem is with the mail server, sometimes there's nothing that can be done about this, and a simple solution to keep the user calm is to add a little loading animation. No Ajax involved: the GIF is simply shown when the user clicks submit, and then after the wait, they will be taken to the success page.

1) Grab the right GIF animation from this amazing site: http://ajaxload.info/ and put it here: /sites/all/images/loading.gif

2) The CSS: make it so that the GIF is used when a certain class is applied to an input element

input.form-submit.loading-gif {
 background: url('/sites/all/images/loading.gif') 50% 1px no-repeat;
}

3) The jQuery script: in your theme dir, create js/submit-loading.js which will apply the CSS class to the submit button when it is clicked

$(document).ready(function()
{
    // preload image
    (new Image()).src = "/sites/all/images/loading.gif";
    
    $(".webform-client-form").submit(function() {
        // select the button
        var $button = $(this).find("#edit-submit");
        // remove the text, but persist the width of the button
        var $buttonWidth = $button.outerWidth();
        $button.attr('value', '').width($buttonWidth);
        // display the loading gif and disable the button
        $button.addClass("loading-gif").attr('disabled','disabled');
    });
});

4) Add the script only to the right page with a bit of PHP in your theme's template.php. See #2 in my article: Different ways of adding JavaScript to a page

Drupal: Collapsible blog archive (similar to Wordpress / Blogger) using Views

I was really surprised that after a lot of digging, I could not find any pre-built solution to this seemingly popular problem. Surely all big CMSs should have this functionality. It turns out it's not that hard to build something similar to the Blogger archive block on your own using Views. You can see mine in action at the bottom of the sidebar on this page. It will have the following structure (with collapsible months):

▼ December 2010
   Article 1
   Article 2
   Article 3
► November 2010
► October 2010

1) Create a new View
Give it a name and type=node and create a new block display

2) Fields
Add 2 fields; Node:PostDate (no label, and with custom format "F Y"), Node:Title (no label, and check "link field to it's node")

3) Filters
Add a filter on Node:Type and select the type(s) of nodes you want to include (e.g. Blog). Also add one on Node:Published (and select yes)

4) Sort Criteria
Add one on Node:PostDate and select descending

5) Basic Settings
Click style and select "HTML List", then click settings and group by post date. Now click CSS class and add your own custom class name which we will use later (I used jack-archive-block)

At this point you should save, and click preview. If you have 3 months of blog posts, then you should see 3 Month-Year titles, each with their own list of article links.

6) Block Settings
Admin name: what we will use to select it on the blocks page (I used "Jack Archive")

7) Tweaks
Now go back into the Node:PostDate field and click "hide from display" as we dont want it for every node, only for every group. Also check "re-write output" and enter the following:

► [created]

This will prefix each of the section titles (dates) with a little collapse icon, which we will manipulate later with jQuery. That should be it for coding up your View. So save, and go to the blocks admin page and whack it in your sidebar.

8) Style
Next, we style it. Here's the CSS I used:

div.jack-archive-block h3 {
 cursor: pointer;
 margin: 0;
 font-size: 1em;
 font-weight: normal;
 padding: 6px 0;
}
div.jack-archive-block ul {
 padding: 0 0 0 10px;
 list-style: none;
}
div.jack-archive-block ul li {
 background: none;
 line-height: 130%;
 padding: 3px 0 5px;
}

The first block deals with the dates; it says if you mouse over, it should look like you're hovering over a link. The second and third blocks remove any default list styling you may have, so you dont get any random bullet point graphics.

9) jQuery
Finally, the jQuery that makes the magic happen:

$(document).ready(function()
{ 
 // init: collapse all groups except for the first one
 $(".jack-archive-block ul").each(function(i)
 {
  if (i==0) $(this).siblings("h3").children(".collapse-icon").text("▼");
  else $(this).hide();
 });
 
 // click event: toggle visibility of group clicked (and update icon)
 $(".jack-archive-block h3").click(function()
 {
  var icon = $(this).children(".collapse-icon");
  $(this).siblings("ul").slideToggle(function()
  {
   (icon.text()=="▼") ? icon.text("►") : icon.text("▼");
  });
 });
});

That should be it. You should be able to click the dates, and have the relevant articles appear or disappear as desired, and have the nice little icon change accordingly. The next step would be another tier to the hierarchy, so you can collapse by year, and then by month... but I haven't got that far yet. Suggestions welcome.

REFERENCES
http://drupal.org/node/825052