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

  • Users who have thanked ohgod for this post:

    hothousegraphix (09-11-2008)

  • #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
    •