Body Tag Question

Barb · February 1, 2006

First off, forgive my complete and total ignorance on this subject!

I am running one javascript on my site - the referral one (where when you click on the smugmug link at the bottom, your referral code is attached to it). It works fine. However, when I placed the code that was required in the "body tag" section, my nav bar disappears across the top of my page. However, if I place the body tag code in the "Head tag" section, my nav bar reappears and the code works as it should.

I have wanted to try a couple of the other javascript codes floating around the forum lately (brilliant stuff!), but they don't work if I place the code in the "Head tag", and again, if I place the code correctly in the "Body tag" section, my nav bar disappears! Does any of this make sense?

Andy · February 1, 2006

Barb, wait for the real javscripters and such but here's what multiple body tags look like:

[php]
<body onload="doOnLoad();delHover();OnLoadHandler();updateSS();killFullscreen();">[/php]

bwg · February 1, 2006

Andy wrote:

Barb, wait for the real javscripters and such but here's what multiple body tags look like:

[php]
<body onload="doOnLoad();delHover();OnLoadHandler();updateSS();killFullscreen();">[/php]

barb, there is a new easier way to do all of this.

take all that code out of your body and put this at the top of your javascript:

addEvent(window, 'load', doOnLoad);
addEvent(window, 'load', delHover);
addEvent(window, 'load', OnLoadHandler);
addEvent(window, 'load', updateSS);
addEvent(window, 'load', killFullscreen);

now whenever you need to add another function to run at the load event, just add another line of script.

flyingdutchie · February 1, 2006

bigwebguy wrote:

barb, there is a new easier way to do all of this.

take all that code out of your body and put this at the top of your javascript:

addEvent(window, 'load', doOnLoad);
addEvent(window, 'load', delHover);
addEvent(window, 'load', OnLoadHandler);
addEvent(window, 'load', updateSS);
addEvent(window, 'load', killFullscreen);

now whenever you need to add another function to run at the load event, just add another line of script.

I have never seen the function addEvent. Is this a standard JavaScript function/method for the window object?

Barb · February 1, 2006

bigwebguy wrote:

barb, there is a new easier way to do all of this.

take all that code out of your body and put this at the top of your javascript:

addEvent(window, 'load', doOnLoad);
addEvent(window, 'load', delHover);
addEvent(window, 'load', OnLoadHandler);
addEvent(window, 'load', updateSS);
addEvent(window, 'load', killFullscreen);

now whenever you need to add another function to run at the load event, just add another line of script.

Lee, wow, that will be much easier and will certainly take care of my problem. However, I added that to the top of my javascript and now my referral thing doesn't work. ??

Andy · February 1, 2006

bigwebguy wrote:

barb, there is a new easier way to do all of this.

take all that code out of your body and put this at the top of your javascript:

addEvent(window, 'load', doOnLoad);
addEvent(window, 'load', delHover);
addEvent(window, 'load', OnLoadHandler);
addEvent(window, 'load', updateSS);
addEvent(window, 'load', killFullscreen);

now whenever you need to add another function to run at the load event, just add another line of script.

d00d that's my body tag - just to be clear. And so you are a-sayin' that I should change it, too?

flyingdutchie · February 1, 2006

bygates wrote:

Lee, wow, that will be much easier and will certainly take care of my problem. However, I added that to the top of my javascript and now my referral thing doesn't work. ??

Maybe one of the functions used by the call to addEvent prevents the others from executing (it returns true). If you want to be sure that all of them are executed regardless of their return value, you can do this:

addEvent(window, 'load', function() { doOnLoad(); delHover(); OnLoadHandler(); updateCSS(); killFullscreen(); });

Andy · February 1, 2006

GUYS

That's MY code NOT Barb's. Barb - be careful ... make sure you don't copy paste the worng stuff

Barb · February 1, 2006

flyingdutchie wrote:

Maybe one of the functions used by the call to addEvent prevents the others from executing (it returns true). If you want to be sure that all of them are executed regardless of their return value, you can do this:

addEvent(window, 'load', function() { doOnLoad(); delHover(); OnLoadHandler(); updateCSS(); killFullscreen(); });

Anton, doing it this way works for me. Thank you! I'm still curious as to why putting something in the "body tag" section would mess with my nav bar. Any ideas?

Barb · February 1, 2006

Andy wrote:

GUYS

That's MY code NOT Barb's. Barb - be careful ... make sure you don't copy paste the worng stuff

Right Andy. I noticed there were things in there that I'm not using, so I took them out

flyingdutchie · February 1, 2006

Andy wrote:

GUYS

That's MY code NOT Barb's. Barb - be careful ... make sure you don't copy paste the worng stuff

Maybe she copied and pasted your code.. then it should work for her as well

But, yes Barb, be carefull. Check if you're not calling non-existing functions (for your site), because they exist only in Andy's script.

flyingdutchie · February 1, 2006

bygates wrote:

Anton, doing it this way works for me. Thank you! I'm still curious as to why putting something in the "body tag" section would mess with my nav bar. Any ideas?

Probably just a freakin' typo

I have to see what was in your original body tag section and the actual body tag generated by Smugmug (view source)

Barb · February 1, 2006

flyingdutchie wrote:

Probably just a freakin' typo
I have to see what was in your original body tag section and the actual body tag generated by Smugmug (view source)

Well that's always a possibility! I've deleted it out of the body tag, as the other way works

bwg · February 1, 2006

Andy wrote:

d00d that's my body tag - just to be clear. And so you are a-sayin' that I should change it, too?

lol, whoops. i thought you posted barbs tag.

