Document compatibility defines how a browser renders your website. The more specific you are at telling the browser what to expect, the better the experience for your users. When using web standards like HTML5, start by explicitly declaring the HTML5 document type:
This markup triggers standards mode in Internet Explorer 9 and 10. And it also works well in Chrome and Firefox. Four steps will get your site ready for many browsers and devices:
Check whether or not your site is currently in standards mode:
Force IE10 standards mode to test your website:
into your website’s HTML page
Most problems are related to supporting older versions of IE. Start by ensuring your standards-based code is rendered in IE9 and 10. Then keep your non-standards-based code for older versions of IE.
Learn more about how to update your doctypes here.
Remove it and reload your page. Continue testing. Learn more about Specifying Document Compatibility Modes here.
Most problems are related to supporting older versions of IE. Start by ensuring your standards-based code is rendered in IE9 and 10. Then keep your non-standards-based code for older versions of IE.
Welcome to Internet Explorer 8.
Remove it and reload your page. Continue testing. Learn more about Conditional Comments here.
if (version = /MSIE (d+.d+)/.exec(navigator.userAgent)) {
isIE = true;
browserVersion = parseFloat(version[1]);
}
Start by implementing feature detection where possible with web standards. Learn more about User-Agent Strings here. The IE10 User-Agent String is located here.
A list of common problems is available in the IE Compatibility Cookbook.
If you’re unable to update your docmode with these resolution steps, tweet us @IE or check the Forums on MSDN.
For further detail, try these articles:
No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.
In my last post, I went over how to use IE9′s Site Pinning API to implement overlay icons to enhance user notifications. The demo focused on how to display a numeric icon to indicate when a specific event (e.g.: messages in an inbox) had occurred.
It’s a really great way of letting your users know that there’s pending information for them to check into. But what happens if your site offers multiple types of notifications? With websites offering so much functionality nowadays, it’s pretty common for them to also serve up multiple types of notifications, from friend requests and event reminders to new messages and game invites.
The great thing about the Site Pinning API is that it’s very flexible and through some JavaScript magic, you can easily display multiple overlay icons for the various services you have. In this demo, I want to rotate through 3 different overlay icons that alert the user to pending messages, requests and actions.
As before, I had to flex some of my artistic talent by creating the overlay icons using the x-icon editor. I created 5 of each and here’s how the first three look:
The code changed slightly from the last demo in order to accommodate multiple bits of data per fetch. While previously, I was only fetching one piece of data, in this demo, I’m returning 3, one for each notification type:
myPin.init([{ "data" : [{ "label" : "Messages", "ntype" : "M", "num": 2 }, { "label" : "Requests", "ntype" : "R", "num": 1 }, { "label" : "Actions", "ntype" : "A", "num": 3 }] },
{ "data" : [{ "label" : "Messages", "ntype" : "M", "num": 1 }, { "label" : "Requests", "ntype" : "R", "num": 5 }, { "label" : "Actions", "ntype" : "A", "num": 2 }] },
{ "data" : [{ "label" : "Messages", "ntype" : "M", "num": 5 }, { "label" : "Requests", "ntype" : "R", "num": 1 }, { "label" : "Actions", "ntype" : "A", "num": 4 }] }
]);
As a reminder, the method getData() simulates grabbing remote data. So if we look at the data above, we can simulate pulling back three distinct bits of data. This is why we call the method every 10 seconds using setInterval. This allows us to see how notifications might look over a period of time.
setInterval(function () { myPin.getData() }, 10000);
The next thing that changed is the use of a timer to allow a slight delay while rendering the overlay icons. Using setTimeout() provides enough of delay so that an individual overlay icon is visible to the user before rotating on to the next icon. If we didn’t have this delay, the rotation would be way too fast to provide any useful notification. If we look at the following image, we can see what the notification will look like:

