Same-window popup div for hotspot links?

Everything related to WebRotate 360 desktop tools and utilities.
jywong
Posts: 29
Joined: Mon Jun 22, 2020 9:12 am
Contact:

Same-window popup div for hotspot links?

Postby jywong » Tue Sep 01, 2020 7:34 am

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
Posts: 1075
Joined: Thu Aug 23, 2012 11:35 am
Location: Pasadena, CA
Contact:

Re: Same-window popup div for hotspot links?

Postby WebSupport » Tue Sep 01, 2020 3:21 pm

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
Posts: 1075
Joined: Thu Aug 23, 2012 11:35 am
Location: Pasadena, CA
Contact:

Re: Same-window popup div for hotspot links?

Postby WebSupport » Tue Sep 01, 2020 3:23 pm

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.

jywong
Posts: 29
Joined: Mon Jun 22, 2020 9:12 am
Contact:

Re: Same-window popup div for hotspot links?

Postby jywong » Wed Sep 16, 2020 3:47 pm

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
Posts: 1075
Joined: Thu Aug 23, 2012 11:35 am
Location: Pasadena, CA
Contact:

Re: Same-window popup div for hotspot links?

Postby WebSupport » Sun Sep 20, 2020 10:27 pm

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: Select all

<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.


Return to “Desktop Software - SpotEditor”

cron