Forum Discussion

PatriciaHaze480's avatar
PatriciaHaze480
Community Member
9 months ago

hide the print button in menu and show

If have been trying to hide and show again my Print Page button in the menu.

This is how I made the button to print, and it works, it still shows in my menu.

Modifying the player is often overlooked as a place to add code.
1) Click Story View
2) Select Player
3) Under the Player Tabs list, click the "New" button
4) Add name "Print Pagina".
5) Select the action "Execute JavaScript and paste the following line of code:
window.print(); 

Now I would like to hide (and show again) this button. How?

I have been doing this before, but that is no longer working. I used to do this:

https://community.articulate.com/discussions/building-better-courses/print-anything-in-storyline

JavaScript Code Used:

$(".volume").after($("#tab-customlink"));

$("#tab-customlink").addClass('btn cs-button');

$("#tab-customlink").hide();

$("#tab-customlink").show();

But I don't understand it any longer. Is the bold necessarily?

My html of the button is as followed:

<button id="link-left-2" class="topmenu-item cs-topmenu-item cs-tabs top-tab custom-link" data-tabindex="0" tabindex="0" style="position: absolute; left: 0px; top: 0px; border: 1px solid rgba(0, 0, 0, 0); overflow: visible; transform-origin: center center; z-index: 2; cursor: pointer; width: 89px; height: 23px; transform: translate(166px, 26px);"><div class="view-content" tabindex="-1" style="position: relative; text-align: center; top: 8%;" data-tabindex="-1"><span class="cs-tab">Print Pagina</span></div></button>

Is it possible to make a trigger only for to hide and then at another slide to show and after a view slides again to hide? In the example it shows dsomething with the volume, but I don't use that. What should I use instead of "#tab-customlink"? 

Please let me know, I use storyline 3. Thanks in advance.

storyline 360
  • SamHill's avatar
    SamHill
    Super Hero
    9 months ago

    I think something like this should work. Your original example uses jQuery. This just uses plain JavaScript.

    // get a reference to the button
    const printButton = document.querySelector('#link-left-2');
    // hide button
    printButton.style.display  = "none";
    // show button
    printButton.style.display  = "inline";
Related Content