JQuery to Prototype code conversion

khawar · 08-26-2009, 02:23 PM

I need to convert JQuery code to Prototype. I have already done so by putting bits and pieces together, but my code does not work correctly in IE. The piece of code hide/show columns in a 3-column layout. Here is the code:

HTML:

Code:

    <div id="layout-switcher" class="info">
      <p class="switch"><strong>Toggle to change the layout:</strong>
        <a id="toggle_a" href="#">hidecol1</a> |
        <a id="toggle_b" href="#">hidecol2</a> |
        <a id="toggle_c" href="#">hideboth</a>
      </p>
    </div>

JQuery:

Code:

$(document).ready(function(){
  $('#js-info').hide();
  $('#layout-switcher p.switch').show();

  $('a[id*=toggle]').click(function(){
    if ($(this).hasClass('active') === true) {
      $('a').removeClass('active');
      $('body').removeAttr('class');
    } else {
      $('a').removeClass('active');
      $('body').removeAttr('class').addClass($(this).text());
      $(this).addClass('active');
    }     
  });

  $('#toggle_linear').hide();
});

Prototype:

Code:

document.ready(function(){
  $('js-info').hide();
  $('layout-switcher').select('p.switch').first().show();

  $$('a[id*="toggle"]').each(function(elt) {
    Event.observe(elt, 'click', function(event) {
      Event.stop(event);

      if ($(this).hasClassName("active") === true) {
        $$('a').invoke('removeClassName', 'active');
        $(document.body).removeAttribute('class');
      } else {
        $$('a').invoke('removeClassName', 'active');
        $(document.body).removeAttribute('class');
        $(document.body).addClassName($(this).innerHTML);
        $(this).addClassName('active');
      }
    });
  });
});

Prototype code is my attempt to change the original JQuery code. In Firfox this thing works; in IE clicking the toggle link does not show the div once it is hidden. Thank you for your help.

ohgod · 08-26-2009, 03:07 PM

this seems like a heck of a lot of work for a simple show\hide

can you explain a little more as to what your needs are?

khawar · 08-27-2009, 06:10 AM

The code is copied from this site (code that goes with their dynamic 3-column layout; this code helps show hide columns within the 3-column layout).

http://www.yaml.de/en/home.html

I am sure this lot of code is there for a reason (that I do not fully understand). I want to make the layout base for my project as their demo page (in JQuery) works perfectly with IE and Firefox. My own attempts to get the same cross-browser compatibility were failing. So, in short, I am trying to mimic whatever is in their JQuery code. The lot of code here might be for putting in classes to fix widths of un-hidden columns etc.