Update 23/09/2011: As pointed out by a couple of people in the comments, there are some issues around using this fix and some elements of certain types of page no longer working (namely some select boxes). A potential fix is linked to in the comments, but for reference have a look at this;

The standard version of SharePoint uses a fairly complex javascript system to position the ribbon so that it sticks to the top of the screen and the rest of the body scrolls underneath it, which we need to work around. We can do this in two ways. We could use the earlier fix we have described on this blog to fix the ribbon positioning to work in a different way, which would give us the scrolling body back, which makes one finger scrolling work again. However, as stated in the update of that post, there has to be a javascript fix added to solve the dropdown menus so you should decide if you want to use it or not. So, as an alternative, here’s another way that works more with out of the box stuff. (This solution is based on the out of the box v4.master master page file). This should work for both iPad and Android devices (if you turn off mobile view it should work for iPhone too), but has only been tested on an iPad.

Aside: If you want this to work on just an iPad, you could conditionally execute the code based on something like the user agent string, like so;

if (navigator.userAgent.match(/iPad/i) != null) {
// execute code here
}

For this fix we are going to use a javascript library we found while doing the main part of the project, the excellent iScroll 4. We recommend you check it out if you are developing web pages for mobile devices. So, download the iscroll.js file from that site, add it in to your site somewhere (for this example we’ll just use the root of the style library, but put it wherever you keep your javascript files), and then link to it from your master page in the head element like so;

<script type="application/javascript" src="/Style%20Library/iscroll.js"></script>

Then, we need to add in some javascript code to set up the iScroll for the main body area, and also keep it up to date when the ribbon is dynamically changed by SharePoint. So, beneath the line above or in an external js file which you then link to, add the following code;

var bodyscrolldiv, bodyscrolldivinit = false;

function loaded() {
ExecuteOrDelayUntilScriptLoaded(function () { SP.UI.Workspace.add_resized(mobilebodyscroll); }, "init.js");
}

function mobilebodyscroll() {
if (bodyscrolldivinit) {
bodyscrolldiv.refresh();
} else {
bodyscrolldiv = new iScroll('s4-workspace');
bodyscrolldivinit = true;
}
}

document.addEventListener('DOMContentLoaded', loaded, false);

This will cope with the ribbon events as different tabs are clicked and it gets shown and hidden, etc. To finish and make it work though, we also need to change some html.

We need to wrap everything inside the div with the id ‘s4-workspace‘ with an additional div, so that the scroll can be effectively applied to it and work. This additional div needs the style attribute set against it of ‘overflow: auto;‘  We’d recommend doing this with a class, and then a declaration in a style sheet, but will show it here as a style attribute for ease of readings sake;

<div id="s4-workspace">
<div style="overflow:auto;">
... the s4-bodyContainer div and other content elements...
</div>
</div>

And that’s it. This now works for us. You can scroll the page with one finger in both orientations and with/without the ribbon, and still get to ribbon dropdowns and so on, and everything copes with the various heights.

So there you have it, a fix to let you enjoy SharePoint 2010 as it was intended on your iPad or Android device!

We hope these tricks help, and happy developing!

1. When designing for intranet sites, it’s best to design for a full width ribbon. A fixed width ribbon with a decent looking scrollbar can be done, but there are so many javascript based changes and updates involved in loading and rendering the ribbon, it can have unintended consequences for certain browser users, so unless your client is desperate for it, you might be able to save them time and cost by suggesting a full width ribbon from the start.
2. In public facing web sites, don’t even start to load the ribbon in anonymous mode unless you need to, it hugely increases render time. You can do this by only loading the ribbon code and a certain piece of JavaScript in edit mode, or on a user permissions basis using a securitytrimmedcontrol. For more details, see this article
3. If you are using a full width ribbon and the standard scrollbar, you can achieve a fixed width for the body by using the ‘s4-nosetwidth’ class on the div tag with the ID ‘s4-workspace’, and then applying a fixed width to that div, or by applying a fixed width to the div with the ID ‘s4-bodycontainer’, and leaving it’s parent alone.
4. The new JavaScript Client Object Model is awesome. And a good way of quickly achieving an interactive web part in an intranet environment, but if you are planning on using it a lot, make sure you read up on request batching. For single list reading, try this method.
5. The JavaScript Client Object Model get_lists function is restricted when anonymous mode is enabled. Which is a shame. We don’t know what the reason for this is, or the security implications of turning it on, so do this at your own risk, but you can un-restrict  it using a simple powershell command, detailed below.
   In powershell, use the following commands;

   $wa = Get-SPWebApplication http://yourwebappurl
   $wa.ClientCallableSettings.AnonymousRestrictedTypes.Remove([Microsoft.SharePoint.SPList], "GetItems")
   $wa.Update()
   

