Notes, How Tos, Things To Remember, Things I'll soon forget

Do what needs to be done We recently launched a new home page and the designed used a responsive image slider called Blueberry . Well there were a few issues with navigation and I needed to be able to make sure to have the slider start to slide automatically and then stop while playing a YouTube video. I need to fix the problem with navigation causing a speed up and unreliable timing while showing slides. I extended it to support being stopped and started. Since the project appears to be on hiatus (no changes in a year even though it has a few  github issues ), I forked it on github  to fix the event issue and add the ability to stop/start slider. Blueberry + YouTube sitting in a tree I found it to be a bit of challenge to update the site to support pausing the image slider when the YouTube video that is linked in through iframe started and stop being played. I found to get the correct permissions and callback into the player I needed to use the YouTube iFrame...

5 minute guide to using PubSubJS and Noty A little background, Publish/Subscribe is a design pattern for decoupling components in software (or i guess anywhere in the world). The basic idea is that one thing publishes information to a well known place and another subscribes to it. There is lots of good writing about it out there, check it out on Wikipedia . In my situation we wanted to display page level notifications. I would consider these to be messages that aren't tied to a web widget or element (like a message in a form). Page level notifications can increase the usability of your application (too many or badly placed one can reduce it :) This tutorial will show you a simple way to create a subscriber that publishes messages to the browser using noty . And uses PubSubJS to handle the Publish/Subscribe work. The tools You will need a few things for this tutorial. jQuery PubSubJS noty - jquery plugin Grab them and download, or you can try this shell snippet:...

As i was working on solving some problems with Bootstrap's popovers and our responsive webapp design, I came up w/ this simple snippet to change the location of the popover using placement option using the current window's width. Example of how to set placement using function: $('.show-details').popover({ placement: function(tip, ele) { var width = $(window).width(); return width >= 975 ? 'left' : ( width < 600 ? 'top' : 'right' ); } }); In the long run i think it would make more sense to setup those location options in a map or site wide setting object along the lines of: var superapp = {}; superapp.popover_layouts = { full: { width: 975, pos: 'left'}, mid: { width: 600: pos: 'right'}, micro: { width: 320: pos: 'top' } }; function determine_placement(tip, ele) { var width = $(window).width(); var map = superapp.popover_layouts; .... TBD .... :) } I'm not sure ...

Birth The last few weeks, i've been pushing Bootstrap in various directions. Most of the time, its being hacking around Popovers. Our current design uses Popovers with forms. It provides a very nice balance between in page action and more subtle interruption to viewing the page than a modal. Over the last few weeks, I've found a few quirks with using Popover's trigger action of 'focus'. This works fine with forms but on Chrome and Safari 'focus' events are supported incompletely . In addition to that varied support we have a few other needs that inspired a new Bootstrap extension. BootstrapX - Clickover . Our requirements are: Click button/link/icon to toggle display of popover content Option to click 'away' from popover to close Ability to have 'popover' autoclose after some amount of time Option to have element inside of popover hide it I suspect, in the future, it will need to only auto close when user's mouse...

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

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

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

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