CODEWITHSUNDEEP
javascript
MShack
MShack

Reputation: 652

change name of tab title place holder with current tab

I've tried a few things , but not versed enough in coding to get it done myself obviously

I setup a jsfiddle here - https://jsfiddle.net/7ojfmxn2/17/

I have a show tabs function to display tab content below , i have a header text for the tabs and i'd like to change that text to the name of the current tab each time one is clicked "League Tabs" i'd like renamed to Tab 0 , Tab 1 , Tab 2 ect , whenever one is selected, any help ?

function show_tab(tab_id) {
  var done = false;
  var counter = 0;
  while (!done) {
    var this_tab_content = document.getElementById("tabcontent" + counter);
    var this_tab = document.getElementById("tab" + counter);
    if (!this_tab_content) {
      done = true;
    } else {
      if (counter == tab_id) {
        this_tab_content.style.display = '';
        this_tab.className = "currenttab";
      } else {
        this_tab_content.style.display = 'none';
        this_tab.className = "";
      }
    }
    counter++;
  }
  location.hash = tab_id;
}

if (location.hash) {
  show_tab(location.hash.substr(1));
} else {
  show_tab(0);
}

Upvotes: 3

Views: 2493

Answers (3)

Massimo Petrus
Massimo Petrus

Reputation: 1891

I'm not sure it is what you're asking for, but if you want substitute "League Tabs" with the Tab name, you could do as follows

1- give an ID to the span where the tab header is stored , for example id=tabheader

2- in the part of code where you set the visible tab, also set the content of that span (the element with id=tabheader)

Here's the code

HTML

...
<div class="myfantasyleague_tabmenu"><span id="tabheader">LEAGUE TABS</span>
....

JS

....
 if (counter == tab_id) {
        this_tab_content.style.display = '';
        this_tab.className = "currenttab";
        var tabheader = document.getElementById("tabheader");
        tabheader.innerHTML="tab " + counter;
      }
...

See updated fiddle https://jsfiddle.net/7ojfmxn2/30/

EDIT

If you want the title LEAGUE TABS be displaied at the beginning, you've to comment your init code in a way no tab is selected. 

/*
if (location.hash) {
  show_tab(location.hash.substr(1));
} else {
  show_tab(0);
}
*/

EDIT 2 To avoid showing all tabs you can use

         show_tab(-1);

instead of

        show_tab(0);

see fiddle https://jsfiddle.net/7ojfmxn2/50/

EDIT 3

In the case you want to see the 'main' tab name on page load, having anyway the tab 0 loaded, you may

