Montreal StartupDrinks Tonight
I’m headed to the unfortunately named event tonight where people having an interest in startups or entrepreneurship can meet up for a drink (and not where non-drinkers can take up drinking).
Send me a twit/shout/email if you’re going.
PS: you may have noticed that I caved in and am now using Twitter.
Internet Explorer cannot open the Internet site: Operation Aborted
This is perhaps the most dreaded of all Internet Explorer errors. It’s shrouded in mystery as even the ancient Microsoft Script Debugger cannot help you deal with it.
Working example
If you have Internet Explorer 7 give it a shot and see your operation aborted error in all it’s glory.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Internet Explorer cannot open the Internet site: Operation Aborted. Sample error.</title>
</head>
<body>
<table>
<script>
document.body.appendChild(document.createElement('div'))
</script>
</table>
</body>
</html>Why it fails
Internet Explorer doesn’t like scripts appending elements to the existing DOM, especially when the script tag is inside ul, ol, table, form, blockquote, and various other tags…. When Internet Explorer fails it fails spectacularly by shutting down the script engine and aborting page rendering.
Solution(s)
One way to circumvent the error is to wait till the entire page DOM has been rendered. You can do that with window.onload or if you prefer using Prototype Javascript Framework you can get away by launching the DOM operation with dom:loaded.. jQuery has the ready method but numerous frameworks come with their own implementation.
Here is the sample solution to the internet explorer operation aborted using window.onload.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Internet Explorer cannot open the Internet site: Operation Aborted. Error: sample solution.</title>
</head>
<body>
<ul>
<script>
window.onload = function(){
document.body.appendChild(document.createElement('div'))
}
</script>
</ul>
</body>
</html>Dear Aunt Tilly: It’s Not Your Fault
Dear Aunt Tilly,
It’s not your fault but you are hurting the web.
Using the wrong browser is like using that old Ford Model T to drive on today’s highways. That old car simply cannot go fast enough for today’s highways and it would irritate other drivers. It also doesn’t have all the security features like air bags and anti lock brakes like your Oldsmobile does.
If you want I could help you install a better and safer browser. Some benefits will be immediate - browsing will be faster and safer. Another benefit is that the people like me who build web sites will be able to cater to the newer web standards that the better browsers support.
As more people use a better browser the web will become easier and faster for everyone. Do keep in mind that just because a browser is more recent doesn’t mean that it supports the new technologies very well. Some makers actually have a lot to gain by making their browsers difficult to build good web sites for. They usually sell a lot of software that don’t run on the web and don’t want the web to compete with their market.
If you have any questions about which browser is best I could answer your question and even install what is best for you. I could even show you how well each browser does compared to other browsers using the Acid Test for browser.
I know it’s not your fault. Lots of people use the worst browsers out there, simply because it’s easy. I know you’ll love the newer browser a lot. Can I come and install it tonight after work?
How To Unobtrusively Scroll A Div With Prototype & Scriptaculous
Hot Demo
Nothing beats a good demo of what you can do with these extensions to prototype/scriptaculous.
Hot Div Scrolling
Prototype/Scriptaculous Div Scrolling Effect
Hot Window Scrolling
Prototype/Scriptaculous Window Scrolling Effect
Both examples use position of element anchors on the page. The examples also use page anchors that update in the URL once the scroll effect has finished. This means that if you scroll to a part of the page and send the url to someone else who doesn’t have JS enabled they’ll still see the same page content.
Why not use Control.Scroller?
I really enjoy having minute control of things on my user interface but I’m always reminded that I have to find solutions that degrades elegantly mostly because of SEO considerations but also because Aunt Tilly might not have upgraded yet.
Though you can figure out whether a user scrolls the mouse with Javascript you don’t have access to the operating system’s preference in regards to scrolling speed. I don’t like guessing because people have wildly different preferences.
In order to please the user I recommend that you leave him with what he’s used to but only use Javascript to enhance the experience he’s already familiar with. That way you don’t frustrate him with unexpected behavior but offer him extras.
How To Scroll A Div: A Primer
In order for a div to have a scroll bar you must set the height(at least for Safari to be happy) and you must set its overflow value to ‘auto’ or ’scroll’. In most cases ‘auto’ lets your elements flow vertically and horizontally in such a way that you should normally be left with only a vertical scrollbar.
window.scrollTo already exists and allows all browser since 4.0 era to scroll to arbitrary left and top positions on the page. The homonymous method on Element (Element.scrollTo) does not act the same way. When you call it on an element the page will call window.scrollTo with to display the element at the top right of the viewport. Really handy but not exactly what I wanted.
What I did want was to have a scrollTo method that acted the same way as window.scrollTo but on divs.
So I wrote this little bit of code:
Element.addMethods({
scrollTo: function(element, left, top){
var element = $(element);
if (arguments.length == 1){
var pos = element.cumulativeOffset();
window.scrollTo(pos[0], pos[1]);
} else {
element.scrollLeft = left;
element.scrollTop = top;
}
return element;
}
});This piece of code doesn’t break the current Element.scrollTo method but adds the possibility to offer left/top values on call.
I also wanted to see if I couldn’t get a nice scrolling effect so I wrote a new effect for Scriptaculous.
Effect.Scroll Scriptaculous Enhanced Div Scrolling
Effect.Scroll = Class.create();
Object.extend(Object.extend(Effect.Scroll.prototype, Effect.Base.prototype), {
initialize: function(element) {
this.element = $(element);
if(!this.element) throw(Effect._elementDoesNotExistError);
this.start(Object.extend({x: 0, y: 0}, arguments[1] || {}));
},
setup: function() {
var scrollOffsets = (this.element == window)
? document.viewport.getScrollOffsets()
: Element._returnOffset(this.element.scrollLeft, this.element.scrollTop) ;
this.originalScrollLeft = scrollOffsets.left;
this.originalScrollTop = scrollOffsets.top;
},
update: function(pos) {
this.element.scrollTo(Math.round(this.options.x * pos + this.originalScrollLeft), Math.round(this.options.y * pos + this.originalScrollTop));
}
});For those unfamiliar with Scriptaculous effects the initialize, setup and update methods are part of any effect you would create. They’re pretty straightforward so I won’t spend too much time with them unless someone has questions.