Show different image / animation depending on what browser being used?

HelpXplain is the exciting new animated infographics and screencast tool that integrates with Help+Manual.

Moderators: Alexander Halser, Tim Green

User avatar
Darren Rose
Posts: 180
Joined: Sat Mar 03, 2012 3:01 pm

Show different image / animation depending on what browser being used?

Unread post by Darren Rose » Tue Jun 16, 2020 11:53 am

Hi

I had originally thought of just showing an specific image depending on what browser the viewer is using - using below code to detect the browser.

Code: Select all

<script src="https://cdn.jsdelivr.net/npm/bowser@latest/es5.js"></script>
<script type="text/javascript">
  var result = bowser.getParser(window.navigator.userAgent);
  //document.write("You are using " + result.parsedResult.browser.name + " " + result.parsedResult.engine.name);
  if (result.parsedResult.browser.name === "Microsoft Edge" && result.parsedResult.engine.name === "Blink" ) 
  {
   	document.write("Microsoft Edge (Chromium)");
  }
  else if (result.parsedResult.browser.name === "Microsoft Edge" && result.parsedResult.engine.name === "EdgeHTML" ) 
  {
   	document.write("Microsoft Edge");
  }
  else if (result.parsedResult.browser.name === "Chrome" )
  {
	document.write("Google Chrome");
  } 
  else if (result.parsedResult.browser.name === "Internet Explorer") 
  {
    document.write("Internet Explorer");
  } 
  else if (result.parsedResult.browser.name === "Firefox") 
  {
    document.write("Firefox");
  } 
  else 
  {
   document.write("Other - " + "Browser Name: " + result.parsedResult.browser.name + " - Engine Name: " + result.parsedResult.engine.name);
  }
</script>
But as per a suggestion from Simon perhaps an Xplain would be a better idea.

If so then can I using HelpXplain and the above JS get it to show particular image (or sequence) depending on the IF result in the JS above?

Any pointers appreciated as not spent much time using Xplain yet - although I know I really should be making use of its abilities for things like this.

Thanks

User avatar
Darren Rose
Posts: 180
Joined: Sat Mar 03, 2012 3:01 pm

Re: Show different image / animation depending on what browser being used?

Unread post by Darren Rose » Tue Jun 16, 2020 11:55 am

P.S. Currently on version 1.2 of HelpXplain and my maintenance has expired, but if using Xplain's will allow me to achieve what I need then will be more than happy to renew for another year!!

Edit - just renewed maintenance for another 12 months...
Last edited by Darren Rose on Tue Jun 16, 2020 4:28 pm, edited 2 times in total.

User avatar
Tim Green
Site Admin
Posts: 21740
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Show different image / animation depending on what browser being used?

Unread post by Tim Green » Tue Jun 16, 2020 12:28 pm

Darren Rose wrote:
Tue Jun 16, 2020 11:55 am
P.S. Currently on version 1.2 of HelpXplain and my maintenance has expired, but if using Xplain's will allow me to achieve what I need then will be more than happy to renew for another year!!
You can still use it. All licenses are perpetual; maintenance is only for updates and upgrades. 8)
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.

User avatar
Darren Rose
Posts: 180
Joined: Sat Mar 03, 2012 3:01 pm

Re: Show different image / animation depending on what browser being used?

Unread post by Darren Rose » Tue Jun 16, 2020 12:35 pm

Tim Green wrote:
Tue Jun 16, 2020 12:28 pm
You can still use it. All licenses are perpetual; maintenance is only for updates and upgrades. 8)
Yes I know I can still use it, but new versions bring improvements and fixes - hence making it clear what version I currently have to test on..

Simon_Dismore
Posts: 173
Joined: Thu Jul 13, 2017 2:57 pm

Re: Show different image / animation depending on what browser being used?

Unread post by Simon_Dismore » Tue Jun 16, 2020 1:40 pm

Darren Rose wrote:
Tue Jun 16, 2020 11:53 am
Any pointers appreciated as not spent much time using Xplain yet - although I know I really should be making use of its abilities for things like this.
I imagine it's going to be something like...
  • Have one "router" xplain that detects the browser, which then "chains" to the actual browser-appropriate xplain.
    I suppose all the xplains should have the same dimensions.
  • In the "router" use File > Properties > Custom scripts to run the detection code
  • But I'm not sure what is the preferred way in Javascript to chain to another xplain in the same window — perhaps Tim can confirm that?
Ideally there would be an official model for sharing variables and state between xplains so they could be used as subroutines.

User avatar
Tim Green
Site Admin
Posts: 21740
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Show different image / animation depending on what browser being used?

Unread post by Tim Green » Tue Jun 16, 2020 4:28 pm

Having multiple Xplains for this would seem like overkill for what is basically a simple task. I would use a single Xplain with a single slide for each set of browser instructions.

