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

#1 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,408 posts

Posted 05 June 2015 - 03:57 PM

see below , no longer using sprytabs


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


#2 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,408 posts

Posted 05 June 2015 - 04:06 PM

.


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


#3 DA-G-GURU

DA-G-GURU

    Veteran

  • Members
  • PipPipPip
  • 1,165 posts

Posted 05 June 2015 - 10:00 PM

Again I appreciate your attention to detail, in everything code related you do. Good Stuff TOS.
Simply The Best in Grafix and CSS webdesign since 2005

www.dagrafixdesigns.com

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

#4 quickolas1

quickolas1

    Veteran

  • Members
  • PipPipPip
  • 953 posts

Posted 06 June 2015 - 09:28 AM

---



#5 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,408 posts

Posted 14 July 2015 - 12:11 PM

I decided to remove my sprytabs , and since all my sites are already loading a jQuery library , to just write a simple script for tabs using jQuery. Now i don't need to load another external script for the sprytabs.js file.

 

Example: These function exactly like the sprytabs , without all the bloated javascript it uses , just needs 1 line of jQuery instead. This is less HTML , CSS and Javascript

 

You can place as many sets of tab groups as you wish. To add another tab group , copy and paste same code , redo the modules your loading , change the caption name , change the name that displays in the li class=report , and do not duplicate the same class name report , so start with report1 , then keep going on for as many as you have...

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

<!-----  TABBED REPORT NAVIGATION  ------>
   <ul class="tabbed-reports">
    <li class="report1 current">TRANSACTIONS</li>
    <li class="report2">NFL SCHEDULE</li>
    <li class="report3">POWER RANK</li>
    <li class="report4">SUMMARY</li>
    <li class="report5">FANTASY SCHEDULE</li>
    <li class="report6">RESULTS</li>
   </ul>


<!-----  TABBED REPORTS CONTENT  ------>
   <div class="reports-content">
    <div class="report1"><module name="TRANSACTIONS"/></div>
    <div class="report2" style="display:none;"><module name="NFLSCHEDULE"/></div>
    <div class="report3" style="display:none;"><module name="POWER_RANK"/></div>
    <div class="report4" style="display:none;"><module name="WEEKLY_SUMMARY"/></div>
    <div class="report5" style="display:none;"><module name="NEXT_WEEKS_FANTASY_SCHEDULE"/></div>
    <div class="report6" style="display:none;"><module name="LAST_WEEKS_FANTASY_RESULTS"/></div>
   </div>
 </td></tr></tbody>
</table>


<!-------------------------------------  
  TABS SCRIPT PLACE IN FOOTER MESSAGE
