Have you ever had a page that needed styles applying to certain elements again and again (and again) in some sort of pattern. The finished page could have no js either. I just had a long page of tables that the 3rd column had to be formatted differently and it was a pain so I needed a way around the problem.

Write a quick bit of jQuery to apply to to the page and preview it in the browser. Then using firebug (firefox plugin), cmd/right click the document root element and click “copy HTML”. Just paste that into a new file and you now have the static HTML which the jQuery applied the styles to. Just remember to delete the jQuery code from the new doc and you are done.

This example adds the class “value” to all the third “td” elements in the document:

$(document).ready(function() {

var str = “:nth-child(3n)”;
$(“tr td” + str).addClass(‘value’);
        
});

Resources:
http://api.jquery.com/nth-child-selector/
http://stackoverflow.com/questions/2184862/saving-the-manipulated-dom-html-after-editing-it-with-firebug

EDIT: New links added 25-01-2010

So you have probably been hearing a lot about HTML5 and CSS3 on the internet in the recent months and weeks. What are they? What’s the deal with them? Why are they important and should I be doing anything yet?.. are a few questions you might have. I have been reading articles and saving links for a few months now so I thought I better share all the goodies with everyone else and hopefully you will be able to answer most if not all of your questions. I have tried to categorize as best I can but there is some overlap! Enjoy!

BOTH

http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/

HTML 5

What is supported where
http://a.deveria.com/caniuse/

HTML5 feature sand usage
http://diveintohtml5.org/

A Cheat sheet for html 5
http://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual-Cheat-Sheet.pdf

HTML5 sites now!
http://seogadget.co.uk/html5-examples-in-the-wild/

HTML5 Tutorials
http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/
http://html5tutorial.net/

CSS 3

General CSS 3
http://www.smashingmagazine.com/2009/12/16/stronger-better-faster-design-with-css3/
http://designshack.co.uk/tutorials/introduction-to-css3-part-1-what-is-it
http://www.exforsys.com/tutorials/css3.html

CSS3 Visual effects
http://www.smashingmagazine.com/2010/01/25/the-new-hotness-using-css3-visual-effects/

CSS3 layout
http://designshack.co.uk/tutorials/introduction-to-css3-part-5-multiple-columns

CSS3 backgrounds
http://designshack.co.uk/tutorials/introduction-to-css3-part-6-backgrounds

CSS3 User interfaces
http://designshack.co.uk/tutorials/introduction-to-css3-part-4-user-interface
http://www.zurb.com/playground/css3-polaroids

CSS 3 text effects
http://designshack.co.uk/tutorials/introduction-to-css3-part-3-text-effects

CSS 3 Borders
http://designshack.co.uk/tutorials/introduction-to-css3-part-2-borders

CSS 3 for ie6+
http://www.keithclark.co.uk/labs/ie-css3/

As always if you have some great links you have found yourself or you have an article about this then drop a comment and I will update the post.

Having learnt about menu’s using lists recently, I have decided to share because I’m nice! Yeah you have probably seen it before in many places and yeah I am waaaaaaaay behing the curve finding out about it but since I’m pretty sure I’m not last it might help someone else! It’s pretty simple really. Once you make a few different menus and see what happens and you will soon get the hang of it…

First start with a list. I am assuming the menu will be in a div called “nav”. It’s not necessary but if you have other lists then you might end up screwing them up. If its not called nav then just drop the #nav or change it to be relevant to your div’s name.\

[code lang="html"]

This is a quick and easy way to center all your website pages, even if they are longer than the browser window and usually cause scollbars to move the page over slightly! This is especially usefully if you want the layout to stay lined up from page to page.

Hopefully you are using css to format all your pages the same way. Open up your css file and if it doesn’t exist already then create a html sytle like this :
[code lang="html4strict"]
html {
min-height: 100%;
margin-bottom: 1px;
}
[/code]
Now your page will always be 100% of the browser hight and will have a border of 1px on the bottom so that they’re just a tiny bit bigger than 100% and so will have a scrollbar even if the content would usually never have a scroll bar.