Arnude
Posts: 2
Joined: Sat Oct 27, 2007 11:06 am

Mixing Highslide with a select menu

Hello,
This is my first day using Highslide, hats off to its programer!

I would like to mix highslide with an automatic javascript select menu (with no submit button) but I do not know how.

Here is the standard code for the select menu, working fine:

Code: Select all

<form>
<select name="select" onchange="location.href='http://www.mysite.com/'+this.options[this.selectedIndex].value">
<option value="">Select menu</option>
<option value="nameofpage">Choice one</option>
</select>
</form
I managed to open a Highslide Iframe through this select menu with this code:

Code: Select all

<form>
<select name="select" onChange="return hs.htmlExpand(this, { contentId: 'highslide-html', objectType: 'iframe', objectWidth: 700, objectHeight: 900} )" class="highslide">
<option value="">Select menu</option>
 <option value="nameofpage">Choice 1</option>
 </select>
</form>
Unfortunately I don't know how to put in this code the URL which will be used to load a page in the Hishslide Iframe. Currently it loads a blank page.

Thanks in advance for any clue!
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

The src parameter is offered for cases like this.

Code: Select all

<form>
<select name="select" onChange="return hs.htmlExpand(this, { src: 'http://www.mysite.com/'+this.options[this.selectedIndex].value, contentId: 'highslide-html', objectType: 'iframe', objectWidth: 700, objectHeight: 900} )" class="highslide">
<option value="">Select menu</option>
 <option value="nameofpage">Choice 1</option>
 </select>
</form>
Arnude
Posts: 2
Joined: Sat Oct 27, 2007 11:06 am

Thanks Torstein but it doesn't work. Highslide is loading but no page appears inside. I'm exploring the src parameter.
caparuni
Posts: 9
Joined: Thu Jun 26, 2008 9:31 am
Contact: Website Yahoo Messenger

same with me, ive got error msg this.src has no property
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

This code works for me when tested in the example-ajax.html file:

Code: Select all

<form>
	<select name="select" onchange="this.href=this.value;return hs.htmlExpand(this, { objectType: 'ajax', preserveContent: false} )" class="highslide">
		<option value="include-short.htm">Short</option>
		<option value="include-long.htm">Long</option>
	</select>
</form>
caparuni
Posts: 9
Joined: Thu Jun 26, 2008 9:31 am
Contact: Website Yahoo Messenger

eureka...... it works....
long liv' all mighty Torstein...

:D :) :lol: :wink:

Return to “Highslide JS Usage”