1- change the show_tab, adding an input param. This boolean param determines what to show (main tab name or displaied tab name ), as follows

 function show_tab(tab_id, show_main_tab_name) {
   .....
   //here is where the tab title is displaied 
   var tabheader = document.getElementById("tabheader");
    if(show_main_tab_name){
        tabheader.innerHTML="LEAGUE TABS";
    }
    else {
       tabheader.innerHTML="tab " + counter;
    }
    ....

2- call on init the show tab with the param set to true (I put your original function)

if (location.hash) {
  show_tab(location.hash.substr(1));
} else {
  show_tab(0,true);
}

See my new fiddle https://jsfiddle.net/7ojfmxn2/55/

Upvotes: 1

maxshuty
maxshuty

Reputation: 10662

Add an id to your HTML's <title> tag, like so:

<title id="myTitle"></title>

Using jQuery you could just do this:

$('#myTitle').html(this_tab.className);

With JavaScript it would be

document.getElementById("myTitle").innerText = this_tab.className;

Upvotes: 1

JorgeObregon
JorgeObregon

Reputation: 3310

You need to set an id on the title of the element that contains the tabs, so you can later select it and change it's content.

Then you can pass a 2nd parameter to your show_tab function which would be the tab title you want to display.

Here's the updated code (I had to delete the CSS to be able to post it here due to post size limits)

Here's the working Fiddle with all the CSS https://jsfiddle.net/7ojfmxn2/39/

function show_tab(tab_id, tab_title) {
  var done = false;
  var counter = 0;
  while (!done) {
    var this_tab_content = document.getElementById("tabcontent" + counter);
    var this_tab = document.getElementById("tab" + counter);
    if (!this_tab_content) {
      done = true;
    } else {
      if (counter == tab_id) {
        this_tab_content.style.display = '';
        this_tab.className = "currenttab";
      } else {
        this_tab_content.style.display = 'none';
        this_tab.className = "";
      }
    }
    counter++;
  }
  location.hash = tab_id;
  document.getElementById('tab_title').innerHTML = tab_title || 'LEAGUE TABS';
}

if (location.hash) {
  show_tab(location.hash.substr(1));
} else {
  show_tab(0);
}
<div id="contentframe">
    <div id="withmenus">

      <div class="myfantasyleague_tabmenu"><span id="tab_title">LEAGUE TABS</span>
        <input id="sub100" type="checkbox">
        <label for="sub100"><span></span></label>
        <ul id="homepagetabs">
          <li id="tab0" onclick="javascript:show_tab('0', 'Tab 0');"><a class="no-sub">Tab 0<input id="sub100" type="checkbox"><label for="sub100"></label></a></li>
          <li id="tab1" onclick="javascript:show_tab('1', 'Tab 1');"><a class="no-sub">Tab 1<input id="sub100" type="checkbox"><label for="sub100"></label></a></li>
          <li id="tab2" onclick="javascript:show_tab('2', 'Tab 2');"><a class="no-sub">Tab 2<input id="sub100" type="checkbox"><label for="sub100"></label></a></li>
          <li id="tab3" onclick="javascript:show_tab('3', 'Tab 3');"><a class="no-sub">Tab 3<input id="sub100" type="checkbox"><label for="sub100"></label></a></li>
        </ul>
      </div>

      <div id="tabcontent0" class="homepagetabcontent">
        <div class="mobile-wrap">
          <table align="center" cellspacing="1" class="homepagemodule report" id="brief_standings">
            <caption><span>Tab 0 CONTENT</span></caption>
            <tbody>
              <tr>
                <td id="division00" colspan="3">
                  <h3>Division 1</h3></td>
              </tr>
              <tr>
                <th class="fname" title="Franchise Name">Franchise</th>
                <th class="h2hwlt" title="Overall Wins, Losses and Ties">W&#8209;L&#8209;T</th>
                <th class="pf" title="Points For (Total Year-to-Date Point Scored)">PF</th>
            </tbody>
          </table>
        </div>
      </div>

      <div id="tabcontent1" class="homepagetabcontent">
        <div class="mobile-wrap">
          <table align="center" cellspacing="1" class="homepagemodule report" id="brief_standings">
            <caption><span>Tab 1 CONTENT</span></caption>
            <tbody>
              <tr>
                <td id="division00" colspan="3">
                  <h3>Division 1</h3></td>
              </tr>
              <tr>
                <th class="fname" title="Franchise Name">Franchise</th>
                <th class="h2hwlt" title="Overall Wins, Losses and Ties">W&#8209;L&#8209;T</th>
                <th class="pf" title="Points For (Total Year-to-Date Point Scored)">PF</th>
            </tbody>
          </table>
        </div>
      </div>

      <div id="tabcontent2" class="homepagetabcontent">
        <div class="mobile-wrap">
          <table align="center" cellspacing="1" class="homepagemodule report" id="brief_standings">
            <caption><span>Tab 2 CONTENT</span></caption>
            <tbody>
              <tr>
                <td id="division00" colspan="3">
                  <h3>Division 1</h3></td>
              </tr>
              <tr>
                <th class="fname" title="Franchise Name">Franchise</th>
                <th class="h2hwlt" title="Overall Wins, Losses and Ties">W&#8209;L&#8209;T</th>
                <th class="pf" title="Points For (Total Year-to-Date Point Scored)">PF</th>
            </tbody>
          </table>
        </div>
      </div>

      <div id="tabcontent3" class="homepagetabcontent">
        <div class="mobile-wrap">
          <table align="center" cellspacing="1" class="homepagemodule report" id="brief_standings">
            <caption><span>Tab 3 CONTENT</span></caption>
            <tbody>
              <tr>
                <td id="division00" colspan="3">
                  <h3>Division 1</h3></td>
              </tr>
              <tr>
                <th class="fname" title="Franchise Name">Franchise</th>
                <th class="h2hwlt" title="Overall Wins, Losses and Ties">W&#8209;L&#8209;T</th>
                <th class="pf" title="Points For (Total Year-to-Date Point Scored)">PF</th>
            </tbody>
          </table>
        </div>
      </div>
    </div>

  </div>

Upvotes: 1

Related Questions