Show different image depending on what browser being used?

Please post all questions on Help+Manual 8 here

Moderators: Alexander Halser, Tim Green

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

Show different image depending on what browser being used?

Unread post by Darren Rose » Fri Jun 12, 2020 2:24 pm

Is it at all possible - using javascript or similar - to be able to choose what image is shown dependent on what browser my help is being viewed in?

Or if not possible to show different image, perhaps to be able to show a message like "You are using Chrome" etc?

Thanks

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

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

Unread post by Simon_Dismore » Fri Jun 12, 2020 2:53 pm

Bowser might do it? I've not tried that personally but its GitHub repo has 4.4k stars and 460 forks, so probably isn't too shabby.

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

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

Unread post by Darren Rose » Mon Jun 15, 2020 12:02 pm

Thanks Simon - will take a look

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

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

Unread post by Darren Rose » Mon Jun 15, 2020 5:22 pm

I am no expert on JS but this looks like it might do as I need, as it certainly seems quite accurate in detecting browser, and can even determine between original Edge and the new Chromium Edge if I check engine.name as well

This JS seems to work when testing in an online JS editor e.g. https://js.do/code/455418

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>

So just need to work out how to use it in H&M to then show relevant image depending on browser detected

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

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

Unread post by Simon_Dismore » Mon Jun 15, 2020 9:23 pm

Looks like you have a solution. Would be interesting to hear more about the use case etc :-)

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

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

Unread post by Darren Rose » Mon Jun 15, 2020 9:55 pm

The use case is for several pages on my website with instructions for customers to download an executable file - a lot of my user base are not very tech savvy so rather than lots of different instructions covering different browsers I wanted to only show the browser instructions relevant to the browser they were using e.g. showing where file downloads appear in the browser, whether you click Run, or Open etc etc

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

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

Unread post by Simon_Dismore » Mon Jun 15, 2020 10:02 pm

Darren Rose wrote:
Mon Jun 15, 2020 9:55 pm
The use case is for several pages on my website with instructions for customers to download an executable file - a lot of my user base are not very tech savvy so rather than lots of different instructions covering different browsers I wanted to only show the browser instructions relevant to the browser they were using e.g. showing where file downloads appear in the browser, whether you click Run, or Open etc etc
That makes a lot of sense. Good luck and kind regards.

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

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

Unread post by Darren Rose » Mon Jun 15, 2020 11:44 pm

If anyone can help/advise on the next stage it would be much appreciated

How can I insert this script into a specific point of my page and how do I replace the document.write with code to show specific image?

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

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

Unread post by Simon_Dismore » Tue Jun 16, 2020 11:12 am

Darren Rose wrote:
Mon Jun 15, 2020 11:44 pm
How can I insert this script into a specific point of my page and how do I replace the document.write with code to show specific image?
Quick answer (I'm busy today!) rather than using an image, maybe think about putting the code into the start of a HelpXplain, and have it jump to the relevant instructions for the user's browser/operating system?

If you are sure you want to use an image, how about injecting some CSS so the image gets determined that way? To run it in the <head>, see this example: https://gist.github.com/xero/4678977.

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

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

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

Thanks Simon

Actually I hadn't thought of the idea of using a HelpXplain - that may be a better solution if I can get it to jump to certain part depending on browser

Will perhaps ask more on relevant forum

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

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

Unread post by Darren Rose » Thu Jun 18, 2020 3:53 pm

Discussion continued on forum below as decided using Bowser script with HelpXplain was best solution for me

http://helpman.it-authoring.com/viewtop ... 369216ceb8

Post Reply