Tip


quick tips can all go here


Monday, January 12th, 2009

Forcing a UI redraw from JavaScript

Category: JavaScript, Tip

Thomas Fuchs has run into those annoying times when a redraw is required to irk the browser into a correct layout, and his weapon of choice is: < View plain text > javascript Element.addMethods({   redraw: function(element){     element = $(element);     var n = document.createTextNode(‘ ‘);     element.appendChild(n);     (function(){n.parentNode.removeChild(n)}).defer(); Read the rest…

Posted by Dion Almaer at 1:45 pm
12 Comments

+++--
3.6 rating from 22 votes

Friday, November 14th, 2008

Guid0: JavaScript GUIDs

Category: JavaScript, Library, Tip

Our own Michael Mahemoff is at it again, creating a simple little GUID generator called Guid0: Guid0 is a GUID library for Javascript. Okay, it doesn’t yet do official, bona fide, 128-bit, GUIDs yet, mainly for API design reasons. But this is a library you might find useful if you want to generate a unique Read the rest…

Posted by Dion Almaer at 6:47 am
3 Comments

+++--
3.1 rating from 20 votes

Wednesday, October 1st, 2008

Finding those trailing commas

Category: Tip, Utility

Dan Fabulich got bitten by the “trailing comma” issue one too many times, so he created a script to solve his problem: “How many thousands of developer hours have been lost to random IE bugs like this?” I asked myself. I decided that there had to be a good way to detect this problem in Read the rest…

Posted by Dion Almaer at 5:37 am
Comment here

+++--
3.3 rating from 8 votes

Friday, September 26th, 2008

Maintaining Browser Specific CSS

Category: CSS, Tip

Nick Cairns saw our post on conditional CSS for browsers and followed up discussing how he handles maintaining IE specific CSS selectors: We keep our IE related styling right below the common (standards-based) declarations. BUT, we DON’T use hacks. Underscore hacks, * hacks, and all of those things that we all gave up with the Read the rest…

Posted by Dion Almaer at 6:35 am
20 Comments

++---
2.4 rating from 38 votes

Monday, September 15th, 2008

Tip: Using a background image on an image

Category: CSS, Tip

Pascal Opitz answered the question “Can you set an image background on an image element?” in simple fashion. All you have to do is make sure that the image is display: block and has a padding. He put up a simple demo that uses a div with an image, and he applies backgrounds to both: Read the rest…

Posted by Dion Almaer at 5:23 am
8 Comments

+++--
3.8 rating from 47 votes

Tuesday, September 2nd, 2008

addSizes.js: automatic link file-size generation

Category: JavaScript, jQuery, Tip

Nathalie Downe has taken Simon Willison’s json-head App Engine mini-service and used it to create addSizes.js, a little script that looks for large files linked from a page, and automatically adds their file size to the copy after the link. Once in place, you simple do your usual link, and asynchronously the Web page will Read the rest…

Posted by Dion Almaer at 5:07 am
8 Comments

++++-
4 rating from 21 votes

Wednesday, August 27th, 2008

Using CSS to do the print watermark technique

Category: CSS, Tip

Andy Pemberton has put together a simple solution to get the watermark technique to work nicely with print CSS. Check out the sample and pull up a print preview. He details the good, bad, and ugly: The Good The first step to getting a printable watermark is to use an inline tag, rather than background-images. Read the rest…

Posted by Dion Almaer at 2:14 am
Comment here

++---
2.7 rating from 24 votes

Monday, August 18th, 2008

A simple solution to the “other” problem with select boxes

Category: Examples, JavaScript, jQuery, Tip

Jeffrey Olchovy has posted a simple tutorial on using jQuery to solve a “select-to-input toggle” that shows and hides a text field when you select “Other”. It overloads the same form name, so the server side gets just one value, and doesn’t know or care if it was in the drop down or typed in. Read the rest…

Posted by Dion Almaer at 5:51 am
10 Comments

+++--
3.3 rating from 47 votes

Getting a JavaScript stracktrace in any browser

Category: JavaScript, Tip

Eric Wendelin has posted on getting a JavaScript stack trace no matter that the browser. With Firebug you can call console.trace() but what about the rest? Luke Smith took Eric’s work and added to it, ending up with: (function () { YOUR_NAMESPACE.getStackTrace = (function () { var mode; try {(0)()} catch (e) { mode = Read the rest…

Posted by Dion Almaer at 5:43 am
1 Comment

++++-
4.1 rating from 22 votes

Wednesday, August 6th, 2008

Introducing HTML into an iframe and getting it back

Category: HTML, JavaScript, Tip

Michael Mahemof is working a lot with TiddlyWiki and posted on how the project injects HTML into an iframe, and then get them out later. This enables you to use the browser parser to do its thing: < View plain text > javascript // put it in var doc = iframe.document; if (iframe.contentDocument)   doc Read the rest…

Posted by Dion Almaer at 11:07 am
7 Comments

+++--
3 rating from 44 votes

Friday, July 18th, 2008

Semantic Constructors

Category: Prototype, Tip

< View plain text > javascript Class.create = (function(original) {   var fn = function() {     var result = original.apply(null, arguments);     result.toString = function() { return result.prototype.initialize.toString() };     return result;   };   fn.toString = function(){ return original.toString() };   return fn; })(Class.create); This monkey patch by kangax allows Read the rest…

Posted by Dion Almaer at 5:37 am
Comment here

+++--
3.5 rating from 21 votes

Friday, July 11th, 2008

A safety fence for your property lookups

Category: JavaScript, Tip

Michal Till posted a little JavaScript tip that he uses to create a safety fence for accessing properties: As we all know, null not only does not have any properties, but their existence also can not be tested. So null.property retuns error instead of undefined. You can end up with something like this: < View Read the rest…

Posted by Dion Almaer at 6:39 am
12 Comments

+++--
3 rating from 32 votes

Friday, June 27th, 2008

CSS General Sibling Combinator in action

Category: CSS, Tip

< View plain text > css #indirect-example1 h4 + p, #indirect-example2 h4 ~ p {     background-color: #CCC; color: #F00; } Eric Wendelin has taken a look at the general sibling combinator shown above as: < View plain text > css h4 ~ p {} This would affect each <p> element that is a Read the rest…

Posted by Dion Almaer at 8:20 am
6 Comments

+++--
3.6 rating from 26 votes

Monday, June 2nd, 2008

Flipping out over Safari

Category: CSS, Tip

Thomas Fuchs is having some fun at RailsConf, and sent out a fun use of the new WebKit transformations using the medium of the bookmarklet: < View plain text > javascript javascript:document.body.style[‘-webkit-transform’]=’rotate(180deg)’;   javascript:document.body.style[‘-webkit-transform’]=’rotate(‘+prompt(‘degrees’,180)+’deg)’; Use this bookmarklet (drag to bookmarks bar): flip or this one if you want a prompt: flip2.

Posted by Dion Almaer at 5:01 am
4 Comments

+++--
3.4 rating from 30 votes

Friday, May 30th, 2008

Remove Nested Patterns with One Line of JavaScript

Category: JavaScript, Tip

Steven Levithan has been flagrant by creating a simple way to remove nested patterns with a while loop and a replace: < View plain text > javascript var str = "abc&lt;1&lt;2<>3>4>def";   while (str != (str = str.replace(/< [^<>]*>/g, "")));   // str -> "abcdef" Notice that the regex in this one-liner doesn’t try to Read the rest…

Posted by Dion Almaer at 8:36 am
8 Comments

++++-
4.2 rating from 27 votes

Wednesday, May 14th, 2008

Polling for loaded content instead of simple setTimeout

Category: JavaScript, Library, Tip

Have you ever found yourself doing little setTimeout calls as you wait for content to be loaded asynchronously? It seems to happen pretty frequently, and Paul Irish has created a simple utility to help run code when the library you need is loaded. With his executeWhenLoaded(function, objects, that, must, be, present) you can do something Read the rest…

Posted by Dion Almaer at 8:58 am
7 Comments

++---
2.8 rating from 20 votes