Show different image depending on what browser being used?
Moderators: Alexander Halser, Tim Green
- Darren Rose
- Posts: 204
- Joined: Sat Mar 03, 2012 3:01 pm
Show different image depending on what browser being used?
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
Or if not possible to show different image, perhaps to be able to show a message like "You are using Chrome" etc?
Thanks
-
- Posts: 206
- Joined: Thu Jul 13, 2017 2:57 pm
Re: Show different image depending on what browser being used?
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.
- Darren Rose
- Posts: 204
- Joined: Sat Mar 03, 2012 3:01 pm
Re: Show different image depending on what browser being used?
Thanks Simon - will take a look
- Darren Rose
- Posts: 204
- Joined: Sat Mar 03, 2012 3:01 pm
Re: Show different image depending on what browser being used?
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
So just need to work out how to use it in H&M to then show relevant image depending on browser detected
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
-
- Posts: 206
- Joined: Thu Jul 13, 2017 2:57 pm
Re: Show different image depending on what browser being used?
Looks like you have a solution. Would be interesting to hear more about the use case etc
- Darren Rose
- Posts: 204
- Joined: Sat Mar 03, 2012 3:01 pm
Re: Show different image depending on what browser being used?
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
-
- Posts: 206
- Joined: Thu Jul 13, 2017 2:57 pm
Re: Show different image depending on what browser being used?
That makes a lot of sense. Good luck and kind regards.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
- Darren Rose
- Posts: 204
- Joined: Sat Mar 03, 2012 3:01 pm
Re: Show different image depending on what browser being used?
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?
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?
-
- Posts: 206
- Joined: Thu Jul 13, 2017 2:57 pm
Re: Show different image depending on what browser being used?
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?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?
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.
- Darren Rose
- Posts: 204
- Joined: Sat Mar 03, 2012 3:01 pm
Re: Show different image depending on what browser being used?
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
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
- Darren Rose
- Posts: 204
- Joined: Sat Mar 03, 2012 3:01 pm
Re: Show different image depending on what browser being used?
Discussion continued on forum below as decided using Bowser script with HelpXplain was best solution for me
http://helpman.it-authoring.com/viewtop ... 369216ceb8
http://helpman.it-authoring.com/viewtop ... 369216ceb8