Posts Tagged ‘IE9’

F12 The best kept web debugging secret

Secret2Shhh don’t tell anyone about this blog, then you will look brilliant in front of your co-workers when you show them these cool tools! Have you found the F12 key yet in Internet Explorer? I will admit that until 6 months ago I hadn’t. If you are running Internet Explorer 8 or 9 you can try it right now. Just hit the F12 key and a window appears at the bottom of your screen. This window will help you debug your web pages! No external tools or plug-ins required! The developer tools were available in IE8, but there were some new features added in IE9, so if you haven’t done so yet, download IE9 so you get the every last bit (and byte!)

The developer tools give you six different tabs to help you debug and walk through the code on your web site.

Tab

Description

HTML Your tab for checking out the HTML on the web page with the options you would expect, for clearing the cache and refreshing the page.
CSS This tab allows you to examine each of the CSS files used to style your page. You can even deselect different CSS style settings to see how it affects the appearance of the page.
Console This tab lets you receive error messages from internet explorer and send your own messages back from your code without changing the execution flow of your code. Console reminds me of the output window and the debug object in the Visual Studio. I wrote a blog talking about how to use the Console object to display messages.
Script This tab allows you to quickly debug JScript complete with breakpoints and variable watches.
Profiler This tab has a script profiler that allows you to analyze the performance of JavaScript code and can be used to check the performance of your scripts.
Network This tab is for determining the traffic being sent across the network. It shows you all the traffic related to a page. You can see the time it takes for each item on a webpage to load and render.

 

Trying to cover every tab in detail is too much for one blog, but let me help you get started by introducing today’s My 5:

My 5 favourite features in the Internet Explorer F12 Developer Tools

(that’s what they call ‘em so now you know what keywords to use when you bing it, yes I said bing, didn’t you see the article?)

1. Find | Select element by click (CTRL+B)

How many times have you had to go digging through your HTML trying to find that one line of text with the missing accent, or a particular image. When you use Select element by click, you can just click on the element in the web browser and the matching HTML will be shown in the HTML pane below! (and there was much rejoicing)

2. Tools | Change User Agent String

You have a user complaining the site doesn’t work, but it works just fine for you, you ask them what browser they are using, it turns out its a different browser from the one you have installed on your machine. Change the User Agent string to one of the preselected browsers, or even specify a custom setting and voila! Now you can experience the web page the as if you were on a different browser. If you just want to check how the website works on different versions of Internet Explorer you can also use the menu option Browser Mode, browser mode will even let you simulate what happens when a user on IE9 visits a page in compatibility mode (I wrote a blog on compatibility mode a while ago, that’s the feature that you can use if you want the great features of IE9 but have to work with websites that seem messed up in IE9).

3. Tools | Outline Elements

Maybe I just like this one because I have a tendency towards making absolutely hideous web pages (I do not have a good eye for what colors look nice and so on), Outline elements helps you identify different parts of the web page. For example you could outline all the <div> tags in yellow, or all the <a> tags in blue so you can quickly find them on the page.

4. The Script Tab – formatting JavaScript

Often JavaScript is minimized on web pages which makes it hard to read. When you go the script tab, you can click on the Tools button and choose Format JavaScript from the drop down button.

ScriptFormatJS

This will turn your JavaScript from this jumbled mess

