I am not sure is it correct to call it XUL object, what I mean to do is transversing javascript object. It sounds silly as we got firebug but it makes sense when working on firefox addon where the script debugger in firebug doesn’t work for javascript running in chrome.
There is a XUL reference in MDC(https://developer.mozilla.org/en/XUL_Reference). It listing out objects and its associated attributes, properties, and methods, but seems not all the reference are update and complete. Sometimes I don’t even know what kind of xul object I am dealing with, I need to have something like var_dump or print_r in PHP. And I have written my own object dumping function.
Read more »
Any one out there is using rackspace cloud hosting with 256MB Ram and hosting a wordpress? I was doing fine with it, but after I install the subversion on the Fedora VM, I found my apache become very very slow and take over 60s to serve a request….
Actually this is the second time for me to head into this performance issue. I did a rebuild on the VM and setup the whole thing again last time. Everything goes fine with the new build right before I install subversion. This time I tried to upgrade the machine to 512MB Ram package without any configuration change, everything just back to normal. Not sure if other peoples are having the same experience or just me had the problem…
It happen quite often to me that I need to check the element className in the event handler and to determine what function to trigger. element.className contains all the class name separated by space. e.g. “classA classB classCCC”. So it is bad to check the className like:
if (element.className === "classA") {...}
or
if (element.className.indexOf("classC") > -1) {...}
Sure we can do it with regular expression but there are faster way to do it.
I use YUI all the time and there is a YAHOO.util.Dom.hasClass, I read the source code and found they got a clever way to do it. It just add space in front and behide the className and do a indexOf. But one thing to note that you should not add the space to the className property directly instead you obtain a copy of the className string by getAttribute.
The code will look like:
function hasClass(el, class_to_match) {
var c;
if (el && el.className && typeof class_to_match === "string") {
c = el.getAttribute("class");
c = " "+ c + " ";
return c.indexOf(" " + class_to_match + " ") > -1;
} else {
return false;
}
}
Tidy and neat!
I just come to a problem that need to create a canvas element the will cover on top of the whole page. This prevented me from using style.width and style.height as the drawing will become scaled by the style setting. So I have to calculate the exact page width and height then assign it to the canvas element.
IE 6 had a handy document.body.scrollWidth and document.body.scrollHeight to check the size of body element. Just one thing to note with document.body.scrollHeight is that If the total height of the content is less than the view port / screen size, you will need to use document.body.clientHeight.
While for Firefox, I just need to go through different properties in the window object and body element to find the correct numbers for the calculation.
width = window.scrollMaxX + document.body.clientWidth;
height = window.scrollMaxY + document.body.clientHeight;
Do not mistaken window.innerWidth and window.innerHeight into above as innerWidth and innerHeight will include the scrollbar (if there aren’t any scrollbar, window.innerWidth will equals to document.body.clientWidth and window.innerHeight will equals to document.body.clientHeight)
When doing Javascript, it is common to handle different DOM event like click, mouseover, keydown… This is cool that with the DOM triggering those events, we can create custom handling / behaviors on it. Say, when user click on the button, a edit panel fade in. But this is not good enough when we have to deal with a complex / feature rich interface. For instance, if a feature require a series of action on different components, how can we do it in a proper way? Here is custom event come into play.
There are different ways of making custom event to works, following will show:
1. Using jQuery.bind and jQuery.trigger
2. Using the jQuery plugin jQuery.mhub
Read more »
It is common to create a list with a separator in between like this:
Item 1 | Item 2 | Item 3
One common way of doing this is create a list (ol / ul) then apply the border-left and add a class “first” to the first li setting the border to 0px. This is good, but this can be done in a better way.
Read more »