www.webdeveloper.com
Results 1 to 6 of 6

Thread: Javascript/jQuery On Load Issue

  1. #1
    Join Date
    Apr 2009
    Posts
    346

    Javascript/jQuery On Load Issue

    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?

    Code:
    <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:

    HTML Code:
    <a href="index.html">Login Here</a>
    Any suggestions?

  2. #2
    Join Date
    Dec 2012
    Posts
    98
    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

    Code:
    <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>
    HTML Code:
    <a href="index.html" id="link">Login Here</a>

  3. #3
    Join Date
    Apr 2009
    Posts
    346
    I'm just curious why you put the "e" in between the function parentheses...?

  4. #4
    Join Date
    Dec 2012
    Posts
    98
    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.

  5. #5
    Join Date
    Dec 2012
    Posts
    4
    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.

  6. #6
    Join Date
    Dec 2012
    Posts
    98
    Semantically, a button would make more sense, but using a link shouldn't cause any issues if you prevent the default action.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles