Forum Discussion

StefanieKirs743's avatar
StefanieKirs743
Community Member
2 months ago
Solved

Customizing Player

Hi!

I have looked at the player videos on the Articulate On Demand tutorials page but cannot find anything applicable to this situation, so here goes.

I am working on a project where I want my end users to be able to contact the subject matter experts by accessing their information from a lightboxed slide. However, this creates a problem on some slides that have a ton of interactivity.

Rather than stress about changing the interactivity of those slides, I'd like to just remove "CONTACT" from the Player menu on those individual slides.

I realize I need a variable of some kind for this. I've played around with a couple and can't get it to work.

What variable would I use to remove the "CONTACT" button from select slides? Also, would I use the slide numbers or the names of the slides? You'll notice that I tried to play with both when you open the screenshots to see if different variables would work.

Or is this even possible since this is a Custom tab I created?

 

 

 

  • It’s a custom tab that can be selected, unselected, or deleted in the Player Properties. When selected or unselected, the tab's state (visibility) applies globally across all slides. To remove the "CONTACT" tab from specific slides, you would need to use JavaScript to target that tab and remove it from those slides only. Execute JavaScript when the timeline starts on this slide:

    const tabs = document.querySelectorAll(".custom-link");
    tabs.forEach(tab => {
    	let contactTab = tab.querySelector('span')
        if (contactTab.textContent.trim() === "CONTACT") {
            tab.style.display = 'none'; // hide
        }
    });

    These buttons each have their own ID that can be targeted individually. However, I used a slightly longer code to target your tab by its text content, as I'm unsure how many custom tabs are in your project.

    To ensure the "CONTACT" tab appears on specific slides, execute the JavaScript when the timeline starts on those slides:

    const tabs = document.querySelectorAll(".custom-link");
    tabs.forEach(tab => {
    	let contactTab = tab.querySelector('span')
        if (contactTab.textContent.trim() === "CONTACT") {
            tab.style.display = 'inline-block'; // show
        }
    });
    



  • Nedim's avatar
    Nedim
    Community Member

    It’s a custom tab that can be selected, unselected, or deleted in the Player Properties. When selected or unselected, the tab's state (visibility) applies globally across all slides. To remove the "CONTACT" tab from specific slides, you would need to use JavaScript to target that tab and remove it from those slides only. Execute JavaScript when the timeline starts on this slide:

    const tabs = document.querySelectorAll(".custom-link");
    tabs.forEach(tab => {
    	let contactTab = tab.querySelector('span')
        if (contactTab.textContent.trim() === "CONTACT") {
            tab.style.display = 'none'; // hide
        }
    });

    These buttons each have their own ID that can be targeted individually. However, I used a slightly longer code to target your tab by its text content, as I'm unsure how many custom tabs are in your project.

    To ensure the "CONTACT" tab appears on specific slides, execute the JavaScript when the timeline starts on those slides:

    const tabs = document.querySelectorAll(".custom-link");
    tabs.forEach(tab => {
    	let contactTab = tab.querySelector('span')
        if (contactTab.textContent.trim() === "CONTACT") {
            tab.style.display = 'inline-block'; // show
        }
    });
    



  • Nedim so I need the first JavaScript on the slides where I want CONTACT not visible and the second one where I want it visible? Like these two aren't choices-I need them both?

  • Nedim's avatar
    Nedim
    Community Member

    The first JavaScript goes on the slides where you want the "CONTACT" tab to be invisible, and the second one goes on the slides where you want it visible.

    Is the "CONTACT" tab the only tab at the top right corner, or do you have additional tabs like "Resources" or other custom tabs? If I can figure the ID, I can simplify both scripts. Alternatively, I could create a single script for the master slide that automatically toggles the "CONTACT" tab visibility based on certain conditions.

    You can try applying both scripts as they are for now and see how it works for you.

    • StefanieKirs743's avatar
      StefanieKirs743
      Community Member

      No, I got it to work to make it invisible so these scripts are great! Thank you so much!

      • Nedim's avatar
        Nedim
        Community Member

        Great! Just keep in mind that changing the tab name, for example to "CONTACTS," will cause the script to stop working. Make sure the word in the scripts matches the tab name exactly. This way, you can reuse the scripts for other custom tabs as well.