Hi im really sorry about the vagueness in this question but here it goes
I work for a large media company and we use hype to build interactive guides for our agents on the phones to walk through technical support processes these are simple builds that have a next and previous button that continue a timeline and continue timeline in reverse each second has a pause timeline action and a new image is hidden / shown theres also javascript that replaces text in a text box, there is a new javascript function for each step / second and these javascript functions are either called in via timeline action or button press which jumps to time in timeline.
all the styling is controlled by basic css and theres nothing that should cause an issue (no browser conflicts in app)
once exported this build works perfectly in EDGE, Chrome, Safari and Firefox as soon as we iFrame it into our tool which the agents use we are loosing onclick events of one of the buttons that controls the timeline, the breadcrum system works which basically jumps to time in timeline and queues up the relevant javascript but the buttons that move forward and backwards on the timeline loose the plot basically the text on the button ontop is clickable and works but the button itself doesnt and the other button doesnt work however if I put the non working button ontop of the other button that one will work and the other one will stop working.
the dev team of the tool we use are pretty useless and havent got a clue what browser version they are using (we suspect it is IE11) Ive tried adding active X meta compatibility in the head and tried stripping back the build as much as possible and removing preload to no avail, does any one have any ideas how I can get this build to work
This could be a number of things
Like when in the iframe the elements are slightly changing position and covering other event areas. But to really get a handle on what is going on are you able to post an example project.
Plus an example of how you are iframing in a parent doc
It's tough to say what might be causing this, but one thing that may help is using something like https://browser-update.org/ to encourage users to update their browsers. This can be configured to only show for really out of date browsers and may help with identifying the problem.
I would also check the box that says "Notify all browser versions with severe security issues". This would produce the following <head> HTML code snippet you could use:
<script>
var $buoop = {required:{e:-4,f:-3,o:-3,s:-1,c:-3},insecure:true,unsupported:true,api:2022.10 };
function $buo_f(){
var e = document.createElement("script");
e.src = "//browser-update.org/update.min.js";
document.body.appendChild(e);
};
try {document.addEventListener("DOMContentLoaded", $buo_f,false)}
catch(e){window.attachEvent("onload", $buo_f)}
</script>
It might also be caused by your custom code. Are you scoping things correctly and also are you assigning click handler by yourself or are you relying on Hype todo it? IE11 is pretty much history and not even supported by Microsoft …
Hi all thank you already for your input ive hosted a template of the build externally so you guys can take a look I know IE11 is dead on its feet and its not something we choose unfortunately its being used as an internal browser in a corporate build that combines multiple systems and is only used to access secured intranet pages (this build was being used perfectly fine on IE11 using a meta tag at the parent level of the iFrame but since migration its just not playing ball
While I had a quick moment , and I know this probably will not solve your issue ( which as mentioned I am not seeing )
I revised your project to simplify the code to a single code function ( probably can be more optimised ) and to fix the double click issue.
removed all the run javascript actions from the timeline.
Removed all the step functions and consolidated into single function named steps().
Given the bread crumbs ids to use in the code.
Given the arrow buttons ids to use in the code
Changed intro() function name to init()
Added the line in the init()
hypeDocument.customData.currentCrumb = 0
The Arrow buttons still control the timeline but also now call steps()
The bread crumbs buttons still control the timeline but now all call the steps()
On Layout load now also calls steps().
(Did not touch the mini custom layout )
The steps() will work out what called it.
Either HypeSceneLoad, bread crumb button or arrow button.
It will then set the hypeDocument.customData.currentCrumb value and use that to switch through the text values.
It will also use hypeDocument.customData.currentCrumb to set the step count text.
There are also greater than and less than limiters to stop the function progressing if the hypeDocument.customData.currentCrumb is less than 1 or greater than 14 ( or what ever great number you need)
Update:
adjusted the timeline to use second intervals rather than fractions of seconds.
And removed the Button/arrows controlling the timeline. That is now done in the code with hypeDocument.goToTimeInTimelineNamed(hypeDocument.customData.currentCrumb, 'crumbs1') as hypeDocument.customData.currentCrumb, now reflects the timeline seconds.
Also slightly changed the limiter code.
it never had a double click issue? and the iframe isnt the issue really as I cant replicated the issue in any browser I have the issue is present when we try to use the build through the agents desktop tool that has a really awful version of IE11 running
unfortunately yours has the same complications as the original build the breadcrums dont respond on the fill only on the outline and the buttons on either side dont work =(
is there anything I can do within Hype to simplify the exported file to make it as basic as possible as Ive created a basic page with similar functions including javascript and css that works in our agents rubbish desktop tool so its got to be something that Hype is including that I dont necessarily need
As I thought. The main reason for offering it was to simplify the code so you did not have a huge number of functions duplicating the same job.
This also makes it easier to edit in future if you have to.
Your project you posted only includes what you put in it.
Which is a css file, images and the hype code files. I cannot really see any of that doing anything it should not be doing.
Are you adding anything else when you make up the one you are using?
Without using hype you mean?
Also:
Does your dev team get any error messages in their console ?
yes sorry should of specified without hype raw code if you like does everything the hype build does just built out of code and it works as it should
dev team are useless we have managed to identify it is a version of IE11 they are running god knows why they would be building a new tool with an out of date browser but ultimately we are getting very little support or help from the dev team
ive updated this link to the version that is working built outside of hype www.adamhow.co.uk/build
is PIE.htc how hype applies rounded edges etc in IE11?
The breadcrum css is not being honoured im getting square boxes where they display round in hype
(circle shapes straight out of the GUI)
Let me see if I can do and example for you to assign the click events. I am only suggesting this since your ones in native html/JS seem to work for you and am trying to find where the issue may lay with IE11.