excanvas drawImage Coordinate Fix

March 3rd, 2010

Recently ran into a problem with excanvas when using the drawImage() function in IE (all versions).

Specifically, we are interested in the drawImage function which takes parameters and takes a piece of one image and draws it on the HTML5 canvas at certain x, y, width, and height:

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

For more reference on the drawImage function, please refer to this page by Mozilla.

The problem with explorercanvas is that dx and dy will be the wrong coordinates, and everything will end up spaced apart.

We ended up having to do a little trial and error to come up with a nice fix function…
Read the rest of this entry »

Which is Faster? display:none or visibility:hidden?

March 2nd, 2010

While it is commonly understood that the difference between CSS display:none; and visibility:hidden; is that the former will hide the object completely so that it doesn’t even occupy any pixels regardless of width and height while the latter will still retain its dimensions, what about which will yield faster results?

Assuming you want only a hidden element, and you’re not worried about the above, the answer is display:none.

How did we test this?

We created a textarea, ran a loop to fill it up, and then ran some heavy-duty scripts to test performance. The result? display:none yielded much, much better results than visibility:hidden. visibility:hidden produced very noticeable lag while display:none, despite thousands of lines of text, seemed completely unhindered.

Tested on both Firefox 3.5 and Safari 3 and 4.

Set Cookies In iFrame

February 23rd, 2010

Sometimes you may need to use frames or iframes in your HTML documents.  However, due to security restrictions involving frames, Javascript, and cross-domain scripting, trying to set cookies from inside an iFrame or from the parent page may be difficult depending on the browser.

Specifically, we were trying to have our parent page set a cookie.  Our framed page, inside an iframe on a different domain, should consequently be able to read the cookie, but due to being on a different domain, there could be XSS security issues and certain browsers won’t let it happen.  Internet Explorer in particular wouldn’t work with our code while Firefox worked fine.

Being able to work with cookies across domains and frames is very important for developing advertisement code and other cross-site embeddable Javascript.

Here is the solution

Read the rest of this entry »

Center UL But Keep It Left Justified

January 17th, 2010

This had me tearing my hair out for most of the day.

If you try to center a UL element, it will center the entire list, but it will not keep the list left justified. All your LI elements and bullets will be centered individually. Not a pretty sight!

So after a long hard day, I’ve found a solution.
Read the rest of this entry »

The Real Power of MXHR

November 8th, 2009

This year, Digg came up with a method for scalability and speed for AJAX applications by optimizing XMLHttpRequests (XHR) into what is dubbed Multi-part XMLHTTPRequests (MXHR).

While some users reported little to no difference in client-side performance gains, MXHR extends beyond this for optimization.
Read the rest of this entry »

Javascript “onclick” Function Length

November 4th, 2009

Well, here’s a funny nuance about Javascript.

It’s generally not recommended for you to use inline Javascript; however, if you do in fact end up using it for whichever reason, there’s a tiny nuance about the Javascript “onclick” event handler.

In Firefox/Gecko and Safari/WebKit, the “event” object is always sent as a parameter to an inline Javascript function — even if you don’t specify “event” to be sent. For example, this code:

<img src="/path/to/image" onclick="clickFunction()" />

Even though no parameter was specified, “event” will be passed as an object; therefore, the function length (number of arguments) will return at least one.

However, if you do not define the function using inline Javascript, it will return the number of arguments which you actually specified (including zero).

In Internet Explorer (currently version 8), this does not happen with inline Javascript events.

It’s also worth noting that Firefox (currently version 3.5) and Safari (currently version 4) will not pass the “event” object if you use inline onmouseover or onmouseout; this only happens with “onclick.”

Javascript ‘undefined’ and ‘null’

November 2nd, 2009

Javascript has two ways of telling you whether a value is not defined: undefined and null. Yes, it gets a little tricky.

In today’s article, we’re going to go over “undefined” and “null.”

Let’s dive in.
Read the rest of this entry »

Setting Up Orbited Server, IRC Chat Example

October 26th, 2009

This article is about setting up the Comet implementation, Orbited.

If you haven’t already, please read our blog post on installing Orbited.

This blog post will go over how to deploy Orbited and get the IRC chat example working along with common errors and problems encountered when first setting up Orbited. We will even go over the very common problem of trying to setup Orbited on a subdomain.
Read the rest of this entry »

Installing Orbited without Python 2.5

October 26th, 2009

If you want to install Orbited for scalable Comet applications on a server without a Python version below 2.5 (i.e. CentOS), you can follow these instructions. Included are instructions on how to run the latest Orbited (at the time of this writing, version 0.7.10) on CentOS without Python 2.5 (CentOS 5 comes pre-packaged with Python 2.4)

We’ll cover the entire installation in 10 easy steps.  Yes, we promise it’s that easy!

First of all, the official instruction manual will probably be best.

However, this blog post will walk you through it step by step.
Read the rest of this entry »

AJAX Auto-complete Tutorial

October 14th, 2009

Ever wanted one of those nifty autocomplete or auto-suggest tools for your website’s search engine?

Well, it’s actually really easy, and we’ll show you how to do it in a way that will achieve the fastest load times possible and save you bandwidth.

Ready? Let’s get started.
Read the rest of this entry »

« Older Entries