2 Column Layout (1 Fixed, 1 Flexed) 5 different ways!
A very common UI pattern uses a fixed width column and a flexible width column for website layout. But how can this be achieved easily? I patrol StackOverflow everyday and its a question that crops up now and again so here I’m going to detail 5 different ways to achieve the exact same layout but it’s up to you to decide which one works best for your implementation!
Layout 1: Widths, Floats and Margins
In the following example we use a floated .fixedColumn element which has a fixed width of 200px. The float causes the element immediately after it .flexibleColumn to be drawn up next to it. Unfortunately by default the left edge of the .flexibleColumn sits underneath that of the .fixedColumn. We can overcome this by specifying that the .flexibleColumn has a left margin that is the same as the width of the .fixedColumn. See the example below.
Example
Browser Support
This solution will work in all browsers.
Layout 2: Floats and Calc()
In this example we float both columns to the left but this time the .flexibleColumn uses a percentage width of 100%. Ordinarily this would not work but using the amazing calc() function, we can set our width to be 100% of the page width minus the width of the .fixedColumn like this:
width: calc(100% - 200px);
Example
Browser Support
Lacks support in older browsers but is supported by all major browsers (IE9+) apart from Opera Mini. See CanIUse for more information.
Layout 3: display as a table
In this example we’re going to change the display properties of both columns to emulate the old days of laying out content with tables. First we set the parent to be 100% width and set its display property to table:
display: table;
width: 100%;
Next we shall change both columns to display as a table cell:
display: table-cell;
Now we can set a fixed width on .fixedColumn and the .flexibleColumn will expand to fill the remaining space.
EXAMPLE
BROWSER SUPPORT
This solution will work in all browsers from IE8+. See CanIUse for more information.
Layout 4: flexbox
You would literally have to have been living under a rock to have not heard of the introduction of flexbox in the CSS3 specification. In this example we use the super-powerful flexbox to flow our structure into place.
We do this by first setting the parent of the two columns to having a display property of flex which makes it the flex container:
display: flex;
After doing that the two columns now sit beside each other and become flex items. Then we apply the 200px width to .fixedColumn. We now need to add a couple of flex item properties to .flexibleColumn to make it span the rest of the gap.
flex: 1;
The 1 represents the flex-grow property which is a unitless proportional value which means if all items are set to 1 then they will all be equal sizes, but in this case it basically means expand to fill the left over space.
EXAMPLE
BROWSER SUPPORT
This solution will work in a surprising number of browsers from IE10+. See CanIUse for more information.
Layout 5: Grid
The elusive CSS3 Grid; the holy grail of layout controls, this set of properties makes layout work a breeze! It’s downside, it only works in IE10+ and Edge, but we’re not going to let that put us off so here it is (with the microsoft vendor prefix).
First we must change the column’s parent display property to be a grid and define how many rows and columns the grid will have at their potential sizes:
So what’s going on here? We’re setting the display property to grid. We then define two columns, the first as 200px the second we set to 1 fractional unit (fr). This is the same as saying “all the remaining space”. We then define how many rows we need which in this case is just 1 and we set that to be auto or basically “fit to content”.
Next, we need to define which elements are which columns/rows. First we will set .fixedColumn to be column 1:
-ms-grid-column: 1;
Next, we set the .flexibleColumn to be column 2:
-ms-grid-column: 2;
How easy was that?!
EXAMPLE
BROWSER SUPPORT
This solution will work in IE10+ and Edge only. See CanIUse for more information.
And that’s it. 5 different ways of doing the same thing. I love the CSS3 grid and use them for development WinJS applications but hopefully this gives you some food for thought.
jQuery Clock from Server Time
Recently I needed to add a clock to a page that showed the time according to the server and not the client’s machine. This was because the application runs a number of scheduled tasks that are set to run at specific times relative to the time on the server.
To do this I first needed to output the server time to a label on the page. With PHP you would do something like this:
This gets the time based on the server’s clock and not the client machine and writes it out to a span on the page. The next step is to capture that time as text.
var serverClock = jQuery("#serverClock");
if (serverClock.length > 0) {
showServerTime(serverClock, serverClock.text());
}
Here we are selecting the span containing the time and we’re then going to call a function called showServerTime. This function will accept two parameters; the first is the element that holds the time, the second is the time value.
var serverClock = jQuery("#serverClock");
if (serverClock.length > 0) {
showServerTime(serverClock, serverClock.text());
}
function showServerTime(obj, time) {
var parts = time.split(":"),
newTime = new Date(),
timeDifference = new Date().getTime() - newTime.getTime();
newTime.setHours(parseInt(parts[0], 10));
newTime.setMinutes(parseInt(parts[1], 10));
newTime.setSeconds(parseInt(parts[2], 10));
var methods = {
displayTime: function () {
var now = new Date(new Date().getTime() - timeDifference);
obj.text([
methods.leadZeros(now.getHours(), 2),
methods.leadZeros(now.getMinutes(), 2),
methods.leadZeros(now.getSeconds(), 2)
].join(":"));
setTimeout(methods.displayTime, 500);
},
leadZeros: function (time, width) {
while (String(time).length < width) {
time = "0" + time;
}
return time;
}
}
methods.displayTime();
}
Lickey hills Sunset
I’ve been venturing up into the Lickey hills hoping to photograph some good sunsets now that the weather is improving. This was one of the shots I took recently.
Because I was shooting into the sun, I used exposure bracketing to capture three images in quick succession. I then manually merged these in photoshop using masks to create the final image.
jQuery: How can you calculate the number of items in a flowing line on a responsive web page?
Responsive design is without-a-doubt the future for web designers, but I came across a problem the other day with a responsive application I was working on.
I had to create a scroller using jQuery that scrolled through a number of news items. There are basically three items displayed in the viewport at any one time, so what happens when the media queries kick in and drop it down to two items to save space on the page? The jQuery would contine to scroll the three items which obviously skipped over one.
This led to an interesting question: How can you calculate the number of items in a flowing line on a responsive web page? The number of items on a page will obviously change depending on the amount of horizontal space available. So how can we know when the number of items in a line changes?
How about calculating the offset of the first row of items? That way we know the distance they should be from the top of the page, if we iterate through the items and count as we go, we can measure the offset, check it against the first item in the list and then when it doesn’t match we know we’ve moved to a different row. We break the loop and our count accurately reflects the number of items on the line.
Here’s the CodePen I’ve put together for it:
Using jQuery to Filter an HTML Table
I hate long lists – well – I don’t hate them, because they show me everything I need to see; what I hate is long lists that cannot be whittled down with a nice filter system. To remedy this, I created a Live Filter function in jQuery that enables filtering on a table. I chose a table because GridViews – which are a control within the .NET framework that render out as tables – are commonly used for outputting long lists of tabulated data.
This is all well and good I hear you say, but what the hell is a live filter? I suppose it’s essentially like a search facility except instead of running server-side and querying a database it queries the markup and runs on the client-side which makes it very very fast!
In order for this to work we need to think about a few things:
There will have to be a form field that will allow us to grab the user’s search string
We will need to extract data from the table to create our own datasource that we can search and query (we’ll use an array)
A way of matching the users search string to the content within the table
First thing’s first then. Let’s create the markup with the Search form, (in the interest of saving wear on your mouse wheels I have reduced the number of results in the table):
<div id="liveFilter">
<div class="liveFilterContainer">
<input type="text" class="liveFilterInput default" value="Live Filter" />
<a href="#" class="clearField" title="Clear Filter">x</a>
</div>
<div class="noResults"><strong>Sorry.</strong> There is no match for your filter; please try again.</div>
<table class="liveFilterList" border="0">
<tbody>
<tr>
<th>Filename</th>
<th>Type</th>
<th>Date</th>
</tr>
<tr>
<td>The Hitch Hiker's Guide to the Galaxy</td>
<td>Book</td>
<td>28/01/2011</td>
</tr>
<tr>
<td>The Hitch Hiker's Guide to the Galaxy</td>
<td>Film</td>
<td>28/01/2011</td>
</tr>
<tr>
<td>Dirk Gently's Holistic Detective Agency</td>
<td>TV Series</td>
<td>28/01/2011</td>
</tr>
</tbody>
</table>
</div>
I’m not going to cover the styles used in the interest of saving time. The styles are available in the demonstration file linked above.
Last and most important of all is the jQuery goodness which will turn this lifeless table into a thing of unparalleled functionality.
jQuery(document).ready(function(e) {
var columnsToIndex = [1,2]; // first column is 1
initLiveFilter(columnsToIndex);
});
// Live Filter
function initLiveFilter(columnsToIndex) {
var liveFilter = jQuery("#liveFilter");
if (liveFilter.length > 0) {
var liveFilterField = liveFilter.find("input.liveFilterInput"),
liveFilterGrid = liveFilter.find("table.liveFilterList"),
liveFilterGridRows = liveFilterGrid.find("tr:gt(0)"), // gt(0) prevents the first row (normally a TH) from being included.
liveFilterClear = liveFilter.find(".clearField"),
liveFilterNoResults = liveFilterGrid.prev(),
liveFilterDataArray = new Array(),
//Create an array and populate it with key codes that should not cause shake effects
characterValidationArray = [8,45,46], //backspace, insert, delete
//Create an array and populate it with key codes that don't trigger an action
characterExclusionArray = [13,20,27,33,34,37,39,35,36,16,17,18,144,145]; // enter, caps, esc, page up, page down, left, right, home, end, shift, ctrl, alt, num lock, scroll lock
// Create the datasources we'll use to index the content
if (columnsToIndex.length > 1) {
for (col=0; col<=columnsToIndex.length-1; col++)
{
liveFilterGridRows.children("td:nth-child(" + columnsToIndex[col] + ")").each(function(i){
liveFilterDataArray[liveFilterDataArray.length++] = jQuery(this).text();
});
}
} else {
liveFilterGridRows.children("td:first-child").each(function(i){
liveFilterDataArray[i] = jQuery(this).text();
});
}
// When a key is pressed in the designated input field - do the following:
liveFilterField.on("keyup",function(key){
// Check the character that was pressed and ensure it doesn't exist in the exclusion array defined above
if (jQuery.inArray(key.keyCode,characterExclusionArray) == -1) {
var liveFilterValue = liveFilterField.val();
if (!liveFilterField.hasClass("default")){
if (liveFilterValue != "") {
liveFilterClear.fadeIn(300);
rowsToShow = new Array();
var currentRow = 0;
// Check the value entered against a regular expression matched with the column data. If a match exists add the row to a new array
for (var i=0; i < liveFilterDataArray.length; i+=1) {
RE = eval("/" + liveFilterValue + "/i");
if (liveFilterDataArray[i].match(RE)) {
rowsToShow.push(currentRow);
}
if(currentRow < liveFilterGridRows.length - 1) {
currentRow++;
} else {
currentRow = 0;
}
}
// If there are matches, show the grid, hide all the rows and show the selected ones
if (rowsToShow.length > 0) {
liveFilterGrid.show();
liveFilterGridRows.hide();
if (liveFilterNoResults.is(":visible")) {
liveFilterNoResults.slideUp(150);
}
for (var i=0; i < rowsToShow.length; i+=1) {
jQuery(liveFilterGridRows.get(rowsToShow[i])).show();
}
// If there are NO matches we hide the grid and display an error panel. If an incorrect value is entered while the error panel is visible it shakes itself assuming if it doesn't match any of the excluded values defined in the characterValidationArray
} else {
liveFilterGrid.hide();
// if the no results panel is shown and the effects queue length is 0 and there are no illegal character presses
if (liveFilterNoResults.is(":visible") && liveFilterNoResults.queue().length == 0 && jQuery.inArray(key.keyCode,characterValidationArray) == -1) {
liveFilterNoResults.effect('shake', {times:3, distance:3}, 100);
} else {
liveFilterNoResults.slideDown(150);
}
}
// If the value entered is blank, hide the clear field button, show the grid and all of its rows and hide the no results panel if it is visible
} else {
clearField();
}
}
}
});
// When the designated input field is clicked do the following:
liveFilterField.on("focus", function(){
if (liveFilterField.hasClass("default")){
liveFilterField.val("").removeClass("default");
}
return false;
});
// When the clear field link is clicked do the following:
liveFilterClear.on("click",function(){
clearField();
return false;
});
// The clear field function which clears the search field under certain conditions
function clearField() {
liveFilterField.val('');
liveFilterClear.fadeOut(300);
liveFilterNoResults.slideUp(300);
liveFilterGridRows.show();
liveFilterGrid.show();
}
}
}
Okay, this is a long script, I’ll grant you that but don’t let it scare you it’s really very simple. Let’s break it down into manageable chunks:
jQuery(document).ready(function(e) {
var columnsToIndex = [1,2]; // first column is 1
initLiveFilter(columnsToIndex);
});
First up we’re going to set up a the ready event. This will trigger when all the DOM elements on the page have finished loading and will run the initLiveFilter function, but we’ll come back to that in a moment. We first set up a variable called columnsToIndex and define it as an array. This array will contain the columns you want to index in the table, our example has three columns, left to right these are numbered 1,2 and 3; one being the first column three being the last. We are going to index columns 1 and 2 (or Filename and Type if you are looking at the markup) so will set up a literal array as the columnsToIndex variable: [1,2] Next we called a function called initLiveFilter and pass the columnsToIndex variable to it so the function can get hold of those values.
function initLiveFilter(columnsToIndex) {
var liveFilter = jQuery("#liveFilter");
if (liveFilter.length > 0) {
var liveFilterField = liveFilter.find("input.liveFilterInput"),
liveFilterGrid = liveFilter.find("table.liveFilterList"),
liveFilterGridRows = liveFilterGrid.find("tr:gt(0)"), // gt(0) prevents the first row (normally a TH) from being included.
liveFilterClear = liveFilter.find(".clearField"),
liveFilterNoResults = liveFilterGrid.prev(),
liveFilterDataArray = new Array(),
//Create an array and populate it with key codes that should not cause shake effects
characterValidationArray = [8,45,46], //backspace, insert, delete
//Create an array and populate it with key codes that don't trigger an action
characterExclusionArray = [13,20,27,33,34,37,39,35,36,16,17,18,144,145]; // enter, caps, esc, page up, page down, left, right, home, end, shift, ctrl, alt, num lock, scroll lock
We start by defining the function initLiveFilter and give it a parameter of columnsToIndex. This will pass the columnsToIndex variable we defined in the block above to the function.
Next we set the liveFilter variable to a jQuery object and using an ID selector find the live filter in the mark up. Next, we use the liveFilter variable and check its length to see if it was found and if it was we further define a set of variables that we’ll use throughout the script.
liveFilterField: will be the input where the user can type there search string.
liveFilterGrid: is the table we will be searching.
liveFilterGridRows: are the rows that make up the table but by using (“tr:gt(0)”) as a selector we don’t select the first row which is usually a header.
liveFilterClear: is the button we will use to reset the search.
liveFilterNoResults: is a panel that we will display if the search string doesn’t match any values.
liveFilterDataArray: is our custom made data source that we shall use to store the content.
Next we’ll create another literal array called characterValidationArray which will contain a series of numbers that relate to key presses on a keyboard. When these keys are pressed it will not trigger the validation that we will apply to the input field later on.
After that we shall create another literal array called characterExclusionArray. This will contain key presses that won’t trigger the filter event. This means any key we press hear will perform its default action i.e. delete will delete tab will tab etc.
Our next block sets up our datasources based on the columns we defined in the columnsToIndex variable. It first checked that the columnsToIndex variable is an array and has at least 1 value. If it is not defined then it will just set a datasource up using the first column of the table only.
Next, we use a for loop to iterate through each item in our columnsToIndex array, then then iterate over every row in the table and capture the columns text value and append it to the liveFilterDataArray.
With me so far?
liveFilterField.on("keyup",function(key){
// Check the character that was pressed and ensure it doesn't exist in the exclusion array defined above
if (jQuery.inArray(key.keyCode,characterExclusionArray) == -1) {
var liveFilterValue = liveFilterField.val();
if (!liveFilterField.hasClass("default")){
if (liveFilterValue != "") {
liveFilterClear.fadeIn(300);
rowsToShow = new Array();
var currentRow = 0;
// Check the value entered against a regular expression matched with the column data. If a match exists add the row to a new array
for (var i=0; i < liveFilterDataArray.length; i+=1) {
RE = eval("/" + liveFilterValue + "/i");
if (liveFilterDataArray[i].match(RE)) {
rowsToShow.push(currentRow);
}
if(currentRow < liveFilterGridRows.length - 1) {
currentRow++;
} else {
currentRow = 0;
}
}
// If there are matches, show the grid, hide all the rows and show the selected ones
if (rowsToShow.length > 0) {
liveFilterGrid.show();
liveFilterGridRows.hide();
if (liveFilterNoResults.is(":visible")) {
liveFilterNoResults.slideUp(150);
}
for (var i=0; i < rowsToShow.length; i+=1) {
jQuery(liveFilterGridRows.get(rowsToShow[i])).show();
}
// If there are NO matches we hide the grid and display an error panel. If an incorrect value is entered while the error panel is visible it shakes itself assuming if it doesn't match any of the excluded values defined in the characterValidationArray
} else {
liveFilterGrid.hide();
// if the no results panel is shown and the effects queue length is 0 and there are no illegal character presses
if (liveFilterNoResults.is(":visible") && liveFilterNoResults.queue().length == 0 && jQuery.inArray(key.keyCode,characterValidationArray) == -1) {
liveFilterNoResults.effect('shake', {times:3, distance:3}, 100);
} else {
liveFilterNoResults.slideDown(150);
}
}
// If the value entered is blank, hide the clear field button, show the grid and all of its rows and hide the no results panel if it is visible
} else {
clearField();
}
}
}
});
This next section is BIG, but this is where all the magic happens! Using the keyup event and passing a key parameter into the keyup function we listen for when a key is released. We can then check to see if the key.code exisits in the exclusion array and if it doesn’t (it will return a value of -1 if it doesn’t find it) it will proceed to check if the input field has a value and then has a class of default. If the class of default exists, it means a search has not been carried out since the page last posted back.
We first fade in the live filter clear button over a 300ms duration.
We set up a new array called rowsToShow. This will contain all the rows in the table that match the current search string.
Then we set up a currentRow variable and set it’s initial value to 0.
The next thing we do is create another for loop, this will iterate over our datasource array (liveFilterDataArray) and will evaluate the liveFilterValue and using a regular expression will try and match it with the current value from the datasource. If there is a match, it takes the current value from the datasource and pushes it to the rowsToShow array we defined before the loop.
One the loop has finished, we check the rowsToShow array’s length and make sure it is greater than 0. If it is then we make sure the grid is visible, then we hide all the grid rows and slide up the no results panel. Then we show all the rows that matched the search string.
If there were no matches in the grid, we hide the grid, show the no results panel if its the first time no match was found and if the user continues to type we shake the no results box to draw their attention.
At the end of the block there is an else statement that runs another function called clearField. This basically means that if the input field is blank or has no value, then set everything back the way it was.
liveFilterField.on("focus", function(){
if (liveFilterField.hasClass("default")){
liveFilterField.val("").removeClass("default");
}
return false;
});
Next, we set up a few event listeners the first of which listens for focus on the input field. If a user focuses i.e. clicks in or tabs into the search field this event fires and triggers a function which checks if the input box has a class of default (which means its not been used yet) and removes the default class.
Our last event: when a user clicks on the clear button, we call the clearField function which resets everything back to the way it was.
And last of all we have the clearField() function:
function clearField() {
liveFilterField.val('');
liveFilterClear.fadeOut(300);
liveFilterNoResults.slideUp(300);
liveFilterGridRows.show();
liveFilterGrid.show();
}
Here we put everything back the way it was. We set the value of the liveFilterField to blank. We hide the liveFilterClear button. We hide the no results panel, show all the grid rows and the grid.
I know its a long script, but its not that complicated when we look at it in chunks. I hope you can make use of it.
Why Microsoft’s Windows 8 will fail on the desktop…
I’m not one for picking sides when it comes to my Operating System, if I can work on it, play on it, browse the internet etc then it does what I need but it always makes me laugh when a new Operating System rears it’s head and the avid supporters of each OS either shoot it down in flames for no apparent reason or show a devotion to it that would make religious fanatics look like athiests.
I recently installed the Windows 8 Consumer Preview into a virtual machine so I could try it out. Installation was a breeze; very quick and many of the old installation steps have been merged to make it more streamlined: so far so good!
Once installation has completed however, things start getting a bit confusing. Instead of loading the desktop most windows users are so comfortable with, we now have Metro, a collection of coloured tiles grouped together to form a new type of interface.
Nice isn’t it? I love the way Metro looks, its slick, easy to scan and uniform, it also works beautifully on a touch screen, its intuitive, smooth and most of all modern! But not everyone has a touch screen and not everyone who will upgrade to Windows 8 will go out and buy one and this is where the coloured tiles suddenly become drab and instead of slick become cumbersome.
So what’s it like with a keyboard and mouse?
Shocking. It is no where near as intuitive as the touch interface, and this is where I see a lot of problems for your average Joe. Let me explain first about the kind of people I describe as average Joe’s. I often sit down with colleagues, friends and family members to help them with computer issues, and it’s amazing how many people don’t know the basic principles of operating a computer. The browser is a good application to draw examples from. I have seen a great many people use google to find a page even when they know the correct URL. Instead of typing or pasting say: www.bcc.co.uk into the address bar they first type or paste it into google, hit search and then click the link, why do they do this? Because they don’t know any better, even though the address bar has sat at the top of every browser since the 90’s they just don’t realise they can interact with it.
When the user needs another browser window open, do they open a new tab? No. a) because they are using an antiquated browser that hasn’t been updated because it came with the PC when they brought it and never knew it could be upgraded and b) because they don’t know they can do it so they just open another instance of the browser. Its balmey, but it explains a lot.
How does this relate to Windows 8? Most people don’t care about new interfaces, they might want the latest thing but they don’t like change, look at Facebook as an example, every time facebook change their interface there is a public outcry and everyone threatens to jump ship and the same applies to operating systems.
So, lets say you’re an average Joe and you’ve just installed Windows 8 on your desktop computer. Installtion was easy but now you are faced with the following screen:
This is the Windows 8 Lock screen. Don’t confuse this with the logon screen which you now need to find. I know I set up a user account when I installed Windows 8 so how do I access it? If I click on the pretty image it does a little jump, if I double click on it spasms a bit but it stays in place. Hmm. Right clicking does the same. Lets move to the Keyboard: Enter – hey presto! it slides up! What if I try another way. Click and drag up with the mouse. That works as well and what a great idea (no sarcasm this time) gestures with mice! Superb! (Don’t get your hopes up though as thats all there is). You can also use the mouse wheel to hide the lock screen, but without touch I think a simple click would suffice as this will just confuse normal users.
Now you’ve logged in to the Metro style interface, you can see a Desktop tile and thankfully after a quick click it takes you to the desktop you are so familiar with. How do you open your applications? You can’t open them using the start menu as that has now gone. You could manually open them by browsing to the executables or you could return to Metro and launch them from there. Lets do that then. But I’m an average Joe, I don’t know that by pressing the windows key it would open the old start menu, so how do I get back to Metro? There is no back button, backspace doesn’t work, I can’t click anything, if i move my mouse down to the very bottom left corner a thumbnail appears labelled start, clicking that takes me back, but that’s a bit out of the way. Why not just put the icon back?
I’m back in metro then but how do I find a specific application when it’s not pinned to the start screen? If I move the mouse to the edges of the screen nothing happens – but there is a pathetically small icon that appears in the bottom right hand corner when I move the mouse (we’ll come back to that in a minute).
To get to your apps you will have to right click (an interaction that has for years brought up context sensitive menus). This brings up a bright blue bar with a single icon (by default).
Clicking the All Apps link will present you with an exhausting list. Select the one you want and you are done! To be fair, to make it easier next time, you could right click on an app and select Pin to start so its easier to get to next time.
Alternately you can just type on the start screen and that will be classed as a search which makes things a lot easier.
Lets try something every user will have to do at somepoint, Shutdown.
You have finished your first Windows 8 session and its time to go and throw iStones at Apple fanbois but you need to shut your pc down first – being an average Joe and not knowing that I could just press the power button to turn it off – where do I start? If you are on the desktop you are out of luck, the start menu as mentioned before has gone and along with it are the shutdown, hibernate and restart controls. It must be in metro then.
I’m back in Metro (I’m starting to miss my desktop) where do I shutdown, I move my mouse around and out of the corner of my eye I see that tiny icon appearing at the bottom right again (told you we’d be back).
This is the smallest button in the world! Its a measley attempt at creating functionality for a keyboard and mouse that was designed for a touch screen. Oops. The image below is the actual size.
Clicking this infinitesimal button resizes my tiles so that I can see the groups of apps available to me. Microsoft, would it kill you to add a larger more prominent icon?
But what happens if I hover over this diminutive icon? a menu appears – what Microsoft is calling the Charms bar (oh dear).
Now you have hovered the button (it might as well be a spec of dirt on your monitor) for 500ms a menu appears, don’t hover too long though otherwise it will disappear and don’t move the mouse off the menu or it will close; now select settings (why is power off in settings?) and select power and then select shutdown.
To sum up, Metro is radically different to anything Microsoft has done before and I applaud them for trying something new and it does work on touch screens but for mainstream and corporate users which make up much of Microsoft’s marketshare, it’s going to be a steep learning curve, productivity will take a drop as people get used to how the new interface works and businesses may hold off on upgrading for that very reason.To Microsoft I would say this, don’t change too much too quickly, if your going to insist Metro becomes the main interface at lease give us a Windows 7 style desktop so we have a comfortable area to fall back on while we get used to Metro and that means bringing back the start menu.
Pros:
A nice looking interface.
Slick and fast animations.
Completely different to anything else (well apart from Windows Phone 7 and the XBox dashboard)
Cons:
The majority of users will struggle with the huge change in interface.
Removal of the start menu will have a negative impact on user experience.
Lack of mouse gestures.
Menus should pop out from the edges when near them.
Some popular functions such as shutdown should have more prominence.
Update: Chris Pirillo’s Dad uses Windows 8 for the first time
In this Video Chris Pirillo’s Dad is sat down in front of Windows 8 for the first time and is not given any help. All he is armed with is his knowledge of using old Microsoft operating systems.
Turns out there are a shed load of similar videos on you tube.
jQuery: Calculate Scrollbar Width
I recently needed to calculate the width of the scrollbar for an overflowing div so instead of re-inventing the wheel I went onto Google and did a search. I found a great little post by Jonathan Sharp – Calculating The Browser Scrollbar Width.
Here’s his example (which doesn’t work in Chrome or Safari):
Using the excellent time and timeEnd console commands in FireBug, I outputted the script execution time and worked out an average for 10 passes. The result was 4ms. I know its not very much, but its a lot for a script its size and I started thinking about how to get the execution time down and subsequently how to get it working in Chrome and Safari (thanks to Z for pointing this out).
It would seem as though Webkit browsers have issues with jQuery’s innerWidth (i’m sure someone can correct me here if I’m wrong), but by using the native JavaScript offsetWidth and clientWidth values – which are supported as far as my testing goes – back to IE7 in Internet Explorer browsers and all major browsers since.
By using some of Javascripts native methods (which are faster than jQuery’s most of the time) I’ve got the time down to 1ms which is a 75% faster.
I’ve tested this in Chrome, Firefox, Opera, IE7, IE8 and IE9 and it works fine.
Many thanks to Jonathan for his excellent script and inspiration and to Z for pointing out the Webkit issues.
jQuery: Close a Menu by Clicking Anywhere on the Document
Something that tripped me up when I started learning jQuery was how to stop event bubbling on events bound to the document and I searched for a while without much luck. What I wanted to do was create a jQuery dropdown menu based on an unordered list. If a user were to click a trigger, the menu would open, clicking the trigger again would cause it to close; simple enough as the example below illustrates:
So far it’s not exactly rocket science: you click the menu heading and it opens – you click it again and it closes! Although this is generally fine, the standard behaviour of most menus is that clicking outside of the menu would ordinarily cause it to close.
In order to replicate this functionality, I need to bind a click event to the document like the example below:
Example 2 – Open and close with trigger and close with document
You’ll notice in the example above that although the menu opens if you click on the panel the menu closes. This is not desired behaviour and it’s caused because the document event we created above is also applied to our dropdown menu.
The way to ensure it works everywhere is to use another click event – this time – applied to the area we don’t want to be able to click:
Example 3 – Using stopPropagation() to prevent event bubbling
The finished code above adds another click event to the panel itself but this time makes use of a nifty attribute which plumbs into the function’s event object (e) and stops the propagation of the click event from going any further. So… to cut a long story short use stopPropagation() to prevent event bubbling.
jQuery: Smooth Page Scrolling & Smooth Page Jumps
Have you ever seen that nice effect on a website where you click a link to return to the top of the page and it slides gracefully back to the top?
Anything with a class of scrollToTop or a named anchor of #top will glide the user back to the top of the page.
What happens though if you want to transition all page jumps? Well we could find all the named anchors on the page, and then find the anchors that relate to them and bind a click event to them like this:
Set up the variables so we can reference them again without jQuery having to work harder than it needs to.
thisDestination is set to $(this) which is the anchor we are currently looking at in the loop.
thisDestinationOffset creates an offset object which will give us the named anchors top and left values from the top of the page so we know where to scroll to.
thisLink will be the link that a user would click to travel to the named anchors position. We work out its name based on theDestination’s name attribute.
if(thisLink.length > 0) {
Here we check to ensure that thisLink actually exists before we proceed.
thisLink.click(function(){
Next we setup the click event which will initiate the page jump.
This is the magic. We animate the HTML and BODY elements to move the distance we defined with thisDestinationOffset over a 1.5 second time period. We have to animate both HTML and BODY so that the animation works in all browsers. Chrome will not animate the HTML element.
return false;
Returning false simply prevents the browser carrying out its default behaviour which in this case would drop us down to the named anchor without the animation.
