StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You can take advantage of the <a href="http://fredhq.com/projects/roundabout#focus" rel="nofollow noreferrer"><code>focus</code></a> event which is fired by the plugin:</p> <pre><code>$('li').bind('focus', function(e){ console.log(e.target); }) </code></pre> <p>Where <code>li</code> are the children nodes of the HTML for the roundabout and <code>e.target</code> will be the DOM element which is currently in focus/front-and-center of the carousel.</p> <h2>Update</h2> <p>I realized that <strong>just</strong> the <code>focus</code> event isn't quite all that you need, since you are looking to do something when the focused element is <strong>clicked</strong>. For this case, you can use jQuery's <a href="http://api.jquery.com/on/" rel="nofollow noreferrer"><code>on()</code></a> method or <a href="http://api.jquery.com/delegate/" rel="nofollow noreferrer"><code>delegate()</code></a> (depending on what version of jQuery you are using)</p> <pre><code>// jQuery >= 1.7 $('ul').on('click', '.roundabout-in-focus', function(e) { console.log(this); }); // jQuery >= 1.4.2 $('ul').delegate('.roundabout-in-focus', 'click', function(e){ console.log(this); }) </code></pre> <p>This uses <a href="https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation">event delegation</a> to attach a listener to the parent <code>ul</code> node which will only fire when the element which was clicked has the class <code>roundabout-in-focus</code> which it looks like the roundabout plugin gives the focused class by default, thought I'm not 100% sure that is guaranteed to always be the case. In the callback, <code>this</code> refers to the <code>li</code> element which was clicked.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload