zibizibi
08 Aug 2009, 09: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>
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>