howto start joyride while reading a cookie, if this here is alive still

[hanscees]

Hi,

Its 2023 and joyride still functions with the latest jquery. Very good. I have made a simple joyride that works fine when I use auto-start.

However, when I do not set auto start and try to start joyride after reading as cookie it fails. I am surel;y doing something wrong. Any help apreciated.

my code:

let languagePrefer2 = localStorage.getItem('preferredLanguage');  // read cookie
        console.log('foundation says language should be', languagePrefer2);
          //only if cookie has a value
            // lets fire joyride if language is es
              if(languagePrefer2 == 'ES') {
                  console.log('language is es ');  // this works, console logs
                    } else {
                        console.log('Oh dear, language is not es ');  // this works too 
                         //   $("#chooseID").Joyride({   });
                            $(window).load(function() {
                              $("#chooseID").joyride({
                                  /* Options will go here */
                                    });
});

The error in the console is Uncaught TypeError: $(...).joyride is not a function

As you can see I am no good programmer, just trying to get something working I dont fully understand.

[hanscees]

OK, changed some stuff, but still js code gives an error.

As this page says https://get.foundation/sites/docs-v5/javascript.html

I have

<script src="https://www.bomengids.nl/2022/fcss/foundation.js" type="text/javascript"></script>
<script src="https://www.bomengids.nl/2022/fcss/foundation.joyride.js" type="text/javascript"></script>

<script type="text/javascript">
      // initialize Foundation
      $(document).foundation();

// checking cookie and if a condition, I want to start joyride by doing:
  $(document).foundation('joyride', 'start');

error code is:

 Uncaught ReferenceError:
      We're sorry, 'joyride' is not an available method for this element. ReferenceError: We're sorry, 'joyride' is not an available method for this element.
    at E.fn.init.foundation (https://www.bomengids.nl/2022/fcss/foundation.js:294:15)

I am calling $(document).foundation('joyride', 'start');

whats wrong?

[hanscees]

well after three evenings reading javascript, it seems a decent solution is not possible.

I have however found a solution that works. You start joyride without autostart. And then simulate a click on the starting point from javascript. A workaround for sure, but it works. And sure its not lean and mean, but I dont care.

Using these sources:

Using joyride 3.01
foundation 6.3.1
jquery 3.75
foundation.joyride last version? Doesnt say

    <script src="https://www.bomengids.nl/2022/fcss/what-input.js" type="text/javascript"></script>
    <script src="https://www.bomengids.nl/2022/fcss/foundation.js" type="text/javascript"></script>
    <script src="https://www.bomengids.nl/2022/fcss/foundation.joyride.js" type="text/javascript"></script>

You have to initialize it like so

<script type="text/javascript">
      // initialize Foundation
      $(document).foundation();

and then use joyride without auto start on an element X. If you then simulate a click in javascript that element Joyride starts fine

let languagePrefer2 = localStorage.getItem('preferredLanguage');
        console.log('foudaation says language should be', languagePrefer2);
          //only if cookie has a value
            // lets fire joyride if language is es
              if(languagePrefer2 == 'ES') {
                  console.log('language is es, we will now click and start joyfight ');
                  document.getElementById('startjoy').click();
                    } else {
                        console.log('Oh dear, language is not es, line 630 ');

The joyride list is like this

 <!-- Joyride list -->
    <ol data-joyride data-autostart="false" id="docs-joyride">
      <li data-target=".radio-NL">
        <h3>Howto use this page: step 1</h3>
        <p><b>A- First choose your language </b>by clicking on button under "Choose language"</br>
        B- Then click on "Start side flight Here" to return here</p>
          <img src="https://www.bomengids.nl/2022/fcss/choose-language3.gif"></p>

      </li>

and the element to click on looks like this

    <button class="button" data-joyride-start="#docs-joyride" id="startjoy">
    Start site flight<br/>
  Here</button><br/>

I really dont get why they flushed joyride. Foundation boooo

[hanscees]

solved, while showing how foundation has abandoned its work disgracefully.