I am embedding simple html and css that i've written into another application using an iframe. Within my code, I am using CSS to create context menus when you hover over elements of the page. When I get close to the edge of the iframe with the hover menu, however, it gets cut-off and stays below the frame. I've tried many different variations of z-index, but nothing has worked. Is there a way to get this menu to show above the parent window?
Any thoughts on this?
Any positions and rules for belonging to the CSS stacking context are limited to the current document. This can't work using z-index, since the iframe-contents are a complete different document. You can't have anything "bleed" out of an frame. If you want to have an overlay, don't use an iframe at all.
Related
Upon loading our website I am having some issues fixing the lower content snapping into place. Easier to see on a slower connection but it appears the content is not loading in the place its suppose to be. but loading lower than its suppose to be and then quickly moves into place.
Heres a link to a recording of what I am seeing via google chrome - cable speeds.
https://youtu.be/RgR0IyxiEvg
Thanks!
There is a class ctaWrapper on top. Upon scrolling you are adding a class fixed to it. That is causing the problem.
When the object is fixed, it goes out of the normal flow and gets the ability to stay on top of other objects.
In your case, the object on the top goes out of the flow and all the elements jump up a bit. Just add the class fixed to it. Because, I don't see the need to add fixed on scroll as the wrapper stays fixed all the time
You are using a plug-in called "Simple Custom CSS and JS" which places your custom css and javascript inside your page's body tag, right after most of your content.
Which causes those css rules and javascript codes to be applied with a delay. Moving those from your page's body to head will solve the problem.
Edit:
Now I have checked the video you provided. It looks like the problem is about your image gallery. Before your gallery is loaded, your image(with "FRYD") has full(or auto?) width and height. When your image slider starts loading, it scales the image down to match the container's width(or height). You should consider doing this scaling with css in your page's head. most probably something like max-width:100%;height:auto; would be sufficient.
After days of trying to figure out what was wrong it was a simple render blocking issue. The height attribute for the banner was loading after the rest of the content. So i had the elements above load in their css before the elements below. Which solved the problem.
So the hero animation transitions are not really documented very well anywhere I could find.
I can set up a page with hero-id on elements and have the transitions work fine, but can't get it to work if, for instance, my list of items lives in an imported element. On the page swapping, I get an instant change with no transition.
Changing page back gives me a transition as it can obviously find the hero-id in the main html.
So really the question is: can I somehow link a hero-id in an imported sub-element with an element on my main page or another imported element?
On succession of a previous question I tried to find out if the next thing is possible:
Take you have a render, like a soccer player with a transparant background. You add this render to your html & css. The transparant parts are now part of the image 'box'; you can't click on links under the image transparant parts, but you can see them.
Is it possible to make these links clickable? Thus having the image as highest z-index, but still have the links clickable and working.
(the links have a lower z-index because their background then stops under the image, giving a nicer design)
(Or said otherwise: have a .png image with a transparant background not shown as a box, but as only the colored pixels. Preferable only in html/css)
I think it is not possible, to be honest. If you do not yet understand my question, maybe my previous will help you:
need help fixing the link's clickable area
You can use pointer-events to make an event (click in this case) bubble through to the layer below.
No, it's not possible from what I'm aware of. However you can do similar things to what you want that may be useful:
Turn an area into a link using <map>
Use pointer-events:none so that clicks are ignored on the top element
IE 10 provides the non-standard msElementsFromPoint method that allows you to "peek below" an element; you can do that inside the click handler and determine if the click point overlaps an anchor. If it does, triggering that element's click event would do what needs to be done.
Unfortunately I am not aware of similar functionality for other browsers or earlier versions of IE.
I've created a simple tabbed content display using CSS and HTML. This code will be embedded around halfway down a much longer page with other content.
Here's the jsFiddle: http://jsfiddle.net/ollyf/R9rq2/
I've made use of :target but I'm not entirely sure how it works. Read a few tutorials but I don't fully understand the behaviour. I feel like this is bad/inefficient code.
Is there a more efficient way to achieve this tabbed content effect?
If not, how can I reveal the content without the scroll position snapping to the top of the DIV?
The :target pseudo selector is triggered by on page anchors. This means when your URL is http://www.example.com/#anchor1 #anchor1:target styles would be activated. The page is also scrolled to the #anchor1 element. This is the default functionality in browsers.
The other option for achieving a tab effect is through the use of javascript. The concept is the same with javascript, you are still toggling the display attribute via click handlers. There are several ready made scripts available for tabs. Here is one example http://jquerytools.org/demos/tabs/index.html
Hope this helps clear things up.
Is there an easy library out there to do something along these lines:
I have a page with a lot of elements. At any given time I want to be able to put a modal on top of the entire page and just highlight one of the pre existing elements on the page to draw attention to it.
Most of the libraries I've seen revolve around dialogs that pop up and then hide the rest of the page. Are there any easy alternatives?
Thanks!
You can use a BlockUI script, then raise the single element's z-index to be above the block.
However, you'll need to make sure it's in the same stacking container; you may need to move it to the <body> and position it absolutely.