Posts

Bootstrap (by Twitter) loading in page content for Popovers

Bootstrap is a nice get started HTML/CSS/JS interface toolkit. At $work our newest design has been based on it and many of its components. One of the challenges I've run into with the Popover element is generating in attribute content for complex elements. The basic context is: <a id="mypopover" href="#" data-content="stuff to display"> Label </a> The popover gets the body from the data-content attribute. The other option that doesn't appear to be documented is using a function set in the options. $('#mypopover').popover({ // other options here content: function(ele) { return $('#popover-content').html(); } }); This will load the html content from element '#popover-content' when calling 'show' on popover. Note : If trigger element still has a data-content element, even if its empty, the content function will not be called by method. My biggest issue still with Bootstrap tools is t...

Sticky floating headers inside of overflowing divs

In our latest project, we have some pretty sweet designs that have headers that drift down in the page as the user scrolls. But at some point the header will hit the end of the containing div and need to stop. (We have a date header for each transaction. The header stops floating once the next day's header is met in the scroll). We had some luck using jquery plugin based on a good tutorial at Design Woop mixed with this updated Gist But this fell apart when trying to use it with a div that had overflow set to 'auto' or 'scroll'. Since the plugin was calculating location based on document not the div element. Plus the plugin operated on single elements not on jquery objects. CSS Looks like: div.scroll { background-color: #eee; width: 600px; height: 200px; overflow:scroll; } .header { float: left; height: 30px; width: 600px; background-color: black; color: white; font...

New CPAN Module: WWW::DirectAdmin::API

New module for interacting with DirectAdmin 's API: WWW::DirectAdmin::API It currently supports User level functions only. More to come later __END__

Accessing Dancer config settings inside of a template

As I continue to work more and more with Perl Dancer , I run into situations where I need to pull in application configuration data inside of the template system. Dancer provides access to this config in your template system with the template token settings . What caught me the other day was my desire to use it in the same way as the in the app's DSL: setting . This was my misreading of the documentation. To access settings in Template Toolkit , you must grab sub areas as hash keys. Example: (you can see this in the generated new app code) App name: [% settings.appname %] I did have a case where I wanted to pull in a value that was located in the plugin section. The plugin (like some of them) are named with double colons (::) and I couldn't get the hash key lookup to work so I used TT 's item virtual method. This example dumps out RSS version: Using RSS Output Version: [% settings.plugins.item('XML::RSS').output %] Disclaimer: Of course in the case of so...

mac os x xattr and "protected" files (post download)

Mac OS X (10.6 maybe older or new) sets 'quarantine' bit on files and directories downloaded and unarchived (or just downloaded). Its a good idea to warn users what they are opening but this is a pain if the an archive is opened but then you want to move it somewhere else that isn't using typical OS X apps that understand and can clear this perm. (like unix dev location under webserver). I've found this xattr command to work to clear out that problem: xattr -d -r com.apple.quarantine directory It will verbose blurb out stuff but at least it gets rid of it and allows reading of those files by various unix programs (like apache). __END__

jQuery - "getting" chains

I've been using jQuery for quite a while now. I really like its interface, often it feels very Perlish to me. But in the past I've struggle when trying to process or access parts of a single element returned by a selector. Most of the time, I really want to grab it with an array index, e.g. $('.special-sauce')[0].href (just some rough example). But that always felt wrong, against the jQuery way, like i was an outsider. Esp when its so natural do things like: $('a.special-sauce').click( function() { // do something } ); I've tried to use the first() method to get a single element but that returns an array too. But I finally got how to use it today... We are using jQuery Tools for overlays and some other actions. I wanted to retrieve the href attribute for the trigger object (the one that was clicked to open the overlay (aka lightbox). I tried the wrong feeling: this.getTrigger()[0].href and had the moment of clarity that said "that really mean...

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...