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

#31 Irishman39

Irishman39

    Member

  • Members
  • PipPip
  • 15 posts

Posted 20 July 2015 - 08:14 AM

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

 

 

<script type="text/javascript">
    //CHANGE HISTORY ID TO MATCH YOUR MFL HISTORY URL
    var mflHistoryId = 470;
    //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>

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

 

 

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

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

Is there a way to split it into two columns?



#32 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,461 posts

Posted 20 July 2015 - 09:54 AM

you can float left and float right and make width 50% those tables you want to be in 2 column format , will be quite a bit of work , but can be done ....


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


#33 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,461 posts

Posted 20 July 2015 - 10:19 AM

Here you go , this should float the tables that would look ok in 2 column

 

/*  MFL HISTORY 2 COLUMN LAYOUT
================================ */

#mfl-singlegame .leaguehistorymodule:nth-child(even),
#mfl-singleseason .leaguehistorymodule:nth-child(even),
#mfl-career .leaguehistorymodule:nth-child(even),
#mfl-postseason .leaguehistorymodule:nth-child(even),
#mfl-milestones .leaguehistorymodule:nth-child(even),
#mfl-teampages .leaguehistorymodule:nth-child(even)
{width:49%;float:left;clear:left;}

#mfl-singlegame .leaguehistorymodule:nth-child(odd),
#mfl-singleseason .leaguehistorymodule:nth-child(odd),
#mfl-career .leaguehistorymodule:nth-child(odd),
#mfl-postseason .leaguehistorymodule:nth-child(odd),
#mfl-milestones .leaguehistorymodule:nth-child(odd),
#mfl-teampages .leaguehistorymodule:nth-child(odd)
{width:49%;float:right;clear:right;}

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


#34 quickolas1

quickolas1

    Veteran

  • Members
  • PipPipPip
  • 958 posts

Posted 20 July 2015 - 02:44 PM

This is just a general way, placing two (or more) sets of tabs side-by-side in a table, essentially creating your own homepagecolumns:

<table width="100%" style="border-spacing: 0px;">
<tr>
<td width="50%" valign="top">ONE TAB SET HERE</td>
<td width="50%" valign="top">ANOTHER TAB SET HERE</td>
</tr>
</table>
 
If you use 100% width for the reports on the home page, like I do, you can do something like this for the table-data to force (& control) some spacing:
 
<td width="49%" valign="top">ONE TAB SET HERE</td>
<td width="2%"></td>
<td width="49%" valign="top">ANOTHER TAB SET HERE</td>
 
Then when I want 3 I can go with widths of: 32% - 2% - 32% - 2% - 32% to get to the 100%.
66% - 2% - 32% or 32% - 2% - 66% aligns correctly with the above line if you want one approx twice as wide as the other.

Could then add another row of tabs (or reports) if one wanted.

Can add [to the table] the homepagemodule report class, caption/span, table header, etc...



#35 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,461 posts

Posted 20 July 2015 - 03:05 PM

Quick that's good for normal tabbed reports but couldn't work on the mfl history script/tabs as we have no control of the html being imported by the script

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


#36 Irishman39

Irishman39

    Member

  • Members
  • PipPip
  • 15 posts

Posted 20 July 2015 - 09:10 PM

Here you go , this should float the tables that would look ok in 2 column

 

/*  MFL HISTORY 2 COLUMN LAYOUT
================================ */

#mfl-singlegame .leaguehistorymodule:nth-child(even),
#mfl-singleseason .leaguehistorymodule:nth-child(even),
#mfl-career .leaguehistorymodule:nth-child(even),
#mfl-postseason .leaguehistorymodule:nth-child(even),
#mfl-milestones .leaguehistorymodule:nth-child(even),
#mfl-teampages .leaguehistorymodule:nth-child(even)
{width:49%;float:left;clear:left;}

#mfl-singlegame .leaguehistorymodule:nth-child(odd),
#mfl-singleseason .leaguehistorymodule:nth-child(odd),
#mfl-career .leaguehistorymodule:nth-child(odd),
#mfl-postseason .leaguehistorymodule:nth-child(odd),
#mfl-milestones .leaguehistorymodule:nth-child(odd),
#mfl-teampages .leaguehistorymodule:nth-child(odd)
{width:49%;float:right;clear:right;}

Thank you TOS



#37 mboko13

mboko13

    Member

  • Members
  • PipPip
  • 21 posts

Posted 22 July 2015 - 02:01 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

 

 

 

 

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

 

 

Thanks guys.

 

I appreciate the input (and code) to help me get this right.



#38 edytwinky

edytwinky

    Veteran

  • Members
  • PipPipPip
  • 178 posts

Posted 05 August 2015 - 10:21 PM

Am I doing something wrong?

 

When I try to click on each tab, nothing happens.

 

http://www32.myfanta...15/home/60869#0



#39 quickolas1

quickolas1

    Veteran

  • Members
  • PipPipPip
  • 958 posts

Posted 05 August 2015 - 10:45 PM

The script needs to be pulled out of the HPM and put into a Footer HPM



#40 edytwinky

edytwinky

    Veteran

  • Members
  • PipPipPip
  • 178 posts

Posted 05 August 2015 - 11:18 PM

I put the following code in my footer and it still doesn't seem to work:

 

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



#41 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,461 posts

Posted 06 August 2015 - 08:09 AM

do you have jquery loaded on your site ? tabs wont work if not loaded

 

 

...nevermind , checked your site and see you have it working ;)


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


#42 edytwinky

edytwinky

    Veteran

  • Members
  • PipPipPip
  • 178 posts

Posted 06 August 2015 - 08:25 AM

do you have jquery loaded on your site ? tabs wont work if not loaded

 

 

...nevermind , checked your site and see you have it working ;)

 

Thanks, I forgot to include the code in my header



#43 edytwinky

edytwinky

    Veteran

  • Members
  • PipPipPip
  • 178 posts

Posted 06 August 2015 - 09:25 AM

do you have jquery loaded on your site ? tabs wont work if not loaded

 

 

...nevermind , checked your site and see you have it working ;)

 

On the Standings Tab, is there a way to make the ALL DIVISIONS tab the default that people see when they go to the webpage?



#44 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,461 posts

Posted 06 August 2015 - 01:53 PM

do you have jquery loaded on your site ? tabs wont work if not loaded

 

 

...nevermind , checked your site and see you have it working ;)

 

On the Standings Tab, is there a way to make the ALL DIVISIONS tab the default that people see when they go to the webpage?

 

 

change the order they are in , or add the class current to the full standings


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


#45 quickolas1

quickolas1

    Veteran

  • Members
  • PipPipPip
  • 958 posts

Posted 06 August 2015 - 04:42 PM

On the Standings Tab, is there a way to make the ALL DIVISIONS tab the default that people see when they go to the webpage

 

kind of defeats the purpose doesn't it...?

:ph34r: