Same-window popup div for hotspot links?

J

jywong

New member
I'm thinking surely someone has asked this before but I could not find it searching.

I was wondering if it was possible to set the target of a hotspot click to a show/hidable div within the same window? My clients do not want a new browser window to open and they don't want the current window replaced.

I saw there was the ability to add a javascript call. I am thinking something like

<div id="wr360popup"></div>
<script>function showwr360popup(aTargetURL) {
closebuttonhtml = "<div onclick='$(this).parent().hide()'> X </div>";
$('wr360popup').html(closebuttonhtml + aTargetURL);
$('wr360popup').show();
}
</script>

The problem is I don't think this will work if there are multiple spins on a page. Which leads me to... What are the chances something like this could be built in?
 
WebSupport

WebSupport

Active member
Do you control the naming of the web pages in your aTargetURL? As you can have your hotspots named such that you can construct the URL names as needed in hotspot's JavaScript action callback that viewer calls on hotspot activation via hotspot info you receive in the callback.
 
WebSupport

WebSupport

Active member
Alternatively you can use viewer's API to intercept hotspot activation events and use the hotspot info you receive in there as needed e.g using the URL of the hyperlink action you can extract from there.
 
J

jywong

New member
yes- in the function above, aTargetURL referred to the URL you type in when there is a URL action. However I see now that if you choose javascript, you get a hotspot object as a parameter. Can you share the class definition of the hotspot object?

I want to do something like: (please excuse the following, my programming skills are quite rusty)

function customDivPopup(aHotspotObject) {
$(this).parent.append("<div id='wr360popup'></div>"); // on click of the hotspot, create a div on the fly at the same document level
$('#wr360popup').html(aHotspotObject.TargetURL); // set the html content of that div equal to the target url of the hotspot object
$('#wr360popup').show(); // show the new div
}

Again, the purpose is to open the target URL within the confines of the current window, and not having a new window or tab pop open.
 
WebSupport

WebSupport

Active member
The problems is that it's either javascript callback or the hyperlink URL that SpotEditor will spit out to the xml file. So it's not easy to do this exactly like you envision (i.e passing a complete URL to the callback). But you could do something link this:

Code: 
<head>

<style>
iframe.popup {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	border: none;
}
</style>

<script>
	// test is a callback function you enter as javascript action on the Hotspot form in SpotEditor.
	function test(hotspot) {
		// hotspot.id is a name you give the hotspot in SpotEditor
		jQuery('.popup').attr('src', 'https://my-site.com/pages/' + hotspot.id + '.html').show();
	}
</script>
</head>

<body>
....
<iframe src="" class="popup">
</iframe>
....
</body>

PS: you may need to actually wrap the iFrame into some div (and use the iFrame styles there instead) so you can show some close button to allow user to close the iFrame popup.
 
You must log in or register to reply here.
Top