WordPress and Javascript

Did you do it in the basic editor? The wysiwyg screws up code pretty bad.

For reference:
https://validator.w3.org/check?uri=http%3A%2F%2Fwww.michaelherbert.me.uk%2Fjournal%2F

This is one problem:
<script type="text/javascript" src="oodomimagerollover.js"></script>

You’re using a relative path to point to the script source. But it’s relative to the URL, not to the actual directory and such.

On https://www.michaelherbert.me.uk/journal , it’s trying to find the js file at: https://www.michaelherbert.me.uk/journal/oodomimagerollover.js, which is incorrect (since it ain’t there).

Change your script tag to use absolute URLs:
<script type="text/javascript" src="https://www.michaelherbert.me.uk/oodomimagerollover.js"></script>

Hi Otto,

Thanks for your reply. I’ve followed your suggestion but to no avail. I did actually upload the js file to the themes directory so the relative path shouldn’t have been too much of a problem.

Just incase it was a problem of using two javascripts, I’ve taken the image change one out but it still doesn’t include my text box.

I’m wondering if it could be a simple positioning problem cause when you “View Source” all the blog is there.

Once again, thanks for your help and if you have any other suggestions…

Thanks.

Hi Samboll,

Sorry, I didn’t see your post before. I used Notepad for editting rather than changing the CHMOD and using the editor.

The validator turned up a couple of things I don’t really understand but will look into. I’ll assume the javascript itself is correct, seeing as I know nothing about it!

Don’t know if you looked at the validator results but 10 and 22 look like the ones I need to look at a bit harder.

Thanks for your help.

I did actually upload the js file to the themes directory so the relative path shouldn’t have been too much of a problem.

Actually, no, it would have been a big problem, any way you look at it. The path is relative to the URL, not to the location of the theme or anything else. And since the URL is faked by “pretty permalinks”, then you must, repeat MUST specify a full and absolute URL in that script tag.

You cannot use relative URLs. Really. Don’t even try.

Otto, sorry bout that, was half asleep when I was looking yesterday so didn’t realise what you were saying properly. I didn’t know that about relative paths, but now that you’ve said it I can see that it makes sense.

Still can’t get either of the scripts to work so I’ve taken that one out completely – I’ll get the important one sorted and then worry about the one just for aesthetics!

Once again, thank you.

To add more to the conversation and possibly help debug the larger issue, I’ve noticed that perfectly usable Javascript with no dependencies on relative URLs somehow “break” when placed inside a post.

For example, I’ve been experimenting with both alexa widgets (for graphs) and statsaholic widgets (also for graphs) and neither will work when placed in a post as per the instructions of both sites.

Sticking with the statsaholic example for the moment (because I can’t get the Alexa version to work no matter what I do), if you take the following code and stick it in an HTML file on your desktop and just open it, it will display some stats for digg, fark and slashdot.

<!-- start Statsaholic Chartlet code - from https://www.statsaholic.com/widgets -->

<a href="https://www.statsaholic.com/"
	style="text-decoration:none;color:#999;font-family:sans-serif;font-size:11px"
	target="_blank" title="website traffic and statistics...">
	alexa website statistics by statsaholic

<script language="JavaScript1.2" type="text/javascript"><!--

	// USER-EDITABLE VARIABLES
	// enter up to 3 domains, separated by commas
	ah_DomainList = "slashdot.org,digg.com,fark.com";
	ah_Width      = 400;  // width in pixels (min 325, max 400)
	ah_Height     = 250;  // height in pixels (max 250)
	ah_Type       = "r";  // "r" = Reach, "n" = Rank, "p" = Page Views
	ah_Range      = "6m"; // "14d", "1m", "3m" , "6m", "1y", etc.
	ah_BGcolor    = "eeeeee"; // hex value without "#" char (usually "ffffff")
	// END USER-EDITABLE VARIABLES	

//--></script>

<script language="JavaScript1.2" type="text/javascript"
	src="https://www.statsaholic.com/chartlet.js"></script>

<!-- end Statsaholic Chartlet code block -->

Now, if you take the same exact code and stick it in a post, it will not work. I don’t understand why since it’s the same exact code.