I have some page content in an iframe. I also have a drop-down menu that contains some user options. In IE (9), when I open the drop-down the menu, it appears behind the iframe. In every other browser, the behaviour as is correct (the menu appears on top of the iframe).
I have tried applying various z-index properties to these elements without success. Their common parent element is just a <body> tag.
How can I ensure that the drop-down always appears on top of the iframe in IE?
So one possible solution is to put an empty iframe on the screen, directly beneath the drop-down menu. You can use the z-index in this context to ensure that menu appears overtop of your empty iframe, and the whole thing will appear on top of the original iframe.
Not a very nice solution, but it works. I'm open to any suggestions on how to do this in a nicer way.
Related
There's an element that appears on the site, but I can't seem to find it in the inspector of the browser. I would like to hide it somehow.
On this page: http://gdhbau.hu/#bemutatkozas
It is the "BEZÁR" word with white color, next to the "Becsuk" button, when clicking on the "MÉG TÖBB" button (to expand the content).
This problem shows up when I turn on the "Automatically add paragraphs" in the WordPress SiteOirgin editor; but I need to use it, otherwise the content falls apart.
EDIT: This is with the plug-in called: "Collapse-O-Matic"
You will never find it since it's not an element.
It's part of the image in the background http://gdhbau.hu/wp-content/uploads/2018/03/bemu-bg-large.jpg
I have an online form, that i would like to do through stacking modal windows (it just makes sense that way). upon opening both modal windows and then closing the top most one however the scroll bar comes back up from the content bellow the modal window.
here is an example:
http://www.bootply.com/FGNRPwSRgH
Just look on the right side of the screen when closing the second window.
Is there anything I can do about this? I am new to Bootstrap and I am hoping to be able to fix this through CSS and bootstrap only, however javascript isn't out of the question.
When you open your first modal, The body tag of the iframe is getting a class of "modal-open" which is disabling the scrolling, that remains when you open the second modal. When you close that second modal, the "modal-open" class is being removed, which is why the scrolling is coming back. This is probably due to the way you're nesting these modals. It just wants to remove that class from body, not knowing that you still have one open. You will most likely need to add some sort of check step with javascript to determine if you still have a modal with a display property of block when closing each one, and if so make sure that modal-open class is still set on the body. I would look for a callback function on the close of those modals that you can listen for.
http://www.bootply.com/8K2wKO0c7I
$('body').append(
$('<script />',{src:'//rawgit.com/sbreiler/bootstrap-multi-modals/master/bootstrap-multi-modals.js'})
);
If it works for you, grab a copy of the *.js file from my github: https://github.com/sbreiler/bootstrap-multi-modals
In this store, if you click on the first two links in the menu, after you scroll down the menu changes: it stays at the top of the visible page with a black background. This way the visitor always have access to the menu.
The squarespace theme I'm using allows this to happen only to these first two pages.
If you enter any other menu link and scroll the page down, you will see that the menu doens't do what it does in the first two pages. If you scroll down, the menu stays at the scrolled part of the page.
I'd like to identify the menu CSS which makes changes it and makes it stay at the top of the page with the black background and apply it to all pages.
I'm having a hard time to identify it using FireBug.
If you need to just identify the stylesheet use "inspect element". Right click and select it.
For CSS to make it stay at the top, I think position:fixed will work.
I don't know why, but when my page loads, i get scrolled in the middle, but i don't have any anchor aiming on this point...
Now i have to put a <a href='MY-URL#top'></a> anchor in every page for not getting scrolled on the middle...(Firefox don't even get them :0, -webkit browsers do...)
I have many anchor aiming on id's, and a JQuery script for smooth scrolling, but no one for the middle scrolling of pages on load.
You can see that here :
http://www.groupae.be/ediser/2.0/nos_produits.php
What would fire that scrolling on load?
If the page is long enough to have scroll and if you set focus on some element (for example for accessibility features), browser scrolls page in such way that focused element is in the middle of the screen (if scrolls allows to do it, if not it will be scrolled as far as possible).
its ok i found why i was getting scrolled, just the autofocus in the footer form... :/
Say I have a menu which is initially 200px by 100px. I need to include it in an iframe but the problem is it is a dropdown menu and when it opens the menu gets cut of since it is inside the frame. Is there a way to have it drop out of the frame?
If both the parent page and the page within your iframe are coming from the same domain, you can communicate between them via JS:
Possible Ways to Communicate Between iFrame and Parent Page across domains
The solution would be to, upon hover, send JS to the parent page and have the parent page then render the menu on top of the iframe.
That said, having to use a menu within an iframe that then pops out of the iframe seems to be not a technical problem as much as it is a visual design and layout problem.
No there is not. You will need to use a different approach, such as downloading the content of the frame on the server and inlining it in the parent page instead. Another possibility would be to float the parent page's content over the iframe and make the iframe larger.