Peter-Paul Koch has put together yet another masterful overview, this time covering Drag and drop, something that has been on my to-do list for over a year. His script even works with just the keyboard! Not only does he offer a great Drag-and-drop script, he explains how it was written so you can better understand how Drag-and-drop works in JavaScript (and take it apart or put it together yourself).
Good news for all Windows-based web developers: Safari for Windows is now available (via).
Hopefully this means that we can make our web sites even more cross-browser (and hopefully doesn't just add another browser with its own quirky differences).
Who’s Got Style? - Nicholas C. Zakas writes a good analysis of dynamically creating and attaching <style> elements to a page using JavaScript. He ends up with a function that works in Internet Explorer, Firefox, Opera and Safari.
With interfaces on the web that resemble those of the desktop (and better), we often want to get rid of the ubiquitous scroll bar in our web applications. We want all the action to happen directly within the visible browser area. Instead of scrolling, we can offer users new ways to interact with the page like Ajax-based page flipping and sliding panels.
The basis of most scroll-less 100% height interfaces contain some CSS looking like this:
html, body {
/* get rid of default spacing on the edges */
margin: 0;
padding: 0;
/* get rid of that 2px window border in Internet Explorer 6 */
border: 0;
/* fill the height of the browser */
height: 100%;
/* no more scroll bar */
overflow: hidden;
}
This resets the margins and padding of the page, gets rid of the chrome border in IE6, sets the height to 100% of the available space, and hides anything that goes outside the 100%. This needs to happen on both the html and body elements. Having a hidden overflow isn't mandatory, but it makes sure that nothing will cause that scroll bar to pop back up, even if you are dragging things off the edge of the screen.
Now, anything you put directly into the body can also be given height: 100% and it will do exactly what you expect (fill the page). This way, you can have the interface of the page grow and shrink along with the size of the browser. You can even have multiple layers fill the page like this:
/* css */
div.layer {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
<!-- html -->
<body>
<div class="layer">
.. some stuff ..
</div>
<div class="layer">
.. some other stuff ..
</div>
</body>
You can easily give an element within the page a scroll bar by throwing in overflow: auto on something that has height: 100% and some padding or margins.
We can also use JavaScript to calculate the size of the browser and use this to decide how much content we display at a time. We can do this with some relatively easy code, now that our body is the exact width and height of the browser "viewport":
function getPageSize() {
return [
document.body.offsetWidth,
document.body.offsetHeight
];
}
Note that this code only really works with 100% height. On a page with a variable height, it's not reliable at all.
I've put this stuff to use with a lot of projects lately, most notably PictureSandbox (formerly FlickrCash).
For more details on calculating the width of the viewport, check out Viewport Properties at QuirksMode.
When you start to cram a lot of JavaScript animations and Ajax onto a web page, it can become tricky to know all the code that's running in the background. When you start to detect some performance issues, it's equally tricky to track down what code is being executed.
Luckily, the only way to get code to run in the background with JavaScript is through the functions setTimeout and setInterval. And more luckily, we can overwrite these functions so that we can know whenever they are being called:
window.setInterval_old = window.setInterval;
window.setInterval = function(fn, time){
console.log('interval', fn.toString(), time);
return window.setInterval_old(function(){
console.log('interval executed', fn.toString());
fn();
}, time);
};
window.setTimeout_old = window.setTimeout;
window.setTimeout = function(fn, time){
console.log('timeout', fn.toString(), time);
return window.setTimeout_old(function(){
console.log('timeout executed', fn.toString());
fn();
}, time);
};
This will send output to Firebug whenever a timeout or interval is first initiated, and again when the function is actually called.
This solution is rather nice because it will let you know what 3rd party JavaScript widgets are doing in the background as well without needing to add debugging messages to them. You could overwrite nearly any method like this to get similar debugging messages as well (like document.getElementById or Array.prototype.push or practically anything).