pgGotoURL

[John Robin Dove]

I'm having trouble with a particular URL. Admittedly it's a bit unusual but if you paste it into a browser it always works. Here it is:

Code: Select all

https://www.google.fr/search?hl=fr&site=imghp&tbm=isch&source=hp&biw=1920&bih=950&q=rspb+bird+identifier&oq=RSPB&gs_l=img.1.2.0j0i30k1l9.5630.7320.0.12175.5.5.0.0.0.0.86.301.4.4.0....0...1ac.1.64.img..1.4.300.0.3Fc5TzcFLLc#imgrc=1zKBQ8JMw4xWsM:

Actually there are 2 problems but the first can be overcome easily. If I use "top" instead of "current" the web page is displayed in the top button on the left!? Solution: use "current" instead of "top"!

I cannot display the long URL in the field (lower button on the left) but the short URL is not a problem (lower button on the right). I need to be able to display any valid URL in a field. Can you help please?

I have put a test app here https://www.mediacours.com/tb_examples/long_url and the 9.01 tbk in a zip here: https://www.mediacours.com/tb_examples/long_url.zip

John

[Clifton]

Hi John,
pgGotoURL() essentially creates an iframe inside of the field object to display your contents. It seems that while most urls work fine, Google search prevents such content display because of cross-origin detection on the page.

Check out this thread on using a Google search in an embedded object on your page.
https://stackoverflow.com/questions/8700636/how-to-show-google-com-in-an-iframe

A solution which might work is to use the same url string and specify a named window for the target display. A named window will open a new browser window or tab and display your content in that window. If you specify a size for the window, you will get a popup window, which I think is preferred in this case. Otherwise, a new tab will open. Changing the url and using the same name will refresh the window and bring the window to the foreground and make it active.

I put together a page which demonstrates this:
https://pgsoftwaretools.com/powerpac/assessments/googlesearch/
 

[John Robin Dove]

Thanks very much for all your efforts, Clifton. The named, sized window solution works very well. Unfortunately for me there is a problem with it. I need to make certain objects on the page, a control panel, a notepad and a text display, appear above it. When I display a page in a TB field there is no problem. I simply adjust all the object layers to achieve the desired result. Is it possible to manipulate the layer of a complete window relative to objects in a different window? Not very likely, I think. I may have to just advise users to avoid Google search addresses.

UPDATE:
After some thought I guess the only solution is to redesign the page and abandon the floating palette approach. I will have to make the popup window smaller and put the other objects around it. A bit disappointing after quite a lot of work.

UPDATE:
Now I have a new problem. When you click on the main Window the popup disappears below it. Is there any way to keep the popup focussed?

[John Robin Dove]

Hi Clifton,

I decided to keep things simple and tell users not to use Google searches.

Now I have a problem with another address https://www.rspb.org.uk/birds-and-wildlife/wildlife-guides/bird-a-z/great-tit/ I cannot use pgGotoURL in a TB field to display it. Could it be that this also uses cross domain resources?

UPDATE: I understand now. I am not allowed to display certain sites in an Iframe on my page. https://stackoverflow.com/questions/6663244/cant-show-some-websites-in-iframe-tag This is making life difficult for my project. Is there a way to float my page over another browser tab? I don't think so ...

[Clifton]

The new page you are trying to use seems to have the same cross-origin issues.

However, you can open your popup and size it to an object on the page.
In fact, I'm going to modify pgGotoURL() (PowerPac v15 beta) to allow this ability.

Here is some sample code you can play around with:

var loadWin = function(url, alignToName, refresh) {
   var bds = { align : '', page : '', screen : '', titlebar : ''}, adj = 2, pos;
   if (alignToName) {
      bds.align = tbfunction_pgTBObjGet(alignToName, 'bounds').split(',');
   }
   bds.page = tbfunction_pgTBObjGet('page', 'bounds').split(',');
   bds.screen = [window.screenX, window.screenY, window.outerHeight, window.innerHeight];
   bds.titlebar = bds.screen[2] - bds.screen[3];
   pos = [ bds.align[0]*1 + bds.page[0]*1 + bds.screen[0]-adj, 
           bds.align[1]*1 + bds.page[1]*1 + bds.screen[1] + bds.titlebar-adj*2, 
           bds.align[2], bds.align[3] - Math.round(bds.titlebar/2.65)*2 ];
   /* Next line gives trouble in Chrome if "RefWindow" does not exist.
      Only set refresh to true for 2nd execution.
      This will be addressed in PowerPac v15 beta.
   ***/
   if (refresh) window.open('', 'RefWindow').close();
   tbfunction_pgGotoURL("RefWindow", url, pos[0], pos[1], pos[2], pos[3], "", 
                        "scrollbars=1", true, true);
   return pos; //returns position array for debugging
};
return loadWin('https://www.google.com', 'exec', false); //Chg 'exec' to name of target obj

To run the code you can try it in one of the following ways:

• Developer code page:
  https://pgsoftwaretools.com/powerpac/assessments/exec-js/