Reference the Bowser script in the topic that contains the Xplain so that you don't have to attach it to the Xplain itself, which you would have to do manually after publishing the Xplain.

Then make the call to the Bowser function in a script you add to the Xplain in the Custom Code section in File > Properties in HelpXplain, using parent.FunctionName(params) syntax to call up from the Xplain iFrame.

Then use the commands explained in the HelpXplain documentation to jump to the appropriate slide on the basis of the browser found.
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.

User avatar
Darren Rose
Posts: 180
Joined: Sat Mar 03, 2012 3:01 pm

Re: Show different image / animation depending on what browser being used?

Unread post by Darren Rose » Tue Jun 16, 2020 5:22 pm

Okay thank you both

Excuse the questions but this is first time I have really played with HelpXplain to try and do something like this

As I would potentially use the Xplain in other places and not just in my H&M webhelp I wanted to try and keep this "self contained" if possible

So I can see that I can add custom script like below via File > Properties > Custom Scripts

Code: Select all

  var result = bowser.getParser(window.navigator.userAgent);
  //document.write("You are using " + result.parsedResult.browser.name + " " + result.parsedResult.engine.name);
  if (result.parsedResult.browser.name === "Microsoft Edge" && result.parsedResult.engine.name === "Blink" ) 
  {
   	document.write("Microsoft Edge (Chromium)");
  }
  else if (result.parsedResult.browser.name === "Microsoft Edge" && result.parsedResult.engine.name === "EdgeHTML" ) 
  {
   	document.write("Microsoft Edge");
  }
  else if (result.parsedResult.browser.name === "Chrome" )
  {
	document.write("Google Chrome");
  } 
  else if (result.parsedResult.browser.name === "Internet Explorer") 
  {
    document.write("Internet Explorer");
  } 
  else if (result.parsedResult.browser.name === "Firefox") 
  {
    document.write("Firefox");
  } 
  else 
  {
   document.write("Other - " + "Browser Name: " + result.parsedResult.browser.name + " - Engine Name: " + result.parsedResult.engine.name);
  }
And that I then need to manually edit the created index.html to add in below line so it can find bowser

Code: Select all

<script src="https://cdn.jsdelivr.net/npm/bowser@latest/es5.js"type="text/javascript"></script>
That at least proves it is finding script and running it as the document.write line is showing correct browser name

So I can now create multiple slides - one for each browser and add all my images, animations etc

So I then obviously need to replace document.write("Google Chrome") for example with a line of code which means go to slide x - but can't seem to see from quick look in manual what code I use, I can see how you go to next slide or previous slide but how to go to a specific slide? or am I missing anything

Thanks again for reading and trying to help

Simon_Dismore
Posts: 173
Joined: Thu Jul 13, 2017 2:57 pm

Re: Show different image / animation depending on what browser being used?

Unread post by Simon_Dismore » Tue Jun 16, 2020 5:38 pm

Tim Green wrote:
Tue Jun 16, 2020 4:28 pm
Having multiple Xplains for this would seem like overkill for what is basically a simple task. I would use a single Xplain with a single slide for each set of browser instructions.
@Darren, I was thinking you could animate the "how to download" sequence separately for each browser, so instead of having one large xplain to maintain you'd have half a dozen small ones. That might be a simpler model for re-use, because the browser detection script would be wrapped by your "router" xplain, rather than being identified in every help project. So you could change to a different script any time you want, without needing to re-publish all the affected help projects.

You might also find it easier to manage updates to the xplains, because in the "router" you could append an eTag-style parameter to force cache invalidation for specific xplains. So maybe it would be more general purpose than having everything in one file. Of course, that might be overkill to begin with, as Tim says. I suppose it depends on how much you want to future-proof this feature, and whether you might add other explanations ("how to bookmark", "how to clear cookies" etc) in future.

User avatar
Darren Rose
Posts: 180
Joined: Sat Mar 03, 2012 3:01 pm

Re: Show different image / animation depending on what browser being used?

Unread post by Darren Rose » Tue Jun 16, 2020 5:49 pm

@Simon

Yes I can certainly see your logic and going forward (especially if add more explanations for each browser) that might be a good way to go.

Initially I just want to get it working in one single xplain as per my reply earlier, mainly as a way to learn how to do it and to learn more about using HelpXplain in general.

I am quite happy to have to do this task several times until I get it right, as it is going to be a good way for me to learn as I think Xplain's could be something I should be utilizing more in my website rather than current step by step instructions in a table / list etc

User avatar
Darren Rose
Posts: 180
Joined: Sat Mar 03, 2012 3:01 pm

Re: Show different image / animation depending on what browser being used?

Unread post by Darren Rose » Tue Jun 16, 2020 6:02 pm

Okay so after inserting a shape, setting its click action to goto a specific slide, and publishing I could then look at the HTML source to see the code I needed to go to a specific slide was

