so, i have a simple modal window that is supposed display a javascript gallery composed of dynamic content. I created a simple .php file
test file:
<!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" />
<title>Untitled Document</title>
<link href="css/jqModal.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jqModal.js"></script>
<link rel="stylesheet" href="css/featureCarousel.css" charset="utf-8" />
<script src="js/jquery.featureCarousel.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
//this function should open Modal window and load shirts.php
$('#dialog').jqm({ajax: 'shirts.php'});
});
// once shirts php is loaded and ready, this function should give content is animation and behavior
$('#featureCarousel').ready(function(){
$("#featureCarousel").featureCarousel({
// include options like this:
// (use quotes only for string values, and no trailing comma after last option)
// option: value,
// option: value
});
})
</script>
</head>
<body>
<a href="#" class="jqModal">view</a>
<div class="jqmWindow" id="dialog">
</div>
</body>
</html>
Shirts.php:
<?php require_once("includes/connection.php"); ?>
<?php $query = mysql_query("SELECT * FROM products WHERE category=3"); ?>
<div id="featureCarousel">
<?php
while($product_set = mysql_fetch_assoc($query)) {
print "<div class=\"feature\" \"><a href=\"javascript:void(0)\" id=" . $product_set['products_id'] . "><img alt=\"Image Caption\" src=" . $product_set['products_image'] . "></a><div><p>This is some information that can go along with an image.
Anything can be placed here, including images.</p></div></div>";
}
?>
</div>
css for the modal:
.jqmWindow {
display: none;
position: fixed;
top: 17%;
left: 50%;
margin-left: -300px;
background-color: #EEE;
color: #333;
border: 1px solid black;
padding: 12px;
}
.jqmOverlay { background-color: #000; }
/* Background iframe styling for IE6. Prevents ActiveX bleed-through (<select> form elements, etc.) */
* iframe.jqm {position:absolute;top:0;left:0;z-index:-1;
width: expression(this.parentNode.offsetWidth+'px');
height: expression(this.parentNode.offsetHeight+'px');
}
/* Fixed posistioning emulation for IE6
Star selector used to hide definition from browsers other than IE6
For valid CSS, use a conditional include instead */
* html .jqmWindow {
position: absolute;
top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}
css for the gallery
/********************
* FEATURE CAROUSEL *
********************/
#featureCarousel {
height: 380px;
width:960px;
position:relative;
}
#featureCarousel img {
border:0;
}
#featureCarousel .feature {
position:absolute;
top:-1000px;
left:-1000px;
border:3px solid white;
cursor:pointer;
}
#featureCarousel .feature > div {
position:absolute;
bottom:0px;
left:0px;
background-color:black;
width:100%;
}
#featureCarousel .feature > div p {
margin:0;
padding:5px;
font-weight:bold;
font-size:12px;
color:white;
}
#featureCarousel .blipsContainer {
position:absolute;
color:white;
right:25px;
top:310px;
padding:0;
margin:0;
}
#featureCarousel .blipsContainer .blip {
margin:3px;
height:14px;
width:14px;
color:white;
text-align:center;
font-size:10px;
border:1px dotted black;
}
#featureCarousel .blipsContainer .blipSelected {
color:white;
font-weight:bold;
background-color:black;
}
When i load my index.php, the modal opens up and is blank. So i review the source code; which shows that all the content is generated properly. but for some odd reason it isn't visible.
what am i doing wrong??
