jasperd
Posts: 13
Joined: Mon Apr 18, 2011 8:08 am

Updated content not shown in html expander

Hi all,

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>
Does anyone have an idea how to get the updated messageDiv content into the html expander of Highslide? Thanks in advance!
jasperd
Posts: 13
Joined: Mon Apr 18, 2011 8:08 am

Re: Updated content not shown in html expander

Some more information on the issue and a new test code.

Below are some test instructions to get issue I'm trying to solve:

Use the following code (reminder: set the paths corresponding to your test setup):

Code: Select all

<HTML>
<HEAD>
<link rel="stylesheet" href="highslide/highslide.css" type="text/css" />
<script src="highslide-full.js" type="text/javascript"></script>
<script type="text/javascript">
hs.graphicsDir = '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', objectType: 'ajax', cacheAjax: false  } )">open Highslide HTML Expander</A><BR><BR>

<div id="messageDiv">
This is the original messageDiv content.
</div>
</body>
</html>
Subsequently, perform the following steps:
  • click on the 3 links to change the text in the div element used for the expander
  • open the highslide expander using the link (it will show the text you have changed it to)
  • close the expander
  • change the text using one of the 3 corresponding links. Here it starts to get interesting as for some reason, the div element used for the expander (in the code above it is the div with id "messageDiv") cannot be found anymore:
  • [list]
  • when using IE with JS debugging mode it will give the error: Line: 22 Error: Unable to set value of the property 'innerHTML': object is null or undefined
[*]Open the highslide expander using the link will show the text you have changed it to at bullet 2 instead of the text of the most recent change[/*]
[/list]

Hopefully someone can shine some light on this issue, as I really would like to have this working. Thanks in advance!
jasperd
Posts: 13
Joined: Mon Apr 18, 2011 8:08 am

Re: Updated content not shown in html expander

I managed to create a solution for the issue I was dealing with. Below are the lines of javascript code I used in my sandbox:

Code: Select all

function setExpanderHTML (message) {
	if(!document.getElementById('expanderDiv')) {
		var expDiv = document.createElement('div');
		document.getElementsByTagName('body')[0].appendChild(expDiv);
		expDiv.setAttribute('id', 'expanderDiv');
		expDiv.innerHTML = 'PhotoDiv inner HTML';
	} 
	if(!document.getElementById('expanderDivRef')) {
		var expRef = document.createElement('a');
		document.getElementsByTagName('body')[0].appendChild(expRef);
		expRef.setAttribute('id', 'expanderDivRef');
		expRef.setAttribute("onclick", "return hs.htmlExpand(this, {contentId : 'expanderDiv' , width: '900', height: '450'} )");
		expRef.innerHTML = 'PhotoDivRef inner HTML';
	} 
	expRef = document.getElementById('expanderDivRef');
	hs.htmlExpand(expRef, {contentId : 'expanderDiv' , width: '900', height: '450'} );
	exp = hs.getExpander(expRef);
	exp.content.innerHTML = message;
};
Brindha
Posts: 3
Joined: Sun Aug 02, 2015 1:35 pm

Re: Updated content not shown in html expander

Hi, I'm facing the similar problem now....

I'm using highslide to open a pop-up,

hs.htmlExpand(document.getElementById('divID'),{contentId:'subDivID', objectType: 'Ajax',align: 'center',width:700,height:200, preserveContent: false });

1) When I use preserveContent: false, then in function, I'm getting null for all IDs of document.getElementById('Id'). Why I'm getting null? Why setting preserveContent: false makes DOM elements as null?
Is there any solution to fix this problem.

2) I'm trying to fix the position of the pop-up. I tried, targetX, targetY and align; But it doesn't work; whereas preserveContent: false works; But I'm getting document.getElementById as null.

Any solution please? TIA.

Return to “Highslide JS Usage”