I am working on a web application that has a menu across the top of every page with sub menus that drop down when a menu item is hovered over. This works fine, except on one page where we are trying to show a pdf in an iframe. The hover menus all end up behind the iframe in this one case. I have tried adjusting the z-index of both the hover menu and the iframe but neither seems to work. This is occurring in both FireFox 3.5 and IE8 so far.
There are two ways my question could be solved. I can either find a way to accurately adjust the CSS so my menu appears in front of the iframe or if there is another way to show the pdf that doesn't have this issue I could do that too.
Thanks!
When I ran into this issue, I used jQuery to detach the iframe before showing the overlay (and in my case a modal too). Once the user was done with the modal/overlay, I reattached the iframe to the DOM. _viewerFrame and _viewerDiv are just some css selectors of course. In my case there was a wrapping div tag around the iframe element that made detaching and attaching easy.
// detach iframe
_frame = $(_viewerFrame).detach();
function reattach(frame) {
// append it back to the div it was in (reattaching essentially)
$(_viewerDiv).append(frame);
setButtonStates();
setViewerState();
}
function onOk() {
... // other code
reattach(_frame);
}
function onCancel() {
... // other code
reattach(_frame);
}
// show modal with overlay
Dialog.confirm(onOk, onCancel, { ...
Hope that helps...
This is likely because PDFs are displayed in a plugin, rather than natively in the web browser. CSS will not have an effect on this, because CSS only applies to content rendered in the web browser. Google does have a system that converts PDFs to HTML for display in browsers, at which point there would be no z-index issues, but some formatting may be lost in the process, and of course it is no longer a PDF document. Unless there is some way to tell the PDF plugin itself to lower its z-index (and consider that not all users will be using the Adobe plugin, some may use Foxit or other programs) you may be out of luck.
Try position:relative and z-index adjustment to get it in front of the iframe.
You're showing a pdf in an iframe? I'm guessing it has some sort of flash viewer? If so, then make sure you set the wmode of the flash embed code appropriately.
http://kb2.adobe.com/cps/155/tn_15523.html
Related
My image grid on my Wordpress site for some reason does not resize fully to the max-width of the browser when I click an internal link to the homepage (eg. I click on an image then click back on the logo). It goes back to fullscreen when I resize the browser. It also works fine if I go into my website externally (from typing in the url). I have tried using:
#site {
max-width: !important;
}
but doesn't work. I'm not sure if if it is the theme that is the issue or one of my custom css. I have tried isolating some css with the inspector tool and seeing if any of them caused the problem but I couldn't find anything.
Unfortunately I don't have access to the full backend of the theme and I'm not a developer.
So if anyone has any idea that would be great!
Link is http://imconniehuang.com/
Your image gallery's width is calculated and set by Javascript. Have a look at the surrounding div.vc_row, the width is set inline there. So no point in using CSS here. Seems like the script waits for a resize event to recalculate the gallery's width.
The prefix vc_row indicates that you are using Visual Composer. I think the problem is with this plugin. I therefore recommend getting support from the plugin provider-
BTW:
max-width: !important; is not valid syntax. 'max-width' sets the maximum width of an element. You can have a look at the syntax here.
I created a content script Chrome extension toolbar by following #RobW's answer to this question.
I'm now trying to get certain elements to overlay on the rest of the page, but currently they are only showing within the iframe.
For instance, an icon is clicked and shows a notification panel/tooltip. As you can see, it is cut off by the edge of the iframe:
Is there a way to change the CSS of the panel to hover on top of the rest of the page despite being in a separate iframe?
BTW, I made the height of the toolbar 143px, instead of the 43px you might expect of a toolbar, just so the issue would be more apparent.
No, I'm fairly sure you can't do that with an iframe-based approach. That beats the purpose of iframe content isolation - imagine the clickjacking possibilites!
You will need to inject your UI into the document itself.
You probably went with an iframe-based approach because of possible clashes with the page's own CSS, for example. Thankfully, there's a modern tool to help with this - Shadow DOM.
I have an issue with Google Chrome: 19.0.1084.52 m when I have the Ask Toolbar installed
it breaks the website layout.
See print screen:
Is it usual behaviour that toolbars in Chrome would effect the website?
EDIT: I guess I should wrap everything inside a <div> and move the background-image from the <body> although is there a better option without adding this extra markup?
Website link
A Javascript snippet can disable ask toolbar in chrome. I hope this function spreads quickly!!
function removeAsk(){
if(document.getElementById("apn-null-toolbar") != null){
// mainMenu had a style change for its top positioning, returning it to normal
// perhaps a function can be made which iterates over every element ask has changed
document.getElementById("mainMenu").style.top = "-16px";
// Just remove the iframe and style elements
(elem=document.getElementById("apn-null-toolbar")).parentNode.removeChild(elem);
(elem=document.getElementById("apn-body-style")).parentNode.removeChild(elem);
}
}
Call this method after body onload
<body onload="removeAsk()">
There is no Chrome extensions API for creating a toolbar so mentioned extension must have created it via content script. What it means is that for each page you open, CSS and JavaScript files are injected by this extension to create a DOM element within the page acting as a toolbar. Problem with this solution is that using the content script it is possible to mess up website look or even the way it works.
I ran into this exact same issue with the Ask Toolbar. I basically took out my positioning attributes and top/left/right/bottom 's and replaced with margins. Margin uses less space and it comes out cleaner.
Although i do agree, it's kind of ridiculous to accommodate for a toolbar because the end-user could have anything installed that breaks and gives your layout bugs. Even Skype extensions will break a layout just changing the phone number.
So there's not much you can do, but use margins and keep CSS to a minimum. Just my 2 cents. and if you have to use CSS then stick with margins.
Here is the scenario: I have a div which I pre-load into a page and automatically set it's display property to hidden. I use javascript to pop-up said div. The issue is when clients have CSS disabled they can see the DIV, obviously. What is the best way to have the div (or contents of the div) display only when my javascript function is called?
The best way I could think of is passing the raw HTML to a javascript var and then loading all the HTML using javascript, however, this is a bit slow(theres a decent amount of HTML) which causes the script to break when it tries to reference DIVs that do not exist yet.
any other more elegant solutions?
Thanks
You can wrap html comment tags around it:
<!-- <div>your stuff, which should be invisible</div> -->
Or remove it completely from the DOM
http://plugins.jquery.com/plugin-tags/html-comments
Maybe, here some related stuff
If CSS is disabled, then the only way to hide the div is to remove it from the DOM.
You can set an inline style on the div (not recommended but your case is an exception anyway).
You can use JS/jQuery on page load to hide the div but it'll cause the flicker effect (div wiil be visible momentarily until the JS runs to hide it).
You want to have a div on your page when the page loads so that users without javascript can see it, perhaps to indicate them that some of the site functionalities require JS to work.
If you need to use that div exclusively with JS then having it already on the page is a bad approach imho. You should create it on the fly, at least the content.
This way you will ensure users without CSS won't see it, while still being able to show it for the rest of the people with JS enabled.
Set the height of the div you wanna hide to zero using javascript.
$('#mydiv').css("height", "0px");
I am using sIFR on a page which I am loading into an iframe, and using a javascript in the parent window which constantly polls the iframe to see when it changes height (ie. when you click a link in the iframe page and it has a different height than the previous page). Anyways, the problem is that sIFR doesn't seem to show the rendered text until the entire page/script has executed so when the page is first loaded and the javascript is waiting for the iframe to change height, there is no text. As soon as the iframe changes height however (ie. I click a link within the iframe), the javascript finishes and the sIFR rendered text shows up. Is there a way to allow sIFR to render before the page/scripts have finished running?
Put you sifr js and css first of all in <head> before other css and js files
As Jitendra mentioned, loading the files first will help a bit. You can also look into Detecting CSS load.