Beautify html alts and titles automagically

Braulio Bhavamitra
1 parent 54669365
Showing 1 changed file with 79 additions and 0 deletions Show diff stats
public/javascripts/application.js
@@ -694,3 +694,82 @@ jQuery(function() {
     target: "#ajax-form-message-area"
   })
 });
+
+/**
+* @author Remy Sharp
+* @url http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/
+*/
+
+(function ($) {
+
+$.fn.hint = function (blurClass) {
+  if (!blurClass) { 
+    blurClass = 'blur';
+  }
+    
+  return this.each(function () {
+    // get jQuery version of 'this'
+    var $input = $(this),
+    
+    // capture the rest of the variable to allow for reuse
+      title = $input.attr('title'),
+      $form = $(this.form),
+      $win = $(window);
+
+    function remove() {
+      if ($input.val() === title && $input.hasClass(blurClass)) {
+        $input.val('').removeClass(blurClass);
+      }
+    }
+
+    // only apply logic if the element has the attribute
+    if (title) { 
+      // on blur, set value to title attr if text is blank
+      $input.blur(function () {
+        if (this.value === '') {
+          $input.val(title).addClass(blurClass);
+        }
+      }).focus(remove).blur(); // now change all inputs to title
+      
+      // clear the pre-defined text when form is submitted
+      $form.submit(remove);
+      $win.unload(remove); // handles Firefox's autocomplete
+    }
+  });
+};
+
+})(jQuery);
+
+var altBeautify = jQuery('<div id="alt-beautify" style="display:none; position: absolute"/>')
+  .append('<div class="alt-beautify-content"/>')
+  .append('<div class="alt-beautify-arrow-border"/>')
+  .append('<div class="alt-beautify-arrow"/>');
+var altTarget;
+jQuery(document).ready(function () {
+  jQuery('body').append(altBeautify);
+});
+
+function altTimeout() {
+  if (!altTarget)
+    return;
+  altBeautify.css('top', jQuery(altTarget).offset().top + jQuery(altTarget).height());
+  altBeautify.css('left', jQuery(altTarget).offset().left);
+  altBeautify.find('.alt-beautify-content').html(jQuery(altTarget).attr('alt-beautify'));
+  altBeautify.show();
+}
+
+jQuery('a[title]').live('mouseover', function (e) {
+  alt = jQuery(this).attr('title');
+  if (alt != '') {
+    jQuery(this).attr('alt-beautify', alt);
+    jQuery(this).attr('title', '');
+  }
+
+  altTarget = this;
+  setTimeout("altTimeout()", 300);
+});
+jQuery('a[title]').live('mouseout', function (e) {
+  altTarget = null;
+  altBeautify.hide();
+});
+
...	...	@@ -694,3 +694,82 @@ jQuery(function() {
694	694	target: "#ajax-form-message-area"
695	695	})
696	696	});
	697	+
	698	+/**
	699	+* @author Remy Sharp
	700	+* @url http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/
	701	+*/
	702	+
	703	+(function ($) {
	704	+
	705	+$.fn.hint = function (blurClass) {
	706	+ if (!blurClass) {
	707	+ blurClass = 'blur';
	708	+ }
	709	+
	710	+ return this.each(function () {
	711	+ // get jQuery version of 'this'
	712	+ var $input = $(this),
	713	+
	714	+ // capture the rest of the variable to allow for reuse
	715	+ title = $input.attr('title'),
	716	+ $form = $(this.form),
	717	+ $win = $(window);
	718	+
	719	+ function remove() {
	720	+ if ($input.val() === title && $input.hasClass(blurClass)) {
	721	+ $input.val('').removeClass(blurClass);
	722	+ }
	723	+ }
	724	+
	725	+ // only apply logic if the element has the attribute
	726	+ if (title) {
	727	+ // on blur, set value to title attr if text is blank
	728	+ $input.blur(function () {
	729	+ if (this.value === '') {
	730	+ $input.val(title).addClass(blurClass);
	731	+ }
	732	+ }).focus(remove).blur(); // now change all inputs to title
	733	+
	734	+ // clear the pre-defined text when form is submitted
	735	+ $form.submit(remove);
	736	+ $win.unload(remove); // handles Firefox's autocomplete
	737	+ }
	738	+ });
	739	+};
	740	+
	741	+})(jQuery);
	742	+
	743	+var altBeautify = jQuery('<div id="alt-beautify" style="display:none; position: absolute"/>')
	744	+ .append('<div class="alt-beautify-content"/>')
	745	+ .append('<div class="alt-beautify-arrow-border"/>')
	746	+ .append('<div class="alt-beautify-arrow"/>');
	747	+var altTarget;
	748	+jQuery(document).ready(function () {
	749	+ jQuery('body').append(altBeautify);
	750	+});
	751	+
	752	+function altTimeout() {
	753	+ if (!altTarget)
	754	+ return;
	755	+ altBeautify.css('top', jQuery(altTarget).offset().top + jQuery(altTarget).height());
	756	+ altBeautify.css('left', jQuery(altTarget).offset().left);
	757	+ altBeautify.find('.alt-beautify-content').html(jQuery(altTarget).attr('alt-beautify'));
	758	+ altBeautify.show();
	759	+}
	760	+
	761	+jQuery('a[title]').live('mouseover', function (e) {
	762	+ alt = jQuery(this).attr('title');
	763	+ if (alt != '') {
	764	+ jQuery(this).attr('alt-beautify', alt);
	765	+ jQuery(this).attr('title', '');
	766	+ }
	767	+
	768	+ altTarget = this;
	769	+ setTimeout("altTimeout()", 300);
	770	+});
	771	+jQuery('a[title]').live('mouseout', function (e) {
	772	+ altTarget = null;
	773	+ altBeautify.hide();
	774	+});
	775	+
...	...