So I'm trying to create a real simple jquery plugin for sliding screens around in a wizard like format. All this is really doing is changing the CSS left property.
What I want to be able to do is this $("#bigmasterframe").screenWizard(optionsObject); The options object contains things like the size of the frame so it knows how far to slide. The trick is I want to be able to do this: var pageWizard = $("#bigmasterframe").screenWizard(optionsObject); And then I want to be able to say pageWizard.advance() or pageWizard.back(). If someone could point me int the right direction on how to format this type of thing I would be very grateful. I guess I'm missing a concept here somewhere, because I cannot get this to work right. I've tried a million incarnations, but in trying to follow some of the prominent jquery plugin writers, here's what I have currently: ;(function($) { $.fn.screenWizard = function (options) { var defaultOptions = { size : "100", duration : 1000, defaultLeft : 0 }; var settings = $.extend(defaultOptions, options); return this.each(function() { new $.screenWizard(this, settings); }); }; $.screenWizard = function (input, options) { var advance = function (){ current = parseInt($(self).css("left")); $(input).animate({left: ((current + options.size)*-1) + "px"}, duration); } var back = function(){ current = parseInt($(self).css("left")); $(input).animate({left: ((current - options.size)*-1) + "px"}, duration); } var reset = function(){ $(input).animate({left: defaultLeft }, duration); } }; })(jQuery); Best, Bob