Overlay icon showing numeric notification
This is accomplished via the following code:
// Grab the current set of data...
currData = this.dataBin[this.currIndex++].data;
/* We're going to display a new overlay every x number of seconds to display a new overlay icon so
let's loop through the data elements for the current set of data... */
for (var i=0; i < currData.length; i++ ){
(function(idx) { setTimeout( function(){ myPin.dispOverlay( currData[idx] ); }, 1000 * idx); }( i ));
}
Here’s what’s happening. In the first line, I grab the current set of data that holds all of the notification information (messages, requests & actions). That data looks like this:
[{ "label" : "Messages", "ntype" : "M", "num": 2 },
{ "label" : "Requests", "ntype" : "R", "num": 1 },
{ "label" : "Actions", "ntype" : "A", "num": 3 }]
I loop through each group of data and assign a timer using setTimeout() that will call dispOverlay() at ~1 second intervals. That’s the magic code that allows for the gradual icon rendering delay I mentioned before. The expected functionality is that the “messages” icon will render followed by the “requests” icon 1 second later, and then finally the “actions” icon.
Now, you might be wondering why I have an anonymous function wrapping the setTimeout(). It’s because I have a closure within setTimeout which can cause a common scoping issue in which the variable ‘i’, which I use to grab the current index of data, will only be updated to the last index value. James Padolsey has a great explanation on it and thanks to John David Dalton for helping me troubleshoot this.
The final change is in dispOverlay() in which I need to determine which overlay icon needs to display. Since I now have three different types of notifications, I need a conditional statement to determine the type and build the correct icon name:
if (theData.ntype == "M") {
oImg = "images/messages-" + theData.num + ".ico";
} else if (theData.ntype == "R") {
oImg = "images/requests-" + theData.num + ".ico";
} else if (theData.ntype == "A") {
oImg = "images/actions-" + theData.num + ".ico";
}
This checks the type and serves up the right icon based on the type and the number of notifications pending for that type.
You can check out the demo by going here in IE9:
http://reybango.com/demos/sprotate/index.html
When the page renders, drag the tab down to your taskbar and pin it. You should see a new window appear with your newly pinned site. Next, you’ll see the overlay icons appear in the taskbar and they should begin to cycle every 10 seconds.
Here’s the full source code. You can also download everything here.
Rotating Overlay Icons
Related posts:
Related posts brought to you by Yet Another Related Posts Plugin.
I was recently doing some testing of IE9′s Site Pinning API and found out about a cool bit of functionality that can enhance user notifications. If you’re not familiar with site pinning, it’s a great way to allow users to have easy and quick access to their favorite sites via the Windows taskbar. There’s a really nice overview on Beauty of the Web that explains how it works.
One of the features the API provides is the notion of notifications that can allow developers to provide alerts to end users. The functionality allows you to dynamically insert custom overlay icons that can alert users when an important bit of information is available. These overlay icons are rendered over the favicon that is pinned to the taskbar. If you look at the image below, you can see it in action:

Pinned site with no overlay icon
![]()
Pinned site with overlay icon
So if you think about the possibilities, any site that offers users an inbox, special deals or sends out time-sensitive alerts could use this notification capability to keep their users up-to-date and more engaged on the site. Sites like the Huffington Post have already discovered that users that pinned HuffPost spent 49% more time on the site.
The best part is that adding this capability is insanely easy.
For this post, we’re not going to go into the basics of how to pin a site. If you want to learn more, here’s a GREAT resource for getting you up to speed quickly: BuildMyPinnedSite.com. In fact, I used that site to help get me up-to-speed on the basics and it’s well-worth visiting.
To add notifications, you’ll need a couple of things:
The API is JavaScript-based and we’ll use the following methods:
window.external.msSiteModeClearIconOverlay()
window.external.msSiteModeSetIconOverlay()
window.external.msSiteModeActivate()
window.external.msIsSiteMode()
The window.external.msSiteModeClearIconOverlay method is used to clear out any previously set overlay icons. window.external.msSiteModeSetIconOverlay allows you to specify the name of the notification icon as well as a accessible description. Lastly, we’ll use window.external.msSiteModeActivate to flash the pinned icon to notify the user of the update. Lastly, window.external.msIsSiteMode will let us know if the page was launched as a pinned site, thus allowing us to better determine when to run the code.
For the overlay icons, I’m using five images that display numbers 1 through 5 respectively to designate the number of messages are in a user’s inbox.
The first thing I need to add is the reference to my favicon. Note that if you don’t add one, then the Internet Explorer’s icon will be used by default.
Next, I want to create some sample data to work with. What I want to do for my demo is to have the overlay icon dynamically change every 5 seconds to simulate a more real-world scenario. The data is a simple array containing JSON data in each element.
myPin.init([{ "num": 1, "label": "Label 1" },
{ "num": 2, "label": "Label 2" },
{ "num": 3, "label": "Label 3" },
{ "num": 4, "label": "Label 4" },
{ "num": 5, "label": "Label 5" }
]);
By setting a timer, I’ll be able to pull a new set of data every 5 seconds.
setInterval(function () { myPin.getData(); }, 5000);
The main thing to keep in mind is that I’m “simulating” getting data from some remote host. In reality, all that the myPin.getData() method does is use a running counter to grab a new set of data and render a new overlay icon:
getData: function () {
// A function that just simulates returning a result set...
var idx = 0;
// Determines whether the current page was launched as a pinned site.
if (window.external.msIsSiteMode()) {
idx = this.currIndex++;
this.currIndex = (this.currIndex < 5) ? this.currIndex : 0;
this.dispOverlay(this.dataBin[idx]);
}
}
As you can see, it uses the running counter var currIndex to determine which array element to grab and then passes the data to dispOverlay(). This is where we use window.external.msSiteModeClearIconOverlay() to clear out any previously displayed overlay icons and also generate a string for the actual icon name. You can see that the oImg var is created on the fly based on the data we’re using.
dispOverlay: function (theData) {
var oImg = "";
// Is there any data?
if (theData) {
// Clear any preexisting overlay icon
window.external.msSiteModeClearIconOverlay();
// Create the image string...
oImg = "images/num_" + theData.num + ".ico";
// Go ahead and create the overlay image and it's label...
this.setOverlay(oImg, theData.label);
}
}
That icon name, along with the accessible label text for the icon, is passed to setOverlay() which sets the overlay icon via window.external.msSiteModeSetIconOverlay and flashes the taskbar icon using window.external.msSiteModeActivate.
setOverlay: function (icon, desc) {
// Sets the overlay icons...
window.external.msSiteModeSetIconOverlay(icon, desc);
window.external.msSiteModeActivate();
}
To test this out, it’s a simple matter of running your newly pinned page in Internet Explorer 9, grabbing the tab and dragging it down to your taskbar:

