Javascript Tutorial On Load

Discussion in 'Web Design and Development' started by SChaput, Jun 15, 2010.

  1. SChaput macrumors regular

    Joined:
    Jul 2, 2008
    Location:
    United States
    #1
    Good Afternoon all,

    Currently I'm trying to manipulate the tutorial found here,
    http://flowplayer.org/tools/demos/overlay/index.html
    to better fit my needs.

    I've got basically everything I need thus far, except for the fact I want it to load when the page loads and not when a link is clicked. It seems the part i have to edit is located here:
    Code:
    $(document).ready(function() {
    
    $("a[rel]").overlay();
    });
    
    I've tried to put the above into a function to call it on body onload, but it doesn't give me what i want.

    Can anyone give me any advice on this?
    Thanks!
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
  3. SChaput thread starter macrumors regular

    Joined:
    Jul 2, 2008
    Location:
    United States
    #3
    But it's set up to go with any a tags that have rel='___'.

    and that webpage says,
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    The point of the script is to work with all tags like that. Are you trying to get the script effect to only apply to a single link and have that link "clicked" on when the page is finished loading?

    The ready function acts independently from onload. You don't place it inside it, it's used instead of it.
     
  5. SChaput thread starter macrumors regular

    Joined:
    Jul 2, 2008
    Location:
    United States
    #5
    Hmm

    Well what I was trying to do was make it so when a user navigates to my site, (ex. www.mywebsite.com) they see this overlay straight away, then they will click the X and continue to view my site.

    So i guess id rather they not have to click ANYTHING for it to initialize.
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    Then for onload you would call the click function for the link. I don't know what your HTML looks like though, but here's a rough bit of JavaScript that would go with the onload event or the ready function, either would work.
    PHP:
    document.getElementById('startLink').click();
    Assuming this HTML were to exist.
    HTML:
    <a id="startLink" href="blah" rel="stuff">blah</a>
     
  7. SChaput thread starter macrumors regular

    Joined:
    Jul 2, 2008
    Location:
    United States
    #7
    Okay, so now i have the following code, and the link is triggering the overlay, but there must be something wrong with how i'm doing the function.
    Code:
    <script type="text/javascript">
    function overlay(){
    	document.getElementById('startLink').click();  
    }
    </script>
    
    Code:
    <a rel="#mies1" id="startLink">fsdfs</a>
    
    Code:
    <body onLoad="overlay();">
    
    I really appreciate your help!
     
  8. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    Well, your anchor tag has no href attribute so that would be an issue (maybe it got left out of your post?). Do you have this page live somewhere you can link to? Are you getting any errors in the JavaScript Error Console window?
     
  9. SChaput thread starter macrumors regular

    Joined:
    Jul 2, 2008
    Location:
    United States
    #9
    Well i was under the impression since in the tutorial the a tag didnt have a href, i didnt have to have one either, is that correct?

    Also the error console is spitting out the below error:

    Error: document.getElementById("startLink").click is not a function
    Line: 45

    That function is again,
    Code:
    <script type="text/javascript">
    function overlay(){
    	document.getElementById('startLink').click();  
    }
    </script>
    
    and is called here:
    <body onLoad="overlay();">
     
  10. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #10
    Seems the click function isn't universally supported. Since you're using jQuery, you can try the trigger function.

    PHP:
    function overlay(){
        $(
    '#startLink').trigger('click');  
    }
     

Share This Page