Dynamic Element help
Dynamic Element help
I am a total newbe here, so I apologize in advance.
I have a sliding catalog which uses dynamically generated page numbers to scroll through the pages.
Each page utilizes an image map to hover over the item to view more info.
All is working well, with one exception.
When I click from the cover to page 1, onclick: I'm appending page 1s <li> into the <ul> and am generating the <map><area...></area></map> (via Ajax) and placing via .innerHTML. The hover effect works as expected.
When I continue to step through each page, all works as it should. It's only when I go back, the hover effect does not work.
Any ideas are welcome.
Here's my code:
$(document).ready(function(){
$('#areaMap [title]').live('mouseover mouseout', function(event){
event.preventDefault();
if(event.type=='mouseover'){
//alert("you moused over me!");
var id=$(this).attr("id");
var tip_id=id.replace("area", "tip");
document.getElementById("catalog-info-containter").innerHTML=$('#'+tip_id).html();
}else{
//alert("you mousedout!");
document.getElementById("catalog-info-containter").innerHTML="";
}
});
$("#slider").easySlider({
auto: false,
continuous: true,
numeric: true
});
});
AND THE SLIDER CODE
$(document.createElement("li"))
.attr('id',options.numericId + (i+1))
.html('<a rel='+ i +' href=\"javascript:void(0);\">'+ page +'</a>')
.appendTo($("#"+ options.numericId))
.click(function(){
var mapName = $(this).text();
animate($("a",$(this)).attr('rel'),true);
/*-----------------------------
Time to add new LIST elements
as they are called
-----------------------------*/
var coverCount=$('#mylist #cover').length;
//alert("Cover count:"+coverCount);
if(coverCount>1){
for(var i=2; i<coverCount; i++){
$('#mylist li:last').remove();
}
}
//if($(this).text()=='cover'){ $('#mylist li:last').remove(); }
var currentPage=parseInt(document.getElementById("pageNumber").innerHTML);
var nextPage=$(this).text();
var pageCount=nextPage-currentPage;
var thisPage=$(this).text();
var newPage;
//alert($('#'+thisPage).length);
//First check to see if the LI already exits
if($('#'+thisPage).length==0){
if((pageCount)>1){
for(var i=1; i<=pageCount; i++){
newPage=currentPage+i;
$('#mylist').append('<li style="float: left;"><img id="'+newPage+'" src="images/pages/'+newPage+'.jpg" width="550" height="425" border="0" usemap="#map_'+newPage+'" alt="Flora Bella Catalog" /></li>\n');
}
}else{
$('#mylist').append('<li style="float: left;"><img id="'+$(this).text()+'" src="images/pages/'+$(this).text()+'.jpg" width="550" height="425" border="0" usemap="#map_'+$(this).text()+'" alt="Flora Bella Catalog" /></li>\n');
}
}
document.getElementById("pageNumber").innerHTML=$(this).text();
/*-----------------------------
Time to add Map image for
the new item that is called
-----------------------------*/
jQuery.ajax({
type: "POST",
url: "xml_data.php",
data: 'page='+$(this).text(),
cache: false,
success: function(theXML){
var map = document.getElementById("areaMap");
var info = document.getElementById("info");
var data="";
var area="";
var tip="";
area += '<map id="map" name="map_'+mapName+'">';
$(theXML).find('catalog-item').each(function(){
var name = $(this).find("name").text();
var description = $(this).find("description").text();
var item = $(this).find("item").text();
var page = $(this).find("page").text();
var colors = $(this).find("colors").text();
var price = $(this).find("price").text();
var coords = $(this).find("coords").text();
var newItem = page + item;
area += '<area href="#" id="area_'+item+'" shape="poly" coords="'+coords+'" alt="Flora Bella '+name+'" title="'+name+'">\n';
tip += '<div id="tip_'+item+'" class="info" style="visibility: hidden;" title="'+name+'">';
tip += '<div class="pt">';
tip += '<span id="name">'+name+' - </span>';
tip += '<span id="description">'+description+'</span>';
tip += '<span id="colors">Colors: '+colors+'</span>';
tip += '<span id="price">Price: $'+price+'</span>';
tip += '</div></div>\n';
});
area+="</map>";
//data=area;
map.innerHTML=area;
info.innerHTML=tip;
},
error: function(){
alert("There was an ERROR in the XML call!");
}
});
//-- end of AJAX call --
});
};
AND THE HTML CODE
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="580" height="" align="left" valign="top">
<div class="mainTextContent">
<img src="<?php echo $base_url; ?>images/catalog-header.jpg" width="77" height="12" alt="Flora Bella Catalog" />
<!-- Begin SlideShow -->
<div id="slider">
<ul id="mylist">
<li><img id="cover" src="<?php echo $base_url; ?>catalog/pages/cover.jpg" width="550" height="425" border="0" alt="Flora Bella Catalog" /></li>
</ul>
<div id="areaMap"></div>
</div>
<div id="catalog-info-containter" class="catalog-info-containter" ></div>
<div id="info" class="info" ></div>
<div class="clearfix"></div>
<div id="pageNumber" >0</div>
</div>
</td>
</tr>
</table>