When cod­ing web pages, a com­mon prob­lem is align­ing (link) text ver­ti­cally, often in rela­tion to an icon. This is eas­ily accom­plished by set­ting height and line-height equal and by adding padding for the icon which is set as the background-image cen­tered vertically.

<style>
a {
  background:url('16x16icon.png') no-repeat left center;
  display:block;
  height:16px;
  line-height:16px;
  padding-left:20px;
}
</style>
<a href="#">Link Text</a>

But what if the link text needs to span more than one line for the given width? What if the icon is taller than the text height?

(more…)

As reported on Almost Done, Apple appar­ently has its own iPad-specific web frame­work, which Jim Hoskins has dubbed AdLib. If you don’t own an iPad, you can still have a look at it by spoof­ing the user-agent cour­tesy of Life­Hacker.

Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10

I tried Fire­fox and Chrome using their respec­tive user-agent switcher plu­g­ins, but didn’t get very far. So go into Safari and select Develop->User Agent->Other… Paste in the above string, click OK, and make sure it’s active. Next nav­i­gate to iPad User Guide and check it out. Here’s hop­ing Apple will be releas­ing it inde­pen­dently or as a part of the SDK. Here’s also hop­ing it’s iPhone-compatible.

My favorite jQuery plu­gin by far has to be the jQuery Cycle Plu­gin. It’s a generic slideshow plu­gin, but it’s ver­sa­tile enough that I’ve used it to build a slider, a port­fo­lio, and just recently, an iPhoto-like image flip­per. This was inspired from the CJ Image Flip­Box. Unfor­tu­nately, the way the plu­gin is designed, you can’t mesh it with Fan­cy­box because the plu­gin cre­ates an anchor and an image which inter­cept the mouseclicks pre­vent­ing the Fan­cy­box from acti­vat­ing. So to get around the prob­lem, I used the Cycle plu­gin to cre­ate my own.

(more…)

Flash assets like an FLV­Play­back skin will typ­i­cally be located in your pub­lic folder. How­ever, accord­ing to http://kb2.adobe.com/cps/608/608abffd.html, “in a load­ing sce­nario, the skin SWF for the FLV­Play­back com­po­nent must be rel­a­tive to the load­ing HTML file con­tain­ing the par­ent SWF on the server, not to the loca­tion of the loaded SWF.” This is bad, since when you load a page, the URL will typ­i­cally be /:controller/:action, which means the FLV­Play­back skin URL will be /:controller/myskin.swf even if your par­ent SWF is in /public. You can ver­ify this in Fire­bug on the Net tab. The prob­lem will man­i­fest itself with a loaded Flash movie with no con­trols. You can fix this by cre­at­ing a rewrite rule in your .htac­cess file.

RewriteRule ^.*/myskin.swf$ /pathto/myskin.swf

Any request end­ing in myskin.swf will be redi­rected to /pathto/myskin.swf under the pub­lic folder.