So for the last few weeks I’ve found myself doing alot of web design.  First with VizWorld (had to build that entire layout from scratch), then with the ezViz Script Generator, and now with a redesign of the ItsOnSirius Website.  In all my previous webwork I generally stayed away from JavaScript, partly because of it’s non-cross-platform nature and partly because I just didn’t want to learn it.  This time, tho, I decided it’s time to learn and dive in to learn how all the new fancy “Web 2.0″ Ajax stuff works.

It’s been a fun trip.  It’s always best with stuff like this to have a project to implement your education as you go.  Just reading is one thing, but actually implementing stuff in code shows all the corner cases and odd behaviour not covered in most texts.  Also, trying to design code that works with IE6, IE7, and FireFox is a serious PITA.

So here’s a few tips for others attempting the same….[tag:html][tag:javascript][tag:development][tag:ajax]

In no particular order…

  1. Decide on a full hostname early.  I spent a good hour chasing down a problem with my XMLHttpRequest code in the new ItsOnSirius that kept resulting in a “open not permitted” error in FireFox.  Come to find out that, for security reasons, you can’t access a file on a different domain, and if you access the website without the “www.” at the beginning and try to get an XML file with the www at the beginning, it won’t work.  A simple PHP snipped can fix that, tho:
    <?php
     if ($_SERVER['HTTP_HOST'] != “www.itsonsirius.net”) {
        header( ‘Location: http://www.itsonsirius.net/’ );
    } else {
    ?>
    … Regular Page Stuff …
    <?php } ?>

  2. Caching. This doesn’t seem to be a problem in FireFox, but IE wants to Cache Everything.  With the HTML pages you can simply use Meta tags in the header to disable caching (<META HTTP-EQUIV=“Pragma” CONTENT=“no-cache”> or <META HTTP-EQUIV=“Expires” CONTENT=“-1″>), but when downloading XML files with the XMLHttpRequest stuff it’s trickier.  I found the following snippet to work well:
    req.onreadystatechange = processReqChange;req.open("GET", xmlfile, true);req.setRequestHeader( "If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT" );req.send("");

  3. HTML entities don’t have ID’s unless you explicitly give them one. I know, rookie mistake, but it hit me time and time again in the Script Generator code.  It’s an odd error condition too because it fails almost silently.
  4. Disabling optionBox’s Isn’t Cross-Platform.  Maybe I’m missing something, but I could never get disabled optionBox’s (or at least disabled options inside optionBox’s) to work right on IE.  In FireFox you would be prevented from selected disabled options, but in IE you had to explicitly check for it and stop the user from doing it.
  5. HTML Buttons Another rookie glitch.  When using the <BUTTON> tag in a form, be sure to specify the type.  In FireFox it wasn’t a problem, but in IE it would automatically submit the form unless I explicitly set type=”button” on each one.
  6. Sizing Divs In FireFox On VizWorld I had a tough time trying to get the floating div on the left (with the login boxes & such) to work with the rest of the divs for content.  It works now, but you can look at the HTML and see the nasty hack that makes it work:  An invisible span of dashes to force the divs to expand to fill the row.  I tried to set width=”100%”, which worked in IE but caused them to overlap in FireFox. 
  7. Sizing Divs in IE  A div that’s 800px wide should hold 2 400px wide divs side by side right?  Wrong.  IE seems to add tiny buffers around the divs that you can’t get rid off.  My solution was to simply trim 3px off the size of one of the divs.  It’s not perfect, but it works.

There were dozens more, these were just the most pressing ones that come to mind.  I know you guys out there do alot more of this stuff than I do, so feel free to toss back your own “gotchas”.

Be Sociable, Share!

No related posts.