Viewing Set a Z-index for HTML Snippet higher than that of the Navigation Menu?
Set a Z-index for HTML Snippet higher than that of the Navigation Menu?
|
User: Jeff R. 11 years ago
|
|
|
Hi We need to use a piece of 3rd party HTML code to produce a pop-up "Make a booking" window I have successfully used Everweb's "HTML Snippet" widget to inset the required HTML There is a test example here: htttp://www.mbmc.com.au/test (Click on "Book an online appointment") This calls up the pop-up OK but but it sits behind the Nav menu. Advice from the 3rd party developer: Quote: Right now, the "1stAvailableWidget" <div> element is placed inside another <div> container. This container's z-index is set to 6. Are you able to change that value? If so, you just need to set it to be higher than the navigation's z-index, which is set to 10001 (so 10002 or higher will do the trick). Alternatively, you could lower the value of the navigation container's z-index to be 1, if that's possible. Is it possible to fix this from within Everweb without getting into the raw code? The example here: http://www.mbmc.com.au/test/book-online.html looks OK but I had to delete the Nav Menu from that page Thanks for any advice |
|
|
User: Jumbo T. 11 years ago
|
|
|
Assuming this is what you paste in a HTML Snippet : <div class="1stAvailableWidget" id="1779" style="cursor:pointer;"> <p class = "btn btn-primary" style="text-align:center;">Book an Online Appointment</p> </div> Add this code after it : <script> pDoc = document.getElementById('1779'); ParentID = pDoc.parentElement; ParentID.style.zIndex = "11000"; </script> Where 1779 is the number of the ID. If the ID is different, use that. So this is what you paste : <div class="1stAvailableWidget" id="1779" style="cursor:pointer;"> <p class = "btn btn-primary" style="text-align:center;">Book an Online Appointment</p> </div> <script> pDoc = document.getElementById('1779'); ParentID = pDoc.parentElement; ParentID.style.zIndex = "11000"; </script> And to make life easy, we like clickable links by using the URL button : http://www.mbmc.com.au/test Last edit 11 years ago |
|
|
User: Roddy 11 years ago
|
|
|
EverWeb inserts items into two divs to allow the user to drag them around the page to reposition them. One of these divs has the position info - including the z-index. EverWeb assigns a z-index based on the order in which the elements are inserted on the page. The inserted item is a child of this parent element so giving it a z-index of its own will not raise it any higher in the stacking order of the other items on the page. One way to get your form to appear above the navigation without post editing would be to use a modal. The modal background opacity can be set to zero if you need all the page content to be seen while the window is open. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Jeff R. 11 years ago
|
|
|
Thank you both I used Roddy's suggestion of an iFrame modal and that works well. Thanks again for your help. |
|
| Post Reply |
| You must login or signup to post. |