CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)
-   -   Resolved Prototype tabs script "crashing" when attempting to reassign active "class" (http://www.codingforums.com/showthread.php?t=148596)

hothousegraphix 09-10-2008 10:49 PM

Prototype tabs script "crashing" when attempting to reassign active "class"
 
I'm using a tab script I ran across that works only if I remove the portion of the function that removes the "active" class on the active tab when a new tab is selected.

The script requires prototype.

Code:

var visibleTabContent = 'one';
function switchTabs(ulId, clickedListItem, clickedListItemsDivId) {
  if (!$(clickedListItemsDivId).visible()) {
    $(visibleTabContent).hide();                                            //hide the DIV contents for the old tab
    $(ulId).select('li.active').invoke('removeClassName', 'active'); //remove the "active_tab" class from the old tab
    $(clickedListItem.id).addClassName('active');                        //add the "active" class to the new tab
    $(clickedListItemsDivId).show();                                        //show the DIV contents for the new tab
    visibleTabContent = clickedListItemsDivId;                              //save the name of the active tab for future reference
  }
}

IF I remove
Code:

$(ulId).select('li.active').invoke('removeClassName', 'active');
The tab selection functions; however, as one might guess, it's not shifting the "active" style from tab to tab, it's simply assigning it.

I've tried doing
Code:

$(ulId).select('li.active').removeClassName('active');
sinse "removeClassName" is a prototype function, but it delivers the same results.

Error: $(ulId).select is not a function ???

The accompanying mark-up is
Code:

<ul id="tabs_menu" class="margin_20 clearfix">

        <li  id="cat1" class="active" onclick="switchTabs('tabs_menu', this, 'one')">Cat 1 +</li>
        <li  id="cat2" onclick="switchTabs('tabs_menu', this, 'two')">Cat 2 +</li>
        <li  id="cat3" onclick="switchTabs('tabs_menu', this, 'three')">Cat 3 +</li>
</ul>
<div id="one">
        <!--Content Here-->
</div>
<div id="two">
        <!--Content Here-->
</div>
<div id="three">
        <!--Content Here-->
</div>

Any advice?

Thanks

ohgod 09-11-2008 03:07 PM

try $('ulId').select

i've come across several instances where the api docs will be off on this, and it does need the single quotes.

hothousegraphix 09-11-2008 06:28 PM

Hey, thanks for the response.

A new day brings a clear head and a resolution now that my head has been removed from my rear end.

Argggggggg! I kick myself.

It would have been good to have been using the proper version of "Prototype". 1.6.0.2.


All times are GMT +1. The time now is 02:33 AM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.