Member Avatar for jonsan32

I'd like for my page () to load, and for the TOUR to start automatically. Right now visitors must click a button with id "starttour"

Here's what I've added so far, but it doesn't do the trick:

<script>
 $(function () {
          window.onload = $('#starttour').click();
      });
</script>

<a class="start-tour" href="#" id="starttour"><span class="two skinny" style="margin:10px 5px; width:290px; font-weight:bold; letter-spacing:4px;"><i class="fa fa-photo animated faa-pulse faa-slow"></i> Take a Detailed Tour</span></a>

Thanks for any help whatsoever.

Edited by jonsan32
  • 3 Contributors
  • 4 Replies
  • 2K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Biiim

Dani AI

Generated

A couple of things are tripping this up, . Assigning to window.onload needs a function reference; calling the click handler during assignment executes it right away and leaves nothing to run later. Also, building on 's point, you usually do not need an artificial delay. Use DOM ready if your tour only needs the DOM, or wait for the full window load if the tour measures layout or needs images/styles to be finished.

Rather than imitating a click, follow 's advice and call the underlying tour logic directly. Pull the code that the button click runs into a function, then invoke that function both on page lifecycle and on user click. This avoids synthetic, untrusted events and is less likely to break with browser changes.

<script>
$(function () {
  var started = false;

  function startTour() {
    if (started) return;           // guard against double-start
    started = true;
    // TODO: put the actual tour start here, e.g. introJs().start();
  }

  // keep the button working
  $('#starttour').on('click', function (e) {
    e.preventDefault();            // avoid jumping to top from href="#"
    startTour();
  });

  // auto-start: choose ONE of these based on what your tour needs
  startTour();                     // when DOM is ready (fastest)
  // $(window).on('load', startTour); // use this instead if images/layout must be ready
});
</script>

Quick checks:

  • Ensure the tour library initializes before startTour() runs; if not, move this script below your tour script or add a simple if (window.YourTourLib) startTour();.
  • If #starttour is injected later, bind with delegation: $(document).on('click', '#starttour', handler).
  • Log once in startTour() to verify it only fires a single time.

Recommended Answers

All 4 Replies

Member Avatar for Biiim

Where is the javascript code that is attached to #starttour?

Put that in the window.onload function.

Member Avatar for jonsan32

Thank you. I think the issue was that the page was loading too slowly, so I added a pause feature. 

<script>
$(document).ready(function() {
  setTimeout(function() {
    $(".start-tour").trigger('click');
  }, 10000);
});
</script>
Member Avatar for Dani

There is no reason to use a timeout because the document.ready() function waits until the DOM is ready before executing.

What if you just did something like this:

<script>
 $(function () {
          $(".start-tour").trigger('click');
      });
</script>
Member Avatar for Biiim

I try to avoid imitating user input as much as possible as, at least in the past, browsers can often change how this works for user security.

So I think it would be much better to find the actual script that the click activates as this won't get nuked at some point down the line with a browser update.

But if what you have got works, it works. So no need making it more complicated when it's working!

commented: Completely agree! +16
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.