Archive for category XHTML

Transparent CSS Sprites – Smashing Magazine

Posted by shawson in CSS, design, HTML5, XHTML on October 31, 2010

If you are familiar with CSS Sprites, you should be able to grasp this twist relativ

via Transparent CSS Sprites – Smashing Magazine.

No Comments

Flash floating over the top of my div!

Posted by shawson in Flash, XHTML on September 22, 2010

We had this problem recently using thickbox- the screen would go dark and the popup div would appear, however in the background an embedded youtube video floating above the darkened background.

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" />
...

No Comments

New site launch- natashahampshire.co.uk

Posted by shawson in CSS, design, jQuery, XHTML on April 28, 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 jQuery, XHTML on April 9, 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, jQuery, XHTML on April 9, 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, blogging, C#.net, CSS, Javascript, php, VB.net, XHTML on October 28, 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