Execute JS function after page loads?

JavaScript
1

Hi there everyone. Thanks for this resource.

I hope my summary isn’t too much of a stab in the dark.

I have long html/CSS (no CMS or php, etc.) web pages. Some people run away when they see too much content on a page. So I hide the large lower section of the pages and have the user click anchor text to execute simple JS code to change the display from ‘none’ to ‘block’ or back to re-hide.


function showcontent () {document.getElementById('showhide').style.display='block';}
function hidecontent () {document.getElementById('showhide').style.display='none';}

(BTW my research indicates that search engines do not know the difference between display=‘none’ and normal content, or I would not be hiding content in the first place.)

Within this hidden content, I have anchor text to provide name handles


<a name="construction"></a>

so users can click a link and go directly to that section. Within that link I include


onclick="javascript:showcontent()"

So that works fine within a particular page. But when I want to link to an anchor on another page which is within this hidden content, the browser cannot display the anchor text because it is still hidden.

Is there a way to execute the JS code to change the DOM, changing the display to ‘block’ on the content of the new page?

I do not see how, because the new page isn’t loaded yet, there is no DOM within the browser yet, so how can it be manipulated?

Of course if I was using php I could generate the code with the property set as desired. But for straight up html/CSS/JS pages is this possible?

I get the feeling I am missing something simple here, either a simple solution or the simple fact that this is just an inherent limitation of html.

2

Hey there,

I created a quick tutorial on my blog about this. If I understand your question correctly, then yes you can do this.

Take a look see and let me know if I have answered your questions.

http://nimpkish.com/blog/anchor-text-hidden-div-showhide

3

I got it to work and while I didn’t need jQuery, I got a glimpse of why so many people like it so much.

The simple thing I was missing was the existence of the standard window.onload event. Duh.

The essential clue you gave me was using

var anchorText = window.location.hash;

All I had to do was add the following to my javascript file:

var anchorText = window.location.hash;

function init () {
	if(anchorText) {
            showcontent ();
            window.location = window.location.hash;
        };}

window.onload = init;

You remember where you were going, when a page loads you check for the hash tag, if you have one you call a function to show the content and then update the window location to finish going there.

Thanks very much for the help.

4

My js library is “ad-hoc”

I go get what I need when I need it and adapt as required.

I can see how a "pageload’ function might address and solve this problem.

5

It doesn’t look like it’s going to work.

When the new page loads, the head section loads the javascript, and executes code that is not within functions. I can have that code tell the browser to set the display value, but IINM when the rest of the page loads it overwrites it. I am loading the CSS earlier in the head than the js loads but that doesn’t seem to matter.

Looks like you just posted, I’ll post this without further ado and see where we’re at.

6

As far as the same page point, yes it will work on another page. It’s called on page load. The jQuery point, argh! You should be using jQuery!

What js library are you using?

7

Hi thanks so much for the quick answer.

At first, I’m thinking “but that’s all on the same page”

Then I’m thinking “but it is checking for the hash tag upon loading the page, so it should work”

Then I’m thinking “but this is jQuery stuff, and I’m not using that package”

Then I got to work seeing if I can adapt your code to my code.

And that’s what I’m doing now.

I’ll get back to you in a bit with the results of my effort.

Thanks Again!