6. When using the JavaScript Client Object Model, ensure that the relevant SharePoint core JavaScript file has loaded before calling your function. You can do this by using the built in function ‘ExecuteOrDelayUntilScriptLoaded‘, like so;

   ExecuteOrDelayUntilScriptLoaded(yourfunctioncall, "sp.js");
   

7. Custom content types do not overwrite their bound versions on lists and libraries when you upgrade your project by adding a field or something. There are manual ways of solving this, or you can use a feature receiver to do the work for you.
8. Deploying from Visual Studio 2010 using right click > deploy is great and very useful but doesn’t always work the same way as doing a deployment manually using powershell, stsadm, or Central Admin. It is good practice to test your projects using both methods.
9. A good master page to start from is a great idea.
10. If you don’t have to load the out of the box sharepoint css and javascript  for your public facing site (I can’t see an intranet not needing them), then don’t, as they can have an impact on page load and rendering times. You can achieve this with the CSS by using security trimmed controls or edit mode panels for your <sharepoint:csslink> tag in the master page, and NOT using the <sharepoint:cssregistration> tag to register your custom CSS file, but a simple html <link> tag instead. The same is true for the javascript, but for the <sharepoint:scriptlink> tag, and if you are using any OOTB web parts, you still need some js stuff to make it all work, see this post for more details.
11. When creating content in your master page / page layouts that you don’t want picked up by the search index, add the class ‘noindex’ to any divs containing content you don’t want crawled, including ones nested inside divs that already have this class, as it does not inherit.
12. If you are using right click > deploy in Visual Studio to deploy to sharepoint and you are getting weird errors about values not being able to be null and the like, make sure you close any files you have open in Visual Studio and try again. 9 times out of 10 this fixes the problem. Thanks to Glyn Clough for that little gem.
13. Having a search core results web part on your home page (say to show the latest 5 items in a list or something like that), can cause the crawler to fail. If you are finding content isn’t being indexed and you have one of these, try removing it temporarily to see if that solves the problem. If it does, there is an update available from the Microsoft web site that fixes the issue.
14. When creating custom xsl style sheets for things like core search results and content query web parts, there are some handy functions available that have already been made, if you know where to look. Try adding xmlns:srwrt=”http://schemas.microsoft.com/WebParts/v3/searchresults/runtime” to your xsl:stylesheet tag, to allow you to use the GetPlainTextFromHtml function in that schema. It’s great for getting plain text intros in rollups from rich html body content, a regular requirement.

That’s it for now, if you have any to add, let us know!

First, a function that does the list querying:

function getTheList() {
 // get the list by it's name from the root site level

// Get the current client context to start. Most things run from the client context.
 clientContext = new SP.ClientContext.get_current();
// traverse up through the site to the root level, and get the list called 'my-list'.
// the root level isn't required, you can get a list from your current site level if you want, just use get_web() instead of get_site().get_rootWeb()
 var myList = clientContext.get_site().get_rootWeb().get_lists().getByTitle('my-list');

// use a standard syntax CAML query to filter your results and the fields returned if required, by adding the following, or passing parameters to the load command below
var query = new SP.CamlQuery();
// You can leave out this line if you just want to return the entire list.
query.set_viewXml('<View><Query><Where><Eq><FieldRef Name="myField"/><Value Type="Text">myValue</Value></Eq></Where></Query><ViewFields><FieldRef Name="myField1"/><FieldRef Name="myField2"/></ViewFields></View>');

// add your query to the getItems command for your list
this.collListItems = myList.getItems(query);

// issue the load command, these can be batched for multiple operations
clientContext.load(collListItems);

// execute the actual query against the server, and pass the objects we have created to either a success or failure function
 clientContext.executeQueryAsync(Function.createDelegate(this, this.mySuccessFunction), Function.createDelegate(this, this.myFailFunction));
}