Code: Select all

xplain.goto(2,true)
N.B. For some reason couldn't find answer to this in manual hence having to look at created HTML to find it out! have I missed something as would be handy to have all available 'commands' for xplain. in the help, and explanation of what the switches such as true means in this case?

So I am making progress....

Simon_Dismore
Posts: 173
Joined: Thu Jul 13, 2017 2:57 pm

Re: Show different image / animation depending on what browser being used?

Unread post by Simon_Dismore » Wed Jun 17, 2020 10:53 pm

Darren Rose wrote:
Tue Jun 16, 2020 6:02 pm
have I missed something as would be handy to have all available 'commands' for xplain. in the help, and explanation of what the switches such as true means in this case?
Mmm, goto() isn't one of the commands documented at https://www.helpandmanual.com/help/gf-d ... ripts.html.

If you can find goalfish.js somewhere (e.g. from an xplain published during the beta before xplain.js was minimised), the return function at the end of the file maps undocumented entry points to the internal functions 8).

But you can't rely on undocumented interfaces, of course :frustration: .

User avatar
Tim Green
Site Admin
Posts: 21740
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Show different image / animation depending on what browser being used?

Unread post by Tim Green » Thu Jun 18, 2020 6:57 am

Hi Darren, Simon,

The only functions missing in the documentation that are relevant (and will soon be added) are:

xplain.goto(index,animate)
index is the slide number, animate is a boolean to enable or disable animation

xplain.prev()
xplain.next()

Go to the next or previous slide, animated

xplain.enableloop(enable)
Enable or disable looping, enable is a boolean

slideDuration()
Returns the duration of the current slide in seconds
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.

Simon_Dismore
Posts: 173
Joined: Thu Jul 13, 2017 2:57 pm

Re: Show different image / animation depending on what browser being used?

Unread post by Simon_Dismore » Thu Jun 18, 2020 9:34 am

Tim Green wrote:
Thu Jun 18, 2020 6:57 am
The only functions missing in the documentation that are relevant (and will soon be added) are:
...
Thanks for that, Tim.

I think there is also an undocumented method for going directly to a specific slide, by appending #n to the URL. Is that officially supported?

If so, it would be useful to expose an option to append #something to a filename or URL in H+M's Insert Media and Insert Picture dialogs. This would also be very helpful to support fragment identifiers in SVG. Ideally the something would allow for text variable substitution. For example, you could set an H+M variable to identify locale, version, branding &c, and use that to determine how an embedded xplain or svg is rendered.

User avatar
Alexander Halser
EC-Software Support
Posts: 3994
Joined: Mon Jun 24, 2002 7:24 pm
Location: Salzburg, Austria
Contact:

Re: Show different image / animation depending on what browser being used?

Unread post by Alexander Halser » Thu Jun 18, 2020 11:33 am

Alexander Halser
Senior Software Architect, EC Software GmbH

User avatar
Darren Rose
Posts: 180
Joined: Sat Mar 03, 2012 3:01 pm

Re: Show different image / animation depending on what browser being used?

Unread post by Darren Rose » Thu Jun 18, 2020 1:34 pm

Thank you all for your input.

I now have a working xplain which meets my needs.

For anyone else reading this trying to achieve similar below is the Javascript entered via File > Properties > Custom Scripts

It detects the current browser using Bowser and then jumps to relevant slide to show my content for that browser.

Code: Select all

</script>
<script src="https://cdn.jsdelivr.net/npm/bowser@latest/es5.js"type="text/javascript"></script>
<script>
	var result = bowser.getParser(window.navigator.userAgent);
  //document.write("You are using " + result.parsedResult.browser.name + " " + result.parsedResult.engine.name);
  if (result.parsedResult.browser.name === "Microsoft Edge" && result.parsedResult.engine.name === "Blink" ) 
  {
   	//document.write("Microsoft Edge (Chromium)");
   	xplain.goto(3,true);
  }
  else if (result.parsedResult.browser.name === "Microsoft Edge" && result.parsedResult.engine.name === "EdgeHTML" ) 
  {
   	//document.write("Microsoft Edge");
   	xplain.goto(2,true);
  }
  else if (result.parsedResult.browser.name === "Chrome" )
  {
	  //document.write("Google Chrome");
	  xplain.goto(1,true);
  } 
  else if (result.parsedResult.browser.name === "Internet Explorer") 
  {
    //document.write("Internet Explorer");
    xplain.goto(4,true);
  } 
  else if (result.parsedResult.browser.name === "Firefox") 
  {
    //document.write("Firefox");
    xplain.goto(5,true);
  } 
  else 
  {
    //document.write("Other - " + "Browser Name: " + result.parsedResult.browser.name + " - Engine Name: " + result.parsedResult.engine.name);
    xplain.goto(6,true);
  }

Post Reply