I have a page with some elements on it (annotation bubbles) and another page that is inheriting the first page as a master page. I want to to have those annotation elements automatically hide when that page is loaded as a master page, leaving just the annotation elements displayed on the child page. I see the “Loaded as master page” event, but am unsure how to target just the elements on that page to hide them without also affecting the elements on the child page. Any ideas?
5 answers
You can consider groupping those elements together, and hide that group in the “Loaded as Master Page” event handler.
In the coming V3.0, you will be able to specify multiple target elements for the action, so you don’t need the grouping then.
This might work, but creates some overhead:
1. We are always adding/removing annotation bubbles from the various pages in the mockup. This would require that we keep them all grouped all the time. This is a decrease in efficiency.
2. The annotation bubbles are spread out all over any given page in a mockup. They need a large z-index so that they float on top of all other elements. But once they are grouped together, that grouping sits on top of everything and it is very hard to select elements under the grouping.
No, I feel the only way we can get the efficiency we are looking for is to be able to iterate through all elements on a page in the “Loaded as Master Page” event, and test the element to see what type it is or if it has a certain attributes (say, IsAnnotation=1). Is there not a way to iterate through all elements on a page??
To give you a better idea of what I am trying to do- I am working around this as follows. First, I created a script files called “overrides.js” and as part of the export I run a command to add the following line to the end of the index.html file:
....
<script src="scripts/elements.js" type="text/javascript"></script>
<script src="scripts/overrides.js" type="text/javascript"></script>
</body>
</html>
The overrides.js file has the following:
function MasterPageLoaded(page) {
var elements = document.querySelectorAll('div[id="' + page + '"] > span[id^="Balloon"]');
for (var i=0; i<elements.length; i++){
changeVisibility(elements[i].id, 0, false);
}
}
function PageLoaded(page) {
var elements = document.querySelectorAll('div[id="' + page + '"] > span[id^="Balloon"]');
for (var i=0; i<elements.length; i++){
changeVisibility(elements[i].id, 1, false);
}
}
function Page1_onPageLoaded() {
PageLoaded("Page1")
}
function Page1_onLoadedAsMaster() {
MasterPageLoaded("Page1")
}
function Page2_onPageLoaded() {
PageLoaded("Page2")
}
function Page2_onLoadedAsMaster() {
MasterPageLoaded("Page2")
}
function Page3_onPageLoaded() {
PageLoaded("Page3")
}
function Page3_onLoadedAsMaster() {
MasterPageLoaded("Page3")
}
.. and so on for as many pages as we could have.
While this works, I don’t like having to do all this outside of ForeUI, Also, I am not sure yet if the export command occurs when the simulation is run from within ForeUI. If not, then that will be a problem.
Thanks Mark, maybe we could continue this discussion after 3.0 is released. I believe 3.0 can provide better solution for this scenario.
This question is now closed