Next, create functions that deal with both the success and failure state of your list read request.

function mySuccessFunction() {
 // Do something useful like loop through your returned list items and output them somewhere
// create an enumerator to loop through the list with
 var listItemEnumerator = this.collListItems.getEnumerator();

// loop through the list items
 while (listItemEnumerator.moveNext()) {
 var oListItem = listItemEnumerator.get_current();
// do something with this here. Coupled with a platform like jQuery, you could do all kinds of great things
 strHtml += oListItem.get_item('myField1');
 }
 // output your html somewhere here.
 }

 function myFailFunction() {
 // do something to alert the user as to the error here.
}

Ok, so we have got the functions to read and output our list, so all that remains is to run them. SharePoint 2010 has a variety of options to manage how it loads its core javascript files, so also provides a useful helper function to enable us to only call our function once the Client Object model is full available, so after our functions we include the ExecuteOrDelayUntilScriptLoaded function call to initialise the first function only once the sp.js file has loaded;

ExecuteOrDelayUntilScriptLoaded(getTheList, "sp.js");

And that’s how it’s done!

This only happens in IE, not in any other major browser. This is due to the fact that IE does not support the CSS ‘opacity’ property, and instead uses its own propriertary ‘filter’ rule to deal with opactiy. Which appears to do some funky stuff to the aliasing of text when it is invoked. Not that this is an ‘I hate IE’ kind of a post. Granted, a large number of the exceptions and issues we deal with at web.0 revolve around coding for the IE family of browsers because they work differently to the other major players, and a lot of corporate visitors still use old versions like 6 (shudder) and 7 (better, but still not very good), but the simple fact of the matter is people still use them whether we like it or not, and I don’t think we as web developers should try to force them not to use IE any more than Microsoft should try to force them to use it. Rather we should aim to make our sites the best experience possible for all our visitors, regardless of their mode of transport. Besides, IE 8 is for the most part fine (this problem and other notable excpetions like rounded border corners aside), and I have high hopes for IE9, so hopefully soon these exceptions will be a thing of the past anyway. So, as the majority of visitors to almost any website still use IE, and that isn’t likely to change any time soon, we needed to solve the problem. A search of the web revealed some techniques to solving this based around putting a background color on the container of the text you wish to fade, or programatically the filter attribute at the end of the animation, but neither seem to stop it looking ugly during the animation itself, or cope with things like picture backgrounds, etc. Again, click the text below to see what we mean.

So, time to think outside the box. Or rather, on top of the box. What about if we didn’t fade the text at all? What if, rather than fade it in IE, we masked it, like you would in photoshop? Ok, let’s try that. So, first we detect whether or not your browser supports opacity (example of this later), using jQuery’s features detection routines (better than browser detection as there may be other browsers out there with this problem, so this way is more robust), and if so add our hidden mask in to the end of our container div, which we also set to be relatively positioned (you may need to change css and classes, etc to make this work for your situation, it’s just an example to start from) if it isn’t already, like so;

// dynamically add the masking div, and make the container relatively positioned if it is not already
$('.masked-example-wrapper').css('position','relative').append('<div></div>');
//if what you are masking is dynamic in size, include this code to fit your masking div over the top, otherwise do this is css
$('.masking-div').css({
position : 'absolute',
width : $('.masked-example-wrapper').outerWidth()-2,
height : $('.masked-example-wrapper').outerHeight()-2,
zIndex : 100,
backgroundColor : '#eee',
display : 'none',
left : 0,
top : 0
});

Then, we add a slightly different binding to the click event for our div for browsers that do not support opacity only, and then the normal, easy fade option for browser that do support opacity, so the whole thing including the above ends up looking like;

