Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JQuery to Prototype code conversion

    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.
    Last edited by khawar; 08-26-2009 at 02:29 PM.

  • #2
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    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?

  • #3
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •