Posts

Showing posts with the label javascript

backbonejs' alteration of ajax handler parameters

As I spend time learning  Backbone  I've found some unexpected things (to me probably not to others). Today I found that even though  Backbone  fetch allows you to pass in typical jQuery  ajax  options (like success or error handlers), it will alter what parameters are passed back to those handlers. In jQuery Here is an example of plain jane ajax call (in older style jQuery before renaming of events): In backbone handler In backbone fetch changes up what you receive. It is nicely stated in that section: The  options  hash takes  success  and  error  callbacks which will both be passed  (collection, response, options)  as arguments. I only read that like 3 times before i actually saw that note :) Here is an example of backbone success handler: The one really nice part of the different parameters is that backbone gives you objects instead of raw-ish data. This means if you need to create two dif...

Blueberry (Image slider) and YouTube video working in harmony

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

bootstrap popover responsive layout

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

BootstrapX clickover

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

JavaScript form submission gotcha

The other day I fighting with some bad form data and I wanted to have it checked before the form was submitted (plus on the server side). The form is submitted using JavaScript (or javascript :), using: document.myForm.submit() . I would normally add a handler for this using prototype or YUI events but this is some pretty old (old old) code. So I thought I would use some of that sweet  onsubmit handler magic. Inline of course. Something like: <form action="/someaction" type="POST" name="myForm" onsubmit="return validate_form();"> ... Well to my frustrated amazement, the onsubmit handler didn't work. I thought maybe there was some strange caveat that prevent inline event handlers from working with javascript submitted forms. I changed it to using the function pointer definition: document.myForm.onsubmit = validate_form; Well that didn't work either, after some digging (and cursing), I came across a couple of references th...

YAHOO.util.Event.onDOMReady reminder

The callback argument signature wasn't obvious (or is it wrong?) on the YUI documentation page or very readable at the YUI API site. The callback has the following format: function init_for_ondomready(label, args, obj) { } label - string of "onDOMReady" args - empty array (from source doesn't look like its populated today) obj - object passed to onDOMReady event Example: YAHOO.util.Event.onDOMReady(init_for_ondomready, thingy); label = 'onDOMReady' args = [] obj = thingy Therefore you need to include a holder for the empty args array or process the arguments array manually.

Grabbing inputs from the DOM with my favorite javascript libraries

Grabbing input elements with my favorite JavaScript libraries What Prototype YUI All inputs $$('input') YAHOO.util.Selector.query('input'); All checkboxes $$('input[type=checkbox]') Sweet with .each YAHOO.util.Selector.query('input[type=checkbox]:checked'); All inputs in table with class .data_display $$('.data_display input') YAHOO.util.Selector.query('.data_display input');

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