jQuery bxSlider auto slide with swipe event

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

jQuery bxSlider is one of the best jQuery plugins for slider contents.
However, I encountered this.
When you set auto sliding to true (auto: true), the auto-slider stop working after swiping event.
The code says..

“el.stopAuto()” stops the auto-sliding.

Solution

To add startAuto() to “onSlideAfter” is the solution which posted in http://blog.qrious.jp/730.

A param “onSlideLoad” calls setTimeout with no trigger event “null”. Then onSlideBefore clear the timeout.
And onSlideAfter calls “startAuto()” function.
Originally set startAuto() function is called once at the page loading and slide events are triggered every 3000ms (specified in a parameter called “pause”).
Therefore, startAuto() called in “onSlideAfter”(called every 5000ms) is called only when the auto sliding is canceled in swiping event.

jQuery Colorbox multiple inline contents

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

Besides image gallery, there seems to be no way to switch multiple inline contents with jQuery Colorbox plugin.
Here, let me introduce an approach using Underscore.js template function.

[Colorbox]    Colorbox – a jQuery lightbox
[Underscore.js]    Underscore.js

Colorbox multiple inline contens with Underscore.js

Demo -Colorbox multi inline content with Underscore.js

HTML

Set the following elements.

  1. Button triggering the modal container. (“button.trig”)
  2. Modal container element (“div#modal-container > div#modal”)
  3. Template element (“script#modal-template1″ & “script#modal-template2″)
  4. Set JS files (jQuery, colorbox, underscore, and main js)

JS (run.js)

  1. Set event on trigger button opening the modal content.(openFirst)
  2. The modal is from “script#modal-template1″ handled by underscore.
  3. The first content has a button “NEXT” triggering the 2nd content. (openSecond)
  4. The second content has a button “BACK” triggering the 1st content. (openFirst)

CSS (SCSS)

jQuery UI resizable triggers $(window).resize event

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

jQuery UI resizable triggers window resize!!

I got a code which contains both $(element).resizable() and $(windows).resize().

I got an issue that $(window).resize event is fired when you resize $(‘.block’).
This is because JS event bubbling. So prevent it by event.stopPropagation().

Stop event bubbling

The following code prevents the event bubbling which does not fire $(window).resize event.

javaScript detect multiple key press

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

[shift] + [right/left] keys

This is for sliding container which has navigations for sliding.

Clicking $(“.js-navi-right”) or $(“.js-navi-right”) slides a contents to each direction by a certain width, while $(“.js-navi-right-skip”) or $(“.js-navi-left-skip”) does it by wider.

Once [shift] key (keycode = 16) is in keydown, the flag “ctrlKeyFlag” is set to true.
If it is in keyup, the flag is set to false.



jQuery plugin startup

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+