function EmuController(a,b){this.impression=b;this.containerId=a;DataStore.set($(a),'emuController',this);return this;}copy_properties(EmuController,{fromContainer:function(a){var b=ge(a);if(!b)return null;return DataStore.get(b,'emuController');},getEventClass:function(a){return "emuEvent"+String(a).trim();}});copy_properties(EmuController.prototype,{EVENT_HANDLER_PATH:'/ajax/emu/end.php',CLICK:1,FAN:"fad_fan",event:function(c,b,d,a){var e={eid:this.impression,f:0,ui:this.containerId,en:c,a:1};if(b)e.ed=JSON.stringify(b);if(!a)var a=bagofholding;var f=new AsyncRequest().setURI(this.EVENT_HANDLER_PATH).setData(e).setErrorHandler(a);if(d)f.setHandler(d);f.send();},redirect:function(){var a={eid:this.impression,f:0,ui:this.containerId,en:this.CLICK,a:0,sig:Math.floor(Math.random()*65535)+65536};var b=new URI(this.EVENT_HANDLER_PATH);b.setQueryData(a);goURI(b);}});
var ShortClickHandlers={EVENT_NAME_CAME_BACK:'cameback',onclicked:function(a){if(this.onsite)return;if(a.button!==0||a.getModifiers().any)return;this.click_ts=(+new Date());if(this.listeners!==undefined)for(var b in this.listeners)this.listeners[b].remove();this.listeners={focus:Event.listen(window,'focus',ShortClickHandlers.oncameback.bind(this))};},oncameback:function(c){var b=(+new Date())-this.click_ts;this.listeners[c.type].remove();var a={click_ts:this.click_ts,length:b,trigger:c.type};this.sendData(ShortClickHandlers.EVENT_NAME_CAME_BACK,a);}};
function EmuTracker(a,c){this.base=EmuController.fromContainer(a);!this.base;this.onsite=c;var b=DOM.scry($(a),"a."+EmuController.getEventClass(EmuTracker.EVENT_CLICK));b.each(function(d){Event.listen(d,'click',ShortClickHandlers.onclicked.bind(this));}.bind(this));return this;}copy_properties(EmuTracker,{EVENT_CLICK:1});copy_properties(EmuTracker.prototype,{sendData:function(b,a){this.base.event(b,a);}});
(function(){if(!window.channel){window.channel={};}else if(channel.OK)return;var a='presence/';copy_properties(channel,{ON_CONNECT:a+'connect',ON_IDLE:a+'idle',ON_SHUTDOWN:a+'shutdown',ON_INVALID_HISTORY:a+'invalid_history',ON_CONFIG:a+'config',ON_ENTER_STATE:a+'enter_state',ON_EXIT_STATE:a+'exit_state',OK:'ok',ERROR:'error',ERROR_CONN:'error_conn',ERROR_MAX:'error_max',ERROR_MISSING:'error_missing',ERROR_MSG_TYPE:'error_msg_type',ERROR_REFRESH:'error_refresh',ERROR_SHUTDOWN:'error_shutdown',ERROR_DOS:'error_dos',HINT_AUTH:'shutdown auth',HINT_CONN:'shutdown conn',HINT_MAINT:'shutdown maint',reason_Unknown:0,reason_AsyncError:1,reason_TooLong:2,reason_Refresh:3,reason_RefreshDelay:4,reason_UIRestart:5,reason_NeedSeq:6,reason_PrevFailed:7,reason_IFrameLoadGiveUp:8,reason_IFrameLoadRetry:9,reason_IFrameLoadRetryWorked:10,reason_PageTransitionRetry:11,reason_IFrameLoadMaxSubdomain:12,reason_NoChannelInfo:13,reason_NoChannelHost:14,reason_ChannelUnknown:100,reason_ChannelNoCUser:101,reason_ChannelInvalidCUser:102,reason_ChannelInvalidChanstr:103,reason_ChannelChDistribTimeout:104,reason_ChannelGetChannelOther:105,reason_ChannelNodeShutdown:106,reason_ChannelTermination:107,reason_ChannelUserMismatch:108,reason_ChannelUserMismatchShady:109,reason_ChannelBadXs:110,reason_ChannelSeqNeg:111,reason_ChannelSeqTooBig:112,reason_ChannelSeqTooSmall:113,reason_ChannelUnexpectedJoin:114,reason_ChannelInvalidXsCookie:115,reason_ChannelRelocate:116,reason_ChannelWrongPartition:117,getArbiterType:function(b){return a+'message:'+b;}});})();
(function(){if(window.channel_cookie)return;window.channel_cookie={subdomainIndex:null,init:function(){var a=presenceCookieManager.getSubCookie('ch');this.retryInterval=presenceCookieManager.getSubCookie('ri')||0;if(!channel.getConfig('nosubdomain')){this.subdomainIndex=0;if(a&&a.sub){for(var b=0;b<a.sub.length;b++)if(!a.sub[b]){this.subdomainIndex=b;break;}if(b==a.sub.length)if(b==channel_manager.MAX_SUBDOMAINS&&URI().isSecure()){this.subdomainIndex=null;presence.error('channel: iframe max subdomains reached');channel_manager._sendIframeError(ChannelRebuildReasons.IFrameLoadMaxSubdomain);}else this.subdomainIndex=a.sub.length;}}presenceCookieManager.register('ch',this.getInfo.bind(this));var c=(function(){this._clearSubdomain=true;presence.doSync(true);}).bind(this);if(typeof window.onpageshow!='undefined'){Event.listen(window,'pagehide',c);}else onunloadRegister(c);},getInfo:function(){var b={};var c=channel.getConfig('host');var e=channel.getConfig('port');if(c){if(null!==this.subdomainIndex){var a=presenceCookieManager.getSubCookie('ch');var f=(a&&a.sub)?a.sub:[];var d=f.length;f[this.subdomainIndex]=this._clearSubdomain?0:1;b.sub=f.map(function(g){return g?1:0;});}b[channel.getConfig('user_channel')]=channel.getConfig('seq',0);}b.ri=this.retryInterval;return b;}};})();
(function(){if(!window.channel){window.channel={};}else if(channel.init)return;copy_properties(channel,{inner:function(){return this.manager.transport._iframe.contentWindow.transport;},_sitevars:{},_config:{userActive:new Date().getTime(),sessionID:(Math.random()*2147483648|0).toString(16)},init:function(){channel_cookie.init();this._config.subdomainIndex=channel_cookie.subdomainIndex;this.log=bind(this,'_log','log');this.error=bind(this,'_log','error');this.warn=bind(this,'_log','warn');if(typeof(UserActivity)!='undefined')UserActivity.subscribe(function(){this._config.userActive=new Date().getTime();}.bind(this));},_log:function(b,c){var d=this.manager&&this.manager.transport;var a='channel2:'+(d?(d.logName+':'):'');if(b=='log'){return false;}else if(b=='warn'){return presence.warn(a+c);}else if(b=='error')return presence.error(a+c);},log:function(a){this._log('log',a);},warn:function(a){this._log('warn',a);},error:function(a){this._log('error',a);},configure:function(){$A(arguments).each(copy_properties.bind(null,this._config));Arbiter.inform(channel.ON_CONFIG,this);},getConfig:function(b,a){return b in this._config?this._config[b]:a;}});})();
function SimpleDrag(a){Event.listen(a,'mousedown',this._start.bind(this));}Class.mixin(SimpleDrag,'Arbiter',{_start:function(event){this.inform('start',event);var b=ua.ie()<9?document.documentElement:window;var a=Event.listen(b,{selectstart:Event.prevent,mousemove:this.inform.bind(this,'update'),mouseup:function(event){for(var c in a)a[c].remove();this.inform('end',event);}.bind(this)});return false;}});
function ScrollableArea(){}copy_properties(ScrollableArea,{getInstance:function(a){var b=Parent.byClass(a,'uiScrollableArea');return b?DataStore.get(b,'ScrollableArea'):null;}});ScrollableArea.prototype={init:function(a,b){b=b||{};this._elem=a;this._wrap=DOM.find(a,'div.uiScrollableAreaWrap');this._body=DOM.find(this._wrap,'div.uiScrollableAreaBody');this._track=DOM.find(a,'div.uiScrollableAreaTrack');this._gripper=DOM.find(this._track,'div.uiScrollableAreaGripper');this._options=b;this.adjustGripper();this._listeners=[Event.listen(this._wrap,'scroll',this._handleScroll.bind(this))];if(b.fade!==false)this._listeners.push(Event.listen(a,'mouseenter',this.adjustGripper.shield(this)),Event.listen(a,'mouseenter',this.showScrollbar.shield(this)),Event.listen(a,'mousemove',this._handleMousemove.bind(this)),Event.listen(a,'mouseout',this.hideScrollbar.shield(this)));this.initDrag();DataStore.set(this._elem,'ScrollableArea',this);if(!b.persistent)onleaveRegister(this.destroy.bind(this));},initDrag:function(){var a=new SimpleDrag(this._gripper);a.subscribe('start',function(b,event){if(!((event.which&&event.which===1)||(event.button&&event.button===1)))return;var d=this._getPageY(event);var e=this._gripper.offsetTop;var f=a.subscribe('update',function(g,event){var j=this._getPageY(event)-d;var i=this._elem.clientHeight;var h=this._body.offsetHeight;var p=this._track.offsetHeight;var k=i/h*p;var m=h-this._wrap.offsetHeight;var l=e+j;var n=p-k;l=Math.max(Math.min(l,n),0);var o=l/n*m;this._wrap.scrollTop=o;}.bind(this));var c=a.subscribe('end',function(){a.unsubscribe(f);a.unsubscribe(c);});}.bind(this));},adjustGripper:function(){var b=this._elem.clientHeight;var a=this._body.offsetHeight;var e=this._track.offsetHeight;var c=b/a*e;if(c<e){CSS.setStyle(this._gripper,'height',c+'px');var d=this._wrap.scrollTop/a*e;CSS.setStyle(this._gripper,'top',d+'px');CSS.show(this._gripper);}else CSS.hide(this._gripper);this._checkContentBoundaries();return this;},_checkContentBoundaries:function(){var a=this._wrap.scrollTop;var b=this._wrap.scrollHeight-this._wrap.clientHeight;CSS.conditionClass(this._elem,'contentBefore',a>0);CSS.conditionClass(this._elem,'contentAfter',a<b);},destroy:function(){this._listeners.forEach(function(a){a.remove();});this._listeners.length=0;},_getPageX:function(event){return event.pageX!=null?event.pageX:event.clientX+document.body.scrollLeft;},_getPageY:function(event){return event.pageY!=null?event.pageY:event.clientY+document.body.scrollTop;},_handleMousemove:function(event){var a=Vector2.getElementPosition(this._track).x;var b=Vector2.getElementDimensions(this._track).x;if(Math.abs(a+b/2-this._getPageX(event))<25){this.showScrollbar(false);}else this.hideScrollbar();},_handleScroll:function(event){this.adjustGripper();if(this._options.fade!==false)this.showScrollbar();},hideScrollbar:function(){if(!this._scrollbarVisible)return this;this._scrollbarVisible=false;if(this._hideTimeout){clearTimeout(this._hideTimeout);this._hideTimeout=null;}this._hideTimeout=function(){if(this._scrollbarAnimation){this._scrollbarAnimation.stop();this._scrollbarAnimation=null;}this._scrollbarAnimation=animation(this._track).from('opacity',1).to('opacity',0).duration(250).ondone(CSS.addClass.curry(this._track,'invisible_elem')).go();}.bind(this).defer(750);return this;},showScrollbar:function(a){if(this._scrollbarVisible)return this;this._scrollbarVisible=true;if(this._hideTimeout){clearTimeout(this._hideTimeout);this._hideTimeout=null;}if(this._scrollbarAnimation){this._scrollbarAnimation.stop();this._scrollbarAnimation=null;}CSS.setStyle(this._track,'opacity',1);CSS.removeClass(this._track,'invisible_elem');if(a!==false)this.hideScrollbar();return this;},scrollToBottom:function(){animation(this._wrap).to('scrollTop',this._wrap.scrollHeight).ease(animation.ease.end).go();}};
FriendRequestMessage={STATUS:'FriendRequest/change',UNFRIEND:

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

To this nicely formatted and readable code

function EmuController(a,b){
    this.impression=b;
    this.containerId=a;
    DataStore.set($(a),'emuController',this);
    return this;
}
copy_properties(EmuController,{
    fromContainer:function(a){
        var b=ge(a);
        if(!b)return null;
        return DataStore.get(b,'emuController');
    }
    ,getEventClass:function(a){

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

5. The Network Tab for Audio and Video

Video and Audio can be a real challenge to work with, and when a video doesn’t play I am never sure if the problem is with my code, the MIME type settings, browser compatibility, or the video itself! By using the network tab to capture my page load I was able to determine whether the problem when my HTML5 video or audio element didn’t work was due to MIME type issues by checking the value in the Type column for that element on the page. You can use the network tab for lots of other great profiling as well, but I have found the type column a nice easy way to check my MIME types.

If you haven’t had a chance yet download the latest version of Internet Explorer today and start trying out the F12 Developer Tools!

This blog post is also available on the Canadian Developer Blog

Advertisements

How to Pin a Website And Why to Pin a Website

I was just preparing a slide deck to talk about IE9 features at the Microsoft Certified Trainer summit and realized, that although I have blogged about how to update your pinned sites, I really haven’t taken the time to explain what the heck pinned sites are and how they work. Pinned sites are a fantastic feature of IE9, and as more and more users are discovering them, you want to make sure your website makes the most of this feature.

Before I get into the technical aspect, let me take a moment to tell you why you want your web site to support pinning. Users who pin your site will visit your site more often, and will spend more time on your site. In the words of Martha Stewart “That’s a good thing”. Whether its an internal company website you want your users to access easily, or a public site you use to help your business or group we build the site because we want users to spend time there. So if pinning increases the amount of time users spend there, you want pinning.

If you are using IE9 or higher you can quickly try out pinning right now to see how it works. Open a tab in your browser and visit tsn. Now drag the tab down to your taskbar. You will see a TSN icon appear on your taskbar and you will also notice the TSN website now looks different, the forward and back buttons appear in red to match the logo. The icons on your page have changed from the IE logo to the TSN logo. The icon you see is called a favicon, and you can set the of the forward and back buttons based off the favicon or by specifying specific colors.

TSNfaviconzoomin

Now let’s take a closer look at that logo you just added to the task bar.  You can close the IE windows with TSN and relaunch the site by clicking on that icon. That’s nice, basically just like you can have icons for launching your desktop applications, you now have an icon to launch a web site. Here’s the really cool part, you can also right click on the icon to go directly to a particular part of the website like the News or TV Schedule. It’s like Browser Favorites but wayyyyy better!

TSNJumpListZoomedin

Nice Eh? And it’s really easy to do. Since its implemented with metatags, you can add the functionality for your users who have IE9 without breaking the website for users on other browsers. You can make your pinned site as simple or as fancy you want, it’s just a matter of how much time you want to spend, 10 minutes to set up a favicon? an hour or a day to add more functionality.

You can just add a favicon, quick and easy!

You can add a jumplist to the pinned site just like TSN did, to make it easier for users to navigate the site using a few metatags or JavaScript.

You can get fancy with thumbnail buttons, and notifications by adding a little more JavaScript.

Read on to find out how!

1. Create a favicon

If you are a talented graphic artist, or have someone on your team who knows how to make .ico files good on you! For the rest of us check out xiconeditor.com. You can import a .JPG, .GIF, .BMP, .PNG, or .ICO file, crop it and xiconeditor will generate a .ico file suitable for pinned sites. That was easy Smile

2. Add the favicon to your HTML in the <head> section.

<link rel="shortcut icon" href="favicon.ico"/>

Now you will see your favicon appear in the browser and on the toolbar if you pin your site. Next you should set up your meta data for the pinned site in the <head> section

  • application-name specifies the name of your pinned application, give it a meaningful name.
  • msapplication-tooltip specifies what will be displayed when you hover over the pinned application in the start menu (not the taskbar)
  • msapplication-starturl specifies the URL to be launched when the pinned website is launched
  • msapplication-window tells IE9 how big to make the browser when it launches the pinned application
  • msapplication-navbutton-color tells IE9 what color to use for your navigation buttons, if you omit this tag, IE9 will take the color from your favicon. Specify any hex color or CSS3 color name.
<meta name="application-name" content="My Pinned Content" />
<meta name="msapplication-tooltip" content="Launch My pinned site" />
<meta name="msapplication-starturl" content="http://localhost:42942/PinnedSites/index.html"/>
<meta name="msapplication-window" content="width=1024;height=768" />
<meta name="msapplication-navbutton-color" content="#FF3300" />

3. Add a Static Jump List

The Jump List is the context menu that appears when you right click on the pinned site icon on your taskbar. To add a task to the jump list, you need to add a meta tag for msapplication-task. You can add up to 5 static tasks to the jump list. The tasks in the jump list will appear in the same order as you define the tasks in the HTML.

Msapplication-task indicates this is a task you want to add, in the content attribute you specify

  • name – this is the text that will be displayed in the jump list
  • action-uri this is the URL to open if someone selects this task from the jump list
  • icon-uri specifies the icon to display in the jump list for this task.
  • window-type (optional) specifies if the destination should be opened in a tab (default), self (the current tab) or window (a new pinned site window)
<meta name="msapplication-task" content="name=View Pictures; action-uri=http://localhost:42942/PinnedSites/pictures.html; icon-uri=favicon.ico" />

4. Add a Dynamic Jump List (if you want to)

Use JavaScript to create tasks dynamically on a jumplist, you do not have the 5 task limit with dynamic jump lists. Creating dynamic tasks requires using the following methods

  • window.external.msSiteModeCreateJumpList() to create the dynamic jump list
  • window.external.MsSiteModeAddJumpListItem() to add a task to the dynamic jump list
  • window.external.msSiteModeShowJumpList() to display the jump list
function AddJumpList()
{
    if (window.external.msIsSiteMode())
    {
         window.external.msSiteModeCreateJumplist("My Dynamic List");
         window.external.msSiteModeAddJumpListItem("Added with code","http://www.tsn.ca/","favicon.ico");
         window.external.msSiteModeShowJumplist();
     }
}

So with a few meta tags you can set up your website as a pinned site, with a little JavaScript you can even have a dynamic jump list. If you want to update the jumplists later, no problem! In fact I wrote some blogs explaining How to update a static jumplist, and how to update a dynamic jump list

5. Go all out and add a thumbnail toolbar (if you want to)

If your website plays video or audio, or you have other actions you want users to control from their pinned site, in addition to the jump lists you can use JavaScript to add a toolbar of thumbnail buttons! Use it to advance slides, pause and play a video or song. This will actually take a bit more time and work, but it’s pretty cool!

Use window.external.msSiteModeAddThumbBarButton to add a 16X16 icon to the thumbnail toolbar

Use window.external.msSiteModeShowThumbBar to display the thumbnail toolbar

  • Create icons for each button you want on the toolbar
  • Add each button to the thumbnail toolbar
  • Define the action you want for each thumbnail toolbar

You cannot add buttons to a toolbar after the toolbar is visible! (You can hide or disable buttons, but you can’t add or remove them)

Thumbnail toolbars can hold a maximum of 7 buttons. You can sometimes use one button as a toggle switch between modes e.g. Play and Pause can be one button instead of making a Play and a Stop button

For example to add a button

var btnRed = window.external.msSiteModeAddThumbBarButton('red.ico', 'Red');
var btnBlue = window.external.msSiteModeAddThumbBarButton('blue.ico', 'Blue');
window.external.msSiteModeShowThumbBar();
document.addEventListener('msthumbnailclick', onButtonClicked, false);

Then add a line of code to display the toolbar

window.external.msSiteModeShowThumbBar();

Create event handlers for the thumbnail toobar to define the actions to take when a button is pressed (As an added bonus if you are using IE9 you can use AddEventListener instead of attachEvent).

document.addEventListener('msthumbnailclick', onThumbnailButtonClicked, false);

function onThumbnailButtonClicked(btn) {
          switch (btn.buttonID) {
              case btnRed:
                  document.bgColor = '#990000';
                  break;
              case btnBlue:
                  document.bgColor = '#000099';
                  break;
          }
      }

If you want to have a toggle button, for example a play/pause button, on your toolbar, you use window.external.msSiteModeAddButtonStyle to define a style with an alternative icon image and tooltip for a specified button and use window.external.msSiteModeShowButtonStyle to change the icon image and tooltip for the button in your event handler.

styleColored = 0;  //default style ID, this style was created when you added the button
styleClear = window.external.msSiteModeAddButtonStyle(btnRed, 'white.ico', "Clear");
function onThumbnailButtonClicked(btn) {
          switch (btn.buttonID) {
             case btnRed:
             if (document.bgColor != '#990000')
                 {
                  document.bgColor = '#990000';
                  window.external.msSiteModeShowButtonStyle(btnRed, styleClear);
                  break;
                  }
            else {
                  document.bgColor = '#FFFFFF';
                  window.external.msSiteModeShowButtonStyle(btnRed, styleColored);
                  break;
                  }
              case btnBlue:
                  document.bgColor = '#000099';
                  break;
          }
      }

So did you get all that? Don’t worry you don’t have to do everything! I just wanted you to know all your options. Any site can be pinned. If you add a favicon, you make your site look better when its pinned. When you add a jumplist you make it easier for a user to navigate to specific regions in your site. You decide how much functionality makes sense! For more information about pinned sites check out BuildMyPinnedSite.com which has more great information including how to add notifications (those tiny icon overlays, like one in Windows Messenger that shows you if you are signed in), suggestions on how to help users learn how to pin your site, and how to measure the success of your pinned site! Download IE9 and start pinning your site today!

This blog is also posted on the Developer Connection

How do you update a Pinned Site in IE9? Part 2

Pinned sites are such a cool feature, easy to implement, and they give a great themed look and feel to your website in IE9. But as soon as we implement a feature for a user, the user changes their mind or adds a new requirement. A while ago I wrote a blog describing how to update the static jump list for a pinned site. Today I’d like to show you how to update the dynamic jump list for a pinned site.

Quick aside, if you aren’t familiar with pinned sites, go to a site which implements pinning such as imdb.com, tsn.ca, or theweathernetwork.ca and drag the tab down to your taskbar to check it out. For instructions on how to pin your own site check out BuildMyPinnedSite.com. It really is easy and looks great!

The static jump list implemented with metadata is limited to 5 items and is hard coded in the HTML. A dynamic jump list can contain more than 5 entries and can be generated dynamically. For example, on my team hockey site I want to be able to quickly jump to see information on upcoming games. I would probably read this information from a database or file, but for the purposes of illustration I am simply hardcoding the values to display in my dynamic jumplist.

if (window.external.msIsSiteMode()) { 
    window.external.msSiteModeCreateJumplist("Upcoming Games");
    window.external.msSiteModeAddJumpListItem("Jan 3 vs IceMonsters", "./games.html?gameid=6", "./favicon.ico","tab");
    window.external.msSiteModeShowJumplist();
}

This code creates a menu category called Upcoming Games and displays one item in the dynamic jump list that will open a new tab with information about the upcoming game against the Ice Monsters.

DynamicJumpListStartZoomedIn

Maybe another game against the Puck Hogs is added to the schedule. So I update my code to add another item to the jump list.

if (window.external.msIsSiteMode()) {
    window.external.msSiteModeCreateJumplist("Upcoming Games");
    window.external.msSiteModeAddJumpListItem("Jan 3 vs IceMonsters", "./games.html?gameid=6", "./favicon.ico", "tab");
    window.external.msSiteModeAddJumpListItem("Jan 11 vs PuckHogs", "./games.html?gameid=7", "./favicon.ico", "tab");
    window.external.msSiteModeShowJumplist();
}

Of course there are lots of team members who have already pinned the site to their desktop. The next time they launch the site, they see the following list.

DynamicJumpListMultipleEntriesZoomedIn

Whoops! That is not what I was after! When the users who have already pinned my site launch my updated site, the original jump list item is still there and my code to define the jump list re-runs, the end result is not only do I get my new item added but the original item is added a second time! This is why it is important to include a call to the msSiteModeClearJumpList() method before you populate your dynamic jump list. This will reset your dynamic jump lists for anyone who has already pinned your site.

if (window.external.msIsSiteMode()) {
           
window.external.msSiteModeClearJumplist();
            window.external.msSiteModeCreateJumplist("Upcoming Games");
            window.external.msSiteModeAddJumpListItem("Jan 3 vs IceMonsters", "./games.html?gameid=6", "./favicon.ico", "tab");
            window.external.msSiteModeAddJumpListItem("Jan 11 vs PuckHogs", "./games.html?gameid=7", "./favicon.ico", "tab");
            window.external.msSiteModeShowJumplist();
        }

Now when my hockey team goes back to the site they see my updated jump list displayed correctly.

DynamicJumpListUpdatedCorrectlyZoomedIn

So now you cannot only pin your site with static and dynamic jump lists, you can update them as needed and be confident that even users who have already pinned your site will pick up the changes correctly.

Today’s My 5

5 Steps to create a Favicon for your site (The favicon is that little picture that appears as the icon when you pin your site, and in the search bar and tab when you are browsing the site)

  1. Find a JPG or GIF file that contains an image you think will look good as an icon.
  2. Visit the x-icon editor website.
  3. Import your image, crop it and then export your image into a .ico file.
  4. Copy the favicon.ico file to a directory that can be accessed by your web site.
  5. Add the following line of code to the HTML of your web page <link rel="shortcut icon" href="favicon.ico"/>to associate the favicon with your web page.

For more detailed instructions visit BuildMyPinnedSite.com and check out the section “Create a hi-res favicon”

This post is also posted on the Canadian Developer Connection

Maybe You Do Support IE9 and No-One Told You

I go an interesting email from a developer the other day who had attended one of the Internet Explorer 9 code camps. He told me he was having trouble using a particular website with IE9. When he called their support line, he was told “We don’t support IE9, you should uninstall IE9 or use another browser” Whoa! Stop Right There! Just because you haven’t done complete regression testing in IE9 doesn’t mean you should just abandon the members of the public who have moved to IE9 and want to access your site. At least try compatibility mode first! Compatibility mode is the feature in IE9 designed for backwards compatibility. So if you or someone you are talking to has trouble browsing a site in IE9 it is your first line of defense. Please forward this article to your service desk so the next time an IE9 user calls, they have a chance at solving that user’s issue with the click of a single button. I understand the service desk may not be able to say they support IE9 simply because the corporation has not completed full testing on the browser, but, many users will be satisfied with a “You can try this but we don’t officially support it” solution like compatibility view.

There are 2 ways to access compatibility mode.

  1. Use the Compatibility mode button in the toolbar.
  2. Select Compatibility mode from the menu.

Let’s take a look at each

We’ll start with a website that doesn’t work in IE9. I am not a Beastie Boys lover or hater, I just happen to know that the web site promoting their new album does not work in IE9. When I visit the site in IE9, the main screen is just an image, and the menu options at the bottom of the screen are all jumbled on top of each other.

BrokenWebsiteImage

Let’s use our first option, Use the Compatibility mode button in the toolbar, to fix the site. If you look at the toolbar, you will notice an icon of a broken page.

CompatibilityIcon

If you click on this icon you will enter compatibility view. This will display the page as if you were using Internet Explorer 7. Voila the site now works!

FixedWebsiteImage

IE9 will remember the sites where you selected compatibility view. If you return to that site in another browsing session it will automatically be displayed in compatibility view.

IE9 actually examines the source code of the web site to determine if it should display the compatibility view icon in the toolbar. But it is possible that one day you will visit a site that does not work in IE9, and there is no compatibility button on the toolbar. In the immortal words of Hitch Hiker’s Guide to the Galaxy “Don’t Panic.”

You simply need to use our second option, Select Compatibility mode from the menu, to select compatibility view.

You may have noticed the menu bar is not displayed by default in IE9. Just press the <ALT> key to display the menu. To enter compatibility view choose Tools | Compatibility View.

IE9ToolsMenu

That’s it! Now if you read the blog this far that shows dedication, so,  you deserve an extra tip, take a look at the menu option Tools | Compatibility View Settings. It brings up the following window.

CompatibilityViewSettingsWindow

You can use the Compatibility View Settings Window to:

  • Add or remove websites from Compatibility View
  • Include updated website lists from Microsoft – this automatically displays in Compatibility View websites Microsoft has identified and registered as requiring compatibility view
  • Display intranet sites in Compatibility View-  to display all your intranet sites in Compatibility View so you may be able to start using IE9 before all the internal corporate sites have been upgraded and tested for IE9
  • Display all websites in Compatibility View – to display all websites in Compatibility View. I would not recommend this setting because more and more websites are taking advantage of HTML5 and pinned site features that require a current browser such as IE9.

So there you have it, before you tell someone you don’t support IE9, give Compatibility View a try!

Today’s My 5:

5 Reasons you want to use IE9 to browse web sites. (in no particular order)

  1. Full hardware acceleration – IE9 leverages the Graphics Processor Unit (GPU) as well as the CPU, which means graphics and video display faster and more smoothly than ever before. So everyday sites with graphics and video will be better.
  2. Faster JavaScript execution – The new JavaScript engine Chakra is a huge improvement in speed over IE8. Don’t believe me, check out the SunSpider results for JavaScript performance on IE9.
  3. Favourites on steroids (aka pinned sites) – If you have a favourite web, you can just drag the tab down to the taskbar and pin it to your taskbar. Now whenever you start up your computer, you have an icon you can use to launch that site. Some websites customize the pinning with their own icons and jump lists (check out tsn.ca, cbc.ca, or theglobeandmail.com)
  4. More screen space for the website – When you browse a website, you want to see the content, not the browser. With the new layout in IE9, more screen space is devoted to the website.
  5. F12 Developer Tools – Hey, we are developers after all, the developer tools that display when you choose F12 are fantastic web debugging tools built right into the browser. Yes we had the F12 tools in IE8, but the new Network and Profiler tabs add even more tools to our developer toolkit! I like the developer tools so much, I wrote a blog about Console Smile.
    This blog is also posted on the Canadian Solution Developer blog

How do you update a Pinned Site in IE9? (The One Constant in Code is Change!)

I love pinned sites in IE9, they really are cool, and they are good business. At the last IE9 code camp, I was asked “If someone has pinned your site to their taskbar, how can you update the pinned functionality?” Great question! I did a little digging and wanted to share what I found out. Since there are different aspects of the pinned site to update, I will break this up into a series.

Quick aside, if you aren’t familiar with pinned sites, go to a site which implements pinning such as cbc.ca, globeandmail.ca, or RottenTomatoes.com and drag the tab down to your taskbar to check it out. For instructions on how to pin your own site check out BuildMyPinnedSite.com.

Part 1 – Updating Your Static Jump List

Let’s start with a pinned site that has a static jump list users can launch to navigate to different parts of the website. My website is called Hockey Mom, and I use it to keep track of my son’s endless series of hockey practices and games! I have set it up as a pinned site with a jump list that allows me to go straight to the schedule or to maps of all the different hockey arenas.

I have two meta tags that define the static jump list.

<meta name="msapplication-task" content="name=Schedule;action-uri=./schedule.html;icon-uri=./favicon.ico" />
<meta name="msapplication-task" content="name=Arenas;action-uri=./ArenaMaps.html;icon-uri=./favicon.ico" />

In my meta data I specify two elements with a name of msapplication-task. Each defines one menu item in my jump list. The name attribute determines the text that appears in the jump list, the action-uri determines the URL to navigate to if that item is selected, and the icon-uri determines the icon to display beside the text in the jump list.

When I pin my site and display the jump list, it looks like this:

JumpListVersion1Cropped

A few weeks into the season, my son keeps asking me to check how his team is doing in the standings. So I decide to add Standings to my static jump list.

I update my meta tags and add the new item to my static jump list

<meta name="msapplication-task" content="name=Schedule;action-uri=./schedule.html;icon-uri=./favicon.ico" />
<meta name="msapplication-task" content="name=Arenas;action-uri=./ArenaMaps.html;icon-uri=./favicon.ico" />
<meta name="msapplication-task" content="name=Standings;action-uri=./Standings.html;icon-uri=./favicon.ico" />

I build and deploy the new website. If I right click my pinned site icon, it has no idea that the website has defined new items for the jump list and I still see the old jump list appear. So that brings us to the million dollar question how does someone who has already pinned your site, pick up your new jump list?

It turns out the next time I launch the site from my pinned site icon, the changes will be picked up.

JumpListVersion2Cropped

So after you have launched the updated site from your pinned site icon, you will see the updated Static Jump List. No Muss No Fuss. I know anticlimactic wasn’t it? But when you are trying to send out updates for your code, isn’t that a good thing? Next week we’ll look at how to update the dynamic jump list (there is a little twist to dynamic jump lists)

Today’s My 5:

5 Features You Can Add to a Pinned Site.

You can find instructions and code examples for all of these features at BuildMyPinnedSite.com

1. Favicon -  Highlight your site logo! Why display an Internet Explorer logo when you can highlight your brand!

2. Static Jump List – Why limit users to starting at the home page, let them jump straight into the site

3. Dynamic Jump List – Increase the users choices with a dynamic jump list that can change based on what parts of the site you want to highlight week to week.

4: Thumbnail Preview Controls – Make your website feel even more like a native applicaiton by giving the user the ability to perform actions on the site directly from the pinned icon using thumbnail controls.

5: Notifications – Use overlay icons to notify a user when there is no content on your site.

This blog is also posted on Canadian Developer Connection

Console.Log : Say Goodbye to JavaScript Alerts for Debugging!

Admit it, you’ve done it. You have a bug somewhere in your web page and you add an alert to popup a useful message like “I am in the if statement” or “varName=Bob” to help you figure out what is wrong with your code. In IE9 we have an alternative: the Console object.

ASP.NET programmers who work in Visual Studio may already be familiar with the debug object. You call methods of the debug class in your .NET code to display messages in the Output window to help you debug your code in Visual Studio. The Console object is the IE9 equivalent.

Hopefully you have already discovered the Developer tools in IE8 and IE9. If not, just open your browser and go to a website, any website will do. Now hit F12. This will bring up the developer tool window. Now go to the Console tab.

image

Now try typing console.log(“Hello world”) in the console command line at the bottom of the window. Your output should look something like this.

image

console.log will display the parameter passed to the log method in the console window. Use this method to display a string or variable in the console window.

You can use the console class in your code as well, much like we can use JavaScript alerts.

<script type = "text/javascript">
    function tryConsole() {
        console.log("hello world");
    }
</script>

Keep in mind you will not be able to see the output unless you have the developer tools open. You can see the console output on either the Console or Script tabs. Be careful when using console for debugging. If you leave a call to the console object in your code when you move to production and you do not have the developer tools displayed you will get an error message telling you console is undefined. You will get the same error in Visual Studio if you Start without debugging.

image

To avoid the error message, you either need to remove all the console method calls from your code, or you need to add a check to make sure console exists before calling any methods. For example:

<script type = "text/javascript">
    function tryConsole() {
        if (typeof console != "undefined") {
            console.log("hello world");
        }
    }
</script>

Now that you understand the the basics, let’s look at the different methods available with the console class.

log(message[,object]) – the Log method accepts one or more parameters and displays them in the output window. It also accepts format strings.

image

warn(message[,object]) – accepts one or more parameters and format strings just like the log method, but displays the output with a warning icon.

info(message[,object]) – will display an information icon beside the output

error(message[,object]) – will display an error icon beside the output

imageclear() – will clear the console output window

dir(object) –is an object inspection method that will list all the properties of an object

image

assert(expression, message[,object]) – will display the message or object contents if the expression is false

var debugging=false;
console.assert(debugging,"You are not debugging");

So there you have it, more tools to help you debug your web pages. No add-ons or extra software required. Just download IE9 and try it for yourself!

Since we are already playing around in the developer tools that brings me to today’s My 5

My 5 Cool Features in the F12 Developer Tools (in no particular order)

  1. Select element by click – Ever had trouble tracking down the HTML code for a particular element on your page. Select Find | Element by Click from the developer tools menu and then you can just click the element on the web page. The corresponding code in your HTML will be highlighted.
  2. Format JavaScript – It’s all about performance, we compress our JavaScript to reduce the number of bytes that are sent across the network, but then the code becomes almost unreadable to the human eye. Select the Script Tab, choose the Toolbox drop down (the little picture of the hammer and wrench) then select Format JavaScript. Bingo now your JavaScript is readable again!
  3. Browser mode – Developing for IE9 but want to know what your website will look like in IE8 or IE7? Just set the Browser Mode in the menu.
  4. Resize – How does your website appear on a smart phone? how about a tablet or slate? Choose Tools | Resize and then select a size or enter a custom size to ensure your website is user friendly on smaller devices.
  5. Change User Agent String – Debugging a web site that doesn’t seem to work in IE9? Could it be the programmer has written their code to use browser detection instead of feature detection so perhaps the code doesn’t know to check for IE9? You can change the user agent string and see if it works when the code thinks it is being displayed in another browser. Choose Tools | Change user agent string and select the desired value.
    This blog is also posted on Canadian Web Developer