Posts

Showing posts with the label html

jQuery placeholder plugin

We have moved to using the jQuery plugin placeholder-enhanced for adding placeholders to browsers that don't support them (i'm looking at you IE9). It seems to work better than the other plugins and libraries out there (we tried placify which had some trouble when pages resized or if forms were hidden in lightboxes). It looks like placify creates a div with text (and class) positioned above the input element but placeholder-enhanced adds a class to input and then sets value to placeholder text. Both have positives and negatives. I can see why there are less positioning issues with placeholder-enhanced since it doesn't have to figure out the current location of the element to position a new div on top of it. But the one thing i found interesting was that for password fields, placeholder-enhanced creates an input on top of the password input. Its a clever idea but i found a bug with IE9 (go figure) that by default password inputs w/out size have a set width. I need t...
Post a Comment
Read more

Recommended way to build URLs in Template Toolkit

On the mailing list, Andy Wardey recommended using the URL plugin as the best way to build URLs in Template Toolkit (TT) . Since this is very helpful but sometimes hard to dig out of the TT documentation, I wanted to make a quick note here. The URL plugin will make sure to properly HTML and URI encode your link(s). Here my quick example In your template: [% USE profile = URL( '/profile', show_picture = 1 ) %] <a href="[% profile( slayer = 'buffy' ) %]">Buffy's Profile</a> <a href="[% profile( vampire = 'spike' ) %]">Spike's Profile</a> This will render validly encoded html like: <a href="/profile?show_picture=1&amp;slayer=buffy">Buffy's Profile</a> <a href="/profile?show_picture=1&amp;vampire=spike">Spike's Profile</a> Notice the & not a '&' which makes the html validation much happier. This is much easier than trying to do it yourse...
Post a Comment
Read more

Quick YUI Panel styling sans Javascript

In doing some application mockups, I found a quick way to skin the YUI's Panel widget without having to create Javascript objects to do it for me. For each panel you need to just add the class yui-panel . Here is a markup example ( ripped out all but the body stuff out): <body class="yui-skin-sam"> <div id="doc2" class="yui-t5"> <div id="hd">Header Stuff</div> <div id="bd"> <div id="yui-main"> <div id="panel1" class="yui-b yui-panel"> <div class="hd">Panel Header</div> <div class="bd">Here is stuff for the body of the panel</div> <div class="ft">Panel Footer</div> </div> <div id="panel2" class="yui-b yui-panel"> <div class=...
4 comments
Read more