@@ -13,12 +13,13 @@ <body> <div id="content"> <div id="header"> - Welcome to the jQuery PageSlide Demo, below are some various interactions for you to play with. + <p>Welcome to the jQuery PageSlide Demo, below are some various interactions for you to play with.</p> + <p>To close the slide, click anywhere on the screen. Only one slide can be open at a time.</p> </div> <ul> - <li><a href="_left.html" id="slide-left" rel="pageslide">PageSlide from the left</a></li> - <li><a href="_right.html" id="slide-right" rel="pageslide">PageSlide from the right</a></li> - <li><a href="_modal.html" id="slide-modal" rel="pageslide">PageSlide as a modal element</a></li> + <li><a href="_left.html" id="slide-left">PageSlide from the left</a></li> + <li><a href="_right.html" id="slide-right">PageSlide from the right</a></li> + <li><a href="_modal.html" id="slide-modal">PageSlide as a modal element</a></li> </ul> </div> </body> demo/index.html @@ -8,7 +8,8 @@ modal: false, // if true, the only way to close the pageslide is to define an explicit close class. start: function(){}, // event trigger that fires at the start of every open and close. stop: function(){}, // event trigger that fires at the end of every open and close. - complete: function(){} // event trigger that fires once an open or close has completed. + complete: function(){}, // event trigger that fires once an open or close has completed. + _identifier: $(this) }, options); // these are the minimum css requirements for the pageslide elements introduced in this plugin. @@ -67,13 +68,7 @@ $("body").append( psSlideBlanket ); $("#pageslide-blanket").click(function(){ return false; }); } - - $("#pageslide-slide-wrap").click(function(){ return false; }); - - if (settings.modal != true) { - $(document).unbind('click').click(function(elm) { _closeSlide(elm); return false }); - } - + // Callback events for window resizing $(window).resize(function(){ $("#pageslide-body-wrap").width( $("body").width() ); @@ -81,6 +76,7 @@ }; function _openSlide(elm) { + if($("#pageslide-slide-wrap").width() != 0) return false; _showBlanket(); settings.start(); // decide on a direction @@ -92,7 +88,7 @@ else { direction = {left:"-"+settings.width}; $("#pageslide-slide-wrap").css({right:0}); - }; + } $("#pageslide-slide-wrap").animate({width: settings.width}, settings.duration); $("#pageslide-body-wrap").animate(direction, settings.duration, function() { settings.stop(); @@ -114,7 +110,6 @@ _closeSlide(elm); $(this).find('pageslide-close').unbind('click'); }); - settings.complete(); }); } @@ -122,8 +117,8 @@ }); }; - function _closeSlide(elm) { - if ($(elm)[0].button != 2 && $("#pageslide-slide-wrap").css('width') != "0px") { // if not right click. + function _closeSlide(event) { + if ($(event)[0].button != 2 && $("#pageslide-slide-wrap").css('width') != "0px") { // if not right click. _hideBlanket(); settings.start(); direction = ($("#pageslide-slide-wrap").css("left") != "0px") ? {left: "0"} : {right: "0"}; @@ -165,8 +160,12 @@ return this.each(function(){ $(this).unbind("click").bind("click", function(){ _openSlide(this); + $("#pageslide-slide-wrap").click(function(){ return false; }); + if (settings.modal != true) { + $(document).unbind('click').click(function(evt) { _closeSlide(evt); return false }); + } return false; - }); + }); }); }; jquery.pageslide.js @@ -1 +1 @@ -(function($){$.fn.pageSlide=function(options){var settings=$.extend({width:"300px",duration:"normal",direction:"left",modal:false,start:function(){},stop:function(){},complete:function(){}},options);var pageslide_slide_wrap_css={position:'fixed',width:'0',top:'0',height:'100%',zIndex:'999'};var pageslide_body_wrap_css={position:'relative',zIndex:'0'};var pageslide_blanket_css={position:'absolute',top:'0px',left:'0px',height:'100%',width:'100%',opacity:'0.0',backgroundColor:'black',zIndex:'1',display:'none'};function _initialize(anchor){if($("#pageslide-body-wrap, #pageslide-content, #pageslide-slide-wrap").size()==0){var psBodyWrap=document.createElement("div");$(psBodyWrap).css(pageslide_body_wrap_css);$(psBodyWrap).attr("id","pageslide-body-wrap").width($("body").width());$("body").contents().wrapAll(psBodyWrap);var psSlideContent=document.createElement("div");$(psSlideContent).attr("id","pageslide-content").width(settings.width);var psSlideWrap=document.createElement("div");$(psSlideWrap).css(pageslide_slide_wrap_css);$(psSlideWrap).attr("id","pageslide-slide-wrap").append(psSlideContent);$("body").append(psSlideWrap)}if($("#pageslide-blanket").size()==0&&settings.modal==true){var psSlideBlanket=document.createElement("div");$(psSlideBlanket).css(pageslide_blanket_css);$(psSlideBlanket).attr("id","pageslide-blanket");$("body").append(psSlideBlanket);$("#pageslide-blanket").click(function(){return false})}$("#pageslide-slide-wrap").click(function(){return false});if(settings.modal!=true){$(document).unbind('click').click(function(elm){_closeSlide(elm);return false})}$(window).resize(function(){$("#pageslide-body-wrap").width($("body").width())})};function _openSlide(elm){_showBlanket();settings.start();if(settings.direction=="right"){direction={right:"-"+settings.width};$("#pageslide-slide-wrap").css({left:0});_overflowFixAdd()}else{direction={left:"-"+settings.width};$("#pageslide-slide-wrap").css({right:0})};$("#pageslide-slide-wrap").animate({width:settings.width},settings.duration);$("#pageslide-body-wrap").animate(direction,settings.duration,function(){settings.stop();$.ajax({type:"GET",url:$(elm).attr("href"),success:function(data){$("#pageslide-content").html(data).queue(function(){$(this).dequeue();$("#pageslide-slide-wrap a").unbind('click').click(function(elm){document.location.href=elm.target.href});$(this).find('.pageslide-close').unbind('click').click(function(elm){_closeSlide(elm);$(this).find('pageslide-close').unbind('click')});settings.complete()})}})})};function _closeSlide(elm){if($(elm)[0].button!=2&&$("#pageslide-slide-wrap").css('width')!="0px"){_hideBlanket();settings.start();direction=($("#pageslide-slide-wrap").css("left")!="0px")?{left:"0"}:{right:"0"};$("#pageslide-body-wrap").animate(direction,settings.duration);$("#pageslide-slide-wrap").animate({width:"0"},settings.duration,function(){$("#pageslide-content").empty();$('#pageslide-body-wrap, #pageslide-slide-wrap').css('left','');$('#pageslide-body-wrap, #pageslide-slide-wrap').css('right','');_overflowFixRemove();settings.stop();settings.complete()})}};function _showBlanket(){if(settings.modal==true){$("#pageslide-blanket").toggle().animate({opacity:'0.8'},'fast','linear')}};function _hideBlanket(){if(settings.modal==true){$("#pageslide-blanket").animate({opacity:'0.0'},'fast','linear',function(){$(this).toggle()})}};function _overflowFixAdd(){($.browser.msie)?$("body, html").css({overflowX:'hidden'}):$("body").css({overflowX:'hidden'})}function _overflowFixRemove(){($.browser.msie)?$("body, html").css({overflowX:''}):$("body").css({overflowX:''})}_initialize(this);return this.each(function(){$(this).unbind("click").bind("click",function(){_openSlide(this);return false})})}})(jQuery); \ No newline at end of file +(function($){$.fn.pageSlide=function(options){var settings=$.extend({width:"300px",duration:"normal",direction:"left",modal:false,start:function(){},stop:function(){},complete:function(){},_identifier:$(this)},options);var pageslide_slide_wrap_css={position:'fixed',width:'0',top:'0',height:'100%',zIndex:'999'};var pageslide_body_wrap_css={position:'relative',zIndex:'0'};var pageslide_blanket_css={position:'absolute',top:'0px',left:'0px',height:'100%',width:'100%',opacity:'0.0',backgroundColor:'black',zIndex:'1',display:'none'};function _initialize(anchor){if($("#pageslide-body-wrap, #pageslide-content, #pageslide-slide-wrap").size()==0){var psBodyWrap=document.createElement("div");$(psBodyWrap).css(pageslide_body_wrap_css);$(psBodyWrap).attr("id","pageslide-body-wrap").width($("body").width());$("body").contents().wrapAll(psBodyWrap);var psSlideContent=document.createElement("div");$(psSlideContent).attr("id","pageslide-content").width(settings.width);var psSlideWrap=document.createElement("div");$(psSlideWrap).css(pageslide_slide_wrap_css);$(psSlideWrap).attr("id","pageslide-slide-wrap").append(psSlideContent);$("body").append(psSlideWrap)}if($("#pageslide-blanket").size()==0&&settings.modal==true){var psSlideBlanket=document.createElement("div");$(psSlideBlanket).css(pageslide_blanket_css);$(psSlideBlanket).attr("id","pageslide-blanket");$("body").append(psSlideBlanket);$("#pageslide-blanket").click(function(){return false})}$(window).resize(function(){$("#pageslide-body-wrap").width($("body").width())})};function _openSlide(elm){if($("#pageslide-slide-wrap").width()!=0)return false;_showBlanket();settings.start();if(settings.direction=="right"){direction={right:"-"+settings.width};$("#pageslide-slide-wrap").css({left:0});_overflowFixAdd()}else{direction={left:"-"+settings.width};$("#pageslide-slide-wrap").css({right:0})}$("#pageslide-slide-wrap").animate({width:settings.width},settings.duration);$("#pageslide-body-wrap").animate(direction,settings.duration,function(){settings.stop();$.ajax({type:"GET",url:$(elm).attr("href"),success:function(data){$("#pageslide-content").html(data).queue(function(){$(this).dequeue();$("#pageslide-slide-wrap a").unbind('click').click(function(elm){document.location.href=elm.target.href});$(this).find('.pageslide-close').unbind('click').click(function(elm){_closeSlide(elm);$(this).find('pageslide-close').unbind('click')});settings.complete()})}})})};function _closeSlide(event){if($(event)[0].button!=2&&$("#pageslide-slide-wrap").css('width')!="0px"){_hideBlanket();settings.start();direction=($("#pageslide-slide-wrap").css("left")!="0px")?{left:"0"}:{right:"0"};$("#pageslide-body-wrap").animate(direction,settings.duration);$("#pageslide-slide-wrap").animate({width:"0"},settings.duration,function(){$("#pageslide-content").empty();$('#pageslide-body-wrap, #pageslide-slide-wrap').css('left','');$('#pageslide-body-wrap, #pageslide-slide-wrap').css('right','');_overflowFixRemove();settings.stop();settings.complete()})}};function _showBlanket(){if(settings.modal==true){$("#pageslide-blanket").toggle().animate({opacity:'0.8'},'fast','linear')}};function _hideBlanket(){if(settings.modal==true){$("#pageslide-blanket").animate({opacity:'0.0'},'fast','linear',function(){$(this).toggle()})}};function _overflowFixAdd(){($.browser.msie)?$("body, html").css({overflowX:'hidden'}):$("body").css({overflowX:'hidden'})}function _overflowFixRemove(){($.browser.msie)?$("body, html").css({overflowX:''}):$("body").css({overflowX:''})}_initialize(this);return this.each(function(){$(this).unbind("click").bind("click",function(){_openSlide(this);$("#pageslide-slide-wrap").click(function(){return false});if(settings.modal!=true){$(document).unbind('click').click(function(evt){_closeSlide(evt);return false})}return false})})}})(jQuery); \ No newline at end of file jquery.pageslide.min.js d226aae68da5f73623eb9115dc89a749de22f3a6 Derek Perez derek@caring.com http://github.com/srobbin/jquery-pageslide/commit/d0e4b54803851575e78f2cfd0e211fe2f88841f4 d0e4b54803851575e78f2cfd0e211fe2f88841f4

2009-06-19T10:38:30-07:00

fixes double side bug reported by charliegriefer (issue #17). 796aee4927c8517082baec038116a5653177b4de Derek Perez derek@caring.com