Friday, 13 January 2012

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

Wednesday, 11 January 2012

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

Friday, 2 December 2011

Drupal 6: Enable/Disable the WYSIWYG Editor on Specific Forms

You will need your own custom module for this, in order to implement hook_form_FORM_ID_alter().

DISABLING
You can disable the WYSIWYG editor on any form by setting the FAPI (Forms API) setting #wysiwyg to FALSE e.g. for the Page node edit form, you can do this:
function MODULE_form_page_node_form_alter(&$form, &$form_state) {
    $form['body_field']['body']['#wysiwyg'] = FALSE;
}

ENABLING
  1. Some contrib modules (e.g. Ubercart) have completely disabled WYSIWYG editors on some of their textareas, and I haven't found a way around this.
  2. If you have checked the "Enable by default" option, the WYSIWYG editor should automatically be enabled for any form fields that have the "Input format" option below them.
  3. For other forms (with simple textareas that dont have the "Input format" option) you must manually enable the "Input format" option yourself. This can be done by again altering the $form object in your hook_form_FORM_ID_alter() e.g. for the Description field on the form to edit a content type:
function MODULE_form_node_type_form_alter(&$form, &$form_state) {
    $form['identity']['format'] = filter_form();
}


Update: if you're more into GUIs than fiddling in the code, you could just install the Better Formats module, which gives you loads of control on which Input formats are used for which forms. Then by having one plain-text input format, and another one associated with a WYSIWYG editor, you can easily control which forms use which.

Drupal 6: hook_form_node_form_alter() not working

I've long known about the versatile hook_form_alter() function, which allows you to alter any form before it gets displayed on the page, using your own custom module. Recently I discovered the wonderful hook_form_FORM_ID_alter() function, which is only fired for a specific form id, making it a better solution when you want to target only 1 form.

I had used this successfully a few times, and then hit a wall when I tried using it for the main node edit form (the form's id is node-form, so I called the function hook_form_node_form_alter). Half an hour later, I stumbled upon the solution: it does not want the HTML ID attribute, it wants the internal Drupal ID for the form. So in my custom module, I used this code to get the ID:

function MODULE_form_alter(&$form, &$form_state, $form_id) {
 echo "formID=".$form_id;
}

Which turned out to be page_node_form, so the final function that worked was called MODULE_form_page_node_form_alter().

REFERENCES
http://www.hashbangcode.com/blog/drupal-hookformalter-node-form-501.html

Saturday, 12 November 2011

Problems cloning a GitHub repo using Egit on Eclipse 3.6.2 Helios


Eclipse 3.6.2 Helios
Egit 1.1.0
Ubuntu 11.10 Oneiric Ocelot

ERROR: when adding public repo (on github) to clone, does not accept SSH key password (just keeps asking for it again and again)

SOLUTION: https://bugs.eclipse.org/bugs/show_bug.cgi?id=326526
Then add to your .bashrc:
export GIT_SSH=/usr/bin/ssh
(and reload it with a "source .bashrc")
If it still doesn't work, try re-creating SSH keys through eclipse (Prefs>General>Network>SSH2) and use those keys for authentication (you have to add the public key to github again)


ERROR: on commit:
Unhandled event loop exception
No more handles [MOZILLA_FIVE_HOME='/usr/lib/xulrunner-addons'] (java.lang.UnsatisfiedLinkError: Could not load SWT library. Reasons:
/home/jack/programs/eclipse_v3.6.2/configuration/org.eclipse.osgi/bundles/203/1/.cp/libswt-mozilla-gtk-3659.so: libxpcom.so: cannot open shared object file: No such file or directory
no swt-mozilla-gtk in java.library.path
Can't load library: /tmp/swtlib-32/libswt-mozilla-gtk-3659.so
Can't load library: /tmp/swtlib-32/libswt-mozilla-gtk.so
/tmp/swtlib-32/libswt-mozilla-gtk-3659.so: libxpcom.so: cannot open shared object file: No such file or directory
)

SOLUTION: Ensure you have sun java installed: http://www.multimediaboom.com/how-to-install-java-in-ubuntu-11-04-natty-narwhal-ppa/
Then install xulrunner-1.9.2 (NOT v2.0) manually by downloading it from here (you will need to navigate to your version of ubuntu first, if it is not 11.10 Oneiric):
https://launchpad.net/ubuntu/oneiric/i386?text=xulrunner
Then install with this command:
sudo dpkg -i file.deb
Then add this line to your .bashrc:
export MOZILLA_FIVE_HOME=/usr/lib/xulrunner-1.9.2.17
(and reload it with a "source .bashrc")



ERROR: on push:
fatal: cannot exec '/home/jack/programs/eclipse_v3.6.2/plugins/com.aptana.git.core_3.0.0.1303919605/os/linux/askpass.tcl': Permission denied
SOLUTION: just change permissions to 777

NEXT ERROR:
exec: 3: wish: not found
SOLUTION: http://sysadmin.circularvale.com/desktop-config/getting-git-working-in-aptana-on-ubuntu/
Basically install these packages: tk and python-tk

Android 2.3 Gingerbread - Get your own profile picture in text message conversations

Phone: HTC Desire S
OS: Android 2.3.3 (HTC Sense 2.1)

If in text message conversations, your friend's profile pictures are showing up, but your own one isn't, you need to setup the "My Profile" contact. To do this, click People, then at the top, click My Profile (not the button to the right of it). Then either select a photo manually, or if you already have yourself as a regular contact with a picture, then hit Menu > Import and then select yourself.

REFERENCE: http://code.google.com/p/android/issues/detail?id=3898

Thursday, 27 October 2011

Using CSS rgba() values for background-color in IE6+

You can use rgba values for background colors in IE6-9 with a simple Microsoft filter in your CSS. You can even find an amazing interactive tool to help you generate all this code here: www.css3please.com

.black-semi-transparent {
  background-color: transparent;
  background-color: rgba(0, 0, 0, 0.5);  /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); /* IE6–IE9 */
            zoom: 1;
}