Browsers Tutorials

  • Phone Number Detection in Mobile Safari

    Mobile Safari is chalk full of great features, one of them being the ability to detect phone numbers and turn them into links, allowing the user to tap the link and either call the number or add it to their address book.  There may be some cases where you don't want this functionality to kick in, so here's how you can prevent it:

  • Create an Exploding Logo with CSS3 and MooTools or jQuery

    When MooTools contributor and moo4q creator Ryan Florence first showed me his outstanding CSS animation post, I was floored.  His exploding text effect is an amazing example of the power of CSS3 and a dash of JavaScript.   I wanted to implement this effect on my new blog redesign but with a bit more pop, so I wrote some MooTools code to take static image and make it an animated, exploding masterpiece.  Let me show you how I did it, and as a bonus, I'm created a snippet of jQuery that accomplishes the same effect.

  • Conditional CSS with MooTools’ Browser Object

    Whether we want to admit it or not, we all need a bit of browser-specific or even version-specific CSS sometimes.  We try to follow standards but in the end we're at the mercy of browsers.  And you know what?  Browsers sometimes have bugs that cause us these CSS issues.  We all know how to use Internet Explorer's conditional comments but other browsers don't provide those methods.  Using MooTools' Browser object, however, you can modify your page's HTML tag, adding CSS classes to  help create useful conditional CSS for any browser.

  • Create Spinning, Fading Icons with CSS3 and MooTools

    A goal of my latest blog redesign was to practice what I preached a bit more;  add a bit more subtle flair.  One of the ways I accomplished that was by using CSS3 animations to change the display of my profile icons (RSS, GitHub, etc.)  I didn't want to abandon CSS animations completely though;  I added a bit of MooTools to randomize the icon's initial display position and rotation.  Let me show you how to use CSS3 and MooTools to create dymanic, rotating elements.

  • MooTools ScrollSpy, Mobile Devices, JavaScript Scroll Events, and CSS Positioning

    One question I've been asked often is why ScrollSpy and my Go To Top link functionality don't appear to work well on the iPhone, iPad, or any other mobile device.  The problem is simple to identify and easy to fix.  The issue comes down to the way mobile devices view fixed-positioned elements.  Let me explain to you the scenario, problem, and solution to making the "Go To Top" link follow the user as they scroll.

  • WebSocket Update

    A few weeks back I published a post about the awesome new technology that is WebSockets and a great WebSocket wrapper called Socket.IO.  The HTML5 WebSocket API provides socket connection support for faster messaging between client and server.  Consider WebSocket an optimized AJAX solution.  SocketIO provides both server and client side solutions to use WebSocket.  WebSocket is a great match for Comet technologies (GChat, Facebook Chat, etc.).  Unfortunately it looks as though WebSocket revolution will need to be put on hold.

  • JavaScript Feature Detection with has.js

    Dojo Toolkit Project Lead Peter Higgins has been working on an exciting new project called has.js.  Higgins describes this project best:

  • HTML5′s window.postMessage API

    I've create a MooTools plugin to wrap window.postMessage: PostMessager. Click here to download it!

  • Web Inspector and Firefox Dollar Functions

    Many of you probably didn't know this but WebKit-based like Safari and Chrome, in addition to Firefox, contain special dollar functions within the console object that allow you to grab elements within the current page.  While I've not determined the use of each method, a few of them are obvious:

  • MooTools 1.3 Browser Object

    MooTools 1.3 was just released and one of the big additions is the Browser object.  The Browser object is very helpful in that not only do you get information about browser type and browser versions, you can gain information about the user's OS, browser plugins, and browser features.  Let me show you how you can use the Browser object to detect browser feature!