Tab being dragged to the taskbar

Pinned site with no overlay icon
Five seconds after the page has been pinned, the code will fire off the first notification and continue to cycle through the other icons every subsequent five seconds.
![]()
Pinned site with overlay icon
An important thing to remember is that the IE F12 Developer tools are available to you to use in debugging your pinned site. So if you run into quirks, simply press the F12 key and the tools will appear.
You can check out the demo I whipped up by going here in IE9:
http://reybango.com/demos/sitepinning/index.html
When the page renders, drag the tab down to your taskbar and pin it. You should see a new windows appear with your newly pinned site. Five seconds later, you’ll see the first overlay icon appear in the taskbar.
Here’s the full source code. You can also download everything here. The really great part is that it isn’t a lot of code to implement this. In fact, to use the API only required 4 method calls. The bulk of the code was to simulate pulling in data. And the
No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.
Since having my gall bladder removed last year, I’ve had this nagging pain in my right side rib cage area. It’s a consistent dull pain which I was told should go away a couple of months after my surgery. Well it hasn’t and after an ultrasound and an endoscopy (tube down the throat), it was time to pull out the big gun. Today I had an MRI and it was not fun.
MRI stands for
magnetic resonance imaging and to be honest, I
don’t know how it works. I just know that it’s one of the best
ways to look inside the human body without having surgery. If
you’ve never had an MRI, it can be a bit of an experience. The
machine is rather large and circular in shape. If you look at the
picture I included, you can see what it looks like. Now you see
that tiny little donut hole in the center? That’s where you go
in! Yep, they stick you in that hole to be able to scan the body
parts they need. At 6’4″ and 235lbs, I’m a pretty big guy so
being squeezed into that little orifice was, how should I say,
THE SUCK!
As they slide you into this tube feet first, you have two choices. You can either put your hands behind you (like you’re raising both hands) or you can put them at your side. I chose the latter because it was just more comfortable, especially because I had an IV in my arm. The dude then covered my eyes with a small towel and slapped some headphones on my ears so I could listen to music. As I’m being pushed in, I could see slightly from under the towel and that’s when it hit me that I was INSIDE THIS INSANELY TIGHT, SMALL TUBE WITH NO ABILITY TO MOVE!!
Now, I’m by no means
claustrophobic but being in there made me feel like I was in a
coffin and it was the creepiest feeling ever. For about 30
seconds, I considered asking them to pull me out but I composed
myself, closed my eyes and focused on the music. From there
things went fairly smoothly until about 10 minutes before the end
of the procedure at which point, it started getting incredibly
warm. I had an imaging device sitting on top of my chest and
every time they used it, I could feel the heat on my chest.
Couple that with the blankets they placed on me and I was a
little more than toasty.
Would I do this again? Hell yes! The alternative to this is to have someone cut me open and poke around. As a general rule, I try to avoid having sharp instruments opening me up so while being confined truly sucked, the alternative is far worse. Hopefully, they’ll be able to figure out what’s causing the pain and I can plan out my next steps.
No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.
I just checked out the gameplay trailer for BioShock Infinite and all I can say is “WOW!”. If you’re a gamer, you’re going to want to check this out, especially if you’re a major fan of BioShock 1 & 2 (like me!).
No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.
I already do backups locally but I really would like to consider a cloud-based backup service. So I wanted to reach out to the community to see who is using what and what’s been really good to work with. Normally I’d put this on Twitter but organizing all of the feedback, along with regular tweets, becomes a bit crazy and the comments are better for future reference.
So which online backup services should I consider?
No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.
#ms_mix11_w
Related posts:
Related posts brought to you by Yet Another Related Posts Plugin.
Today’s the last day of MIX11
and it was clearly evident. The rooms weren’t nearly as full as
the first two days but there were still plenty of folks and great
sessions going on. I gave my session on HTML5 polyfills and
shims. Feedback seemed really good so I’m happy to have had the
opportunity to present and want to thank Giorgo Sardo for
entrusting me with such an important topic. Some of the feedback:
Attending a cool session by @ReyBango on HTML5 Polyfills and Shims #MIX11 by @anotherlab
@reybango Really enjoyed your talk. Cleared up some questions I had. Great job. by @FwdAnimation
Thanks to @reybango for a good session on #HTML5 polyfills! #MIX11 by @jimfields3
It’s always great to get good feedback and I’m grateful to those that attended and came away with something great from my talk. I was especially impressed by the number of developers who said they were actively using HTML5 and CSS3. It reinforces the need for this type of presentation so that developer can continue to push forward while not leaving their customers, who may not be able to use the latest greatest browser, twiddling their thumbs.
From here I fly off to San Francisco for the jQuery Conference where I’ll give my talk again before heading home. Good times!
#ms_mix11_w
Related posts:
Related posts brought to you by Yet Another Related Posts Plugin.
Day 1 at MIX11 was awesome. The
vibe was excitely what I expected: awesome and exciting. And the
keynte kicked it off with the big news that the next version of
Internet Explorer is already in progress and that Platform Preview 1 is ready for download.
Since the launch of IE9, the concern that I’ve consistently heard
from developers is that they expected to wait another 2 years
before a new release of Microsoft’s browser. From the tweets I
saw yesterday, it seemed like there was a collective sigh of
relief to know that a new version is under way and that there’s
something to play with right now. Couple that with the list of
IE10 features announced like CSS3 3D Transforms &
Transitions, Flexbox, and ES5 Strict Mode (and more), and I
genuinely feel that developers are excited to see the great
progress being made by the IE team. Shoot, even Douglas Crockford
is happy! He’s at MIX and I made sure to ask what he thought and
he mentioned that the addition of ES5 Strict Mode made him VERY
happy…and WE WANT CROCKFORD HAPPY!!
Another really cool announcement during the keynote was that Modernizr will be shipped with the ASP.NET MVC 3 Tools update. The importance of this can’t be understated. Microsoft has millions of developers building web applications using their tools and the fact that Modernizr will be shipped in Microsoft tooling is a HUGE validation to the work done by the Modernizr team as well as the importance of HTML5 to the future of web applications.
HTML5 is a hot topic with a ton of sessions focusing on the specification. I’ll be presenting on HTML5 polyfills and shims tomorrow to show developers how to leverage HTML5 while still supporting sites in non-modern browsers. It’s incredibly exciting (and intimidating) to be presenting to such a large group of developer so wish me luck!!
Interestingly, I kept hearing people mention the Knockout.js MVC/MVVM Framework for managing your code organization and providing data-binding. I hadn’t heard of it so I’m definitely going to have to check it out.
More to come later….
#ms_mix11_w
Related posts:
Related posts brought to you by Yet Another Related Posts Plugin.
Had a chance to meetup with Mike Hostetler & MS MVP Elijah Manor of appendTo at Microsoft MIX 2011 ad we chatted about their new framework, Amplify. Check out the inteview:
#ms_mix11_w
No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.