PDA

View Full Version : JQuery Slider + jQuery Popup = Problems


zibizibi
08 Aug 2009, 08:55 AM
Hi there,

I found a simple jQuery Slider script which makes pictures scrolls one by one inside a small container. I wish to integrate this into another jQuery script which displays things in a CSS popup with everything becoming gray behind it.

Both scripts work, but when I put the jQuery Slider inside the jQuery popup, the slider doesn't work in the sense that the elements it is supposed to make scroll are invisible. The reason is that their width and height is 0 (I don't know why!).

DEMO SLIDER ALONE : http://balthy.com/version%20NORMAL.html

DEMO SLIDER INSIDE POPUP : http://balthy.com/version POPUP.html


The code of my page is :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
<script src="easySlider1.7.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
/* jQuery Popup Stuff */
function Show_Popup_tem(action, userid) {
$('#popup').fadeIn(10);
$('#window_tem').fadeIn(10);
}
function Close_Popup_tem() {
$('#popup').fadeOut(100);
$('#window_tem').fadeOut(100);
}

/* easySlider1.7 Stuff */
$(document).ready(function () {
$("#slider").easySlider();
});
</style>

<script language="JavaScript" type="text/javascript">
/* jQuery Popup Stuff */
function Show_Popup_tem(action, userid) {
$('#popup').fadeIn(10);
$('#window_tem').fadeIn(10);
}
function Close_Popup_tem() {
$('#popup').fadeOut(100);
$('#window_tem').fadeOut(100);
}

/* easySlider1.7 Stuff */
$(document).ready(function () {
$("#slider").easySlider();
});
</script>
</head>

<body>
<div id="popup" style="display: none;"></div>
<div id="window_tem" style="display: none;">
<a href="#" onclick="Close_Popup_tem();">close</a>
<div id="slider">
<ul>
<li>content here...</li>
<li>content here...</li>
<li>content here...</li>
</ul>
</div>
</div>
<a href="#" onClick="Show_Popup_tem();" >Popup </a>
</body>
</html>
zibizibi
08 Aug 2009, 08:56 AM
And the code of the Slider JS Script (easyslider.js) is :


(function($) {

$.fn.easySlider = function(options){

// default configuration properties
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next',
controlsShow: true,
controlsBefore: '',
controlsAfter: '',
controlsFade: true,
firstId: 'firstBtn',
firstText: 'First',
firstShow: false,
lastId: 'lastBtn',
lastText: 'Last',
lastShow: false,
vertical: false,
speed: 800,
auto: true,
pause: 2000,
continuous: false,
numeric: false,
numericId: 'controls'
};

var options = $.extend(defaults, options);

this.each(function() {
var obj = $(this);
var s = $("li", obj).length;
var w = $("li", obj).width();
var h = $("li", obj).height();
var clickable = true;
obj.width(w);
obj.height(h);
obj.css("overflow","hidden");
var ts = s-1;
var t = 0;
$("ul", obj).css('width',s*w);

if(options.continuous){
$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
$("ul", obj).append($("ul li:nth-child(2)", obj).clone());
$("ul", obj).css('width',(s+1)*w);
};

if(!options.vertical) $("li", obj).css('float','left');

if(options.controlsShow){
var html = options.controlsBefore;
if(options.numeric){
html += '<ol id="'+ options.numericId +'"></ol>';
} else {
if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';
};

html += options.controlsAfter;
$(obj).after(html);
};

if(options.numeric){
for(var i=0;i<s;i++){
$(document.createElement("li"))
.attr('id',options.numericId + (i+1))
.html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
.appendTo($("#"+ options.numericId))
.click(function(){
animate($("a",$(this)).attr('rel'),true);
});
};
} else {
$("a","#"+options.nextId).click(function(){
animate("next",true);
});
$("a","#"+options.prevId).click(function(){
animate("prev",true);
});
$("a","#"+options.firstId).click(function(){
animate("first",true);
});
$("a","#"+options.lastId).click(function(){
animate("last",true);
});
};

function setCurrent(i){
i = parseInt(i)+1;
$("li", "#" + options.numericId).removeClass("current");
$("li#" + options.numericId + i).addClass("current");
};

function adjust(){
if(t>ts) t=0;
if(t<0) t=ts;
if(!options.vertical) {
$("ul",obj).css("margin-left",(t*w*-1));
} else {
$("ul",obj).css("margin-left",(t*h*-1));
}
clickable = true;
if(options.numeric) setCurrent(t);
};

function animate(dir,clicked){
if (clickable){
clickable = false;
var ot = t;
switch(dir){
case "next":
t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;
break;
case "prev":
t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
break;
case "first":
t = 0;
break;
case "last":
t = ts;
break;
default:
t = dir;
break;
};
var diff = Math.abs(ot-t);
var speed = diff*options.speed;
if(!options.vertical) {
p = (t*w*-1);
$("ul",obj).animate(
{ marginLeft: p },
{ queue:false, duration:speed, complete:adjust }
);
} else {
p = (t*h*-1);
$("ul",obj).animate(
{ marginTop: p },
{ queue:false, duration:speed, complete:adjust }
);
};

if(!options.continuous && options.controlsFade){
if(t==ts){
$("a","#"+options.nextId).hide();
$("a","#"+options.lastId).hide();
} else {
$("a","#"+options.nextId).show();
$("a","#"+options.lastId).show();
};
if(t==0){
$("a","#"+options.prevId).hide();
$("a","#"+options.firstId).hide();
} else {
$("a","#"+options.prevId).show();
$("a","#"+options.firstId).show();
};
};

if(clicked) clearTimeout(timeout);
if(options.auto && dir=="next" && !clicked){;
timeout = setTimeout(function(){
animate("next",false);
},diff*options.speed+options.pause);
};

};

};
// init
var timeout;
if(options.auto){;
timeout = setTimeout(function(){
animate("next",false);
},options.pause);
};

if(options.numeric) setCurrent(0);

if(!options.continuous && options.controlsFade){
$("a","#"+options.prevId).hide();
$("a","#"+options.firstId).hide();
};

});

};

})(jQuery);