Archive for category XHTML

New site launch- natashahampshire.co.uk

Posted by shawson in CSS, XHTML, design, jQuery on April 28th, 2010

Juts launched a new portfolio site for my girlfriend, www.natashahampshire.co.uk – This is just the first phase with a few more features and a bunch of extra contact to be added in the coming weeks, but we needed to get it up ASAP so she can apply for a design course in London!

No Comments

JQuery Accordion Control links not working

Posted by shawson in XHTML, jQuery on April 9th, 2009

I recently swapped the .net Accordion control on my main home page from the Ajax Control toolkit for the jQuery Accordion control from jquery.com- this was mainly because i have a big moving flash background of the sky wooshing past, and found the MS accordion control a bit too heavy to expand out smoothly on slower machine, so thought i would try the jQuery version and was pleased to find it was a lot smoother.

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.

No Comments

JQueryUI

Posted by shawson in .net, XHTML, jQuery on April 9th, 2009

As most of my colleagues will know, I love JQuery and one of our contractors, Lee, today showed me the brilliant JQueryUI library which features a whole bunch of functionality similar to the horribly bloated .net control extenders. Well worth a look over at http://jqueryui.com/

No Comments

Google Code Highlighter

Posted by shawson in .net, C#.net, CSS, Javascript, VB.net, XHTML, blogging, php on October 28th, 2008

You may have noticed that the little snippets of code I’ve been dropping into these post’s suddenly got a bit swankier looking. This is down to a new javascript tool I found for use on blogs and the like, for highlighting code you post on your pages.

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;

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;

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

No Comments