Javascript/jQuery On Load Issue

[Ntrimgs]

I have the following function that runs when the page is loaded, but I want it to only run when a button is clicked. How would I go about doing that?

<script>
  $(document).ready(function () {
          $.fancybox({
              'width':          '80%',
              'height':         '80%',
              'autoScale':      false,
              'transitionIn':   'fade',
              'transitionOut':  'fade',
              'type':           'iframe',
              'scrolling' :     'no',
              'href':           'cmetogo-offer.html'
          });
  });      
  </script>

And this is the anchor tag that I would want to trigger it:

<a href="index.html">Login Here</a>

Any suggestions?

[iBeZi]

First put the code you want to run in it's own function, give the anchor tag an id, then add an event listener to detect when the link is clicked and point it at the function

<script>
  function fancybox(e) {  
          $.fancybox({
              'width':          '80%',
              'height':         '80%',
              'autoScale':      false,
              'transitionIn':   'fade',
              'transitionOut':  'fade',
              'type':           'iframe',
              'scrolling' :     'no',
              'href':           'cmetogo-offer.html'
          });
          e.preventDefault();
  }
  $(document).ready(function () {
          $('#link').click(fancybox);
  });      
  </script>

<a href="index.html" id="link">Login Here</a>

[Ntrimgs]

I'm just curious why you put the "e" in between the function parentheses...?

[iBeZi]

It's an event handler function so the function passes through an event object with information and functions related to the event which is stored in e, you use that to prevent the default action of clicking the link, which would be to go to the anchor or another page.

[ZachLiu]

I think it is better to change your HTML element from a link to a button. I think some browsers may check your <a> link underground so the event maybe automatically triggers. There may be some other issues, but I am not sure.

[iBeZi]

Semantically, a button would make more sense, but using a link shouldn't cause any issues if you prevent the default action.