50 replies to this topic

[theeohiostate]

Works great!  Now on to gutting my site of all sprytabs....

 

 

ya , those sprytabs haven't been updated in about 4-5 years i don't think , and its much easier today to do with much less then it was then , and why load an additional script when 90% of any custom site is already loading a jQuery library , at least most new addons need that library anyways...

[theeohiostate]

My 2012 self who basically knew how to make an HTML table... who had no clue what CSS was... and who couldn't find a way to edit an image to make part of it transparent...

...would just like to say thank you for everything.

 

 

I'm right with ya Quick , think i started "trying" to do this in 2009 , and boy was i clueless , i'm still a novice with no educational background in anything related to development , but Google and Stack Overflow have become my best friend , along with the guys here who started all the MFL add ons here like Sticks old partner Adam , Habman and a few others. I'm a basic code hacker , it takes me 10 times longer to do anything because i have to do trial and error , then submit questions on forum support when i get stuck , but in the end , i think most of the things i'm doing are working okay and not causing any site crashes so far :fingerscrossed:

[Screaming Eagle]

This is great. The only thing I can think of to improve it would be to add a fairly quick fade in and out. 

 

I like how you didn't include the list elements inside a table caption. That is something I never understood with the spry tabs. 

[theeohiostate]

This is great. The only thing I can think of to improve it would be to add a fairly quick fade in and out. 

 

I like how you didn't include the list elements inside a table caption. That is something I never understood with the spry tabs. 

 

 

I have tried jQuery fadeIn / fadeOut , but since the elements are loaded and when you use the fade there are always 2 elements present and this causes the content to jump up and down , I also tried to animate it and same issue , the only way to resolve this is to position the content in absolute positioning , which i do not want to do , as that creates a whole new set of issues for elements under the tab group.

 

I suppose i could fade the content all the way out fully , then fade in new content after that fade is done so only 1 element is present at a time , but that may not look that good of an effect imo

[bonscott]

If you did that fade thing I can already hear the complaints from owners that it takes too long to get the next tab content up.  While fading "looks cool", the practicality of it after the first couple times just isn't there.  Better to have instant switching (in my mind).

 

I got started many moons ago customizing with CSS and HTML but got quickly lapped by all the javascript and coding geniuses out there.    You guys are way beyond me with this stuff.  

[DA-G-GURU]

If you did that fade thing I can already hear the complaints from owners that it takes too long to get the next tab content up.  While fading "looks cool", the practicality of it after the first couple times just isn't there.  Better to have instant switching (in my mind).

 

I got started many moons ago customizing with CSS and HTML but got quickly lapped by all the javascript and coding geniuses out there.    You guys are way beyond me with this stuff.  

 

+1 Totally agree..    I have pulled TOS ear so many times, keep it simple...and clean...

[theeohiostate]

working on a fade version , but will make this separate script and not combine with original for those that want a transition ..... if i can get it working to my satisfaction .... no sense in posting something that doesn't look good , so we'll see , testing it now

[quickolas1]

While fading "looks cool", the practicality of it after the first couple
times just isn't there.  Better to have instant switching (in my mind).

 

Simpler fade on the tab hover always works:

.tabbed-reports li:hover {-moz-transition: color 0.75s; -webkit-transition: color 0.75s; -o-transition: color 0.75s; -ms-transition: color 0.75s; }

or use TOS' universal transition tag.

[theeohiostate]

Got the content fade working dunno if I like it though

http://www26.myfanta...2015/home/25094

[DA-G-GURU]

Nooooooo but that's me

[theeohiostate]

dont think i have any interest in using the content fadeIn fadeOut , but if anyone does , here is script for that to use instead of other

<!-----------------------------------------------------------------------------------  
  TABS SCRIPT PLACE IN FOOTER MESSAGE - FADE VERSION
------------------------------------------------------------------------------------->
<script>
$('.tabbed-reports li').on('click',function(e){
   $(this).parent().parent().find("div").find("div:visible").fadeOut(300,function(){
       $('.reports-content>.'+ e.target.classList[0]).fadeIn(300).siblings().hide();
     });
});
var selector = '.tabbed-reports li';
$(selector).on('click', function(){
    $(this).parent().find('li').removeClass('active');
    $(this).parent().find('li').removeClass('current');
    $(this).addClass('active');
});
</script> 

[theeohiostate]

While fading "looks cool", the practicality of it after the first couple
times just isn't there.  Better to have instant switching (in my mind).

 

Simpler fade on the tab hover always works:

.tabbed-reports li:hover {-moz-transition: color 0.75s; -webkit-transition: color 0.75s; -o-transition: color 0.75s; -ms-transition: color 0.75s; }

or use TOS' universal transition tag.

 

 

that will get the text transition , this will get the text and the bg color

 

 

.tabbed-reports li:hover {
     -webkit-transition: background 1s linear;
     -moz-transition: background 1s linear;
     -ms-transition: background 1s linear;
     -o-transition: background 1s linear;
     transition: background 1s linear;
}

[mboko13]