// check if opacity is not supported
if (!$.support.opacity) {
// dynamically add the masking div, and make the container relatively positioned if it is not already
$('.masked-example-wrapper').css('position','relative').append('<div></div>');
//if what you are masking is dynamic in size, include this code to fit your masking div over the top, otherwise do this is css
$('.masking-div').css({
position : 'absolute',
width : $('.masked-example-wrapper').outerWidth()-2,
height : $('.masked-example-wrapper').outerHeight()-2,
zIndex : 100,
backgroundColor : '#eee',
display : 'none',
left : 0,
top : 0
});
// now bind a slightly different function to the click event
$('.mask-example').click(function(){
$('.masking-div').fadeIn('slow',function(){
$(this).fadeOut('slow');
});
});
} else {
// opacity is supported, do things the normal, easy way.
$('.mask-example').click(function(){
$(this).fadeOut('slow',function(){
$(this).fadeIn('slow');
});
});
}

This way, when a user with a browser than doesn’t support opacity clicks in the text below, what actually happens is we fade in a mask over the top of the text, and then fade it back out again when we are done. This doesn’t invoke the filter on any text as the mask doesn’t contain any, and still keeps the underlying text looking nice and aliased, in all our visitors browsers. Click below for an example.

And there you have it, a nice way to hide one of IE’s problems, so everyone gets the same experience. We like it so much, we use it on our own home page!

However, lately we’ve come across a bit of a problem with the ribbon and the current fashion in web design, the fixed width layout. Everyone wants a fixed width layout these days, even on intranets, and there are a lot of really good arguments for having them. There is even a simple way built in to SharePoint 2010 to allow you to turn off the default behaviour of taking up the full width of the browser window. You’ll find plenty of blogs out there telling you how to do this, but personally I’d recommend you just head over to Randy Drisgill’s blog and pick up his starter master pages, as they are not only extremely useful when making custom sites, but also have some great comments in them to tell you where to edit for things like fixed width layouts. Or if you just want the info on setting the fixed width start at his other post here, and go from there.

UPDATE 23/11/2010: This article has been updated as some issues were found with some of the popdown menus on the ribbon when using this method. We have fixed this here using jQuery and a timer, which is not ideal, as ultimately it would be better to use the existing sharepoint core javascript methods (if possible) to position items correctly in the first place. We have been looking through the debug versions of the core javascript, but they are almost completely undocumented and mostly minified so it’s pretty slow going, so you may consider this as an option in the interim. It’s your choice whether or not to use it at the end of the day, and if anyone has any suggestions or help getting over this final hurdle, I’m all ears!

Back to the problem. When you add the class ‘s4-nosetwidth’ to the container with the ID ‘s4-workspace’, and then set a fixed width for your container using CSS, this happens;

Ouch. That’s not pretty. Nor is it where your users expect the scrollbar to be, so they won’t like it either. There are a couple of things you can do here; You could unfloat the ribbon. That way you can use CSS to put the scrollbar back where it should be and your users will feel at home. But, some of the ribbons usefulness is lost. Or  you could add a wrapping container inside the ‘s4-workspace’ container and then fix the width of that instead. This works but still uses a non standard scrollbar that doesn’t look quite right.

We think there is another way. One that allows the ribbon to float, allows the page to use the scrollbar the user is expecting in the place they are expecting it, and look correct. And in essence it’s quite simple. Position: fixed to the rescue.

To achieve this you are going to need to edit your master page, have some custom CSS, and some custom javascript. If you can do all these things, then here’s how it is done. This has been tested as working in IE7 and 8, Firefox 3, Safari 5, and Chrome 6

• Edit your master page in something like Microsoft Office SharePoint Designer and add the class ‘s4-nosetwidth’ to the conatiner with the ID ‘s4-workspace’. Also remove the attribute scroll=”no” from the body tag (this is important for IE7). Add your custom CSS, a link to jquery and your custom javascript file references. There are lots of posts around that can explain how best to do this, but some quick example code is below. Make sure your custom css is loaded after the core SharePoint CSS files.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<SharePoint:ScriptLink language="javascript" name="<your path>/<your custom js>.js"  runat="server"/>
<SharePoint:CssRegistration name="<your path>/<your custom css>.css" After="corev4.css" runat="server"/>