you can change if you want. or not.

it's very new age separation of content and behavior. so web 2.0.

bwg · February 1, 2006

flyingdutchie wrote:

I have never seen the function addEvent. Is this a standard JavaScript function/method for the window object?

its a function that lives in the standard smugmug scripts.

it actually encapsulates the IE specific attachEvent method and the w3 DOM addEventListener method

i've been using it in personal stuff and found it one day when i was digging through the SM code

bwg · February 1, 2006

bygates wrote:

Well that's always a possibility! I've deleted it out of the body tag, as the other way works

barb, make sure you actually have the functions that that code i gave you calls. i didnt realize that was Andy's code i gave you.

make sure you replace all the function names with the ones you had originally in your body tag.

sorry!

flyingdutchie · February 1, 2006

bigwebguy wrote:

its a function that lives in the standard smugmug scripts.

it actually encapsulates the IE specific attachEvent method and the w3 DOM addEventListener method

i've been using it in personal stuff and found it one day when i was digging through the SM code

Sweet! That saves some browser-specific coding.
Will this function always be available (i.e. is this function 'officially' supported and won't it go away in future versions of smugmug)?

Barb · February 1, 2006

bigwebguy wrote:

barb, make sure you actually have the functions that that code i gave you calls. i didnt realize that was Andy's code i gave you.

make sure you replace all the function names with the ones you had originally in your body tag.

sorry!

Already did that, Lee. Thx!

bwg · February 1, 2006

flyingdutchie wrote:

Sweet! That saves some browser-specific coding.
Will this function always be available (i.e. is this function 'officially' supported and won't it go away in future versions of smugmug)?

they (sm) use it all over the place, so i dont think it's going anywhere

even if it does, its all of about 10 lines of code. easy to add back in.

SamirD · February 1, 2006

Is there any functional difference or advantage to using the AddEvent vs the usual way? Be technical if you want.

bwg · February 1, 2006

SamirD wrote:

Is there any functional difference or advantage to using the AddEvent vs the usual way? Be technical if you want.

functionally, in terms of program execution? no i suppose not.

flyingdutchie · February 1, 2006

SamirD wrote:

Is there any functional difference or advantage to using the AddEvent vs the usual way? Be technical if you want.

In general:
If you don't have access to the (generated) HTML code, i.e. you can not add an onload="doSomething();" to a <body> tag or an onclick="doClick();" in a <DIV> element, then the addEvent is the only way to go.

But smugmug allows you to change the <body> tag.
So, for smugmug: Nope, no difference or advantage.

SamirD · February 2, 2006

Thank you for the replies. I'm learning new things every day.

devbobo · February 2, 2006

SamirD wrote:

Is there any functional difference or advantage to using the AddEvent vs the usual way? Be technical if you want.

samir,

There is another option which hasn't been discussed here.

Both the onload or addEvent() methods are only triggered once the page has fully loaded, including thumbnails etc. The disadvantage of these method is there is sometimes a delay between the page starting to load and the page becoming loaded, so I you are adding or removing elements from the page, the addition or removal becomes obvious to the user.

The other method is to place a script block in the footer. Doing this means that the functions will be called on the first pass of the code, and will result the visual issues being reduced, if not removed.

<script>
  myfunction();
</script>

Cheers,

David

SamirD · February 2, 2006

devbobo wrote:
samir,

There is another option which hasn't been discussed here.

Both the onload or addEvent() methods are only triggered once the page has fully loaded, including thumbnails etc. The disadvantage of these method is there is sometimes a delay between the page starting to load and the page becoming loaded, so I you are adding or removing elements from the page, the addition or removal becomes obvious to the user.

The other method is to place a script block in the footer. Doing this means that the functions will be called on the first pass of the code, and will result the visual issues being reduced, if not removed.
<script>
  myfunction();
</script>
Cheers,

David

Ahhh, now this is something quite useful. With as many mouseover changes one of my scripts does, there can be that delay that you mentioned. I'll try adding the function loads to the footer and see what happens. Thank you! <img src="https://us.v-cdn.net/6029383/emoji/clap.gif" border="0" alt="" >

flyingdutchie · February 2, 2006

devbobo wrote:
samir,

There is another option which hasn't been discussed here.

Both the onload or addEvent() methods are only triggered once the page has fully loaded, including thumbnails etc. The disadvantage of these method is there is sometimes a delay between the page starting to load and the page becoming loaded, so I you are adding or removing elements from the page, the addition or removal becomes obvious to the user.

The other method is to place a script block in the footer. Doing this means that the functions will be called on the first pass of the code, and will result the visual issues being reduced, if not removed.
<script>
  myfunction();
</script>
Cheers,

David

You're correct about the delay and the visual issues that may arise from it. But take note however that the DOM (the document object model, the structure of HTML elements that the javascript can access) may not be complete before the 'onload' event of the <body> has been fired!!

It depends on the browser, but querying/changing the DOM before the entire document has finished loading may return inconsistent/undefined results.

SamirD · February 2, 2006

flyingdutchie wrote:

You're correct about the delay and the visual issues that may arise from it. But take note however that the DOM (the document object model, the structure of HTML elements that the javascript can access) may not be complete before the 'onload' event of the <body> has been fired!!

It depends on the browser, but querying/changing the DOM before the entire document has finished loading may return inconsistent/undefined results.

Hmmm...definitely something to consider. Although I think being in the footer should be after most of the elements that are being modified are built. Well...I take that back--the smugmug referral link would probably be built after the footer.

This will require some careful testing before implementation.

Body Tag Question

Comments