I'm trying to update the content of a div element and display the updated content using the highslide html expander. Updating the div works works quite well, however with my implementation highslide keeps on showing the original content.
Below is a simplified example of the code I have at the moment:
Code: Select all
<HTML>
<HEAD>
<link rel="stylesheet" href="http://vleuten.universalplayground.net/joomla/FlickrSuiteDemo/plugins/system/flickrsuiteimageviewer/highslide/highslide.css" type="text/css" />
<script src="http://vleuten.universalplayground.net/joomla/FlickrSuiteDemo/plugins/system/flickrsuiteimageviewer/highslide/highslide-full.js" type="text/javascript"></script>
<script type="text/javascript">
hs.graphicsDir = 'http://vleuten.universalplayground.net/joomla/FlickrSuiteDemo/plugins/system/flickrsuiteimageviewer/highslide/graphics/';
hs.showCredits = false;
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.preserveContent = false;
hs.registerOverlay({
html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
position: 'top right',
fade: 2, // fading the semi-transparent overlay looks bad in IE
useOnHtml: true
});
function setExpanderHTML (message) {
divElement = document.getElementById('messageDiv');
divElement.innerHTML = message;
};
</script>
</HEAD>
<body>
<A class="highslide" href="#messageDiv" onclick="setExpanderHTML('hello');">Set text to 'hello'</A><BR>
<A class="highslide" href="#messageDiv" onclick="setExpanderHTML('yeah');">Set text to 'Yeah'</A><BR>
<A class="highslide" href="#messageDiv" onclick="setExpanderHTML('whoohoo');">Set text to 'whoohoo'</A><BR><BR>
<A class="highslide" href="#messageDiv" onclick="return hs.htmlExpand(this, { contentId: 'messageDiv', width: '900', height: '450' } )">open Highslide HTML Expander</A><BR><BR>
<A class="highslide" href="#messageDiv" onclick="setExpanderHTML('hello'); return hs.htmlExpand(this, {width: '900', height: '450', objectType: 'ajax', cacheAjax: false });">Set text to 'hello' and open Highslide HTML Expander</A><BR>
<A class="highslide" href="#messageDiv" onclick="setExpanderHTML('yeah'); return hs.htmlExpand(this, {width: '900', height: '450', objectType: 'ajax', cacheAjax: false });">Set text to 'Yeah' and open Highslide HTML Expander</A><BR>
<A class="highslide" href="#messageDiv" onclick="setExpanderHTML('whoohoo'); return hs.htmlExpand(this, {width: '900', height: '450', objectType: 'ajax', cacheAjax: false });">Set text to 'whoohoo' and open Highslide HTML Expander</A><BR><BR>
<div id="messageDiv">
This is the original messageDiv content.
</div>
</body>
</html>