-------------------------------------->
<script>
$('.tabbed-reports li').on('click',function(e){
    $('.reports-content>.'+ e.target.classList[0]).show().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>


<!-----  TABBED REPORTS STYLE  ------>
<style>
/*   TABBED REPORTS 
===================== */
.tabbed-reports {
     list-style:none;
     padding-left:0;
     text-align:center;
     margin:0px 0 5px 0;
     background: none repeat scroll 0px 0px #FFF;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     border: 2px solid rgba(38, 62, 104, 0.4);
     box-shadow: 0px 0px 13px 1px rgba(38, 62, 104, 0.2) inset;
     border-spacing:0;
}

.tabbed-reports li {
     margin:0;
     display:table-cell;
     width:1%;
     cursor:pointer;
     text-transform:uppercase;
     border-left: 1px solid rgba(38, 62, 104, 0.2);
     border-right: 1px solid rgba(38, 62, 104, 0.2);
     color:#263e68; 
     transition: none;
     line-height:25px;
}

.tabbed-reports li:hover { 
     color:#fff; 
     background: none repeat scroll 0px 0px rgba(218, 43, 42, 0.9);
} 

.tabbed-reports li:last-of-type {
     border-right:0;
     -webkit-border-top-right-radius: 5px;
     -webkit-border-bottom-right-radius: 5px;
     -moz-border-radius-topright: 5px;
     -moz-border-radius-bottomright: 5px;
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
}

.tabbed-reports li:first-of-type {
     border-left:0;
     -webkit-border-top-left-radius: 5px;
     -webkit-border-bottom-left-radius: 5px;
     -moz-border-radius-topleft: 5px;
     -moz-border-radius-bottomleft: 5px;
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
}

.reports-content .report {
     width:100%;
     border:0;
     padding:0;
     box-shadow: 0px 0px 0px 0px inset;padding-bottom:0!important
}

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

.reports-content .franchiseicon {
     width:220px;
     max-width:220px;
     height:auto;
}
</style>

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


#6 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,408 posts

Posted 14 July 2015 - 07:07 PM

Here is examples of multiple tab groups , you could place each group in its own message and show anywhere on the MFL site . This is all the tab groupings from my personal site

 

 

OWNER QUICK VIEW TABS

<!-------------------------------------   
       QUICK LINKS TABS
-------------------------------------->

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

<!-----  TABBED REPORT NAVIGATION  ------>
   <ul class="tabbed-reports">
    <li class="report1 current">Chat</li>
    <li class="report2">Tweets</li>
    <li class="report3">Activity</li>
    <li class="report4">Options</li>
    <li class="report5">My Notes</li>
    <li class="report6">Log In</li>
   </ul>


<!-----  TABBED REPORTS CONTENT  ------>
   <div class="reports-content">
    <div class="report1"><module name="LEAGUE_CHAT"/></div>
    <div class="report2" style="display:none;"><module name="TWITTER_FEED"/></div>
    <div class="report3" style="display:none;"><module name="OWNER_ACTIVITY"/></div>
    <div class="report4" style="display:none;"><module name="MY_OPTIONS"/></div>
    <div class="report5" style="display:none;"><module name="MY_SCRATCHPAD"/></div>
    <div class="report6" style="display:none;"><module name="WELCOME"/></div>
   </div>
 </td></tr></tbody>
</table> 

 



TOP PLAYER ADDS-DROPS-BUSTS-STEALS

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

<!-----  ADD  CAPTION AND WRAP TABS AND CONTENT IN TABLE TO MATCH SITE  ------>
<table id="custom-reports" class="report"><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;"><module name="TOP_DROPS" COUNT="15"/></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> 

 


TOP PLAYERS TABS - replace "#" in the img scr field of each position with your own custom image

<!-------------------------------------  
     TOP PERFORMERS TABS
-------------------------------------->

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

<!-----  TABBED REPORT NAVIGATION  ------>
   <ul class="tabbed-reports">
    <li class="report21 current">MVP</li>
    <li class="report22">QB's</li>
    <li class="report23">RB's</li>
    <li class="report24">WR's</li>
    <li class="report25">TE's</li>
    <li class="report26">PK's</li>
    <li class="report27">DEF</li>
   </ul>


<!-----  TABBED REPORTS CONTENT  ------>
   <div class="reports-content">
    <div class="report21"><center><img src="#"/><module name="TOP_PERFORMERS" COUNT="10"/></center> </div>
    <div class="report22" style="display:none;"><center><img src="#"/><module name="TOP_PERFORMERS" COUNT="10" POSITION="QB" /> </center></div>
    <div class="report23" style="display:none;"><center><img src="#"/><module name="TOP_PERFORMERS" COUNT="10" POSITION="RB" /></center> </div>
    <div class="report24" style="display:none;"><center><img src="#"/><module name="TOP_PERFORMERS" COUNT="10" POSITION="WR" /> </center></div>
    <div class="report25" style="display:none;"><center><img src="#"/><module name="TOP_PERFORMERS" COUNT="10" POSITION="TE" /> </center></div>
    <div class="report26" style="display:none;"><center><img src="#"/><module name="TOP_PERFORMERS" COUNT="10" POSITION="PK" /></center> </div>
    <div class="report27" style="display:none;"><center><img src="#"/><module name="TOP_PERFORMERS" COUNT="10" POSITION="Def" /> </center></div>
   </div>
 </td></tr></tbody>
</table> 

 


TOP FREE AGENT TABS - replace "#" in the img scr field of each position with your own custom image

<!-------------------------------------  
     TOP FREE AGENT TABS
-------------------------------------->

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

<!-----  TABBED REPORT NAVIGATION  ------>
   <ul class="tabbed-reports">
    <li class="report31 current">MVP</li>
    <li class="report32">QB's</li>
    <li class="report33">RB's</li>
    <li class="report34">WR's</li>
    <li class="report35">TE's</li>
    <li class="report36">PK's</li>
    <li class="report37">DEF</li>
   </ul>


<!-----  TABBED REPORTS CONTENT  ------>
   <div class="reports-content">
    <div class="report31"><center><img src="#"/><module name="TOP_FA" COUNT="10"/></center> </div>
    <div class="report32" style="display:none;"><center><img src="#"/><module name="TOP_FA" COUNT="10" POSITION="QB" /> </center></div>
    <div class="report33" style="display:none;"><center><img src="#"/><module name="TOP_FA" COUNT="10" POSITION="RB" /></center> </div>
    <div class="report34" style="display:none;"><center><img src="#"/><module name="TOP_FA" COUNT="10" POSITION="WR" /> </center></div>
    <div class="report35" style="display:none;"><center><img src="#"/><module name="TOP_FA" COUNT="10" POSITION="TE" /> </center></div>
    <div class="report36" style="display:none;"><center><img src="#"/><module name="TOP_FA" COUNT="10" POSITION="PK" /></center> </div>
    <div class="report37" style="display:none;"><center><img src="#"/><module name="TOP_FA" COUNT="10" POSITION="Def" /> </center></div>
   </div>
 </td></tr></tbody>
</table> 

 


STANDINGS TABS

<!-------------------------------------   
       STANDINGS TABS
-------------------------------------->

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

<!-----  TABBED REPORT NAVIGATION  ------>
   <ul class="tabbed-reports">
    <li class="report41 current">EAST</li>
    <li class="report42">CENTRAL</li>
    <li class="report43">WEST</li>
    <li class="report44">ALL DIVISIONS</li>
   </ul>


<!-----  TABBED REPORTS CONTENT  ------>
   <div class="reports-content">
    <div class="report41"><module name="STANDINGS" UNIT="DIVISION00"/></div>
    <div class="report42" style="display:none;"><module name="STANDINGS" UNIT="DIVISION01"/></div>
    <div class="report43" style="display:none;"><module name="STANDINGS" UNIT="DIVISION02"/></div>
    <div class="report44" style="display:none;"><module name="STANDINGS"/></div>
   </div>
 </td></tr></tbody>
</table> 


 

POOLS TABS

<!-------------------------------------   
         POOLS TABS
-------------------------------------->

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

<!-----  TABBED REPORT NAVIGATION  ------>
   <ul class="tabbed-reports">
    <li class="report51 current">Fantasy Pick'em</li>
    <li class="report52">Survivor Pool</li>
    <li class="report53">NFL Pick'em</li>
    <li class="report54">Top Survivor Picks</li>
   </ul>


<!-----  TABBED REPORTS CONTENT  ------>
   <div class="reports-content">
    <div class="report51"><module name="FANTASY_CONFIDENCE_POOL"/></div>
    <div class="report52" style="display:none;"><module name="NFL_SURVIVOR_POOL"/></div>
    <div class="report53" style="display:none;"><module name="NFL_CONFIDENCE_POOL"/></div>
    <div class="report54" style="display:none;"><module name="TOP_SURVIVOR_PICKS"/></div>
   </div>
 </td></tr></tbody>
</table> 

 

 

REPORTS TABS

<!-------------------------------------   
         LEAGUE REPORTS TABS
-------------------------------------->

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

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


<!-----  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>
 </td></tr></tbody>
</table>

 



SCRIPT TO RUN ALL TABS GOES IN FOOTER

<!-------------------------------------  
  TABS SCRIPT PLACE IN FOOTER MESSAGE
-------------------------------------->
<script>
$('.tabbed-reports li').on('click',function(e){
    $('.reports-content>.'+ e.target.classList[0]).show().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> 

 

 


CSS FOR ALL TABS GOES IN YOUR MAIN CSS FILE

<!-------------------------------------  
  TABS STYLE PLACE IN MAIN CSS FILE
-------------------------------------->

<style>
/*   TABBED REPORTS
===================== */
.tabbed-reports {
     list-style:none;
     padding-left:0;
     text-align:center;
     margin:0px 0 5px 0;
     background: none repeat scroll 0px 0px #FFF;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     border: 2px solid rgba(38, 62, 104, 0.4);
     box-shadow: 0px 0px 13px 1px rgba(38, 62, 104, 0.2) inset;
     border-spacing:0;
}

.tabbed-reports li {
     margin:0;
     display:table-cell;
     width:1%;
     cursor:pointer;
     text-transform:uppercase;
     border-left: 1px solid rgba(38, 62, 104, 0.2);
     border-right: 1px solid rgba(38, 62, 104, 0.2);
     color:#263e68;
     transition: none;
     line-height:25px;
}

.tabbed-reports li:hover {
     color:#fff;
     background: none repeat scroll 0px 0px rgba(218, 43, 42, 0.9);
}

.tabbed-reports li.active , .tabbed-reports li.current {
     color:#fff;
     background: none repeat scroll 0px 0px rgba(218, 43, 42, 0.9);
}

.tabbed-reports li:last-of-type {
     border-right:0;
     -webkit-border-top-right-radius: 5px;
     -webkit-border-bottom-right-radius: 5px;
     -moz-border-radius-topright: 5px;
     -moz-border-radius-bottomright: 5px;
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
}

.tabbed-reports li:first-of-type {
     border-left:0;
     -webkit-border-top-left-radius: 5px;
     -webkit-border-bottom-left-radius: 5px;
     -moz-border-radius-topleft: 5px;
     -moz-border-radius-bottomleft: 5px;
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
}

.reports-content .report {
     width:100%;
     border:0;
     padding:0;
     box-shadow: 0px 0px 0px 0px inset;
}

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

.reports-content .franchiseicon {
     width:220px;
     max-width:220px;
     height:auto;
}
</style>

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


#7 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,408 posts

Posted 14 July 2015 - 07:32 PM

To recreate the MFL History Tabs using this method , verse its current sprytabs format , here is the code

<script type="text/javascript">

 var mflHistoryId = 397;  // CHANGE 3 DIGIT HISTORY ID TO MATCH YOUR MFL HISTORY URL

    //SET BASE URL FOR MFLHISTORY - do not touch
    function getHistoryUrl(recordType) {
        var url = 'http://www.mflhistory.com/leaguehistory.php?id=' + mflHistoryId;
        if (recordType !== undefined)
            url += '&recordtype=' + recordType;
        return url;
    }
    $(document).ready(function () {
        //GET ADMIN LINK FROM MFL HISTORY
        $.get(getHistoryUrl(), function (data) {
            var adminLink = $(data).find('td.leaguehistorywelcome a').attr('href');
            $('#admin').append('<a href="http://www.mflhistory.com/' + adminLink + '" target="blank">Admin Menu</a>');
        });
        $.get(getHistoryUrl('game'), function (data) {
            $(data).find('.leaguehistorymodule').appendTo('#mfl-singlegame');
            styleResult();
        });
        $.get(getHistoryUrl('season'), function (data) {
            $(data).find('.leaguehistorymodule ').appendTo('#mfl-singleseason');
            styleResult();
        });
        $.get(getHistoryUrl('career'), function (data) {
            $(data).find('.leaguehistorymodule').appendTo('#mfl-career');
            styleResult();
        });
        $.get(getHistoryUrl('playoffs'), function (data) {
            $(data).find('.leaguehistorymodule').appendTo('#mfl-postseason');
            styleResult();
        });
        $.get(getHistoryUrl('milestone'), function (data) {
            $(data).find('.leaguehistorymodule').appendTo('#mfl-milestones');
            styleResult();
        });
        $.get(getHistoryUrl('player'), function (data) {
            $(data).find('input , select , .leaguehistorymodule').appendTo('#mfl-players');
            $('#mfl-players input[name=SubmitRecord]').hide();
            bindPlayerMenu();
            styleResult();
        });
        $.get(getHistoryUrl('standings'), function (data) {
            $(data).find('#standings_seasonmenu, .leaguehistorymodule').appendTo('#mfl-standings');

            bindStandingsLinks();
            styleResult();
        });
        $.get(getHistoryUrl('team'), function (data) {
            $(data).find('form , .leaguehistorymodule').appendTo('#mfl-teampages');
            $('#mfl-teampages input[name=TeamSubmit]').hide();
            styleResult();

            $('#mfl-teampages select[name=team]').change(function () {
                $.ajax({
                    type: 'GET',
                    url: 'http://www.mflhistory.com/leaguehistory.php?id=' + mflHistoryId + '&recordtype=team&team=' + $(this).val(),
                    data: {
                        SubmitRecord: 'Go'
                    }
                }).done(function (data) {
                    var teamData = $(data).find('.leaguehistorymodule');
                    $('#mfl-teampages .leaguehistorymodule').remove();
                    $('#mfl-teampages').append(teamData);
                    styleResult();
                });
            });
        });
        $.get(getHistoryUrl('gamecenter'), function (data) {
            $(data).find('#gamecenter_seasonmenu, #gamecenter_weekmenu , .leaguehistorymodule').appendTo('#mfl-gamecenter');               
            bindYearMenu();
            bindWeekMenu();
            styleResult();
        });
    });
    function styleResult() {
        $('.leaguehistorymodule .homepagemodule').addClass('report');
        $('.leaguehistorymodule .homepagemodule caption').each(function () {
            $(this).html('<span>' + $(this).text() + '</span>');
        $('.newalign div .leaguehistorymodule:nth-of-type(odd)').addClass("column-left");
        $('.newalign div .leaguehistorymodule:nth-of-type(even)').addClass("column-right");
        });
    }
    function bindPlayerMenu() {
        $('#mfl-players select[name=recordid]').change(function () {
            var recordId = $(this).val();
            $.ajax({
                type: 'POST',
                url: 'http://www.mflhistory.com/leaguehistory.php?id=' + mflHistoryId,
                data: {
                    recordid: recordId,
                    recordtype: 'player',
                    SubmitRecord: 'Go'
                }
            }).done(function (data) {
                var playerData = $(data).find('select, .leaguehistorymodule');
                $('#mfl-players select, #mfl-players .leaguehistorymodule').remove();
                $('#mfl-players').append(playerData);

                bindPlayerMenu();
                bindPositionMenu();
                styleResult();
            });
        });
    }
    function bindPositionMenu() {
        $('#mfl-players select[name=positionid]').change(function () {
            var recordId = $('#mfl-players select[name=recordid]').val();
            var positionId = $(this).val();
            $.ajax({
                type: 'POST',
                url: 'http://www.mflhistory.com/leaguehistory.php?id=' + mflHistoryId,
                data: {
                    positionid: positionId,
                    recordid: recordId,
                    recordtype: 'player',
                    SubmitRecord: 'Go'
                }
            }).done(function (data) {
                var positionData = $(data).find('#positionid, .leaguehistorymodule');
                $('#mfl-players #positionid, #mfl-players .leaguehistorymodule').remove();
                $('#mfl-players').append(positionData);

                bindPositionMenu();
                styleResult();
            });
        });
    }
    function bindStandingsLinks() {
        $('#mfl-standings a').unbind().click(function () {
            var link = $(this).attr('href');
            $.ajax({
                type: 'GET',
                url: 'http://www.mflhistory.com/' + link
            }).done(function (data) {
                var standingsData = $(data).find('#standings_seasonmenu, .leaguehistorymodule');
                $('#mfl-standings #standings_seasonmenu, #mfl-standings .leaguehistorymodule').remove();
                $('#mfl-standings').append(standingsData);

                bindStandingsLinks();
                styleResult();
            });
            return false;
        });
    }
    function bindYearMenu() {
        $('#mfl-gamecenter #gamecenter_seasonmenu a').unbind().click(function () {
            var link = $(this).attr('href');
            $.ajax({
                type: 'GET',
                url: 'http://www.mflhistory.com/' + link
            }).done(function (data) {
                var gamecenterData = $(data).find('#gamecenter_seasonmenu, #gamecenter_weekmenu, .leaguehistorymodule');
                $('#mfl-gamecenter #gamecenter_seasonmenu, #mfl-gamecenter #gamecenter_weekmenu, #mfl-gamecenter .leaguehistorymodule').remove();
                $('#mfl-gamecenter').append(gamecenterData);
                bindYearMenu();
                bindWeekMenu();
                styleResult();
            });
            return false;
        });
    }
    function bindWeekMenu() {
        $('#mfl-gamecenter #gamecenter_weekmenu a').unbind().click(function () {
            var link = $(this).attr('href');
            $.ajax({
                type: 'GET',
                url: 'http://www.mflhistory.com/' + link
            }).done(function (data) {
                var gamecenterData = $(data).find('#gamecenter_weekmenu, .leaguehistorymodule');
                $('#mfl-gamecenter #gamecenter_weekmenu, #mfl-gamecenter .leaguehistorymodule').remove();
                $('#mfl-gamecenter').append(gamecenterData);
                bindWeekMenu();
                styleResult();
            });
            return false;
        });
    }
</script>


<!-------------------------------------   
            HISTORY TABS
-------------------------------------->
<div id="mflhistory">
 <div id="admin"></div>

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

<module name="CHAMPIONSHIP_PLAQUE"/>

<!-----  TABBED REPORT NAVIGATION  ------>
   <ul class="tabbed-reports">
    <li class="report961 current">Single Game</li>
    <li class="report962">Single Season</li>
    <li class="report963">Career</li>
    <li class="report964">PostSeason</li>
    <li class="report965">Milestones</li>
    <li class="report966">Players</li>
    <li class="report967">Standings</li>
    <li class="report968">Team Pages</li>
    <li class="report969">Game Center</li>
   </ul>

<!-----  TABBED REPORTS CONTENT  ------>
   <div class="reports-content">
    <div class="report961"><div id="mfl-singlegame"></div></div>
    <div class="report962" style="display:none;"><div id="mfl-singleseason"></div></div>
    <div class="report963" style="display:none;"><div id="mfl-career"></div></div>
    <div class="report964" style="display:none;"><div id="mfl-postseason"></div></div>
    <div class="report965" style="display:none;"><div id="mfl-milestones"></div></div>
    <div class="report966" style="display:none;"><div id="mfl-players"></div></div>
    <div class="report967" style="display:none;"><div id="mfl-standings"></div></div>
    <div class="report968" style="display:none;"><div id="mfl-teampages"></div></div>
    <div class="report969" style="display:none;"><div id="mfl-gamecenter"></div></div>
   </div>
 </td></tr></tbody>
</table>
</div>

<!-----  ADD CAPTION TO MFL HISTORY STANDINGS REPORT  ------>
<script type="text/javascript">
$( document ).ajaxComplete(function( event, xhr, settings ) {
  if ( settings.url.indexOf("recordtype=standings")>-1) {
    $('#mfl-standings #standings table').prepend('<caption><span>League Standings</span></caption>');
    $('#mfl-standings #standings .standings_caption').remove();
  }
});
</script>

 

 

Then in the css , you'd add this , to display the captions

#mflhistory .reports-content .report caption {
     display: table-caption
}

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


#8 GhostXray

GhostXray

    Veteran

  • Members
  • PipPipPip
  • 244 posts

Posted 14 July 2015 - 08:29 PM

Wow, very generous offering to the community as always...thanks.



#9 bonscott

bonscott

    Veteran

  • Members
  • PipPipPip
  • 7,865 posts

Posted 17 July 2015 - 09:32 AM

So I've got this new JQuery tabs running great after some technical difficulties on my end.   :blink:   I've changed the hover color to match the skin theme I'm using but I'm not seeing a way to change the color of the selected tab as in the sprytabs.  Right now whatever is selected is the same color as the other tabs, I think it looks much better and gives the user a visual clue as to which tab is selected if it can be a different color from the unselected ones.

 

Sprytabs had the following CSS to control this....anything similar for the JQuery version?

 

table#mysprytabs .TabbedPanelsTabSelected { 
     color:#fff; 
     background: none repeat scroll 0px 0px rgba(218, 43, 42, 0.9);
}

table#mysprytabs .TabbedPanelsTabSelected,
table#mysprytabs .TabbedPanelsTabFocused { 
     outline:none;
}


 


#10 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,408 posts

Posted 17 July 2015 - 09:38 AM

i am revising the script now to add an active and current state , so you can style that in your css , got it working fine , will post asap when i get home


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


#11 bonscott

bonscott

    Veteran

  • Members
  • PipPipPip
  • 7,865 posts

Posted 17 July 2015 - 09:43 AM

Sweeet.  I was just digging into the code on your site and noticed a current style on the selected one which I didn't have so figured there must be a difference.  Other then that I think it is working great and I don't see anything else that is much different functionality wise from sprytabs.  Great work on this.



 


#12 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,408 posts

Posted 17 July 2015 - 09:44 AM

ok here is the edits i made to the jQuery tabs script

 

 

Change this script , which goes in the footer from this :

<!-------------------------------------  
  TABS SCRIPT PLACE IN FOOTER MESSAGE
-------------------------------------->
<script>
$('.tabbed-reports li').on('click',function(e){
    $('.reports-content>.'+ e.target.classList[0]).show().siblings().hide();
});
</script> 

 

 

 To this :

<!-------------------------------------  
  TABS SCRIPT PLACE IN FOOTER MESSAGE
-------------------------------------->
<script>
$('.tabbed-reports li').on('click',function(e){
    $('.reports-content>.'+ e.target.classList[0]).show().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> 

 

 

 

 

Now that is all that is needed on the script end of things , now have to make 1 small edit for each tab groups HTML, but adding a "current" class to the tab your displaying on page load , which typically is always the 1st one

 

So here is an example

 

Change this:

<!-----  TABBED REPORT NAVIGATION  ------>
   <ul class="tabbed-reports">
    <li class="report51">Fantasy Pick'em</li>
    <li class="report52">Survivor Pool</li>
    <li class="report53">NFL Pick'em</li>
    <li class="report54">Top Survivor Picks</li>
   </ul> 

 

 

 

to this:

<!-----  TABBED REPORT NAVIGATION  ------>
   <ul class="tabbed-reports">
    <li class="report51 current">Fantasy Pick'em</li>
    <li class="report52">Survivor Pool</li>
    <li class="report53">NFL Pick'em</li>
    <li class="report54">Top Survivor Picks</li>
   </ul> 

 

 

 

I have updated all this in the initial post.

 

In the css , now you can style .tabbed-reports li.active and .tabbed-reports li.current

 

So in the master css , i added this line for those 2 states , i like to keep the hover , active and current looking the same

.tabbed-reports li.active , .tabbed-reports li.current {
     color:#fff;
     background: none repeat scroll 0px 0px rgba(218, 43, 42, 0.9);
}

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


#13 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,408 posts

Posted 17 July 2015 - 09:54 AM

tabs demo here - http://www26.myfanta...2015/home/25094


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


#14 quickolas1

quickolas1

    Veteran

  • Members
  • PipPipPip
  • 953 posts

Posted 17 July 2015 - 10:49 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.

#15 bonscott

bonscott

    Veteran

  • Members
  • PipPipPip
  • 7,865 posts

Posted 17 July 2015 - 11:08 AM

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