Hello I have an app where there is a top menu and a sidebar and an iframe all nested in a table. I know old school but that wasnt my decision.
I want the Iframe to fill the page based on the content length eliminate the iframe scrollbar and use the browser scrollbar to scroll.
Should I use javascript? can I just set everything to height 100% and then a specific overflow rule.
Right now I just have a min height on the iframe of 700px and a height of 100%
Depending if you want to the iframe to postback or not, you might be better off using the jquery .load() method, with this you could do the following
$(document).ready(function(){
$('#mydivid').load('anypage.html')
});
Doing this will eliminate the need to have an iframe altogether and might save you some hassle.
Alternatively if you wish to use the iframe you will need to calculate the height of the iframes content.
You can do this like so:
$(document).ready(function(){
var iframeheight = $('#myiframeid').find('body').height()
$('#myiframeid').height(iframeheight + 100)
});
You may need to run this after document ready as the iframe content may not complete loading when the $(document).ready() fires.
Related
I'm attempting to make a html5 object within an iframe set to 100% width to no avail. At the moment the width of the inner html5 object overflows the iframes boundaries and doesn't fit correctly so I'm trying to constrain it. I've used code like so:
#quote iframe object {
width: 100% !important;
}
This doesn't seem to work. Is there any way of targeting an inner html5 element easily?
Thanks!
You cannot access inside the iframe. Iframe is like new browser window. You have no access from one window to another.
While you can't target specific items in the iframe and size them, you can scale the iframe as a whole to the appropriate size. Perhaps that is what you need instead, if your iframe's inner objects are overflowing its boundaries. Check out this quesiton: How can I scale the content of an iframe?.
...without limiting the scroll inside the iframe or the need to specifically name the scrollable elements.
I have a google-map-like widget that can be embedded in 3rd party websites in the form of an iframe embed code. When people use mouse wheel over my widget I want only the content of the widget to scroll and not the parent page.
My question is similar to How to prevent page scrolling when scrolling a DIV element? but my problem is that my ifrmae contains multiple elements including media and canvas that must keep listening to mouse wheel event. TLDR the solution to use e.preventDefault() and manually update the scrollTop property of all elements inside the iframe that should stay scrollable is impractical, error prone and dependent on the non-standard wheelDelta property.
Here is a JS Bin for your convenience. Thank you.
While scrolling inside an iframe, the body doesn't know anything about what happens there. But when iframe scroller reach the bottom or the top, it pass scrolling to body.
See my jsFiddle and console log there.
When I set a width of a <div> that wraps all page by 100%, whenever I resize the window the <div> resizes as well.
What I want to achieve is, for whatever browser and screen you open the page, I want the div to have the widh of the 100% of the full window and stay it as it was set, so that when you resize the window, the div size will still be the same.
Is it possible?
You can do this using jQuery as:
winW = $(window).width();
$('#container').css('width', winW);
You should set the width to be 100% in your css, and then use a JavaScript onLoad function to override it to pixels. Your users should not notice it.
You can find many examples of the JavaScript code.
Use jQuery's onload to retrieve the calculated width after loading, then set it as the div's defined width:
$(function() {
var width = $("#mydiv").width();
$("#mydiv").width(width);
});
I want to embed a silverlight app into a web page and have the height/width of the div that contains the silverlight control match the dimensions of the actual size of the silverlight control.
I essentially want the div to stretch to accommodate the size of the silverlight control. I do not know what size the silverlight control will be before it loads as it is pulling in data and adding controls dynamically.
I want to avoid dueling scroll bars and use only the browser scroll bars.
I need this to work in both IE and Firefox.
Is there a way to accomplish this?
You could set the height to 100% and put a
<div style="clear:both"></div>
at the end of it to make it fill the parent control.
Yes it can be done. There are two methods:
set your plugin control to be 100% height and width, then use a div around it to control its size. Then call a javascript function through the javascript bridge, and have that function manipulate the div by using document.getElementById() or jQuery
forget about controlling a div and use HtmlPage.Plugin from your managed code, this avoids the javascript bridge and gives you access to the plugin container itself, then you can just set the width/height like this:
HtmlPage.Plugin.SetStyleAttribute("height", height + "px");
Note that FFox from about v3.6.8 onwards has an issue if you try to manipulate the plugin style attributes repeatedly too rapidly, i don't know if the recently released v3.6.11 suffers from the same problem.
So I am making a web page, and when I zoom in or out on any web browser on the webpage, everything shrinks in the same proportion, which is fine. However, when i start to use a DIV that i position absoluteness, i do not get the same effect. When zooming out, the div does not stay in proportion with the other elements on the page. How can i position something absolutely, but keep it relative to everything else... if at all possible!
thanks.
You must handle window resize event and manualy calculate new width/height of your div.
in jQuery:
$(window).resize(function() {
$('#div_foo').height( $(this).height()/2 );
});