Info For Developers

This page is a placeholder for all sorts of info – presentations slides, code, pictures; anything that would normally clutter up the main pages.


JavaScript ‘Gotchas’

Some browsers are more tolerant of JavaScript ‘errors’ than others. So, watch out for these, particularly in IE…

  • Always precede variable declarations with var. This can often cause obscure, and difficult to find errors in IE
  • Don’t put a ‘,’ after the last element of an array
  • Make sure you don’t accidentally put extra quotes in markup – this one (double ending quote) works in FF, but not IE: <div class='classxxx''>xxx</div>. In this case, I actually think IE’s got it right! :-)

Note:

  1. If your page works in Firefox or Safari, but not in IE, try validating the page. This is often the cause of IE failing. In Firefox, Tools -> Validate HTML, or go to http://validator.w3.org/
  2. Switch on script debugging in IE if you have obscure errors. Go to Tools -> Internet Options -> Advanced, and uncheck Disable script debugging (Internet Explorer)

I found this when using a thickbox, but may occur in other situations; If you have spaces in your URL (http://abc.com?name=Steve Wells), it stopped my thickboxes working. Do a URI encode on the parameter.

And here’s a “flotcha”! I found this when using flot, but it is in no way a flot bug, it is just another IE foible. Basically, I had this:


$.plot($('#' + id),
[
{ label: label, color: color, data: theData},
],
{ xaxis: { mode: "time" }
})

Note the extra comma at the end of the data series. it is clearly an error, but Firefox handles it nicely. IE used to not compile at all if you had that in the past, but – whether it’s because it’s IE8, or just because of this situation – in this case, it treats it as having a second element in the array, thus causing flot to fail! Took me ages to spot it…

Code Snippets: JavaScript and CSS

  • I never knew you could force a browser to always show a right-hand scrollbar! This is useful if more content gets added after the page has loaded – if a short page becomes too long, or you resize the browser to make it smaller, the scrollbar appears and there’s a “jump” which looks copletely naff.So, check this post http://snippets.dzone.com/posts/show/217 – lots of ideas, but my vote goes to:html {overflow-y: scroll;}Sweet!
  • Ever wondered how you can avoid using eval in Javascript? Go to this excellent post to find out. Basicallly, make the string you’re trying to eval into a function, and call it. Like this:

    var str = 'var obj = new Object() ;'
    + 'obj.init() ;'
     

    var intFun = new Function(str)
    intFun()

    Cool, huh?

  • How do you capture the matches in a regexp, a la $n in perl? Simple. match returns the matches in an array, with the full matched string as the first element:

    var str = '123abcdef'
    var matches = str.match(/123(.*)def/)
    alert(matches[0]) // will be 123abcdef
    alert(matches[1]) // will be abc

    Simple. If you add g as a qualifer, only the matches are returned.
  • Unit testing of jQuery/JavaScript is easier than you think. If you’ve done it in (say) Perl, or used jUnit style testing, it’s a piece of cake. Check out this link for a brilliant and easy to understand tutorial, and get the code here
  • Ever wondered how to globally replace something in a string in Javascript? Easy in perl, of course:

    my $str = '123abcdef' ;
    my $r = 'abc' ;
    my $s = 'ABC' ;
    $str =~ s/$r/$s/g ;

    …but not quite so easy in JavaScript (try it!)

    var str = '123abcdef'
    var r = 'abc'
    var s = 'ABC'
    st.replace(/r/g, s)

    The way to do this is to create a RegExp object, and use that in the replace:

    var str = '123abcdef'
    var r = new RegExp('abc', g)
    var s = 'ABC'
    st.replace(r, s)

    Works a treat!
  • Interesting issue with setting colspan attribute via jQuery here. Basically, setting the colspan attribute doesn’t work in IE, but using the JavaScript colSpan function does. I assume later versions of IE will correct this…
  • How to make tr:hover work in IE7 is described here, but the post is quite old. I’d just use a mouseover…
  • Ever had a background image (set by a CSS class) not appear on a span in IE, but it’s OK in Firefox? try making sure the span has something in it! I fell foul of this one…
  • Stopping the horrible pixelation in IE when using jQuery fadeIn can be fixed by simply adding a background color to the element. Thanks to this post for this one.
  • This article explains how to get round a lot of bugs caused by the IE hasLayout propery. Still couldn’t get my app to work tho’… Check it out here.
  • IE annoyingly won’t let you set a div to have a height less than the line-height (-ish). Most annoying. This article tells you how to get round it. Basically, set line-height to 0, font-size to 1pt and put a comment in the div. Yes, I’m serious you need a comment in the div. How mad is that?
  • jQuery’s excellent animate function allows you to animate any CSS property with an integer value, e.g. width, height, opacity, etc. However, it doesn’t work on non-integer values like background color. No problem, use this plug in. Problem solved. It’s nice and small, and works a treat.

In-Depth…

These links provide more in-depth programmong examples and ideas. Al comments welcome – enjoy…

2 responses to “Info For Developers

  1. Pingback: Downloading CSV Files Without Creating Links « Hogsmil Open Source Blog

  2. Pingback: Speeding Up jQuery « Hogsmil Open Source Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s