Skip to content

Instantly share code, notes, and snippets.

Joe Critchley joecritch

Block or report user

Report or block joecritch

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@joecritch
joecritch / gist:929191
Created Apr 19, 2011
Part 2 - Options
View gist:929191
// Static constructs
$.motionlab = $.motionlab || {};
$.motionlab.simpleScroll = {
conf: {
auto_slide: 0,
hover_pause: 0,
auto_slide_seconds: 1000
}
}
@joecritch
joecritch / gist:929275
Created Apr 19, 2011
Part 3 - Blueprint
View gist:929275
// Give your class a capitalised camel-cased name. You also need to pass 2 things into it: the actual object that the plugin called, and any options that the user has chosen.
function SimpleScroll(root, conf) {
// At this point, "this" is scoped to the SimpleScroll class - let's capture it before it disappears!
var self = this,
// I chose an 'alias' for the main object at this point to make it more in context. This is optional.
cara = root,
// Add any variables you need to calculate and/or track at this point.
item_width = cara.find('li').eq(0).outerWidth(true);
@joecritch
joecritch / gist:929295
Created Apr 19, 2011
Part 4 - Wrapper
View gist:929295
// '$.fn' is jQuery's prototype. Practically all plugins work this way. It's just that we're not really doing much directly inside of it.
$.fn.simpleScroll = function(conf) {
// If the plugin was to be matched by several elements, this part of the plugin would only run once. But see how we then loop through "this"...?
// (This merges the default options that we namespaced at the beginning, with any new options being passed in by the user)
var conf = $.extend({}, $.motionlab.simpleScroll.conf, conf);
// Okay, now we loop through ALL the matched elements.
return this.each(function() {
View gist:929328
$('.carousel ul').each(function() {
var ul = $(this);
ul.simpleScroll({
auto_slide: 1,
hover_pause: 1
});
});
View gist:929349
$.fn.simpleScroll = function(conf) {
// already constructed --> return API (it shouldn't really be called for a second time.)
var el = this.data("simpleScroll");
if (el) { return el; }
var conf = $.extend({}, $.motionlab.simpleScroll.conf, conf);
return this.each(function() {
View gist:929361
$('.carousel ul').each(function() {
var ul = $(this);
ul.simpleScroll({
auto_slide: 1,
hover_pause: 1
});
// Aha! There's our data object we created inside the plugin. Luckily, this gives us access to everything that SimpleScroll had to offer.
var api = ul.data('simpleScroll');
View gist:929505
// add a "fire" variable, below the self variable, that will cover both the current instance and the root variable.
var self = this,
fire = root.add(self);
/////////////////////////
// then insert calls to the custom functions in all the necessary places, e.g. in the slide function --
$.extend(self, {
@joecritch
joecritch / gist:929515
Created Apr 19, 2011
Example callback
View gist:929515
api.onSlide(function(where) {
alert('You just did some sliding to the ' + where);
});
@joecritch
joecritch / gist:929535
Created Apr 19, 2011
All of the plugin
View gist:929535
(function($) {
// Static constructs
$.motionlab = $.motionlab || {};
$.motionlab.simpleScroll = {
conf: {
auto_slide: 0,
hover_pause: 0,
auto_slide_seconds: 1000
}
View gist:1117951
$('.toggler').change(function() {
var showIt = !$(this).is(':checked');
var panel = $(this).closest('.field').nextAll('.hide');
if(showIt) {
panel.show().closest('fieldset').addClass('featured');
}
else {
panel.hide().closest('fieldset').removeClass('featured');
}
});
You can’t perform that action at this time.