Converting from jquery to prototype

Question

Hi all-

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 */

Answer 2

Hi!!! I have the same problem, can you help to convert my function jQuery into Prototype? Please!!!

"threesixty": function(options)
{
  options = options || {};
  options.images = options.images || [];
  options.method = options.method || "click"
  options.cycle = options.cycle || 1;
  options.resetMargin = options.resetMargin || 0;
  options.direction = options.direction || "forward";

  if (options.direction == "backward")
          options.images.reverse();

return this.each(function(){
  var imgArr = [];
  var pic = $(this);
  //ask browser to load all images.. I know this could be beter but is just a POC
  $.each(options.images, function(index, record) {var o =$("<img>").attr("src",record);$("body").append(o);o.hide();});

  for (var x=1; x<=options.cycle; x++)
          for (var y=0; y<options.images.length; y++)
                  imgArr.push(options.images[y]);

  //add the first slice again to complete the loop
  imgArr.push(options.images[0]);

  if (options.method == "mousemove")
    pic.mousemove(function(e) {
            pic.attr("src",imgArr[Math.floor((e.pageX - pic.offset().left) / (pic.width()/imgArr.length))]);
    });
});
}