Of cause you cannot have an element with the same ID twice, so I do not understand the whole symbol thing.
I have two sets of symbols, what is letters of the alphabet and the other Homes for the letters. But if you use the same letter more than once, it does not work. How would I get round this ??
book1.hype.zip (121.4 KB)
We added the Class Name property which you can use instead of Element IDs inside of symbols. You will just need to iterate through the elements with that class name until you find the one you are looking for or ask the symbol element for the element with the proper class name:
symbolElement.getElementsByClassName(className);If I have “school” as a word, it has two 'o’s in it, and on the next scene it has ‘or’ and each home, and letter, has a class name of ‘letter_O’ and ‘home_O’ how can i make sure it’s going to the right element, on the right scene ?
I have tried a number of ways, as I do not want it to be process hungry, nor a massive number of elements. So symbols are not really reusable as an element, only as a look, or style.
I have been unable to fix this. I have a home box, and a letter symbol, and I ask Jquery to select the closest(element) to where the home class meets the letter innerHTML.
var home = $('.home_' + element.innerHTML).closest(element);
var homeid = home.attr('id');
home = document.getElementById(homeid);
So as I have two homes with the Class=“home_O” it should use the ID of the closest to this letter(element i am dragging), but it will not find the ID of the second home_O, it keeps using ONLY the ID from the first home_O. Even though its no where near the element I am dragging, where as the second home_O, which I want the ID from, is right next to it ?
Starting to get a little annoyed with it to be honest.
To find a div within Hype, with multiple class names as a symbol, with a draggable element I used this:
var home = $(element).closest($('.HYPE_scene')).find($('.home_' + element.innerHTML));
The above uses the element (draggable div) as a reference, finds the closest scene and then looks for the class. If there are multiple class names within the same scene, you could just change the Find, to closest to the element.
In my case once I found the element I then retrieved the auto generated ID and used ‘getElementById’ to access the DOM.
To give you some context, this is how Hype laid out the DOM Structure:
<body>
<!-- copy these lines to your document: -->
<div id="index_hype_container" style="margin: auto; position: relative; width: 750px; height: 400px; overflow: hidden; -webkit-transform-style: flat;" aria-live="polite" hyp_dn="index" aria-hidden="false">
<script type="text/javascript" charset="utf-8" src="index.hyperesources/index_hype_generated_script.js?62731"></script>
<div id="HYPE_persistent_symbols" aria-hidden="true" style="display: none;"></div>
<div class="HYPE_scene" id="hype-scene-OjWA3NVziFMIKuSh" hype_scene_index="0" aria-hidden="true" style="background-color: rgb(255, 255, 255); display: none; overflow: hidden; position: absolute; width: 750px; height: 400px;">
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element home_O" id="hype-obj-wesKKEBfzoAtPRxZ" style="pointer-events: auto;"></div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element letter" id="letter_U" style="pointer-events: auto;">U</div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element" id="hype-obj-waKDfvZQplJiCqeO" style="pointer-events: auto;"></div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element" id="letter_L" style="pointer-events: auto;">L</div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element letter" id="hype-obj-7ollG3cYWGzedsFl" style="pointer-events: auto;"></div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element letter" id="hype-obj-CscCOdYjMl41hKGi" style="pointer-events: auto;">W</div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element" id="hype-obj-3tEr1wAfKsMqpvu2" style="pointer-events: auto;"></div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element" id="letter_D" style="pointer-events: auto;">D</div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element letter" id="hype-obj-QhJNaIx9jqpTUf5q" style="pointer-events: auto;"></div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element letter" id="hype-obj-I80tbqlCSZETYuEZ" style="pointer-events: auto;">O</div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element" id="hype-obj-Iusjm7VpM40usoo0" style="pointer-events: auto;"></div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element home_W" id="hype-obj-nNtpj04d3AH9T6wf" style="pointer-events: auto;"></div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element" id="hype-obj-5YaBwame06tuiSj4" style="pointer-events: auto;"></div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element home_U" id="hype-obj-rFxSKEz5Eukvr4ZJ" style="pointer-events: auto;"></div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element" id="hype-obj-EuujdQE5TaxENR9k" style="pointer-events: auto;"></div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element home_L" id="hype-obj-10ZyCk0M63Fw2slH" style="pointer-events: auto;"></div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element" id="hype-obj-6tUMHuYLAOzlSyxl" style="pointer-events: auto;"></div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element home_D" id="hype-obj-hXSdkjrNFocxYwmB" style="pointer-events: auto;"></div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element" id="hype-obj-2xBwMAvPrZl3dOLx" style="pointer-events: auto;"></div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element" id="hype-obj-eRFLNRAxqYwORHwR" style="pointer-events: auto;">NEXT</div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element" id="hype-obj-nFfnSL7IdjX0axbL" style="pointer-events: auto;">Play Word</div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element" id="hype-obj-HnHXxR6ibWzr00Gt" style="pointer-events: auto;">Attempts</div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element" id="attWould" style="pointer-events: auto;">0</div>
</div>
</div>
<div class="HYPE_scene" id="hype-scene-o2BqYOPBF2QH1PUw" hype_scene_index="1" aria-hidden="false" aria-flowto="hype-obj-UaS00dz2vE3iBhqe" style="background-color: rgb(255, 255, 255); display: block; overflow: hidden; position: absolute; width: 750px; top: 0px; left: 0px; height: 400px; -webkit-transform-origin: 50% 50%; -webkit-transform: translateZ(0px) rotateY(0deg); z-index: 1; opacity: 1;">
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 16;">
<div class="HYPE_element home_O" id="hype-obj-UaS00dz2vE3iBhqe" aria-flowto="hype-obj-qPeLTvGhcjw2VjHy" style="pointer-events: auto; position: absolute; border: 1px solid rgb(216, 221, 228); background-color: rgb(232, 235, 237); overflow: visible; z-index: 16; width: 100px; height: 100px; top: 133px; left: 18px;"></div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 15;">
<div class="HYPE_element" id="hype-obj-2QwLlYCvjNdrWcn8" aria-flowto="hype-obj-SQrNXiMZLdjtTO2x" style="pointer-events: auto; position: absolute; overflow: visible; z-index: 15; width: 90px; height: 93px; top: 249px; left: 24px;">
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 23;">
<div class="HYPE_element letter" id="hype-obj-qPeLTvGhcjw2VjHy" aria-flowto="hype-obj-2QwLlYCvjNdrWcn8" style="pointer-events: auto; position: absolute; z-index: 23; border: 1px solid rgb(216, 221, 228); -webkit-user-select: none; background-color: rgb(232, 235, 237); -webkit-transform-origin: 50% 50%; -webkit-transform: rotateY(0deg); line-height: 95px; font-size: 96px; text-align: center; font-weight: bold; cursor: move; overflow: visible; width: 88px; height: 91px; top: -11px; left: 0px;">O</div>
</div>
</div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 13;">
<div class="HYPE_element" id="hype-obj-SQrNXiMZLdjtTO2x" role="button" aria-flowto="hype-obj-P4Ab8SRhfBmvdNZl" style="pointer-events: auto; position: absolute; z-index: 13; border: 1px solid rgb(160, 160, 160); padding: 6px; opacity: 0; -webkit-user-select: none; background-color: rgb(240, 240, 240); word-wrap: break-word; display: inline; font-size: 13px; text-align: center; color: rgb(0, 0, 0); cursor: pointer; overflow: visible; width: 55px; height: 15px; top: 220px; left: 665px;">NEXT</div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 12;">
<div class="HYPE_element" id="hype-obj-P4Ab8SRhfBmvdNZl" role="button" aria-flowto="hype-obj-Fx4hwSdz6cqIV42C" style="pointer-events: auto; position: absolute; z-index: 12; border: 1px solid rgb(160, 160, 160); padding: 6px; -webkit-user-select: none; background-color: rgb(240, 240, 240); word-wrap: break-word; display: inline; font-size: 13px; text-align: center; color: rgb(0, 0, 0); cursor: pointer; overflow: visible; width: 90px; height: 15px; top: 16px; left: 262px;">Play Word</div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 10;">
<div class="HYPE_element" id="hype-obj-Fx4hwSdz6cqIV42C" aria-flowto="attOr" style="pointer-events: auto; position: absolute; padding: 8px; overflow: visible; word-wrap: break-word; z-index: 10; white-space: nowrap; font-family: Helvetica, Arial, sans-serif; font-size: 12px; display: inline; color: rgb(0, 0, 0); font-weight: bold; top: 0px; left: 0px;">Attempts</div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 9;">
<div class="HYPE_element" id="attOr" style="pointer-events: auto; position: absolute; border: 1px solid rgb(216, 221, 228); line-height: 28px; background-color: rgb(232, 235, 237); overflow: visible; z-index: 9; text-align: center; width: 34px; height: 28px; top: 23px; left: 14px;">0</div>
</div>
</div>
<div class="HYPE_scene" id="hype-scene-2YkRRXgevxQb8pAU" hype_scene_index="2" aria-hidden="true" style="background-color: rgb(255, 255, 255); display: none; overflow: hidden; position: absolute; width: 750px; height: 400px;">
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element" id="hype-obj-te69tWEj33olYKwS" style="pointer-events: auto;">Math is awesome and everyone should know it!</div>
</div>
<div class="HYPE_element_container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
<div class="HYPE_element" id="hype-obj-sYebDLAnAIGcH1H7" style="pointer-events: auto;">This is a story about Math!</div>
</div>
</div>
</div>
<!-- end copy -->It looks like you found a good solution to this. Let me know if you have any unresolved questions.
Another post I wrote may be relevant so I thought I would include a link here. It shows how to get the parent symbol of a given element. Getting the SymbolInstance for an element inside of a symbol