Posts

Showing posts from January, 2009

Shrink Image (JavaScript)

This function shrinks an image, so its dimensions are no bigger than the maximum dimensions you define. // get new dimensions so it fits within the maximum // o = original dimensions / image, m = maximum dimensions function shrink(o, m) { // r = resized var r = {width: o.width, height: o.height}; // if an image, rather than an object, resize it if(o.nodeName && o.nodeName.toLowerCase() == "img") r = o; if(r.width > m.width) { r.height = r.height * (m.width / r.width); r.width = m.width; if(r.height > m.height) { r.width = r.width * (m.height / r.height); r.height = m.height; } } else if(r.height > m.height) { r.width = r.width * (m.height / r.height); r.height = m.height; } return r; } To use, simply supply the image and the dimensions to constrain it to: var image = document.getElementById("image"); var max = {width: 1024, ...
Post a Comment
Read more

Changing jQuery UI's Dialog widget's default options

While jQuery UI's Dialog widget has good default options, there may be circumstances when you want to change them. For instance, you may want all dialog windows to be modal windows, with a semi-transparent background and the bgiframe plugin applied. Place this code at the end of the page, or within $(document).ready . $.extend($.ui.dialog.defaults, { overlay : { background: "#000", opacity: 0.8}, modal: true, bgiframe: true });
Post a Comment
Read more

Pixie – small, simple, website maker

Recently, I have been looking at Pixie , to see how it works as a simple system for managing websites. It is open source (GPL v3), written to web standards (XHTML Strict, Microformats ) and powered by jQuery and PHP/MySQL. It consists of several page types – dynamic (blog, news), static or module (e.g. contact form, events, links etc). Plugins add additional functionality to modules (like allowing comments on blog posts). Blocks allow you to add content alongside your content (e.g. display RSS content from BBC News). Easy enough to extend, with detailed guides for module development (so you can create additional ones to those that are bundled with Pixie) block development and theme development . A few additional blocks I have created: News (latest content from a page named ‘news’) and Google Maps . These can then be shown on any page (so you can see news on your home page for example).
Post a Comment
Read more

Google Gears Desktop API - Working with files

The Google Gears Desktop API allows you to create shortcuts on your desktop (only to a page on the same site, not to another) and work with files. This example shows you how you can filter the file types when choosing files. gears_init.js required. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Google Desktop API - Working with files</title> <script type="text/javascript" src="gears_init.js"></script> <script type="text/javascript"> var fileformats = { // word document word: 'application/msword', // word 2007 document wpml: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', // excel spreadsheet excel: 'application/vnd.ms-excel', // excel 2007 spreadsheet ssml: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', // powerpoint presentation ...
Post a Comment
Read more

Free Graph Paper (for printing)

There are a few sites that offer paper (graph, maths, speciality) you can print off (as PDF) for free. Usually with a credit to the site at the bottom of the page. Konigi offers various storyboard and wireframe PDF's available in 8.5" x 11" (no A4 available). So they are useful when creating a site design mockup or a story. Print Free Graph Paper offers Cartesian, Engineering, Polar, Isometric, Logarithmic, Hexagonal, Probability and Smith Chart templates available in Letter and A4 sizes. MathSphere also has paper types the previous site doesn't. Incompetech.com has various paper generators for different page sizes (you can create a custom size as well), not just graph paper, but speciality and writing as well (Chinese, Japanese, Fretboard, Cornell etc). You can even define what colour the lines should be. Useful when you don't need a full pad, the stationer doesn't sell the paper you want, or the shops are closed and you need paper before they are ope...
Post a Comment
Read more