Changing Attribute with Javascript-Header Problems

Question

The following HTML displays a fancy font on my site, due some alterations I made to <h2>

<section id="content">
    <article>
        <h2 id="titletext">Welcome to <span>Pomona High School!</span></h2>
        <p id="infotext" style="width: 773px; height: 28px;" >Welcome to the new Pomona High School site! Please give us feedback!</p>
        <br />
    </article>
</section>

This displays quite fine in the site.

Fancy Header 2 Font

When the user now goes to the taskbar and chooses one of the submenu items, the <h2> text will change to a specified string value. I went into the Javascript editor and produced the following.

window.onhashchange = function() { //when the hash changes (the '#' part)
    var loc = window.location + ""; //get the current location (from the address bar)
    var curHash = loc.substr(loc.lastIndexOf("#")); //get what's after the '#'
    if (curHash == "#mission") { //else if it's #mission
        document.getElementById('titletext').innerHTML = 'Mission Statement';
    }

    else {
        document.getElementById('titletext').innerHTML = 'Welcome to Pomona High School';

    }
};

Linking one of the menu items to #mission, I was succesful in changing the text. But the font changed to the default <h2> font.

I need help on how to bring my custom font onto strings in Javascript. Thanks in advance!

CSS stylsheet for <h2>:

h2 {
    font-size: 30px;
    line-height: 1.2em;
    font-weight: normal;
    color: #212222;
    margin-bottom: 22px;
}

h2 span {
    color: #8a8a8a;
}

And here's the two custom font files (too big to copy and paste to Stack Overflow):-

else if(curHash == "#mission"): else not needed?.. An what exactly happens? Maybe you are just missing the <span> in the titletext element? — pckill
– pckill, Commented Oct 21, 2012 at 15:44
sorry, I was trimming some unecessary code. There was actaully if (curHash== "#home") at the top but that was not part of the problem. — Griffin
– Griffin, Commented Oct 21, 2012 at 15:47

Peter Jensen · Accepted Answer · 2012-10-21 15:45:03Z

1

Your code is actually replacing

Welcome to <span>Pomona High School!</span>

with

Welcome to Pomona High School!

Notice, no element. Just set it with the span tag, and you will be fine.

answered Oct 21, 2012 at 15:45

Peter Jensen

654 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Griffin Over a year ago

The <span> tag is actually used to change the font's color from black to white. <h2>Welcome to Pomona High School</h2> will display the custom font .

Griffin Over a year ago

You can see the <span> tag in action in the HTML code I provided at the top of the page.

Peter Jensen Over a year ago

I actually can't :-) Try this instead: document.getElementById('titletext').innerHTML = 'Welcome to <span>Pomona High School!</span>';

Peter Jensen Over a year ago

Ok, then your problem is not with the code you pasted here. You probably change some css elsewhere in the code. Try inspecting your html/css in firebug.

Yatharth Agarwal · Accepted Answer · 2012-10-21 16:32:48Z

0

Source: MDN Docs

Here's what MDN has to say about this:

The hashchange event fires when a window's hash changes (see location.hash).

Syntax:-

window.onhashchange = funcRef;

<body onhashchange="funcRef();">

window.addEventListener("hashchange", funcRef, false);

I think that passing function() { ... } is a function reference but could you try defining the function first and then passing a named reference? The code would go:

function hashChange() { //when the hash changes (the '#' part)
    var loc = window.location + ""; //get the current location (from the address bar)
    var curHash = loc.substr(loc.lastIndexOf("#")); //get what's after the '#'
    if (curHash == "#mission") { //else if it's #mission
        document.getElementById('titletext').innerHTML = 'Mission Statement';
    }

    else {
        document.getElementById('titletext').innerHTML = 'Welcome to Pomona High School';

    }
};

window.onhashchange = hashChange;

OK, I'm confused. There must be something else going on as it's working for me in this JSFiddle...

Your code removes the <span> in the <h2> on hash change which was presumably giving the styling. So it should really be:

window.onhashchange = function() { //when the hash changes (the '#' part)
    var loc = window.location + ""; //get the current location (from the address bar)
    var curHash = loc.substr(loc.lastIndexOf("#")); //get what's after the '#'

    if (curHash == "#mission") { //else if it's #mission
        document.getElementById('titletext').innerHTML = '<span>Mission Statement</span>';
    }

    else {
        document.getElementById('titletext').innerHTML = 'Welcome to <span>Pomona High School</span>';
    }
}

Also, I think you're mixing up the if and else statements. This:

else if(curHash == "#mission") {
    ...
}

else {
    ...
}

should really be:

if(curHash == "#mission") {
    ...
}

else if {
    ...
}

edited Oct 21, 2012 at 16:32

answered Oct 21, 2012 at 15:45

Yatharth Agarwal

4,5803 gold badges27 silver badges55 bronze badges

9 Comments

Griffin Over a year ago

The code changes the the text to white, but it still does not dsiplay the custom font. My custom font is shown when a string has the <h2> tag, not the <span> tag, keep that in mind. :)

Yatharth Agarwal Over a year ago

@parion Can you provide us with your CSS also?

Griffin Over a year ago

What parts of the stylesheet would you wish to see?

Yatharth Agarwal Over a year ago

@parion Anything pertaining to the h2 elements or anything else relevant. Just dump everything here if you're too lazy, someone will edit it.

Griffin Over a year ago

Added it. The real code is js/Humanst521_BT_400.font.js, but the file is way too big to add on Stack Overflow. Makes no sense either. xD

|

Collectives™ on Stack Overflow

Changing Attribute with Javascript-Header Problems

2 Answers 2

4 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related