Jump to content


Photo

Create your own tabs


This topic has been archived. This means that you cannot reply to this topic.
50 replies to this topic

#16 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,461 posts

Posted 17 July 2015 - 11:20 AM

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


FREE Player Cuts Collection
https://www.nitrogra...om/player-cuts/


#17 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,461 posts

Posted 17 July 2015 - 11:24 AM

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:


FREE Player Cuts Collection
https://www.nitrogra...om/player-cuts/


#18 Screaming Eagle

Screaming Eagle

    Veteran

  • Members
  • PipPipPip
  • 321 posts

Posted 17 July 2015 - 11:54 AM

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. 


Gridiron Tavern, the best IDP league available.

#19 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,461 posts

Posted 17 July 2015 - 12:17 PM

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


FREE Player Cuts Collection
https://www.nitrogra...om/player-cuts/


#20 bonscott

bonscott

    Veteran

  • Members
  • PipPipPip
  • 7,878 posts

Posted 17 July 2015 - 12:32 PM

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



 


#21 DA-G-GURU

DA-G-GURU

    Veteran

  • Members
  • PipPipPip
  • 1,177 posts

Posted 17 July 2015 - 12:34 PM

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


Simply The Best in Grafix and CSS webdesign since 2005

www.dagrafixdesigns.com

---------------
Twitter @DA_Sticks

#22 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,461 posts

Posted 17 July 2015 - 12:52 PM

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


FREE Player Cuts Collection
https://www.nitrogra...om/player-cuts/


#23 quickolas1

quickolas1

    Veteran

  • Members
  • PipPipPip
  • 958 posts

Posted 17 July 2015 - 02:21 PM

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.



#24 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,461 posts

Posted 17 July 2015 - 02:47 PM

Got the content fade working dunno if I like it though

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

FREE Player Cuts Collection
https://www.nitrogra...om/player-cuts/


#25 DA-G-GURU

DA-G-GURU

    Veteran

  • Members
  • PipPipPip
  • 1,177 posts

Posted 17 July 2015 - 06:30 PM

Nooooooo but that's me :)
Simply The Best in Grafix and CSS webdesign since 2005

www.dagrafixdesigns.com

---------------
Twitter @DA_Sticks

#26 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,461 posts

Posted 17 July 2015 - 09:19 PM

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> 

FREE Player Cuts Collection
https://www.nitrogra...om/player-cuts/


#27 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,461 posts

Posted 17 July 2015 - 09:32 PM

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;
}

FREE Player Cuts Collection
https://www.nitrogra...om/player-cuts/


#28 mboko13

mboko13

    Member

  • Members
  • PipPip
  • 21 posts

Posted 18 July 2015 - 09:26 PM

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.



#29 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,461 posts

Posted 19 July 2015 - 06:16 AM

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>

FREE Player Cuts Collection
https://www.nitrogra...om/player-cuts/


#30 quickolas1

quickolas1

    Veteran

  • Members
  • PipPipPip
  • 958 posts

Posted 19 July 2015 - 10:15 AM

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; }