SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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 JavaScript:
    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 JavaScript:
     $(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 JavaScript:
    $(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 HTML4Strict:
    <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 suggestions on how to achieve this?

    Thanks
    Last edited by hothousegraphix; Sep 10, 2008 at 17:58.

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also tried
    Code JavaScript:
    $(ulId).select('li').removeClassName('li','active');

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

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