0

In the following table I am using, how can I get a link which leads me directly to the NFL tab content?

I am trying to get the link to a specific part of a web page I control but I can't make it work. The part of the webpage I am trying to get the link to is a Header from a Table. I am following the instructions from these two questions below but I can't achieve it: [https://stackoverflow.com/questions/15481911/linking-to-a-specific-part-of-a-web-page][1] & [https://stackoverflow.com/questions/2835140/how-do-i-link-to-part-of-a-page-hash][2]

By following the two links above I have used different options to get a specific link which leads me to the specific part of the table I want to open (for example the NFL tab)

For this last link I get results in my table, but I get the same results I have if I open the web page without any ref value.

I am using a "Default Open" script but when I remove this option in my code I still don't get the results I expect and don't get any content under the headers of the table

Please, am I doing anything wrong? I have followed the instructions and I believe my code is correct. Is it not possible to create a link to a 'tabheader'?

Thanks for the time to whoever who reads this

Alberto
  • 37
  • 6

1 Answers1

1

Let me know if this works for you:

Option 1:

<script>
function openTable(evt, tableName) {
   // select the target tab using its id
   const table = document.querySelector(`#${tableName}`);

  // scroll the target tab into view
   table.scrollIntoView();

  // and if you want to hide the other tabs
  // select all the tabs
  const allTabs = document.querySelectorAll('.tabcontent');

 // filter all the tabs that we want to hide
 const allOtherTabs = allTabs.filter(tab => {
       return tab.id !== tableName;
 });

 // hide each tab
 allOtherTabs.forEach(tab => tab.style.display = 'none');

// select all the tablinks aka Buttons
const allTabLinks = document.querySelectorAll('.tablinks');

// remove 'active' from their classList
allTabLinks.classList.remove('active');


evt.currentTarget.classList.add("active");
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

//////////////////////////////////////////

OR Option 2:

If you want to use the anchor tag with the id you should replace: this :

<button class="tablinks" onclick="openTable(event, 'NFL')">NFL</button>

with

this : `

<a href="#NFL" class="tablinks" onclick="openTable(event, 'NFL')">NFL</a>`

(i.e change all the buttons to anchor tags). If you use the second option you don't have to use the .scrollIntoView() method to get to the target.

There may be a typo or an error as i haven't tested it, try it and let me know if there is any problem i'd be happy to help. Good Luck!

//////////// Quick Fix /////////////

// first decrease the things you are loading in you're html by commenting them

HTML:

<div id="NBA" class="tabcontent">
    <iframe src="https://sport-tv-guide.live/widgetsingle/e7d7ce1978f9?list=4&amp;id=26&amp;time_zone=US%2FEastern&amp;&amp;fc=1,7,44,102&amp;time12=0&amp;lng=1" width="100%" height="300" style="height:600px!important;border:0"></iframe><div style="padding:5px;text-align:center;font-size:10px">Powered by <a href="https://sport-tv-guide.live">Live Sports TV Guide</a></div>
    </div>
    
    <div id="MLB" class="tabcontent">
    <iframe src="https://sport-tv-guide.live/widgetsingle/e7d7ce1978f9?list=4&amp;id=42&amp;time_zone=US%2FEastern&amp;&amp;fc=1,7,44,102&amp;time12=0&amp;lng=1" width="100%" height="300" style="height:600px!important;border:0"></iframe><div style="padding:5px;text-align:center;font-size:10px">Powered by <a href="https://sport-tv-guide.live">Live Sports TV Guide</a></div>
    </div>
    
    <div id="NHL" class="tabcontent">
    <iframe src="https://sport-tv-guide.live/widgetsingle/e7d7ce1978f9?list=4&amp;id=23&amp;time_zone=US%2FEastern&amp;&amp;fc=1,7,44,102&amp;time12=0&amp;lng=1" width="100%" height="300" style="height:600px!important;border:0"></iframe><div style="padding:5px;text-align:center;font-size:10px">Powered by <a href="https://sport-tv-guide.live">Live Sports TV Guide</a></div>
    </div>
    
    <div id="NFL" class="tabcontent">
    <iframe src="https://sport-tv-guide.live/widgetsingle/e7d7ce1978f9?list=4&amp;id=40&amp;time_zone=US%2FEastern&amp;&amp;fc=1,7,44,102&amp;time12=0&amp;lng=1" width="100%" height="300" style="height:600px!important;border:0"></iframe><div style="padding:5px;text-align:center;font-size:10px">Powered by <a href="https://sport-tv-guide.live">Live Sports TV Guide</a></div>
    </div>
    
    <div id="MLS" class="tabcontent">
    <iframe src="https://sport-tv-guide.live/widgetsingle/e7d7ce1978f9?list=4&amp;id=8&amp;time_zone=US%2FEastern&amp;&amp;fc=1,7,44,102&amp;time12=0&amp;lng=1" width="100%" height="300" style="height:600px!important;border:0"></iframe><div style="padding:5px;text-align:center;font-size:10px">Powered by <a href="https://sport-tv-guide.live">Live Sports TV Guide</a></div>
    </div>

// Comment out the divs bellow the above (MLS) div

// And then update you're script as bellow

Javascrip:

<script>
function openTable(evt, tableName) {
    console.log(tableName);
    // select the target tab using its id
    const table = document.querySelector(`#${tableName}`);
 
   // scroll the target tab into view
    table.scrollIntoView();
 
   // and if you want to hide the other tabs
   // select all the tabs
   const allTabs = Array.from(document.querySelectorAll('.tabcontent'));
 
  // filter all the tabs that we want to hide
  const allOtherTabs = allTabs.filter(tab => {
        return tab.id !== tableName;
  });
 
  // hide each tab
  allOtherTabs.forEach(tab => tab.style.display = 'none');
 
 // select all the tablinks aka Buttons
 const allTabLinks = document.querySelectorAll('.tablinks');
 
 // remove 'active' from their classList
 allTabLinks.forEach(tab => tab.classList.remove('active'));
 
 // i forgot the line bellow in the option 1 script that was a bug
 table.style.display = 'block';
 evt.currentTarget.classList.add("active");
 }
 
 // Get the element with id="defaultOpen" and click on it
 document.getElementById("defaultOpen").click();
</script>

// this is not a permanent fix but it does work

// don't forget to comment the divs b/c every iframe tag is pulling some data and that's making you're browser unresponsive.

// there are better ways to do what you'r trying to do i'll hit you up with one real soon.

////////////// final answer ////////////

HTML: replace you're html with the code bellow

<div class="tab scroll-menue">
        <button id = "NFL" class="tablinks" >NFL</button>
        <button id = "MLB" class="tablinks"  >MLB</button>
        <button id = "NBA" class="tablinks" >NBA</button>
        <button id = "NHL" class="tablinks" >NHL</button>
        <button id = "MLS" class="tablinks" >MLS</button>
        <button  id="Liga-MX" class="tablinks" >Liga MX</button>
        <button id="Premier-League" class="tablinks" >Premier League</button>
        <button id="UEFA-Champions-League" class="tablinks" >UEFA Champions League</button>
        <button id="LaLiga" class="tablinks" >LaLiga</button>
        <button id="Bundesliga" class="tablinks" >Bundesliga</button>
        <button id="Serie-A" class="tablinks" >Serie A</button>
        <button id="Ligue-1" class="tablinks" >Ligue 1</button>
        <button id="UEFA-Europa-League" class="tablinks" >UEFA Europa League</button>
        <button id="UEFA-Europa-Conference-League" class="tablinks" >UEFA Europa Conference League</button>
    </div>

JavaScript: replace you're script with the code bellow

<script>
const dataArr = [
    {
        id : "NFL",
        src: "https://sport-tv-guide.live/widgetsingle/e7d7ce1978f9?list=4&amp;id=40&amp;time_zone=US%2FEastern&amp;&amp;fc=1,7,44,102&amp;time12=0&amp;lng=1",
        
    },
    {
        id : "MLB",
        src: "https://sport-tv-guide.live/widgetsingle/e7d7ce1978f9?list=4&amp;id=42&amp;time_zone=US%2FEastern&amp;&amp;fc=1,7,44,102&amp;time12=0&amp;lng=1",
        
    },
    {
        id : "NBA",
        src: "https://sport-tv-guide.live/widgetsingle/e7d7ce1978f9?list=4&amp;id=26&amp;time_zone=US%2FEastern&amp;&amp;fc=1,7,44,102&amp;time12=0&amp;lng=1",

    },
    {
        id : "NHL",
        src: "https://sport-tv-guide.live/widgetsingle/e7d7ce1978f9?list=4&amp;id=23&amp;time_zone=US%2FEastern&amp;&amp;fc=1,7,44,102&amp;time12=0&amp;lng=1",
        
    },
    {
        id : "MLS",
        src: "https://sport-tv-guide.live/widgetsingle/e7d7ce1978f9?list=4&amp;id=8&amp;time_zone=US%2FEastern&amp;&amp;fc=1,7,44,102&amp;time12=0&amp;lng=1",
        
    },
    {
        id : "Liga-MX",
        src:"https://sport-tv-guide.live/widgetsingle/e7d7ce1978f9?list=4&amp;id=141&amp;time_zone=US%2FEastern&amp;&amp;fc=1,7,44,102&amp;time12=0&amp;lng=1",
        
    },
    {
        id : "Premier-League",
        src: "https://sport-tv-guide.live/widgetsingle/e7d7ce1978f9?list=4&amp;id=1&amp;time_zone=US%2FEastern&amp;&amp;fc=1,7,44,102&amp;time12=0&amp;lng=1",
        
    },
    {
        id : "UEFA-Champions-League",
        src: "https://sport-tv-guide.live/widgetsingle/e7d7ce1978f9?list=4&amp;id=19&amp;time_zone=US%2FEastern&amp;&amp;fc=1,7,44,102&amp;time12=0&amp;lng=1",
        
    },
    {
        id : "LaLiga",
        src: "https://sport-tv-guide.live/widgetsingle/e7d7ce1978f9?list=4&amp;id=2&amp;time_zone=US%2FEastern&amp;&amp;fc=1,7,44,102&amp;time12=0&amp;lng=1",
        
    },
    {
        id : "Bundesliga",
        src: "https://sport-tv-guide.live/widgetsingle/e7d7ce1978f9?list=4&amp;id=4&amp;time_zone=US%2FEastern&amp;&amp;fc=1,7,44,102&amp;time12=0&amp;lng=1",
        
    },
    {
        id : "Serie-A",
        src: "https://sport-tv-guide.live/widgetsingle/e7d7ce1978f9?list=4&amp;id=3&amp;time_zone=US%2FEastern&amp;&amp;fc=1,7,44,102&amp;time12=0&amp;lng=1",
        
    },
    {
        id : "Ligue-1",
        src: "https://sport-tv-guide.live/widgetsingle/e7d7ce1978f9?list=4&amp;id=6&amp;time_zone=US%2FEastern&amp;&amp;fc=1,7,44,102&amp;time12=0&amp;lng=1",
        
    },
    {
        id : "UEFA-Europa-League",
        src: "https://sport-tv-guide.live/widgetsingle/e7d7ce1978f9?list=4&amp;id=20&amp;time_zone=US%2FEastern&amp;&amp;fc=1,7,44,102&amp;time12=0&amp;lng=1",
        
    },
    {
        id : "UEFA-Europa-Conference-League",
        src: "https://sport-tv-guide.live/widgetsingle/e7d7ce1978f9?list=4&amp;id=2627&amp;time_zone=US%2FEastern&amp;&amp;fc=1,7,44,102&amp;time12=0&amp;lng=1",
        
    },
];

dataArr.forEach(obj => {
    const html = `
        <div id = '${obj.id}-content' class="tab-content-container">
            <iframe src="${obj.src}" width="100%" height="300" style="height:600px!important;border:0"></iframe>
            <div style="padding:5px;text-align:center;font-size:10px">Powered by <a href="https://sport-tv-guide.live">Live Sports TV Guide</a>
            </div>
        </div>`;

        document.body.innerHTML += html;
});


const scrollMenue = document.querySelector('.scroll-menue');
const links = document.querySelectorAll('.tablinks');
const tabContentContainer = document.querySelectorAll('.tab-content-container');

links[0].classList.add('active');

const openTab = function(e){
    const [dataObj] = dataArr.filter(obj => obj.id === e.target.id);

    // if the click is not on any of the buttons exit
    if(!dataObj) return;

    document.getElementById(`${dataObj.id}-content`).scrollIntoView();
    
    links.forEach(link => link.classList.remove('active'));
    e.target.classList.add('active');
};

scrollMenue.addEventListener('click', openTab);

</script>

CSS: add the code bellow in you're style

div.tab button.active{
        background-color: #c36d75;
        }
k-devs
  • 156
  • 6
  • Hello k-devs, thank you very much for checking on this.
    I have tried first Option 2, since I am barely new with scripts. I have replaced the "button class" by "a href" two different times, one with the high comma and another one without the high comma at the end (think I understand what you did here but still opens the MLB competition when I go to #NFL link)
    Do I need to do anything with the script you provided at option 1? Replaced my script with it but it doesn't display any content from the tables. Sorry but my knowledge at html and css is basic but at javascript is minimum     – Alberto Aug 03 '22 at 00:18
  • 1
    OK lets stick with option 2 then. does the other links work? can you post the NFL anchor so i can check how you edited it, also please try and keep the original code and work on a copy. – k-devs Aug 03 '22 at 00:37
  • 1
    Hey i was just testing it and it seems to have multiple issues like trying to load too much stuff at once. Tell you what, i'll try and find a better solution for what you're trying to do. in the mean time keep experimenting. I will update my answer as soon as i'm done. HINT: you may need to make some fundamental changes to your code like how you structure it, and keep in mind that you can perform the same task in multiple ways. – k-devs Aug 03 '22 at 01:36
  • 1
    until then i have a quick fix, i will put it in the answer above check it out. – k-devs Aug 03 '22 at 01:42
  • 1
    Hey i have edited my answer with my final solution. i hope it works for you! – k-devs Aug 03 '22 at 14:13
  • 1
    Have you tried clicking on the other buttons b/c they do actually change the content when they are clicked. it show the MLB content because i assumed that it was the default content you wanted to display when the page loads. and loading all the contents at once really slows down your website but if you really want to do that maybe you should look into Asynchronous programming in javascript other than that the page actually works. – k-devs Aug 03 '22 at 16:25
  • 1
    i have updated my answer try it now. Consider making the navbar fixed or sticky for better user experience. – k-devs Aug 03 '22 at 17:24
  • 1
    Thank you very much for the help :) I think I will create a page for every sport, will work on a nice way to display this. Thank you for everything k-devs – Alberto Aug 03 '22 at 18:41
  • 1
    No problem brother. by the way its a good website you should keep working on it, And if you require further assistance on your projects you can contact me. – k-devs Aug 04 '22 at 02:48
  • Thanks brother :) how is it possible to contact you?? I don't see any option here on stackoverflow – Alberto Aug 05 '22 at 17:41
  • 1
    Actually that's been bothering me allot, how are we supposed to interact with each other using comments? lol. anyways here is my email: kaleabaalemu@gmail.com you can dm me. – k-devs Aug 05 '22 at 22:42
  • Thank you very much Sir will do when I need more help, mine is alberto.fegu88@gmail.com, thanks for everythink :) – Alberto Aug 09 '22 at 23:25
  • 1
    Your very welcome, and hey i really think we can help each other for both learning and work, so yeah lets keep in touch. – k-devs Aug 10 '22 at 01:43