• Add the following classes to your CSS file to reset the scrollbar to normal, fix the position of the ribbon, and float it over the items below it.

/* make the body use it's proper scrollbar again */
body {
overflow: auto !important;
}
/* fix the width of the workspace, centre it and turn off its scrollbar. Also add a default padding to the top to cope with the ribbon in its standard form */
body #s4-workspace {
width: 980px;
margin: 0 auto;
overflow: visible;
padding-top: 44px;
}
/* fix the position of the ribbon, float it above the content and allow it to grow when it's height changes */
body #s4-ribbonrow {
position: fixed;
left: 0;
top: 0;
z-index: 10;
overflow-y: visible;
}

• Almost there. Lastly, we need to add in a bit of custom javascript to cope with the way the ribbon now hides the top of the page, as well as it’s default behaviors of changing height dynamically and hiding the title row when certain tabs are clicked. There is a method within the core init.js file which we can use to tie our function in to ribbon resizes, and we should use padding rather than margin because IE7 copes with it better, so add the following to your javascript file. Also add your jQuery based timer function here to cope with the popdown positioning issue described above.

// function to reset the top margin to whatever the current height of the ribbon is
function setTopPadding() {
var myElem = document.getElementById('s4-workspace'), newHeight = document.getElementById('s4-ribbonrow').offsetHeight;
myElem.style.paddingTop = newHeight + 'px';
}

function setTopPos() {
 $('.ms-cui-menu, .ms-cui-tooltip').each(function(){
 var newTop = $(this).data('origTop') || $(this).position().top;
 $(this).data('origTop',newTop);
 newTop += $('#s4-ribbonrow').position().top;
 $(this).css({
 top : newTop
 });
 });
 }

// bind top padding reset to ribbon resize event so that the page always lays out correctly.
ExecuteOrDelayUntilScriptLoaded(function () { SP.UI.Workspace.add_resized(setTopPadding); }, "init.js");

$(document).ready(function(){
 setInterval(setTopPos, 300);
 });

And once you have this all together, you end up with this!

The right scrollbar in the right place looking correct, so it’s what your users expect with no loss in functionality. It looks right if you fix the width of the ribbon too, which some briefs also require (although there are a whole wealth of issues to consider when doing this in order to cope with the way javascript is used so heavily to customise the ribbon, so be careful and test test test). And there you have it, our better way to scrollbars on fixed width layouts. We would be interested in your thoughts about this option!

Recently we’ve been heavily involved in front end work for some SharePoint 2010 public facing sites, working with the improvements in the new system for outputted html and look and feel customisation. It has been a real learning experience and over the next few weeks we’ll be sharing some of the tips and tricks we have learnt on the project(s) to try and take the vast improvement that SharePoint 2010 is over 2007, and improve on it yet further for our clients sites. First up, fixing an interface bug in the out of the box current navigation control, that, bizarrely, only affects internet explorer.

In IE, open up a SharePoint 2010 publishing site, using the standard v4 master page, that has some links in the left hand navigation. Now, try right clicking one of those links and choosing to open it in a new tab. You’ll find you can’t. The item usually found in the context menu to do this simply isn’t there.

In order to find out what is causing this and fix it we need to dive in to the CSS for the page. The standard control, when using simple rendering to output nice unordered lists for the menu, also wraps the text inside each link in a couple of additional span tags. These are handily added to allow for additional backgrounds and CSS customisations in the menu. Very helpful, but also the root of our problem. The spans are set in the standard CSS to have a display value of ‘block’, which appears to be causing IE to not understand that the thing inside them is a link, and therefore not offering the options in the context menu! This doesn’t happen in any other browser. To fix it, simply override the display style for the spans with the classes ‘additional-background’ and ‘menu-item-text’, so that it is ‘inline’ instead, and suddenly your menu options will re-appear.

A simple fix for an odd problem, probably to do with how IE handles the z-indexing, but one worth knowing. Our client that we were working with when we found this oddity, also wrote a good, detailed post on the subject, beating us to the punch, that you can read here.