• Paste the code into a field named "code" and run it with exeJavascriptDirect().
  Of course you must change the line "return loadWin( . . . );" to reference a named object other than "exec".
• Create the function in an XML file and execute it from there. (Recommended for ease of use and modification.)

Once pgGotoURL() is updated with similar code/features, you will need to download and use the latest PowerPac v15 beta to benefit from it.

To keep your window on top, just call this function from a timer with a fairly loose interval of like 1500ms.

I've experimented with this and it worked pretty good and I think this may be what you are looking for. At least this is something others may find useful as well.
 

[John Robin Dove]

Hi Clifton,
You've been busy again, I see. Your work is greatly appreciated. I too have been busy and have come up with some clunkier solutions.

From my point of view your solution has the same problem as mine. i.e. when you click on another part of the TB window the popup dives underneath.

Here is what I've come up with: https://www.mediacours.com/tb_examples/webtool2

I use pgGotoURL to load the html below.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Popup</title>
  </head>
  <body>
  <button id="sf" onclick="focusPopup()">Focus popup</button>
 
  <script type="text/javascript">
 
  var w =  window.screen.width;
  var h =  window.screen.height;
  var windowRef;
  var q = w / 4;
  w = q * 3;
  var windowSetup = "left=" + q + ",top=0,menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes,width=" + w + ", height=" + h;

  function openPopup(address) {
  windowRef = window.open(address, "Document", windowSetup);
  };                                                                         

  function focusPopup() {
   if (windowRef)   {
      setTimeout(windowRef.focus(), 1);
    }
  };
 
  function setFocus()
   {
    var obj = document.getElementById("sf");
    obj.click();
   };
   
   function closePopup() {
   if (windowRef)   {
     windowRef.close();
    }
   };
   </script>
  </body>
</html>


I use this to create a popup containing the required web page and set its size to 3/4 of the width of the screen and its left position to 1/4 of the size of the screen. Even if the user has maximized the browser the embedded setFocus function allows it to be brought back to the top. Ideally what I would like to do is advise the user not to user the browser maximized and set the width of DHTML window to 1/4 screen size and the height to the height of the browser. I haven't managed to do this. My embedded function openPopup uses window.screen.width and window.screen.height to set the size and position of the popup window but I can't use this in the TB part. I am currently using some code you wrote for me a few years ago to place the TB window on the left: "return [ getViewportWidth(0), getViewportHeight(0) ];" then setPageContentPosition ("@0", "@0", myArray[0], myArray[1]) I don't understand how this viewport business achieves the result it does. I'd be grateful for any enlightenment. Surely it must be possible to resize the width of the TB window to 1/4 of the width of the screen and display it on the lefthand side?

P.S. I've just tested your code in an Android tablet using Chrome and the pop-up gets turned into a new tab. Maybe popup are not possible in this context.

[Clifton]

You might try setting up your course to use a html launch page. The launch page can control the TB window size and position on the screen. The TB window would launch the popup in a separate area so as not to in any way to cover the TB window. A timer from the launch page would ensure the TB window keeps its focus and position and the TB window can use a timer to control the position of the popup.

The only problem might be if the student is using a laptop with limited screen resolution where there is not enough screen space to contain the opened windows. This would probably work great on a 1920 x 1080 screen. This is a pretty common desktop configuration nowadays. Laptops are a mixed bag for screen resolutions.

Worth a try anyway.
 

[John Robin Dove]

Hmm ... What's a launch page?
UPDATE: You mean use my html to create 2 popup windows one of which contains the TB html?

[Clifton]

That is the default setting (for v9.0) when you export your book. Most publishers turn it off, but in your case you might want to use it. The launch page opens in a browser window and the ToolBook course launches in a popup. The launch page becomes the parent application window and owns certain access rights to the TB app window. From your ToolBook app window, you can launch your own popup whose parent is the TB app window. The titlebar is more limited in this configuration, which probably is a good thing for your application. This is basically how LMS applications work. The LMS is the parent window, and the ToolBook course is the child. The LMS, maintains a com link to the ToolBook window using LMS calls. In your case, you can maintain full access using the PowerPac file "PGSD_PowerPac_com_link.js" file.

Once you have your launch page, you will probably have to write some additional functionality into it. For starters, you would need to establish access to the popup using the capabilities in the "PGSD_PowerPac_com_link.js" file. From there, you may find that you can add other useful features to your course by keeping them contained in the launch page. The parent window can detect if the student closes the course prematurely and take action on that basis, etc.

Depending on what you are trying to accomplish, you may be able to achieve your purpose using this configuration.

Note that the export facility of ToolBook allows you to use a completely custom built launch page other than the very simple and basic one it creates. The basic one just gets you started and depending on what you want to do, you build it into your own custom page.
 

[John Robin Dove]

Hi Clifton,

I didn't think this option could be used with my version of Toolbook. I was wrong. However it does require the user to enable popups on the site which could be a problem.

John