This should be a fun puzzle for you Stack Overflow geniuses:
I'm building a browser plugin that will inject a div, script, and iframe into the markup of whatever page the client is viewing. The purpose is to anchor a toolbar onto the bottom of every page (StumbleUpon does this for Chrome). Here's the code that is placed before </body>:
<div id="someID1" style="position: fixed; bottom: 0px; left: 0px; width: 100%; height: 100%; background-color: transparent;">
<iframe id="someID2" src="http://www.example.com/iframeContent.html" frameBorder="0" scrolling="no" style="background-color: transparent; margin: 0px; height: 100%; width: 100%; padding: 0px;"/>
</div>
This toolbar (iframe) will be hosted on our server and has pop-out panels. When a user clicks to open a menu, the menu vertically extends the toolbar (e.g., toolbar height is 35px; with panel is 100px).
I can accomplish this in Safari, Firefox, and Chrome by having my toolbar sit on top of everything on a transparent background (i.e., height: 100% and background-color: transparent for both the div and iframe). But this doesn't work for IE7, IE8, IE9.
I've tried (1) doing background: blank.gif instead of background-color: transparent, and (2) injecting a script into the parent with a resizing function that I could call on with parent.resizeFunction(height) ("resource denied")
Any ideas on how to solve this?? Thanks so much!
I have to run so I can't test it, but IE seems to listen to the non-standard ALLOWTRANSPARENCY property.
When the property is set to false, the backgroundColor property of the object can only be that of the window. When the property is set to true, the backgroundColor property of the object can be set to any value, including the default value of transparent.
Related
My entire react app css is being overridden by an iframe in the DOM, and I don't know how to get rid of it. I've tried deleting the bootstrap in node-modules.
I think the iframe creates a sort of sandbox with another copy of my enter root, and then disables it. All my CSS settings appear to be disabled, including toggle functions and clicks.
I can't seem to locate the iframe location in my DOM, and will like to either delete it or remove its inline style.
Any help will be greatly appreciated.
<iframe style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; border: none; z-index: 2147483647;"></iframe>
It is positioned right under the root div.
I'm trying to do something that shouldn't be very hard, but surprisingly I haven't been able to find the solution online.
I want to embed iframes to any random website, without the visitors noticing that it's actually a different frame. I want the iframe to merge with the parent body, extending the body of the parent, so that the non-iframe-part and the iframe-part of the website can be scrolled only using the main scrollbar of the parent page.
This is my code so far:
<h1>Tours</h1>
<div style="background-color: red; color: white; padding: 200px; text-align: center;">
Top part of page
</div>
<iframe id="tourtask-iframe" style="overflow: hidden;" src="/public/index.php?b=eit&token=abcd1234&p=tours&lang=en">Please upgrade to a browser that supports iframes.</iframe>
<style>
body, html {
width: 100%;
height: 100%;
margin: 0;
}
#tourtask-iframe {
width: 100%;
height: 2000px;
border: none;
}
</style>
When I do a overflow: hidden; on the body of the source file of the iframe archive, the scrollbar disappears, but I'm unable to scroll the iframe portion of the page.
I'd need to update the height of the iframe element to fill up the 100% of the height of this file. I'd also need to update the height of the iframe element whenever I expand/collapse any collapsible content in the frame.
How can this be done? Or is there a better way?
I'd preferably not use any library/framework for the parent page, since I'll need to be able to embed this iframe to totally different webpages.
Thank you!
I found an amazing script for this called iFrame Resizer:
https://davidjbradshaw.github.io/iframe-resizer/
It feels any change in height of iframe source document and updates the iframe container accordingly. It took some tweaking and investigation to get it to work.
Please make sure you're complying with following requirements:
The source iframe document must start with <!DOCTYPE html>.
Make sure the body of the iframe document is not 100% (which it is by default when using Material Design for example).
To successfully embed the correctly resizing iframe to the parent document, I'm now using the following code:
<iframe id="tourTaskIframe" scrolling="no" src="/public/index.php?b=eit&token=abcd1234&p=tours&lang=en">Please upgrade to a browser that supports iframes.</iframe>
<script type="text/javascript" src="/public/js/iframeResizer.min.js"></script>
<script type="text/javascript" src="/public/js/iframeConfig.js"></script>
<link rel="stylesheet" type="text/css" href="/public/css/iframe-parent.css">
iframeConfig.js:
iFrameResize({
heightCalculationMethod : 'bodyOffset'
}, '#tourTaskIframe');
iframe-parent.css:
iframe{
width: 1px;
min-width: 100%;
border: none;
}
body {
margin: 0;
}
In the styles.css for the iframe source document, in addition to any other styles I'm using for aesthetics, I have the following essential lines:
body {
height: auto !important; /* Essential for resizing */
min-height: 0 !important; /* Essential for resizing */
}
And that's it!
this is my website http://www.yarrutfranken.com/
if you press the 'plus' button on the homepage my contact information will show up. But I can not scroll on the black page. (try making window smaller then you will see).
There's some text falling off when you are on a 11" or 13" laptop.
so wrap up:
need scroll on black information page
if information page is active scroll must be blocked on 'homepage'.
please help me.
ps: i'm not a hero in javascript or other stuff. Just;
html
css
jquery
Add overflow-y: auto; to your #actinfo css rule in order to allow it to scroll if the content is higher than the element's height.
#actinfo {
width: 80%;
height: 100%;
background-color: black;
position: fixed;
z-index: 4000;
overflow-y: auto;
}
iam having a link tag on clicking it gives a another jsp as javascript:popup dialog.i need to block the page behind this popup dialog with a transperant page to diasable the controls on parent page.
this is my link
<a href="javascript:popupDialog('<c:url value="/addConfiguration" />', 'configDiv')" >click to add new configuration </a>
Add this code to the bottom of your html just before the closing </body> tag. (you can put the css in a different file if you wish, to organize things better).
<div id="page-blocker"></div>
<style type="text/css">
#page-blocker{
position: absolute;
position: fixed;
top: 0px;
left: 0px;
height: 100vh; /* View-port height */
width: 100%;
background-color: #000;
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
display: none;
z-index: 999;
}
</style>
Now you can call $('#page-blocker').show(); to block the page and $('#page-blocker').hide(); to un-block the page. Use it from within the popupDialog() function and the one the hides the Dialog.
Note: You might want to set the z-index of this blocker to 999, if you have other Absolutely positioned elements on the page. And the z-index of the pop-up to 1999.
How to avoid user to click outside popup window javascript ?
If you want to avoid clicking of the content you can place a div with a fixed position over all the content. That prevents the user from clicking on everything that is not inside this div. I use this for some error reporting on a site.
Html:
<div id="error_wrapper">
<div id="site_error">
Error:
</div>
</div>
Css:
div#error_wrapper {
position: fixed;
width: 100%;
height: 100%;
background-color: #000000;
top: 0px;
left: 0px;
opacity: 0.7;
filter: alpha(opacity=70);
}
div#site_error {
position: fixed;
top: 200px;
width: 400px;
left: 50%;
margin-left: -200px;
}
I think you're asking about a modal dialog box. If so, have a look at the jQuery UI modal dialog.
It will open up a dialog box with custom HTML content, and the rest of the page will be grayed-out and un-clickable. Is that what you want?
If you meant to ask "can you prevent users from clicking outside a popup window", no, you can't. At least not with JavaScript. Just imagine how annoying that would be.
You need "deeper" access to the browser than what a bunch of JavaScript sitting on a webpage has in order to do this.
Just make a popup div follow the cursor with a mousemoveevent! I can see some flaws with the method, though.