Here’s a useful and simple method we learned to add a nice little year / month archive list to the blog we built for the client’s site, using standard cakePHP methods it was easy. If you are new to this, first, we recommend going through the tutorials and documentation on the cakePHP site, as they will familiarise you with the terms cake uses, MVC architecture in general and are an excellent resource to get you started.

So, assuming you already have your blog in place, perhaps from the tutorial in the documentation, open the controller file for it, probably named blogs_controller.php in the app/controllers directory, and find the index function for the blog. Inside that function, typically after any recursion setting for the blog (in this example we set it to 0), and before the line where you request your list of blogs, which will probably read like;

$this->set('blogs', $this->paginate());

You add the following set of code;

 $archives = $this->Blog->find('all',
 array(
 'fields'=>array('DATE_FORMAT(Blog.modified, \'%Y %M\') AS  dd','count(Blog.id) AS numblogs'),
 'order'=>array('dd DESC'),
 'group'=>array('dd')
 ));
 $this->set(compact('archives'));
 

This gets us a list of the blogs, grouped by year and month format in descending order, plus a count of the number of blogs in that group for good measure and a an assist for the front end experience.

Now, in our view file, index.ctp, which you’ll probably find in the app/views/blogs directory, find the location you want your archive list to appear and add in the following code;

<?php
 $curr_year = '';
 foreach ($archives as $archive):
 if ($curr_year != substr($archive[0]['dd'],0,4)) {
 if ($curr_year != '') {
 echo '</ul>';
 echo '</li>';
 }
 echo '<li>'.substr($archive[0]['dd'],0,4);
 echo '<ul>';
 }
 echo $html->tag('li',$html->link(substr($archive[0]['dd'],4).'  ('.$archive[0]['numblogs'].')', array('controller'=>'Blogs',  'action'=>'index', 'date'=>str_replace(' ', '-',  $archive[0]['dd']))));
 $curr_year = substr($archive[0]['dd'],0,4);
 endforeach;
 ?>
 

Now all you need to do is open your blog index page from your browser and you should have a nicely formatted archive index, which you can style to your hearts content, with a total of that months blogs next to each month that has any.

We hope this was useful, more cakePHP tips soon!

The first thing you should do is go in to the admin system for your magento installation and set the category lists to only show in list view, not grid, as obviously putting this kind of table in a grid view somewhat messes up the layout. However, needs must.

To achieve the goal we need to edit two template files. So, according to Magento best practice grab the following two files from the default them and copy them in to your custom theme folder, replacing ‘your_package’ and ‘your_theme’ with your installation’s names as follows:

1. /app/design/frontend/your_package/your_theme/template/catalog/product/view/type/grouped-list.phtml
2. /app/design/frontend/your_package/your_theme/template/catalog/product/list.phtml

Next, open up the list.phtml file, and inside the div with the class ‘product-shop’, find the three lines of code that read;

<?php if($_product->getRatingSummary()): ?>
<?php echo $this->getReviewsSummaryHtml($_product) ?>
<?php endif; ?>

Just after these lines (they end at line 54 in our file, but yours may vary), add the following code chunk;

<?php if ($_product->isGrouped()): ?>
<form  id="<?php echo 'productListForm'.$_product->getId(); ?>"  action="<?php echo $this->getAddToCartUrl($_product) ?>"  method="post" <?php if($_product->getOptions()): ?>  enctype="multipart/form-data"<?php endif; ?>>
<?php echo   $this->setTemplate('catalog/product/view/type/grouped-list.phtml')->setProduct($_product)->toHtml();  ?>
<?php if($_product->isSaleable()): ?>
<p><button type="button" title="<?php echo $this->__('Add  to Cart') ?>" onclick="<?php echo  'productListForm'.$_product->getId().'.submit()';  ?>"><span><span><?php echo $this->__('Add to  Cart') ?></span></span></button></p>
<?php else: ?>
<p><span><?php echo  $this->__('Out of stock') ?></span></p>
<?php  endif; ?>
</form>
<script type="text/javascript">
//<![CDATA[
var <?php echo  'productListForm'.$_product->getId(); ?> = new  VarienForm('<?php echo 'productListForm'.$_product->getId();  ?>');
<?php echo 'productListForm'.$_product->getId();  ?>.submit = function(){
if (this.validator.validate()) {
this.form.submit();
}
}.bind(<?php echo  'productListForm'.$_product->getId(); ?>);
//]]>
</script>
<?php else: ?>
<?php echo  $this->getPriceHtml($_product, true) ?>
<?php  if($_product->isSaleable()): ?>
<p><button  type="button" title="<?php echo $this->__('Add to Cart') ?>"
onclick="setLocation('<?php echo  $this->getAddToCartUrl($_product) ?>')">
<span><span><?php echo $this->__('Add to Cart')  ?></span></span></button></p>
<?php  else: ?>
<p><span><?php echo $this->__('Out of  stock') ?></span></p>
<?php endif; ?>
<?php endif; ?>

