http://jsfiddle.net/fJkBU/1/
That's my code. Basically, I have an iFrame whose source may change. I need the containing DIV to expand vertically to accomodate whatever is inside the iFrame.
I can't get it to work. Any ideas?
MY CODE
<!DOCTYPE html>
<html>
<head>
<title>Ruby on Rails: Welcome aboard</title>
</head>
<body>
<div id="page">
<div id="content">
<div id='commentLoader' style="width: 500px;">
<iframe id="commentIframe" src="http://www.amazon.com" style="border-style: none; width: 100%; height: 100%"></iframe>
</div>
</div>
</div>
</body>
</html>
All the other methods will not work, because...
...Mozilla (and all other major browsers, as pointed out in paislee's comment) has this thing called the "Same Origin Policy" which states:
The same origin policy prevents a document or script loaded from one
origin from getting or setting properties of a document from another
origin.
Essentially, Mozilla makes sure you cannot access another webpage's properties thru JavaScript because that would be a security hazard (for cookie hijacking and such I believe).
For example, here was a similar question when discussing an iframe for a page of the same origin; here is the answer as applied to your problem. As you can see in Firefox's error console, your "permission denied to access property document"...
Ok, so you have a couple of options now that you know you can't access the iframe's height thru JavaScript (because it is hosted on another domain):
Change it so you do control the contents of the iframe (then either put it under the same domain or use the solution posted in the similar question).
Assuming 1 is not possible you have to use your server to access the webpage. The first option here would be to screen scrape the contents of the iFrame and then display it
If you aren't up for writing a screen scraper you could use a proxy script and then display an iframe of your proxy (hosted on the same server); this would permit you to access the site as if it we're your own and the user would notice no difference (Note: I'm pretty sure this is against all terms of service/possibly illegal as the user could try to interact with the website (unaware it is loaded thru a proxy) in the iframe (i.e. login)... and you would effectively be phishing)
I am assuming that what is loaded in the iframe is a set of comments (IDs kind of gave it away), and I will also take the liberty of assuming each comment has a fixed height or maximum height. In which case you could write a php script that loads the page, counts the amount of comments (regex) and then multiplies number that by comment height to determine the appropriate height of the iframe
Good luck,
At the very most you'll get an iFrame to be the size of the window, not the contents' height. And, as you seem to want it to expand, why not just make the iFrame 100% height of the window from the start?
If the iFrame's loaded from the same domain you can try the Iframe SSI script II. I used this script way back for a class project but you can give it a shot.
I'm not sure I get your answer 100%, but if you want a container that expands vertically due to the content you can use jquery ajax. when you load content inside a it will generate a new height. give this div some style, and you have yourself a dynamic generated div height. basically, you will take this other page and put it on yours.
Do a search for cross-domain ajax. I've used it in the past and it wasn't pretty but worked!
Call the below Javascript function in Iframe onload event.
function autoResize(id)
{
var newheight;
var newwidth;
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
}
document.getElementById(id).height= (newheight) + "px";
}
e.g:
<iframe id="commentIframe" onload="autoResize('commentIframe')" src="http://www.amazon.com" style="border-style: none; width: 100%; height: 100%"></iframe>
You've got single quotes around your CSS id. Replace them with double quotes like the rest of your code.
Change:
id='commentLoader'
to:
id="commentLoader"
Related
I've got a Kendo Datepicker that I'm displaying inside a Kendo Window and it shows like this:
The Datepicker is somehow bloated, with larger than usual fonts and size. Outside the Kendo window, the datepicker displays fine. Now, I was wondering if I could resize the datepicker, or the fonts in it, assuming downsizing the font would downsize the datepicker too.
I have tried adding this to the CSS:
.k-popup .k-calendar {
font-size: 10px !important;
}
And the result was odd:
It only worked partially because only the month name was reduced, the numbers remained large...
The main issue is that when opening the datepicker, it overflows outside the kendo window dimensions: I was looking for a solution that would allow me to downsize the datepicker so it would fit.
EDIT
I tried to add the k-calendar class:
#(Html.Kendo().DatePicker()
.Name("concessionTOD")
.Start(CalendarView.Month)
.Value(DateTime.Now)
.Format("yyyy-MM-dd")
.Culture("pt-PT")
.HtmlAttributes(new { #class = "k-calendar" })
)
but the result was this:
you can see in the above image the size of the input and month name are reduced, indeed, but the calendar itself keeps bloated.
EDIT 2
I learned that if the window is defined as an iFrame, the results inside may vary as an iFrame, as a regular webpage, requires a DOCTYPE as well as the html, head and body tags. I added this to the partial view that's inserted in the window and the result was this:
So, the calendar isn't bloated anymore but still overflows the window's height, causing a scroll bar to appear. To access the lower part of the calendar, I must use the scroll. As said before, I want the calendar to overflow outside the window, as shown in OnaBai's answer, without creating any scroll bars.
Also, I found in the documentation that
Refreshes the content of a Window from a remote URL or the initially defined content template. Note that passing data and non-GET requests cannot be sent to an iframe, as they require a form with a target attribute.
I'm not sure how to interpret the second sentence but it may help in dealing with the issue.
Use the following CSS selector / definition:
.k-calendar {
font-size: 10px;
}
Check the following code snippet.
$("#datepicker").kendoDatePicker();
$("#win").kendoWindow({
title: "window with datepicker"
});
.k-calendar {
font-size: 10px;
}
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<div id="win">
<input id="datepicker" value="10/10/2011"/>
</div>
OK, so I solved my issue, the telerik support proved most valuable. They reminded me that it is not possible to have an overflowed iframe.
So, I removed my iFrame setting from the Kendo Window:
#(Html.Kendo().Window()
.Name("addConcessionWindow")
.Modal(true)
//.Iframe(true)
.Visible(false)
)
and removed the script and style references I had in the html page the filled the window (so they won't be loaded twice).
Bottomline is:
it is not possible to have an overflowed iframe.
I'm trying to make a css-selector that assigns diffrent properites based on weather the html is inside an iframe or not. I tried this:
html:not(:root) body {
background: black !important;
}
I expect this to apply background: black; to the body if it's inside an iframe, but it doesn't, why? And are there any css options? I could always check with javascript if html is root.
IE8 support not requierd.
CSS is only scoped within the same document. An iframe is an entire document in its own right, and so a CSS rule that applies to the page that contains that iframe cannot apply to the page that's within that iframe.
This means that as far as HTML and CSS are concerned, html is always :root (and therefore can never be :not(:root)).
Unless you are able to transfer this CSS from the containing page to the page within the iframe (using a script for example), I don't believe there is a way using just CSS.
It is probably possible to do the styling in an iframe with JavaScript.
document.querySelector('iframe').contentDocument.body.querySelector('#some-element').style.background-color = 'red';
IMPORTANT: Make sure that the iframe is on the same domain, otherwise you can't get access to its internals. That would be cross-site scripting.
Accessing elements inside iframes with JavaScript document futher here: Javascript - Get element from within an iFrame
Posting my comment as an answer for better display, you should:
Put "is in iframe" detection code in JS, as I don't see any other way of doing so
Put CSS code inside the iframe depending on the JS result
So if all code is inside the iframe, do:
if (window.parent !== window) {
document.documentElement.classList.add('inside-iframe');
}
html.inside-iframe {
bkacground-color: black;
}
If you want the detection-JS-code to be inside the parent frame, go for:
document.querySelectorAll('iframe')
.forEach(i => i.contentDocument.documentElement.classList.add('inside-iframe'));
Assuming the iframe is loaded when executing this JS (otherwise, contentDocument/documentElement will not exist). You may rely, in such case, on load event of the iframe (but it seems better anyway to put "is-in-iframe" detection indise the iframe itself, as the corresponding CSS is inside the iframe too)
html:not(root) body {
background: black !important;
}
Works
I have an issue with two different objects on a webpage that are using an external CSS and external js to call each of their respective functions.
When only one script (a page peel script) is used, the page peel effect display normal on all pages (www.cxchelp.com). However, when the script is added to a page that has a CSS form script, the peel effect moves from its position and goes to the middle edge of the page in alignment with the CSS form (See: http://www.cxchelp.com/contact_error.html).
I checked both external script and realise that they are both positioned by '#container'
I know that the fact that they are both using the '#container' is causing the positioning problem. But my question is what do I do to prevent this conflict?
This thing has been beating me world without end for a few hours now, and I am kind of fed-up.
This is (part of) the first .js script (for the page peel effect) where the '#container'is mentioned;
$('#container').prepend('<div id="jcornerSmall" style=" position:absolute;width:100px;height:100px;z-index:9999;right:0px;top:0px;">
This is (part of) the CSS script for the contact form, and position that both objects are stuck at;
#container {
margin:0 auto;
background:#fff;
width:580px;
padding:20px 40px;
text-align:left;
}
Any ideas here guys?
Add a class of page-peel-container to main container of every page you want to peel effect. This means the very first <div> on the page!
On the homepage, this would look like:
<body>
<div id="container" class="page-peel-container">
On the contact page, this would look like:
<body>
<div id="containermain" class="page-peel-container">
And so on.
Now, like last time, find the 2 bits in the Javascript where it says $("#container").prepend or $("#containermain").prepend if you haven't changed it back after our first failed attempt. Replace it with $(".page-peel-container").prepend
Let me know if this still doesn't work.
I've created this frame busting code, and now for fun, I want to bust it.
This code appears inside an iframe page:
(function() {
if (window!=top) {
//Bust out of iframe below:
top.location.replace(location);
}
})();
And it busts out of the iframe.
I do not want to alter this code at all, but I want a workaround code to put in the PARENT of this iframe, so that the iframe can't detect that its an iframe, thus invalidating this frame-busting code.
In other words, how do I make the iframe think that it IS the top window (meaning window==top)
Any workaround is appreciated!
This is not in itself possible, but there are a number of techniques for disabling the effect of common framebustin techniques - one of them can be read about here.
It works by using the onunloadevent to 'cancel' the url-redirection by setting its location to a document returning a status code of 204.
Is there a way to limit a css to only apply to what is in a content area and not the entire page?
I have an ASP.NET 4.0 app. I obtained some from someone else that I don't understand (It's javascript and uses a css). By his instructions, I put it on the page to style a list (UL). All of this occurs within a content place holder. However, now some UL's on the MasterPage are also being affected by this style.
Is the content placeholder an html element - if so you can add a class or id to that and use it to limit the css styling for your ul's to only those in the "main" section. If not, you may need to wrap your content in an extra div:
e.g.
<div id="main">
<!-- content here including the ul -->
</div>
then the css to style that is:
#main ul
{
// styling here
}
As Kris says, you can use an id selector. This is "The right way" to do it.
If that won't work due to your constraints (running impenetrable mystery code), you may need another option.
Fortunately, the kludge is pretty straightforward too: put the app in an iframe and host it from a separate, blank page.