Commit afbcb3d186afd4e63c86954f8dc211cfa11b832b
1 parent
54669365
Exists in
master
and in
28 other branches
Beautify html alts and titles automagically
Showing
1 changed file
with
79 additions
and
0 deletions
Show diff stats
public/javascripts/application.js
| @@ -694,3 +694,82 @@ jQuery(function() { | @@ -694,3 +694,82 @@ jQuery(function() { | ||
| 694 | target: "#ajax-form-message-area" | 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 | + |