I am currently creating a TV Guide using XML/XSLT. I am having trouble with getting the modal to read the values specific to that clicked div. For example.. if i click on a div which contains the title Power Rangers a modal will be displayed which contains all information on this program and the same should happen for all other programs. What is happening is that it just keeps returning the first set of values from the xml. Here is some the code I am using..
<tvguide start="2001-07-05" end="2001-07-05">
<channel>
<channelName>Baby One</channelName>
<programme>
<progID>764</progID>
<channelID>1</channelID>
<title>Gary Lighting</title>
<description> Eric struggles to find out what kind of superhero he should be. Also in HD.</description>
</programme>
<programme>
<progID>765</progID>
<channelID>1</channelID>
<title>Sidekick</title>
<description>Animated series following four friends as they train at the Academy for Aspiring Sidekicks. Eric struggles to find out what kind of superhero he should be. Also in HD.</description>
</programme>
The XSL I am using to try and display the data is:
<div id="toPopup">
<div class="close"></div>
<div id="popup_content"> <!--your content start-->
<xsl:value-of select="/tvguide/channel[1]/programme/title"/>
</div> <!--your content end-->
</div> <!--toPopup end-->
jQuery Code:
jQuery(function($) {
$(".cellProgram").click(function() {
loading(); // loading
setTimeout(function(){ // then show popup, deley in .5 second
loadPopup(); // function show popup
}, 500); // .5 second
return false;
});
/* event for close the popup */
$("div.close").hover(
function() {
$('span.ecs_tooltip').show();
},
function () {
$('span.ecs_tooltip').hide();
}
);
$("div.close").click(function() {
disablePopup(); // function close pop up
});
$(this).keyup(function(event) {
if (event.which == 27) { // 27 is 'Ecs' in the keyboard
disablePopup(); // function close pop up
}
});
$("div#backgroundPopup").click(function() {
disablePopup(); // function close pop up
});
/************** start: functions. **************/
function loading() {
$("div.loader").show();
}
function closeloading() {
$("div.loader").fadeOut('normal');
}
var popupStatus = 0; // set value
function loadPopup() {
if(popupStatus == 0) { // if value is 0, show popup
closeloading(); // fadeout loading
$("#toPopup").fadeIn(0500); // fadein popup div
$("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8
$("#backgroundPopup").fadeIn(0001);
popupStatus = 1; // and set value to 1
}
}
function disablePopup() {
if(popupStatus == 1) { // if value is 1, close popup
$("#toPopup").fadeOut("normal");
$("#backgroundPopup").fadeOut("normal");
popupStatus = 0; // and set value to 0
}
}
/************** end: functions. **************/
}); // jQuery End
Any help would be appreciated. Thanks
No comments:
Post a Comment