Then, open the grouped.phtml file and edit the last line of the file that reads;

<script  type="text/javascript">decorateTable('super-product-table')</script>

and change it to read;

<script  type="text/javascript">decorateTable('super-product-table<?php  echo $_product->getId(); ?>')</script>

Save your two files, copy them in to your custom folder tree in the right spots, create some grouped products and you’re done! Grouped products that can be purchased right from the category list page.

More Magento tips soon.

If you were to look at this site in a browser with all css and javascript turned off, it would look like a set of text documents, but still work, which search engines like. We then add css on top of this that is tailored to make the pages look the same across all browsers, and attractive, which our visitors (hopefully) like. Lastly, we layer a set of javascript functions utilising the jQuery javascript library on top, that further enhance the experience. We load our pages via AJAX, so only the content that changes on each page is loaded, increasing the speed. We add custom histories to the visitors browser, which allows them to still use the back button they are used to, and we add special effects to the portfolio, to make it a richer user experience. This final layer gives the site its best look.

Therefore however the visitor likes to surf the web, be they human or machine, they get the best experience tailored for them.

UPDATE (July 2010): In adding this WordPress blog to the site, we’ve learnt a lot about ajax-ifying a wordpress blog. The short answer is it is tricky, and has prompted a project to redesign the site, possible using other techniques to speed up page loading (and also because we like the idea of an updated look). We’ll keep this site somewhere if we can for reference when the new one goes live, but for now, this is how we did it;

We use a jquery function once the page has loaded to hijack all the a tags in the page that we are looking for, like so;

$('#main a').each(function() {
if ((!$(this).hasClass('comment-reply-link')) &&  (!$(this).hasClass('non-blog'))) {
$(this).addClass('ajaxlink').attr('rel','blog-'+$(this).attr('href'));
}
});</code><code>

We exclude the comment reply links, and any internal links to non-blog pages via the hasClass method, as we handle and ajax-ify those in a different way. The function adds an additional class to all the a tags in our page that are not comment reply links, adds the url we would want loaded if a visitor clicked that link and then passes off to the main page load function that runs throughout the rest of the site. This avoids us having to mess around with the wordpress templates and means if the visitor has javascript turned off, everything still works.

The main page load function then adds an event listener to all a tags within the entire page that have the class ‘ajaxlink’. This hijacks the link click event, and loads the central section of the page using an xmlhttp request instead, so we only bring back the central page content, and the header and footer do not require reloading. We then use the jQuery history plugin to add the page requested to the hash in the visitors browser, so if they click back they end up back in the right place in there browser history. Thus improving page load times and giving that one-page feel to the blog that the rest of the site already has.

For the comments, we hijack those links in a different way, adding an additional hidden field to the built in form, and editing the wordpress file wp-comments-post.php, to make it able to understand if we have sent our comment via ajax or via a standard form post. It only requires a small code change in this file, changing the final line from;

wp_redirect($location);

to;

if (isset($_POST['ajaxsubmission'])) {
echo('location='.$location);
} else {
wp_redirect($location);
}

This makes the comments post process return the location we want to load as a response, rather than a redirect when the form is posted via ajax, handing off the location back to the custom page loading function, so we can then load the new page along with the comment in the same progressively enhanced way.

And that’s how we did it!