Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

Create your own tabs

Started by theeohiostate, Jun 05 2015 03:57 PM

Prev

Next

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

50 replies to this topic

#31 Irishman39

Member

Members
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?

Back to top

#32 theeohiostate

Veteran

Members
3,911 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 ....

All the scripts I post were created by Habman , with some small contributions from myself. The man has done an outstanding job giving the community a variety of options to enhance the site. Thank you sir !!

Back to top

#33 theeohiostate

Veteran

Members
3,911 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;}

All the scripts I post were created by Habman , with some small contributions from myself. The man has done an outstanding job giving the community a variety of options to enhance the site. Thank you sir !!

Back to top

#34 quickolas1

Veteran

Members
959 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">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...

Back to top

#35 theeohiostate

Veteran

Members
3,911 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

All the scripts I post were created by Habman , with some small contributions from myself. The man has done an outstanding job giving the community a variety of options to enhance the site. Thank you sir !!

Back to top

#36 Irishman39

Member

Members
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

Back to top

#37 mboko13

Member

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

Back to top

#38 edytwinky

Veteran

Members
180 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

Back to top

#39 quickolas1

Veteran

Members
959 posts

Posted 05 August 2015 - 10:45 PM

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

Back to top

#40 edytwinky

Veteran

Members
180 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>

Back to top

#41 theeohiostate

Veteran

Members
3,911 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

All the scripts I post were created by Habman , with some small contributions from myself. The man has done an outstanding job giving the community a variety of options to enhance the site. Thank you sir !!

Back to top

#42 edytwinky

Veteran

Members
180 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

Back to top

#43 edytwinky

Veteran

Members
180 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?

Back to top

#44 theeohiostate

Veteran

Members
3,911 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

All the scripts I post were created by Habman , with some small contributions from myself. The man has done an outstanding job giving the community a variety of options to enhance the site. Thank you sir !!