Page Slide Plugin links issue
Hi guys :)
Sorry to bother you, but I kinda need some help, because I'm stuck.
I'm trying to use Scott's Page Slider Plugin. But I've stumbled upon a few problems. I did managed to take care of some, but I still have a biggie here,
If you've clicked on "link A" the page slides. But when it is slided, nothing happens when you click again on link A or link B /which is with the same slide-left class/. I need when link A is clicked, when you click on any other link /link B for example/ to open it's content.
It's a really bad usability problem and I hope you'll help me figure it out.
Here is the code:
- (function($){
$.fn.pageSlide = function(options) {
var settings = $.extend({
width: "300px", // Accepts fixed widths
duration: "normal", // Accepts standard jQuery effects speeds (i.e. fast, normal or milliseconds)
direction: "left", // default direction is left.
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.
_identifier: $(this)
}, options);
// these are the minimum css requirements for the pageslide elements introduced in this plugin.
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) {
// Create and prepare elements for pageSlide
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 );
}
// introduce the blanket if modal option is set to true.
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; });
}
// Callback events for window resizing
$(window).resize(function(){
$("#pageslide-body-wrap").width( $("body").width() );
});
};
function _openSlide(elm) {
if($("#pageslide-slide-wrap").width() != 0) return false;
_showBlanket();
settings.start();
// decide on a direction
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();
// restore working order to all anchors
$("#pageslide-slide-wrap a").unbind('click').click(function(elm){
document.location.href = this.href;
});
// add hook for a close button
$(this).find('.pageslide-close').unbind('click').click(function(elm){
_closeSlide(elm);
$(this).find('pageslide-close').unbind('click');
});
settings.complete();
// When openedSlide move the tooltip - check out betterTooltip.js
opn = 0;
});
}
});
});
};
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"};
$("#pageslide-body-wrap").animate(direction, settings.duration);
$("#pageslide-slide-wrap").animate({width: "0"}, settings.duration, function() {
$("#pageslide-content").empty();
// clear bug
$('#pageslide-body-wrap, #pageslide-slide-wrap').css('left','');
$('#pageslide-body-wrap, #pageslide-slide-wrap').css('right','');
_overflowFixRemove();
settings.stop();
settings.complete();
});
// When closeSlide move the tooltip - check out betterTooltip.js
opn = 1;
}
};
// this is used to activate the modal blanket, if the modal setting is defined as true.
function _showBlanket() {
if(settings.modal == true) {
$("#pageslide-blanket").toggle().animate({opacity:'0.8'}, 'fast','linear');
}
};
// this is used to deactivate the modal blanket, if the modal setting is defined as true.
function _hideBlanket(){
$(document).unbind('click');
if (settings.modal == true) {
$("#pageslide-blanket").animate({opacity:'0.0'}, 'fast','linear',function(){
$(this).toggle();
});
}
};
// fixes an annoying horizontal scrollbar.
function _overflowFixAdd(){($.browser.msie) ? $("body, html").css({overflowX:'hidden'}) : $("body").css({overflowX:'hidden'});}
function _overflowFixRemove(){($.browser.msie) ? $("body, html").css({overflowX:''}) : $("body").css({overflowX:''});}
// Initalize pageslide, if it hasn't already been done.
_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);
// NOT PART OF PAGESLIDE - Obfuscate email address
(function($){$.rotate=function(s){return $.rotate13($.rotate5(s));}
$.rotate5=function(s){var b=[],c,i=s.length,a='0'.charCodeAt(),z=a+10;while(i--){c=s.charCodeAt(i);if(c>=a&&c<z){b[i]=String.fromCharCode(((c-a+5)%(10))+a);}
else{b[i]=s.charAt(i);}}
return b.join('');};$.rotate13=function(s){var b=[],c,i=s.length,a='a'.charCodeAt(),z=a+26,A='A'.charCodeAt(),Z=A+26;while(i--){c=s.charCodeAt(i);if(c>=a&&c<z){b[i]=String.fromCharCode(((c-a+13)%(26))+a);}
else if(c>=A&&c<Z){b[i]=String.fromCharCode(((c-A+13)%(26))+A);}
else{b[i]=s.charAt(i);}}
return b.join('');};})(jQuery)
And here is the sample HTML:
- <a href="left01.html" class="item slide-left">link A</a>
- <a href="left02.html" class="item slide-left">link B</a>
I can't figure that one out so I'd really be grateful if someone could help me.
Thanks :)