...

View Full Version : 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:

<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:

$(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:

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum