Tips

  1. Lies, lies, and Android’s stock browser

    While working on a responsive site that featured some CSS 3D Transforms, I found that, for some reason, clicking into a text input to type on Android 2.3 and below caused the automatic scroll to the input to exhibit a strange yoyo behavior. It would jump down about 300px too far, jump up a bit, jump down again, up one more time, and park itself a couple of hundred pixels south of the actual input location.

    After a ton of messing around, I realized that it was related to another bug: the stock Android Browser’s incomplete support for CSS 3D Transforms and transitions.

    Despite Modernizr reporting that it’s supported, Android 2.3 and below will in fact fail to properly perform a rotateY transform, instead performing a regular rotate. Additionally, the very presence of an element with 3D transition properties seems to cause the jumpy behavior on input focus.

    Because feature detection yields a false positive, I had to actually detect the version of Android being run via the user agent string, and add a class to the body as needed, so I could target it separately and force the fallback animation I’d written to kick in on Gingerbread, FroYo, and below (to be safe, I also added Honeycomb, since I didn’t have an Android 3 tablet to see if it worked on it).

    var ua = navigator.userAgent.toLowerCase();
    var isOldAndroid = /android [1-3]/i.test( ua );
  2. Facebook, Twitter, and IP Addresses

    Some things I have learned:

    If your server doesn’t have a domain name yet (for example, while working on a production server and website to replace an existing website/server which is currently using the domain name), Twitter and Facebook act weird.

    Twitter’s share button fails outright saying you didn’t pass it a url (even though you did).

    And Facebook fails to load the image thumbnail from its share widget, even if you have all of your OpenGraph tags filled out correctly. Note that it will lint it correctly, and post it correctly, but when you hit share, you won’t see the thumbnail.

    Just felt I should share…

  3. Wrapping clones

    Fun fact: Creating a virtual object in JQuery via the clone method makes some functions unable to interact with it.

    For example, the following will work as expected, adding the class to the clone and not the original:

    $('.myClass').clone().addClass('.myOtherClass');

    The following, however, will NOT work:

    $('.myClass').clone().wrap("<div class='container'></div>");

    As a result, the clone will remain unchanged. If you want to use wrap, and other functions with this limitations, you’ll need to place it somewhere in the DOM first, and then manipulate it.

  4. On Z-Index

    Common issue but one that I often forget and see people asking about:

    The z-index css property does not work on static positioned elements (the default positioning). Make it at least position: relative to make z-index do something.

  5. A IE, you never cease to amaze and surprise me!

    A relatively little known, and even less appreciated, way of doing a for loop in javascript works as follows:

    for (key in array) {
         var element = array[key];
         …
    }
    

    You might recognize this as essentially the equivalent of the foreach loop in php and other languages. It’s a very useful structure when dealing with associative arrays, or just to save yourself some typing. Unfortunately, there are some quirks with this approach. Notably, as usual, in Internet Explorer.

    While at work today I was looping through some form elements, in case the page the script would ran on had multiple forms. Though my test page only had a single form element in it, IE gave me multiple additional elements, such as the letter p, and the number 13…

    Worse still, it did the same for the form.elements array within an inner loop. I did some investigation and found that this is a bug in IE, and has been around for a while now.

    So thank you IE8, for showing us yet again that as far as you’ve come, you’re still the bottom of the proverbial browser barrel.

    Also, thank you Doug for also writing a post on this issue… albeit over 3 years ago 😛 I just felt I should share the fact that this is still very much an issue which IE has, even in its most recent version.

  6. Fun Fact #372

    Remember, Javascript, like most languages, short-circuits when dealing with if statements.

    What does that mean?

    Well for example, when running an OR evaluation with two functions, such as

    if(doThis(var1) || doThat(var2)){
         alert("Woot!");
    }

    If the first function is true, the second function will not execute.

    Something to keep in mind for future reference if you’re wondering why your function’s not running.

  7. A Javascript-less Image Viewer

    So a while back, I was tasked with making what essentially boiled down to an image-viewer. The catch? I had to make it work without javascript (for Internet Explorer in particular), and it had to be done without reloading the entire page.

    Sounds weird, I know, but blame Valve for using Internet Explorer 6, sans javascript, as their HTMLView object in the Source Engine SDK. Anyway… It sounds difficult, but it’s really not, it’s actually very VERY simple, it’s just easy to overthink.

    First of all, you’re going to have to make sure all of the images are the same size, or at the very least, the same height. You’re going to block out the HTML like so:

    <div id='slideshow'>
         <img id="image1" src="imgimage1.jpg" alt="Image 1" />
         <img id="image2" src="imgimage2.jpg" alt="Image 2" />
         <img id="image3" src="imgimage3.jpg" alt="Image 3" />
         <img id="image4" src="imgimage4.jpg" alt="Image 4" />
    </div>
    <div id='slideshowNav'>
         <a href="#image1">Image 1<a>
         <a href="#image2">Image 2<a>
         <a href="#image3">Image 3<a>
         <a href="#image4">Image 4<a>
    </div>

    The key here is the fact that all of the images have their own id values. Now the css is going to look like so:

    #slideshow{
         width: Width of your widest image;
         height: Height of the images;
         overflow: hidden;
    }

    Now the end result is you have the slideshow div acting as a sort of “viewing window” through which you’re looking at the images. Each image has an id value associated with it, and clicking the link jumps to that image in the slideshow div.

    I should note that last I checked, Opera has a problem with overflow hidden and scrolling, but it’s a known bug in Opera and is in fact even a part of the Acid2 test, so I believe Opera 10 should work fine with this trick.

  8. The Impossible Octal

    Hehe, here’s a little trick I learned from TDWTF… Thought it’s really less of a trick, and more of an “I can’t believe it’s that broken” moment.

    In the title bar of your browser, add this:

    javascript: alert(parseInt('05'));

    You get 5, right?
    Good.
    Now try this:

    javascript: alert(parseInt('09'));

    Yup, that’s right, you get a 0.

    Here’s the article with the explanation for this odd output:

    If you guessed 9, you fail. No, it’s zero. See, Javascript supports octal numbers. Any number starting with a zero is octal, even if it can’t be an actual octal number. In certain languages, like Perl, trying to use a non-octal number as an octal number results in an error. In other languages, like Javascript, it silently fails.

    So, thank you Javascript, for teaching me something I didn’t know about you… and making me hate your quirks all the more.

  9. Blogger RSS feeds by tag (aka label)

    One thing I wanted to do was have RSS feeds by tag/labels back when I used to use Blogger, so that I can use a single blog for the journal, and tips sections of the old site. The url for a specific label in a feed is:

    http://yourusername.blogspot.com/feeds/posts/default/-/tag1

    If you want to use multiple labels (this one, for example is labelled as ‘tips’ and ‘other’), just add the tag to the end of the url, like so:

    http://yourusername.blogspot.com/feeds/posts/default/-/tag1/tag2

    This will return all posts which are both tag1 and tag2.