Javascript Tutorial On Load

SChaput · Jun 15, 2010

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!

angelwatt · Jun 15, 2010

The ready function already does what you want.

SChaput · Jun 15, 2010

But it's set up to go with any a tags that have rel='___'.

and that webpage says,

The .ready() method is generally incompatible with the <body onload=""> attribute.

angelwatt · Jun 15, 2010

SChaput said:
But it's set up to go with any a tags that have rel='___'.

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.

SChaput · Jun 15, 2010

Hmm

Well what I was trying to do was make it so when a user navigates to my site, (ex. http://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.

angelwatt · Jun 15, 2010

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>

SChaput · Jun 15, 2010

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!

angelwatt · Jun 16, 2010

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?

SChaput · Jun 16, 2010

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();">

angelwatt · Jun 16, 2010

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');  
}

Search

Search

Javascript Tutorial On Load

SChaput

macrumors regular

angelwatt

Moderator emeritus

SChaput

macrumors regular

angelwatt

Moderator emeritus

SChaput

macrumors regular

angelwatt

Moderator emeritus

SChaput

macrumors regular

angelwatt

Moderator emeritus

SChaput

macrumors regular

angelwatt

Moderator emeritus

Our Staff