More Drag-and-Drop layering zIndex questions
January 5, 2018 12:00 AM
I've been working off the code that I found in this thread: http://community.trivantis.com/forums/topic/drag-and-drop-question-layering/
I have a drag-and-drop interaction. I'm trying to ensure that I layer a few template based items (Contents, Glossary, etc.) above the dnd choices. I'm running an action group that shows the Table of Contents. It isn't assigned a class, so I can't getElementsByClassName. That's fine, I'm using getElementById. I would like to use an html extension to update the css to set the zIndex for a few items like the TOC to always be at a higher level. Does anyone know if Lectora searches for the highest zIndex to set the dnd choices, or if I try this will it work? If it won't work... how do I ensure that my TOC (and related objects) are indeed the highest zIndex so that they appear on top?
Discussion (5)
I think this post might be helpful, even though the original post was not about layering:
Conditional Include in TOC
Towards the end, we added a class to the TOC to change the Z-index so it was higher than the base page elements. I believe the post you reference indicates that questions get a z-index of 1000, so maybe set the TOC to 1500 and other elements in order from there?
In Jasons' course we had to keep the reading order in mind as well. Won't the standard way to put the TOC, and the Glossary "Always on top" be enough to keep it over the page elements?
Very difficult to troubleshoot without seeing the title. Can you share the file?
I tested successfully to bring a shape on title level over a dnd question on a page in Lectora 17.1. Have you checked whether the question is "always on top" as well?
TimK, I have tried just using the "always on top" however, none of the TOC elements actually wind up on top. Give me a bit to look at it again. It currently looks like this.... you can see that the choices are layered on top... and the TOC group is layered below.
So, I came up with an answer to this... I used both
$("div[id*='dropzone']").hide()
items[i].style.visibility = "hidden"; (with Tim's loop). I didn't care if they stayed visible or not.
Discussions have been disabled for this post