Change style by ID

Discussion in 'Javascript' started by BillyZ, Jul 10, 2008.

  1. BillyZ

    BillyZ Guest

    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.fontWeight='bold';
    }
    }
    changeBold ();
    </script>

    <a id="overview" href="/customercare/index.htm">Overview</a>
     
    BillyZ, Jul 10, 2008
    #1
    1. Advertising

  2. 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.fontWeight='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.
     
    Richard Cornford, Jul 11, 2008
    #2
    1. Advertising

  3. BillyZ

    BillyZ Guest

    On Jul 10, 4:14 pm, "Richard Cornford" <>
    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.fontWeight='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
     
    BillyZ, Jul 11, 2008
    #3
  4. 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.
     
    Richard Cornford, Jul 11, 2008
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Rob Nicholson
    Replies:
    3
    Views:
    778
    Rob Nicholson
    May 28, 2005
  2. Replies:
    0
    Views:
    2,476
  3. Replies:
    1
    Views:
    802
    Bertilo Wennergren
    Nov 24, 2003
  4. Ken Varn
    Replies:
    0
    Views:
    493
    Ken Varn
    Apr 26, 2004
  5. torbs
    Replies:
    2
    Views:
    114
    torbs
    May 2, 2006
Loading...

Share This Page