Hello again
I wondered if it is possible to block the scroll in the Iframe when opening the site, and after clicking “see all” to unlock access to the scroll?
NEW xxx.hype.zip (856.6 KB)
I don’t see an iframe, so judging from your document I assume you mean the group that uses “Auto Scrollbars?”
If so, you can toggle the CSS yourself - use the overflow property with either hidden (no scrolling) or auto (scrollbars if needed).
Let’s say you give the element an ID in the Identity Inspector of “mygroup”. Javascript code for a button toggle would therefore look like:
var mygroupElement = hypeDocument.getElementById("mygroup");
if(mygroupElement.style.overflow == "hidden") {
mygroupElement.style.overflow = "auto";
} else {
mygroupElement.style.overflow = "hidden";
}
thanks for the answer.
I used your code, inserted it into the onload scene and hide the button, as a result, everything does not work as I wanted, can you help?
maybe I assigned an action not there
I’m not exactly sure what behavior you want – can you elaborate on how it is not working as you want and let me know as specifically as possible (including which elements are to be affected)? If they still have generic names feel free to rename and send over a new zipped .hype doc.
please see an example, I tried to show how this should work
I think you’ll want to make the following changes:
- The hide button should have “Play in reverse” checked for the job timeline, so it will then hide
- The hide/see all/Info elements should be on the top, otherwise there will be elements that end up overlapping and interfere with the scroll
- The “Group 1” that you want scrolled should start as “hidden” if you don’t want it to scroll
- The untitledFunction that gets run can have this code added to it so that it will toggle between scrolling and not scrolling:
var elements = document.getElementsByClassName("yourClassName");
for(var i = 0; i < elements.length; i++) {
var mygroupElement = elements[i];
if(mygroupElement.style.overflow == "hidden") {
mygroupElement.style.overflow = "auto";
} else {
mygroupElement.style.overflow = "hidden";
}
}
The code is a bit different from above, as you ended up using a class name instead of a unique element ID.
There may be other changes that you will want to make, but hopefully that starts you in the right direction. Here’s the version I fixed up:
NEW xxx-fixed.hype.zip (868.8 KB)
3 Likes
