Bad XHTML..
Posted by Jonathan Ng | Filed under Technical
I was working on SpoonFeed’s “auto-detect feed” feature last week, and thought that it’ll be a piece of cake, thanks to PHP5’s SimpleXML libraries. It is of course easy, if the page is valid XHTML. I tried it locally with my blog and it worked fine. Unfortunately, problems arise when the page is not valid XHTML. I came across this problem when I tried “auto-detecting” Neowin.net. Though it sports a new design and has a XHTML 1.1 Strict doctype, the tags aren’t structured properly.
In strict XHTML, tags that don’t have closing tags (like img and meta), should be in the form:
The backslash is very impotant. If left out, it’ll be treated as an opening tag. Neowin.net (and probably many other sites) do just that. All their meta tags are “opening tags”. PHP5’s SimpleXML parser would parse all HTML (it ain’t small), waiting for the closing tag that never came.
I’m all bogged down with my studies, and doubt I’ll find enough time to work on SpoonFeed. Even if I do, I think I’ll be skipping the “auto-detect” feature for a while..
Tags: my_web_projects, xhtml
Setting Element Styles with JavaScript
Posted by Jonathan Ng | Filed under Technical
Since I couldn’t figure out a pure CSS method to perform the rollover effect on the navigation menus, I used JavaScript instead. Besides, it’s much more simple and easier to maintain, rather than a complex mangle of CSS. So to change the curved image from green to pink, I used something like the following to change the CSS background properties:
function naviOver(e) {
gE('active').style.background = "url(Images/pink.png) top right no-repeat";
}
It worked of course, but I was late to realize that it worked only on the home page, with the rollover images in an Images folder located at /jnls (root folder for my blog). I tried using some alert()s to determine whether the background property was set. The result: it works.
So what could be the darn problem be? Next thing on my mind: the bloody images aren’t loading. After some probing, it turns out then when you set an element’s style with JavaScript, the relative path becomes that of the page. For example, for the page /folder/index.htm, url(Images/pic.png) would refer to /folder/Images/pic.png, and NOT where the original CSS file was located (the wordpress themes folder in my case).
Sigh, so that was what’s wrong. So my solution was to create seperate classes for the normal and hover states for the elements concerned, and use JavaScript to change their classes onmouseover.
gE('active').className = "hover";That pretty much did the trick. Ease of maintenance ensured at the same time!
Note:
function gE(e) { return document.getElementById(e); }Tags: css, javascript, xhtml
