Question

I have the following jquery I’d like to convert to prototype. I am having some real trouble getting it working because I can’t figure out how to initialize it correctly in a rails app.

$(document).ready(function(){
    /*** Search label  ***/
    htmlinput = $("input#panel-search").val() /* picks the inital value of the input (in the html) */
    $("input#panel-search").css('color','#aeaeae').css('font-style','italic').css('font-weight','bold');
    $("input#panel-search").focus(function(){ /* on focus.. */
        curinput = $(this).val() /* picks the -current- value */
        if(curinput == htmlinput){ /* if the current value corrispond to the initial value (htmlinput var) */
            $(this).val(''); /* empty the input */
            $(this).css('color','black').css('font-style', 'normal').css('font-weight','normal');
        }
    });
    $("input#panel-search").blur(function(){ /* on blur */
        curinput = $(this).val();
        if(curinput == ''){ /* if the current value is null .. */
            $(this).css('color','#aeaeae').css('font-style','italic').css('font-weight','bold');
            $(this).val(htmlinput); /* sets the value with its inital value (htmlinput var) */
        }
    })    

    /* Main Navigation hover effect */
    $("ul#navigation li:not('.current'), ul#navigation li:not('highlighted')").hover(
      function () {
        $(this).addClass("hover");
      }, 
      function () {
        $(this).removeClass("hover");
      }
    );

    /* Right Menu hover effect */
    $("ul#fast-links li:not('.current')").hover(
      function () {
        $(this).addClass("current");
      }, 
      function () {
        $(this).removeClass("current");
      }
    );
});

Any help would be much appreciated.

Answer 1

Event.observe(document, 'ready', function () {
    /* pick the inital value of the input (in the html) */
    var $htmlinput = $('input#panel-search');
    var originalValue = $htmlinput.getValue();
    /* Set styles */
    $htmlinput.setStyle({
        color: '#aeaeae',
        'font-weight': 'bold',
        'font-style': 'italic'
    });
    /* on focus.. */
    $htmlinput.observe('focus', function () {
        /* pick the -current- value */
        var $input = $(this);
        /* Clear the input element if the value hasn't changed from
           the original value */
        if($input.getValue() === originalValue) {
           $input.clear();
           $input.setStyle({
              'color': 'black',
              'font-style': 'normal',
              'font-weight','normal'
           });
        }
    });
    $htmlinput.observe('blur', function () {
       /* CHANGE THIS SIMILAR TO ABOVE */
       /* INSIDE IF-CASE */
       $(this).setValue(originalValue);
    });
}
/* Main Navigation hover effect */
/* Prototype doesn't have the fancy :not pseudo-selector, so iterate over
 * all li:s, and filter out the once that shouldn't be affected */
$('ul#navigation li').each(function (el) {
   var isCurrent = el.hasClassName('current'),
       isHighlighted = el.hasClassName('highlighted');
   if(isCurrent || isHighlighted) {
      return;
   }
   el.observe('mouseenter', function () {
      $(this).addClassName('hover');
   });
   el.observe('mouseleave', function () {
      $(this).removeClassName('hover');
   });
});
/* TRANSLATE THE RIGHT NAVIGATION IN THE SAME WAY */