By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,842 Members | 2,368 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,842 IT Pros & Developers. It's quick & easy.

Change style by ID

P: n/a
I have a navigation panel on 20 or so page and would like to change ot
to a include. My problem is that the link of the current page has to
be bold. I believe I am close but the code below doesn't work.

Any help would be appreciated.

Thanks

<script>
var pageName = "premiumSupport";

function changeBold() {
if (pageName == 'premiumSupport') {
document.getElementById('overview').style.fontWeig ht='bold';
}
}
changeBold ();
</script>

<a id="overview" href="/customercare/index.htm">Overview</a>

Jul 10 '08 #1
Share this Question
Share on Google+
3 Replies


P: n/a
BillyZ wrote:
>I have a navigation panel on 20 or so page and would like to
change ot to a include. My problem is that the link of the
current page has to be bold. I believe I am close but the
code below doesn't work.

Any help would be appreciated.

Thanks

<script>
var pageName = "premiumSupport";

function changeBold() {
if (pageName == 'premiumSupport') {
document.getElementById('overview').style.fontWeig ht='bold';
}
}
changeBold ();
</script>

<a id="overview" href="/customercare/index.htm">Overview</a>
If this is representative of the structure of your HTML (which pretty
much has to be assumed to be the case here) then your problem is that
the global code in SCRIPT elements is executed immediately after the
SCRIPT element is parsed by the HTML parser and the A element cannot
exist in the DOM prior to HTML parser parsing the A element's mark-up.
Thus your - changeBold(); - happens before the DOM contains the A
element, and so - document.getElementById('overview') - must fail to
find that element.

The solution is probably to move the - changeBold(); - call into an
onload handler for the page.

Richard.

Jul 10 '08 #2

P: n/a
On Jul 10, 4:14*pm, "Richard Cornford" <Rich...@litotes.demon.co.uk>
wrote:
BillyZ wrote:
I have a navigation panel on 20 or so page and would like to
change ot to a include. My problem is that the link of the
current page has to be bold. I believe I am close but the
code below doesn't work.
Any help would be appreciated.
Thanks
<script>
var pageName = "premiumSupport";
function changeBold() {
* *if (pageName == 'premiumSupport') {
* * * *document.getElementById('overview').style.fontWei ght='bold';
* * * *}
* *}
changeBold ();
</script>
<a id="overview" href="/customercare/index.htm">Overview</a>

If this is representative of the structure of your HTML (which pretty
much has to be assumed to be the case here) then your problem is that
the global code in SCRIPT elements is executed immediately after the
SCRIPT element is parsed by the HTML parser and the A element cannot
exist in the DOM prior to HTML parser parsing the A element's mark-up.
Thus your - changeBold(); - happens before the DOM contains the A
element, and so - document.getElementById('overview') - must fail to
find that element.

The solution is probably to move the - changeBold(); *- call into an
onload handler for the page.

Richard.- Hide quoted text -

- Show quoted text -
Thank you for taking the time to respond. One additional question. I
am working within a cms system and do not have access to the body tag.
The links all live within a div can onLoad go in a div and if so how?

Thanks
Jul 10 '08 #3

P: n/a
BillyZ wrote:
On Jul 10, 4:14 pm, Richard Cornford wrote:
<snip>
>The solution is probably to move the - changeBold(); - call into
an onload handler for the page.

Thank you for taking the time to respond. One additional question.
I am working within a cms system and do not have access to the
body tag. The links all live within a div can onLoad go in a div
and if so how?

A sensible CMS system that anticipate scripting may make provision for
adding onload handlers. You cannot use an HTML onload attribute anywhere
but in the opening BODY tag, but you can assign a function to -
window.onload - from any SCRIPT element. I.E.:-

window.onload = function(){
changeBold();
};

- in place of - changeBold(); - should work. However, if any earlier
SCRIPT element had done the same then that action will replace the
pre-existing onload handler. If the opening BODY tag contains an onload
attribute then the parsing of that attribute will replace any -
window.onload - handler assigned before it is parsed, and be replaced by
any - window.onload - assignment that happens after it is parsed. And
any subsequent assignment to - widnnow.onload - in later SCRIPT elements
would replace your handler.

One way around that is to use (branching depending on the method's
existence) - attachEvent - (IE and close imitators) or -
addEventListener - (some DOM standard browsers) methods, which allow
multiple functions to be associated with events with no danger of
overriding pre-existing handlers. If you Google with the method names
(both of them) and 'load' as keywords you will probably find numerous
examples of how they could be used in this context.

Richard.

Jul 11 '08 #4

This discussion thread is closed

Replies have been disabled for this discussion.