I have a div that is loaded dynamically with content from an xml file. I want to put a read-more link in it so I can show the whole the whole content if the user clicks read-more. This works when the content is hard coded into the page, but not when it's dynamically loaded.
I've tried making the read-more link part of the xml content and I've tried hard coding it into the div. Either way, when I click the read-more link, nothing happens. I put an alert() line into the code, and it doesn't fire. So for some reason, the page doesn't ever get to the read-more code.
Can anyone advise me please how to make it work with dynamically loaded content?
html:
<div class="col span_3_of_6 slide_story_text story_container" id="slide_story_text">
</div>
css:
.slide_story_text {
font-family: 'proxima-nova', sans-serif;
font-size: 130%;
color: #999;
line-height: 170%;
position: relative;
padding-left: 20px;
max-height: 290px;
overflow: hidden;
}
.slide_story_text .read-more{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
margin: 0;
padding: 50px 0 0 0;
cursor: pointer;
font-size: 90%;
font-family: 'proxima-nova', sans-serif;
font-weight: bold;
letter-spacing: .05em;
margin-bottom: 0 !important;
z-index: 999;
background-image: linear-gradient(to bottom, transparent, white);
color: #000;
}
jquery:
$.ajax({
type: "GET",
url: "churchdata.xml",
dataType: "xml",
success: function(xml) {
$('.slide_story_text').html( $(item).parent().find("story").text() );
//begin read-more
$(".story_text .read-more").on('click', function() {
totalHeight = 0;
$el = $(this);
$p = $el.parent();
//$up = $p.parent();
$up = $('#slide_story_text');
$ps = $up.find("p:not('.read-more')");
// measure how tall inside should be by adding together heights of all inside paragraphs (except read-more paragraph)
$ps.each(function() {
totalHeight += $(this).outerHeight() + 15;
});
$up
.css({
// Set height to prevent instant jumpdown when max height is removed
"height": $up.height()
//"max-height": 'none'
})
.animate({
"height": totalHeight
});
$('.story_text').css({'max-height':'none'});
// fade out read-more
$('.read-more').fadeOut();
// prevent jump-down
return false;
});
//end read-more
}
});
xml:
<churches>
<church>
<story><![CDATA[<p>Fusce placerat neque id arcu rhoncus, non aliquet elit sollicitudin. Duis interdum, enim vel laoreet interdum, leo dolor euismod justo, non ultrices ex ipsum elementum massa. Maecenas dictum sapien eu lectus malesuada, in dictum ipsum varius. Vivamus eleifend lacus risus, ut finibus ligula tempus ac. Etiam a quam sed est cursus luctus. Praesent cursus purus quis mollis tincidunt. Vivamus placerat at ex nec volutpat. Vestibulum erat tortor, tristique non ultricies ut, accumsan id lacus. Mauris tincidunt viverra sagittis. Donec finibus, sapien vitae dictum mattis, elit lectus ultrices risus, vitae porta magna ipsum quis orci. Nunc nec pharetra nunc. Ut eu magna sed urna viverra vulputate.</p>
<p>Aliquam a viverra arcu, eget sollicitudin nibh. Integer vitae libero vel diam fringilla bibendum sed in sem. Sed lobortis commodo ipsum, quis fringilla dui viverra ac. Vivamus at diam libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus euismod vel nunc a pellentesque. Phasellus quis imperdiet leo. Ut porta ultricies justo, eget ultrices tortor sodales a. Mauris mattis blandit rhoncus. Morbi nec laoreet eros. Aliquam erat volutpat. Ut sed risus dignissim, vestibulum ex quis, euismod tortor. Curabitur mattis consequat sapien, vulputate pellentesque lectus. Donec efficitur sapien vel justo interdum accumsan. Praesent facilisis fermentum dolor.</p>
<p>Curabitur laoreet, nisl pellentesque molestie dictum, metus est tempus ante, congue tincidunt libero lectus vitae diam. Nulla tempus neque urna, vel pharetra lacus convallis eu. Donec at aliquam orci. Ut euismod tellus nec lacus accumsan semper. Nulla ut ex vitae ex congue maximus. Morbi eu diam et mauris efficitur eleifend quis ac dolor. Sed dapibus porttitor porta. Pellentesque sollicitudin tempor odio, vel condimentum augue feugiat eget. Mauris nec vestibulum massa. Curabitur sed turpis id ipsum blandit efficitur. Cras at viverra tellus, ut condimentum libero.</p>
<p class="read-more">READ MORE</p>
<p>Nunc augue odio, molestie at turpis nec, blandit placerat lorem. Donec nec arcu quis dui tristique sodales ac ut quam. Pellentesque neque purus, volutpat sed arcu vitae, mollis sollicitudin dolor. Aenean dapibus laoreet tellus eu dignissim. Nam interdum ultricies mi. Sed vitae risus urna. Duis iaculis, dolor eget ultricies rhoncus, velit risus finibus purus, nec maximus metus mi ut tellus. Duis suscipit sapien quis lacus elementum efficitur. Aenean elementum auctor ante, eget vestibulum lacus. Mauris mauris turpis, tempor vel odio vitae, iaculis volutpat mi. Quisque sit amet tempor libero, sit amet varius augue.</p>
<p>Vestibulum feugiat eros massa, pretium porta mauris bibendum in. Praesent suscipit felis vel erat convallis posuere. Morbi tempor tristique auctor. Nam vestibulum velit vitae magna semper aliquet. Aenean aliquam magna erat, vel lacinia mauris pretium in. Maecenas aliquam tortor tortor, non mollis enim lacinia et. Aenean hendrerit nisi eros, sed tempus felis consectetur quis. Cras aliquet dignissim eros sed ornare. Etiam cursus pellentesque lorem ac ultrices. Morbi feugiat at diam id pellentesque. Pellentesque at vehicula eros, a fermentum ex.</p>
<p>Nullam interdum libero risus, eget ultricies velit dapibus at. Sed lorem arcu, bibendum finibus dui tristique, mattis porttitor dui. Vivamus malesuada tellus magna, a mollis velit mollis eu. Curabitur commodo vehicula lectus id dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In interdum nec lorem nec imperdiet. Curabitur sit amet semper ipsum. Proin sagittis vitae augue sodales egestas. Etiam auctor quam diam, quis viverra tortor varius id. Nunc dapibus pharetra mauris. Phasellus et tortor sapien. Quisque placerat aliquet tellus, nec congue risus commodo vitae.</p>
<p>Vestibulum vulputate, ipsum non lacinia laoreet, urna magna volutpat lectus, non aliquet nunc mauris at purus. Vestibulum at tempor quam. Sed suscipit porttitor auctor. Nullam in elit euismod, euismod lectus ut, varius magna. Aenean vel justo elit. Pellentesque id gravida nisi. Cras accumsan interdum felis sit amet facilisis.</p>]]></story>
</church>
</churches>
