I have two Flash objects on a webpage (call them A and B), and they overlap so one partially obscures the other. I don't seem to have any control over the z-index, to force B in front of A. Whatever I try, A always 'wins' and stays on the top!
I have read many people's posts about problem with getting HTML to show over the top of Flash...but nothing about when your two overlapping items are both Flash objects.
I have tried various combinations of wmode=opaque/transparent/window
I have tried CSS position:absolute/relative and z-index:0/999
I have tried placing the HTML sections in a different order
The problem is the same in IE and Firefox
I do not want to use jQuery in this case
In my particular situation B must have position:absolute and wmode=transparent, and sit above A. A needs relative positioning and transparency is not required. However, I have been testing without these restrictions, and I still have no control over the overlap. Are some SWFs (ours are adverts sent by clients) created in such a way as to override any code control of z-index?
The reason for this arrangement is that A is a standard banner advert at the top of the page, and B is a 'page curl' effect where a corner peels down from the top right of the page.
Thanks for any advice you can give.
I managed to control the situation for one of my advert banners by getting rid of the <object> tag and just using <embed> on it's own. Then the wmode=opaque trick worked in both IE and Firefox.
However, a different advert SWF did not respond to this change, and still shows above my page curl/corner peel.
Related
The application I'm testing is very complex. It has dozens of tabs and thousands of fields. For my tests I need to access ~150 fields.
I'm going through the process of collecting the necessary information to access the elements: xpath, id, css selector, etc. All of these elements sit inside of iframes, sometimes as many as 4 nested iframes. I'm using Firefox to inspect the elements and there is an easy way to get the xpath, css selector, etc. However, in order to figure out what iframe an item is in I have to look through the path in the scrolling bar at the bottom of the inspector window. This is working, my code works, but it's tremendously tedious and has the potential to introduce errors if I miss an iframe.
The question is: is there a way to get the list of iframes that wrap around an element that is easier/faster than the manual investigation that I'm doing now? Possibly something similar to the copy xpath, etc. that is built in to the inspection tool. I'm open to both ideas and applications/extensions.
Once you open the firepath as mentioned in below image :
If you see on top left corner it showing top window, Just click on it, It will show you all the frame present in your web page and once you select any frame then it also show that frams' html as well.
As shown in below image, the frame get highlighted once mouse over on that frame
So here you can easily identify your element is in which frame.
And once you move pointer to the element it will automatically shows that frame as selected where your element is. As shown here.
I've been experimenting with this for over a week and I'm about to give up, as I think this is not possible, but I wanted to reach out to this awesome community first.
What I'm trying to achieve is to, somehow, overcome the stacked z-index settings.
Let me show you an example so you maybe get the idea faster:
http://raulmellado.com/clientes/zindextest/
What I'd like is to have the green div (#shouldbeontop) on top of all elements (I am setting it to position:fixed).
In other responses in stackoverflow (yes I've read dozens of threads here), the answer is to change the html, move elements around, etc, but my problem is that I'm creating the #shouldbeontop and #scrollbar elements dynamically using js (my application is a bit more complex than this example, but I've tried to simplify to share my problem here).
I've created a js that can be embedded (ideally) on any webpage which will add the elements, so I can use js if needed, but I can just assume that the #shouldbeontop and #scrollbar elements will be there; the rest could be any html/css combination that's already there.
Usually, where there is no z-index in different divs, this works beautifully, but as soon as there is some stacking, it breaks :-(
If you would like to see a real life application of this, here you can find a quick & dirty demo: http://videngage.me/demo/demo1.html (here there is no z-index, so the video [#shouldbeontop in my simplified demo] is always shown on top (when you scroll down), but here http://www.members.skolahudbyonline.eu/rytmus-trening-majstra/ the video goes behind when you scroll down)
Is there an universal solution for this (using css and/or js), or should I just give up?
Thanks sooooooooo much for your help
I am building this form: http://codepen.io/anon/pen/gFoIG/
and so far I am satisfied. Unfortunately I have some issue that I seem not able to fix.
First of all, I want to enforce the label positions beside their respective inputs. Now the form breaks down easily (with the opera emulator for smartphone and tablet, the privacy label goes below the check, but I want that it stays beside it)
The other issue that I have is that I want it to fall back gracefully when there are small screens, like placing the second image below the first and placing the input controls one below the other and take the full screen width to be bigger and easier to interact with, but so far I only was able to break the layout with my tests.
This issue: the the form layout breaks, the internal control (input, button, etc) go outside the container div. How do I enforce the container to keep everything inside? I've experimented with blocks, floats and whatever, but if the layout breaks, the input boxes usually go outside the gray rectangle.
Last issue: If I insert this form inside an existing website (for example, a page in wordpress) the layout get completely destroyed because influences from the theme style. How do I enforce my style on my form, keeping it isolated from the other styles? I can think of the iframe as a solution, but it is the only one? It is a good practice?
Anyone can help me with that?
You might want to take a look here. Its a site I just set up to explain an approach to responsive using a jQuery plugin to manage redoing layout. I think it could work for your example quite easily. Also because it can target a container div at any depth in a web page, it could be helpful in the scenario where the layout you want to reflow is inside a 3rd party container (as long as you can run script on the page).
I need help. My main page has a long table that will typically be approximately 2 screens "tall" (assuming a 1024x768 browser window).
I want
the user to be able to browse that table up and down, while always having a set of control buttons available in the currently visible portion of the page.
AND
to retain control over the color scheme of all elements on the page.
The problem is that both solutions I could think of that address the first point (using an overflown div or a frame) involve scrollbars that I cannot style. (At least on Firefox they will invariably be gray.)
I cannot implement a "pager" which breaks the data on the table into chunks which are served one at a time (eg, having a "next 40 results" link at the bottom). The user needs to refer to the full table to find and compare multiple rows throughout the table.
What are my options? My head hurts when I think of moving this entire page to Flash for this reason...
thanks in advance...
i would use jquery and a scrollable div.
Here are some resources to get you started.
http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div
http://flowplayer.org/tools/demos/scrollable/vertical.html
http://logicbox.net/jquery/simplyscroll/vertical.html
Don't change the styling of scrollbars unless you really know what you're doing! However, if you understand the usability implications (and try to make them as user-friendly as possible), try the following options:
If you use jQuery, try jScrollPane.
If you use MooTools, try MooScroll or MooScroller.
The following StackOverflow threads might also be useful:
How do I change the browser's scrollbar colours using CSS?
What's the deal with CSS and scroll bars?
How can one use scroll bar images?
There are lots of posts regarding iFrames and framesets, but I have not found one that addresses my concern: are framesets bad to use?
Understanding the potential for backlash against framed websites, I want to recreate the Diggbar -- only instead of one iFrame underneath, I want two or more.
This Stackflow thread offers a solution, but it produces iFrames with the page bottoms obscured. To see an example of this, use the link below (I can only include one link, so I'm hacking here. Sorry.) and search for plaques. Note how the bottom of the page is obscured, including the scrollbar bottom.
Framesets seem like they might be simpler for recreating the Diggbar, where the bottom frames are perfectly matched to the height underneath the top bar (i.e., pages are not cut off).
Summary:
Are framesets bad to use (more so than iFrames)?
If I should use iFrames over framesets, how can I recreate the Diggbar while ensuring the scrollbars and pages do not get cut off at the bottom?
Thanks!
HACK LINK (put the link together): "http://" + "ephemera.continuation.org/stackoverflow/iframe.html"
I'd stay away from framesets at all costs. They are valid in terms of the HTML 4 specification but they offer poor cross device support. Most mainstream browsers will display a frameset as intended, but more specialised browsers (like those found on mobile phones) tend to mess them up and a lot of cases make the site unusable.
I suspect there are also accessiblity concerns, but I imagine they would also exist for iframes as well.
Something else to consider is presentation. If you use framesets, you are effectively restricting the design of your website to the parameters of the frameset (this frame sits on the top, this frame sits on the bottom). Whereas, an iframe is just another element on the page and can be manipulated much as any other element with CSS, allowing you to radically redesign your site without touching the HTML.
Rich