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?.
Related
I would like to embed an slideshare presentation within a tooltip.
generally I want my tips to change their height/width dynamically based on their content hence I set (in my CSS)
width:auto;
height:auto;
I would like to have the width of the tooltip dictated by the inline width attribute of the iframe.
see here http://jsfiddle.net/elewinso/eNfHZ/
The meaning of width: auto depends on the properties of the element, and in this case, it means 300px, as per clause 10.3.1 of the CSS 2.1 spec. The iframe element has no intrinsic width, and you cannot (in CSS) make its width depend on the content of the iframed document. It is part of the very idea of iframe that the iframed document is rendered autonomously, independently of the settings of the framing document, except that the latter sets dimensions on the inline frame, but it needs to set them in its own context (which does not include the content of the iframed document).
So if you want to have your tooltip rendered smoothly, just don’t use iframe. Instead, use content (static or script-generated) in the main document.
If you just want to have the HTML width attribute on the iframe element take effect, just don’t override it in CSS. Any setting of the width property of an element will make the width attribute on it null and void.
100% width works:
div.sttip iframe{
width: 100%;
height: auto;
}
http://jsfiddle.net/eNfHZ/1/
You won't be able to maintain aspect ratio though, you'll have to use Javascript to calculate the height using a onResize event handler.
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.
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.
I have a really cool website that allows people to upload images. Sometimes there images are really large, as seen in the below div:
![Overflow][1]
Is there a style that can I add to my DIVs to fix this?
Link
Set your CSS overflow property on the div to one of these:
overflow: auto; /* Adds scrollbars only when necessary */
overflow: scroll; /* Adds inactive scrollbars until needed, then activates */
overflow: visible; /* Causes the div to expand to fit the content */
overflow: hidden; /* Hides any content that overflows */
You can use the CSS overflow property: set it to hidden or auto to either hide content or add scrollbars if necessary.
Generally speaking, with large images you want to thumbnail them and not automatically display them, particularly if they're over a certain size.
Using the height and width CSS attributes (or the height and width attributes) will scale the image but it'll still download the whole thing. If its large that could be a problem. It's best to generate a thumbnail on upload, display that and then allow the user to click on that to display the full-size image.
<style>img { max-width: 100% }</style>
This will make the browser resize images to fit inside their containing box. There's a few drawbacks, one being that it obviously won't work in IE6 (maybe 7?), and if the containing element has padding you'll need a wrapper around the image to make it fit.
Another great one although not fully supported would be adding max-width: 400px to your image.
Instead of using CSS, you should do a basic width & height check on your server side, and if it goes beyond a certain threshold use HTML/Javascript to resize the image. Many website forum applications do this and often allow you to click to expand the image.
Then make sure you use the Z-LAYER property to make sure the image floats above content blocks so when the image expands it's above everything.
Automatically resize each of the uploaded images, using a toolkit like ImageMagick. You'd also end up with better looking images, because it'll resample (rather than just resize).
You can then create good looking thumbnails, previews and other sizes of each images that'll fit nicely into your template designs.
If you don't want to go all the way to resizing the actual image file, and want to maintain the proportions of the image, then you can interrogate the image for its sizes (height and width) then multiply them by a required factor to fit into your div.
For example, if you have a 1024x768 image and want to put it in a div that is 800 wide, you know the width will be 800, and the height will be 768 x (800/1024) = 600. Then when displaying your image you can set the height and width properties as required.
or, with some little piece of javascript, you can check for an image width. if is larger than Xpx, then you scale to Ypx. Ofcourse, you will have a little "image flick" until the page is completly loaded.
You can inspire yourself from any IPB forum :)
I am rather new to complex CSS, and have a question- I have a page which positions a floating element along the bottom of the page. It does so by setting the Bottom: 0, and Position: Absolute.
When the user resizes their browser to a very-small size, this element covers up other content on the page.
Ideally, The element would continue to float at the bottom of the browser at normal and large sizes, but if the browser window were to be shrunk too small, the browser would force a scrollbar, instead of moving the floating element any further.
Essentially, I want to tell the browser- No matter how small the window is, never render the page smaller than 800x600.
You could set html, body { min-width: 800px; min-height: 600px; }
YMMV in different browsers though.
It really depends on whether the floating footer needs to always be visible or if it can scroll off the bottom when the browser window is small.
I think some javascript might be easier to manage than a css solution. Keep in mind that min-width and min-height don't work in all browsers.
You can use jquery to make this easier. The
$(window).resize( callback )
can be used to set a callback function to handle window resizing.
I use the window dimensions as part of my resize code also.
var wh = Math.max(600,$(window).height());
var ww = Math.max(800,$(window).width());
Then I can set the size of a div in my page based on the window size.
$('div#mydiv').css('width',ww);
You can also set the value to auto to unset your specified value.
I know it is a bit of a cheat but you can use the old trick of putting in an image that is of the required minimum width in the floating element, and the same colour as it. It is then effectively invisible, but prevents the element, and therefore the whole page, from shrinking.