via Transparent CSS Sprites – Smashing Magazine.

Related posts:

• Mastering CSS, Part 1: Styling Design Elements | CSS | Smashing Magazine
• CSS Sprites and a flickering problem in IE6
• Flash floating over the top of my div!

This is easy to fix- just add an extra parameter to your object embed- eg;

<object width="330" height="203" style="width: 330px; height: 203px;" data="http://www.youtube.com/v/PF9Q3LcOAQ8?fs=1&amp;amp;hl=en_GB&amp;amp;rel=0&amp;amp;border=1" type="application/x-shockwave-flash">
<param name="wmode" value="transparent" />
...

Related posts:

• Transparent CSS Sprites – Smashing Magazine
• Flash backgrounds not showing in IE
• JQuery Accordion Control links not working

Related posts:

• Javascript & CSS Minification
• Multiple domains to reduce site loading times
• JQueryUI

However, to my horror, all my links stopped working!

$(function() {
            $("#menu").accordion({
                active: false,
                alwaysOpen: false,
                animated: "easeslide"
            });
        });

<ul id="menu" style="width: 250px;">
  <li>
    <a href="#">Welcome</a>
    <div>This is the home page to what will eventually be a whole bunch of different web projects that i have online to fiddle about with.</div>
  </li>
  <li>
    <a href="#">Work</a>
    <div>
      <ul>
        <li>
          <a title="My Web Development Blog" href="http://www.shawson.co.uk/codeblog/">My Code Blog</a>
        </li>
      </ul>
    </div>
  </li>
  <li>...</li>
</ul>

This is because the jQuery accordion, using the default settings as i was, treats links as buttons for expanding the sections of the accodion, so voids their default action.  I resolved this by updating the jQuery settings to only treat links with a specific class as the accordion headings, and leave other links alone- i created a new class called accordion-label to use for the accordion buttons and updated the jquery as follows;

$(function() {
            $("#menu").accordion({
                active: false,
                alwaysOpen: false,
                animated: "easeslide",
                navigation: true,
                header: "a.accordion-label"
            });
        });

I then added the accordion-label class to my “Welcome” link, “Work” link etc, and left the rest as-is.

Related posts:

• jqZoomage jQuery component
• Google Code Highlighter
• Adding cross browser consistent keyboard short-cuts to your website

Related posts:

• Using JQueryUI combobox() with KnockoutJS
• WCF 404.3 Errors
• ASP.net Roles and Membership installed to local SQL Express 2008 MDF file

Basically you download the zip file- unzip it and copy the javascripts and css files over, then add a few lines of code to the head of your page;

</p> <link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link> <script language="javascript" src="js/shCore.js"></script><br /> <script language="javascript" src="js/shBrushCSharp.js"></script><br /> <script language="javascript" src="js/shBrushXml.js"></script><br /> <script language="javascript"> dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code'); </script><br />

You then put your code in-between >pre< tags and set a name attribute to “code” and set the class to whatever syntax you have- it has support for a whole bunch of languages including c#, vb, php, javascript, css, sql and a whole bunch of others. You can grab this plug-in from here

The install was easy- but a couple of bits did catch me out- the code sample above was the example they give you in the install page. So I blindly copied over this code to the head of my blog, and copied all the files from the zip file over to my sites js and css folders. I found that html highlighting worked fine and so did c# but vb and sql weren’t happening… It eventually clicked that you need to add the references to the additional syntax types you need as the example only has a line for the CS and XML/HTML “brush” libraries. So I popped those lines in and it worked fine.

The other problem that I had, and indeed still have until I get home to actually edit the code, is compatibility with TinyMCE which is the editor used by default in BlogEngine. I found a couple of articles which might help with this but won’t know till tonight;

• TinyMCE Code highlighter Plugin to work with Google Syntaxt Highlighter
• TinyMCE configuration settings to help everything get along a little better

As mentioned on the Wiki pages there is also the issue that adding a name value to a pre tag, isn’t valid xhtml.

Related posts:

• Runaway Sharepoint 2003 Indexing!
• Google Font API
• Adding minification and obfuscation of your Javascript and CSS to your ASP.net build process using Yahoo YUI Compressor