0

Edit 7/16/15: I ended up using this between the <li> tags of the joyride I needed the "x" disabled on.
<script>$('.joyride-close-tip').remove();</script>
Not the most clean solution but does what i need.


Original Post
Documentation is here

If you open up the documentation page where they have a joyride example, all the joyrides will have a "x" in the upper right corner, but I don't want to have that show on most of the joyrides.

As far as I know, it's not good practice to remove the $joyride-tip-close elements from the .scss files. I also wanted to know how to do this without having to basically copy and paste all the joyride scss without the joyride-close-tip portion (which seems to be what styles the "x").

Thanks in advance.

Addy
  • 111
  • 1
  • 7

2 Answers2

0

find that class class="joyride-close-tip"

override it with display:none;

aahhaa
  • 2,240
  • 3
  • 19
  • 30
  • I should clarify that even if I did along the lines of: `

    1. Hello and welcome to the Joyride
      documentation page.

    2. Stop #1

      You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.

    ` With no mention of the joyride-close-tip class, then the x still shows up regardless.     – Addy Jul 06 '15 at 18:39
0

You can remove this by specifying a blank template for link in the options. But to do this you need to redefine the HTML templates, like this…

$(document).foundation({
  joyride: {
    template: {
      link        : '',
      tip         : '<div class="joyride-tip-guide"><span class="joyride-nub"></span></div>',
      wrapper     : '<div class="joyride-content-wrapper"></div>',
      button      : '<a href="#" class="small button joyride-next-tip"></a>',
      prev_button : '<a href="#" class="small button joyride-prev-tip"></a>'
    }
  }
}).foundation('joyride', 'start');

See http://foundation.zurb.com/docs/components/joyride.html

matharden
  • 757
  • 6
  • 15
  • Instead of redefine you can do: `template: $.extend(true, {}, Foundation.libs.joyride.defaults.template, {link: ''})` – RiZKiT Oct 24 '17 at 15:23