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
    Regular Coder
    Join Date
    May 2003
    Location
    Chicago, IL
    Posts
    131
    Thanks
    3
    Thanked 0 Times in 0 Posts

    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
    Last edited by hothousegraphix; 09-11-2008 at 09:25 PM. Reason: Resolved

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

  3. Users who have thanked ohgod for this post:

    hothousegraphix (09-11-2008)

  4. #3
    Regular Coder
    Join Date
    May 2003
    Location
    Chicago, IL
    Posts
    131
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.


 

Posting Permissions

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