Drupal – Adding Javascript to your module
When creating your own Drupal module, you may need to add some styling or Javascript to improve the usability of your module. Here is how to do it.
drupal_add_js(drupal_get_path('module', 'MODULE_NAME') . '/common.js');
Similarly you can add CSS to your module as well
drupal_add_css(drupal_get_path('module', 'MODULE_NAME') . '/styles.css');
Prototype JS – Determine if an object exists in the page loaded
I’m so use to using jQuery that I usually don’t have to look up documentation on how to use certain functions. They almost come naturally because it’s so English-like! Unfortunately Magento uses Prototype as it’s native choice of Javascript Frameworks. I sure wish they would have chosen jQuery! I think they would have more people jumping on their platform. I’m sure they have a good choice for it. Anyway, here’s how to check:
if($('id_of_element') != undefined) {
alert('Object exists.');
}
Javascript – Passing Multiple Parameters through setTimeout
One of the problems that I’ve faced with Javascript is passing multiple parameters through the setTimeout function. I found this little snippet on the internet a few months ago and would like to share it with you. I don’t know who the original author is so I could not give him/her proper credit. Thanks!
var _st = window.setTimeout;
window.setTimeout = function(fRef, mDelay) {
if(typeof fRef == "function") {
var argu = Array.prototype.slice.call(arguments,2);
var f = (function(){ fRef.apply(null, argu); });
return _st(f, mDelay);
}
return _st(fRef,mDelay);
}
Define your function to call with setTimeout:
function alertMe(message, name) {
alert(message + name);
}
Now, just call the function.
var message = 'Hello, '; var name = 'Richard'; setTimeout(alertMe, 2000, message, name);
Hope this helps someone! 
How to define your own JavaScript class
There are several ways to define a class in Javascript. I will be listing my favorite method below (JSON Method). It’s important to note that there are no real classes in JavaScript. Everything is considered an object. So below is our class definition:
<script type="text/javascript">
var Person = {
age: "25",
sex: "Male",
location: "New York",
getASL: function () {
return 'Age: ' + this.age + ', Sex: ' + this.sex + ', Location: ' + this.location;
}
};
</script>
So you can start using the class like this:
<script type="text/javascript"> Person.age = "29"; alert(Person.getASL()); </script>
J-Crop – the jQuery image cropping plugin
Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.
Feature Overview- Attaches unobtrusively to any image
- Supports aspect ratio locking
- Supports minSize/maxSize setting
- Callbacks for selection done, or while moving
- Keyboard support for nudging selection
- API features to create interactivity, including animation
- Support for CSS styling
Cross-platform Compatibility
- Firefox 2+
- Safari 3+
- Opera 9.5+
- Google Chrome 0.2+
- Internet Explorer 6+
Simple to implement.
$(function(){ $('#jcrop_target').Jcrop(); });
Get the filename from upload form using Javascript
I needed a way to access the filename of a file being uploaded or attached using the input file from a form. So, I created a nice little function to achieve this. Hopefully it comes in handy for someone.
<script type="text/javascript">
function getNameFromPath(strFilepath) {
var objRE = new RegExp(/([^\/\\]+)$/);
var strName = objRE.exec(strFilepath);
if (strName == null) {
return null;
}
else {
return strName[0];
}
}
</script>
Javascript – Capitalize Each Word in a String
This is a great little function that I use to capitalize every word in a string.
<script type="text/javascript">
function wordToUpper(strSentence) {
return strSentence.toLowerCase().replace(/\b[a-z]/g, convertToUpper);
function convertToUpper() {
return arguments[0].toUpperCase();
}
}
</script>
-
Beware the heat-seeking Nerf machine-gun coming to a cubicle near you http://om.ly/svHF #fb
- Follow me
Last Tweet
Categories
My Favorites
- 37 Signals
- Andrew Warner
- Chris Coyier
- Chris Shiflett
- Collis Ta'eed
- Development Seed
- Drupal
- HubSpot
- James Padolsey
- Joel On Software
- John Resig
- jQuery
- Kevin Rose
- Life Hacker
- Magento
- Mashable
- Matt Cutts
- Matt Ryan
- MySQL
- NetTuts
- Noupe
- Photoshop Tutorials
- PHP
- Smashing Magazine
- Tech Crunch
- WoorkUp
- Wordpress