dustincaruso.com » JavaScript

updated mooInputLabel class for MooTools

admin — Sat, 14 Nov 2009 11:02:54 +0000

I have taken the advice of 2 contributors to my original post (red link below), and have finally posted an update to this MooTools class that…

adds the ability to set the blur and focus colors in the options
sets the reusable reference to the element in the label class

So, without any further explanation, here’s the new code/instructions…

mooInputLabel

1 – copy and paste the following code into your favorite text editor and save it as a new .js file (“mooInputLabel.js”, for example)…

var mooInputLabel = new Class({

Implements: [Options, Events],

     options: {
          inputs: [ ],
          blurColor: '#ccc',
          focusColor: '#000'
     },

initialize: function(options) {
this.setOptions(options);

          var self = this;
          var inputs = this.options.inputs;
          var blurColor = this.options.blurColor;

this.blurColor = blurColor;
this.focusColor = this.options.focusColor;

          inputs.each(function(e) {
               e.addEvent('focus', function() {
                    e = new Event(e).stop();
                    self.inputFocus(this, e.id);
               })
               .addEvent('blur', function() {
                    e = new Event(e).stop();
                    self.inputBlur(this, e.id);
               })
               .setProperty('value', e.id)
               .setStyle('color', blurColor);
          });
     },

     inputFocus: function(x, id) {
          if (x.value == '') {
               x.value = '';
          }
          x.setStyle('color', this.focusColor);
     },

     inputBlur: function(x, id) {
          if (x.value == '') {
               x.value = id;
               x.setStyle('color', this.blurColor);
          }
          else if (x.value == id) {
               x.setStyle('color', this.blurColor);
          }
          else {
               x.setStyle('color', this.focusColor);
          }
     }
});

2 – then, make sure to place links to your new .js file as well as the MooTools core in the of your document

3 – add the appropriate code to each tag on the page that you want to use this feature – example(s)…

* the “label” class signifies this input field as one that uses this feature.
The “id” is also the text used as the “label” value.

4 – finally, we add a MooTools “domready” event to the page to set everything up once the page has completed loading and the DOM is ready. The following code will apply our new feature to all elements with a class of “label”…

window.addEvent('domready', function() {
     new mooInputLabel({
          inputs: $$('input.label')
     });
});

working example:

Click here to view the original article

defaultValueActsAsHint for MooTools

admin — Wed, 14 Jan 2009 16:07:05 +0000

Click here to view my newer post with an updated class and new code

I just got done reading a great article on Ajaxian about Thomas Fuchs’ new JavaScript creation – defaultValueActsAsHint. It’s best described in his words…

An often occuring UI pattern is “use the value of a textfield as hint what to input”. These fields all auto-clear when the user first focuses it (by clicking or tabbing it), and if nothing is entered, the hint will be shown once again once the user leaves it.

Then it hit me. We’ve been doing this in schmedley for quite some time now in several of our schmidgets (Facebook, MySpace, Twitter, Sticky Note, To-Do List, Bookmarks and POP3/IMAP4 Email). It makes perfect sense that widget development would make good use of this User Interface Pattern, as screen real estate in a widget is extremely limited. There is no point in making space for “labels” for text input fields when you can put that text directly IN the field.

So – to make a long story short – I decided to do as Thomas has done and share my little JavaScript tidbit with the world. My version will be in the form of a MooTools class (since that is the framework that powers schmedley).

I’ve named it…

mooInputLabel

1 – copy and paste the following code into your favorite text editor and save it as a new .js file (“mooInputLabel.js”, for example)…

var mooInputLabel = new Class({

Implements: [Options, Events],

     options: {
          inputs: [ ]
     },

initialize: function(options) {
this.setOptions(options);

var inputs = this.options.inputs;
var self = this;

          inputs.each(function(e) {
               e.addEvent('focus', function() {
                    self.inputFocus(e.id);
               })
               .addEvent('blur', function() {
                    self.inputBlur(e.id);
               })
               .setProperty('value', e.id)
               .setStyle('color', '#ccc');
          });
     },

     inputFocus: function(x) {
          if ($(x).value == x) {
               $(x).value = '';
          }

$(x).setStyle('color', '#000');
},

     inputBlur: function(x) {
          if ($(x).value == '') {
               $(x).value = x;
               $(x).setStyle('color', '#ccc');
          }
          else if ($(x).value == x) {
               $(x).setStyle('color', '#ccc');
          }
          else {
               $(x).setStyle('color', '#000');
          }
     }
});

2 – then, make sure to place links to your new .js file as well as the MooTools core in the of your document

3 – add the appropriate code to each tag on the page that you want to use this feature – example(s)…

* the “label” class signifies this input field as one that uses this feature.
The “id” is also the text used as the “label” value.

window.addEvent('domready', function() {
     new mooInputLabel({
          inputs: $$('input.label')
     });
});

working example:

Click here to view my newer post with an updated class and new code

View Source on iPhone

admin — Wed, 28 Nov 2007 00:12:20 +0000

This is a cool little tidbit for those of you web developers that have an iPhone. A Safari bookmarklet that enables you to “View Source” for any web page while using Safari on the iPhone. A bookmarklet (in case you didn’t know) is “a JavaScript program stored as a URL within a bookmark” as defined by Wikipedia.

The steps that follow will walk you through the process…

1 – Select and “copy” the long string of code below…

* This needs to be one long continuous string, so if you’re cutting and pasting from Firefox, you’ll need to remove the line breaks and/or spaces.

2 – On your computer, go to ANY webpage in Safari and bookmark it using either the “+” (Add Bookmark) button or by choosing “Add Bookmark…” from the “Bookmarks” menu. When saving the bookmark name it “View Source” and save it wherever you’d like in your bookmark hierarchy.

3 – Now, go into the bookmark manager. Do this by clicking the bookmark icon in your bookmarks bar or by choosing “Show All Bookmarks” from the “Bookmarks” menu. Navigate to the bookmark you just saved.

4 – Single-click on the URL for the bookmark to highlight the text for editing, and paste the text/code you just copied above.

5 – Plug in your iPhone and sync it up w/ your bookmarks on your computer.

Now, to actually use it – launch your Safari web browser on your iPhone and navigate to whatever web page you would like to view the source code for. After the page has loaded, click the bookmark icon in the lower Safari navigation bar (3rd from the left), and navigate to your “View Source” bookmark and click it.

And there you have it.

JavaScript email cloaking

admin — Sun, 25 Nov 2007 19:31:20 +0000

Here’s another quick one. Below is a simple JavaScript that you can use to cloak your email address when posting it on your website. It dynamically writes the email link into the page which will thwart most spambots (server-side creation of the email link will always be a little more secure). Here’s how we do it…

1 – create a new JavaScript file, name it “email.js”, and paste in the following…

var prefix = "username";
var suffix = "domainname.com";
var address = prefix + "@" + suffix;

document.write('click here');

2 – then place the following code in your page where you want the link to appear…

example:

to contact me via email, please

result:

to contact me via email, please

All you have to do is change 3 variables. The email prefix and suffix are in the first 2 lines of code in the external JavaScript file. The text to display for the hyperlink is in the last line of code (in this case – “click here”). It’s pretty self-explanatory.