Is it possible to have tabs nested under one another, or am I wasting my time trying to figure this out?

 

For example, lets say I wanted to put Communications and Reports together in one table, then include Chat, Message Board & Polls under Communications, and Standings, Power Rank, Schedules, etc under Reports?  Is this doable?  

 

I had it close to working, but the very first module (Chat, in the example above) would appear at the bottom of every single tab.  I tried placing the <ul class="tabbed-reports"></ul> and <div class="reports-content"></div> tags in a bunch of different places, but the report just became a mess, so I wiped out what I had, and figured I'd ask if it's even possible before attempting it again.

 

I don't know that what I'm trying to do would look better then using a couple of the separate reports you provided (and thank you for once again sharing your amazing work), but I had a bunch of spry tabs set up that way, and I was trying to keep things similar to what I originally had, since I have a couple owners that don't handle changes to our site all that well.

[theeohiostate]

Nested tab example. Demo- http://www26.myfanta...MODULE=MESSAGE5

 

You can do multiple nested tabs within the main tabbed content , you could also nest tabs within the nested tabs. Although i didnt show in my example , you could wrap the nested tabs within a table and add a caption to it like the main wrapped tabs are done

<!-------------------------------------   
        TOP PLAYER CHART TABS
-------------------------------------->

<!-----  ADD  CAPTION AND WRAP TABS AND CONTENT IN TABLE TO MATCH SITE  ------>
<table id="custom-reports" class="report topextras"><caption><span>Top Player Chart</span></caption>
 <tbody><tr><td>

<!-----  TABBED REPORT NAVIGATION  ------>
   <ul class="tabbed-reports">
    <li class="report11 current">Tops Adds</li>
    <li class="report12">Top Drops</li>
    <li class="report13">Top Started</li>
    <li class="report14">Top Owned</li>
    <li class="report15">Top Steals</li>
    <li class="report16">Top Busts</li>
   </ul>


<!-----  TABBED REPORTS CONTENT  ------>
   <div class="reports-content">
    <div class="report11"><module name="TOP_ADDS" COUNT="15"/></div>

    <div class="report12" style="display:none;">


<!-------------------------------------------------  
                START NESTED TABS  
--------------------------------------------------->

      <!-----  NESTED TABBED REPORT NAVIGATION  ------>
      <ul class="tabbed-reports">
       <li class="report61 current">Transactions</li>
       <li class="report62">NFL Schedule</li>
       <li class="report63">Power Rank</li>
       <li class="report64">Summary</li>
       <li class="report65">Fantasy Schedule</li>
       <li class="report66">Results</li>
      </ul>

      <!-----  NESTED TABBED REPORTS CONTENT  ------>
      <div class="reports-content">
       <div class="report61"><module name="TRANSACTIONS"/></div>
       <div class="report62" style="display:none;"><module name="NFLSCHEDULE"/></div>
       <div class="report63" style="display:none;"><module name="POWER_RANK"/></div>
       <div class="report64" style="display:none;"><module name="WEEKLY_SUMMARY"/></div>
       <div class="report65" style="display:none;"><module name="NEXT_WEEKS_FANTASY_SCHEDULE"/></div>
       <div class="report66" style="display:none;"><module name="LAST_WEEKS_FANTASY_RESULTS"/></div>
      </div>

<!-------------------------------------------------  
                END NESTED TABS  
--------------------------------------------------->

   </div> 

    <div class="report13" style="display:none;"><module name="TOP_STARTERS" COUNT="15"/></div>
    <div class="report14" style="display:none;"><module name="TOP_OWNS" COUNT="15"/></div>
    <div class="report15" style="display:none;"><module name="TOP_STEALS" COUNT="15"/></div>
    <div class="report16" style="display:none;"><module name="TOP_BUSTS" COUNT="15"/></div>
   </div>
 </td></tr></tbody>
</table>

[quickolas1]

I had it close to working, but the very first module (Chat, in the example above) would appear at the bottom of every single tab.

 

Most likely you added an extra character somewhere or deleted a character somewhere in your code. Omitting one quotation mark where it needs to go - can alone - throw off all the tabs.

 

Other common mistakes will be not using a different report number for each and every tab, not adding current to the first tab in each navigation section, making sure each first tab does NOT have display:none; in the content section, and making sure the other tabs DO have display:none; in each content section.

 

CSS

If your tabs are in immediate view every time someone goes to your home page... I'd put the styling at the top of the HPM you're using (for loading order). If you're using multiple tabs in multiple HPMs, they load in order so you'd put the style at the top of the first HPM (only) to catch all the subsequent HPMs.

(If you insist on leaving the style inside the HPM which is lazy and not ideal anyway.)

 

You can also pick and choose which captions you want to hide... so in the following example I'm calling out my 30 series (which for me is my_news, hot_news, news_articles) and a shorthand for all the top performers tabs:

.report31 caption, .report32 caption, .report33 caption, #home #top_performers caption {display:none; }

Obviously I removed this part of the CSS so the other captions I want to show are actually showing:

.reports-content .report caption {display:none; }