We Keep Coding

HTML Iframe within page content

I have a huge content in an HTML page and i want to put the same within iframe. But putting the content within iframe tag within page, page shows that part as blank. Please suggest how does we put content within iframe in the same HTML. What should be placed in src if applying the same page content.
<iframe src="">
//Content
</iframe>
Thanks.

I strongly recommend that if you want to place a large section of your current page's output into a scrollable area of your page, don't use an iframe, instead do something like this:
<div style="overflow-y: auto; width: 100%; height: 400px;">
<!-- put all of your large amount of content after this comment, before the closing div tag -->
<p>this is my huge amount of content (just an example.... you'd have hundreds of lines of code here I suspect</p>
</div>
Of course you can change the height and width of the div to suit your needs.
the div style="overflow-y: auto;" with a specified width and height should (I think) create a scrollable area in your page similar to the output of an iframe, but without requiring the browser to load two copies of the contents. Also you avoid the possibility of an infinite loop.
you could also add a border around the area if you like, for example after height: 400px; by changing the first line to this:
<div style="overflow-y: auto; width: 100%; height: 400px; border: 2px solid grey;">

You would put the link to the page you need to display the content from
<iframe src="http://www.yoursite.com"></iframe>
src = URL potentially surrounded by spaces Gives the address of a page
that the nested browsing context is to contain.
read up on iframes

Say for example all of your HTML is inside index.html, simply set the src attribute to index.html.
Like so:
<iframe src="index.html"></iframe>
Remember, this doesn't necessarily work correctly as you'll run the <iframe> into a continuous loop. Though, correct me if I'm wrong, it will only repeat the iframe twice as a security policy.

<iframe src="URL or pagename.html"></iframe>

Force the user to the top of the page?

This is my website: http://www.ragewarsclan.com
I was having trouble integrating a Forum into my website.
I used object at first then realised that this wouldn't be the best solution, so I switched to iframe and used this code:
<div style="margin: 0 auto; width:100%; height:100%;
overflow: auto;"><iframe src="./smf/" width="100%" height="100%"></iframe></div>
This only seemed to work for chrome as in other browsers the height of the forum would only be something like 250px so I changed from having 100% to 1750px.
However, now, when the user clicks on one of the forum categories, it puts the user near the bottom of the page so I used jquery and used this to try and force the user to the top of the page when a forum category has been clicked:
<script type="text/javascript" src="jQuery-1.4.1-min.js">
$(document).ready(function(){
$(this).scrollTop(0);
});
</script>
Although this hasn't seemed to have worked and I'm not sure why...
Thanks.

you can make your forum categories links and set their href to an element at the top of the page
http://jsfiddle.net/sTr8F/
<div id="top"> top of page. scroll down to find link and click on it </div>
forum category

scrollTop doesn't scroll to the top, it returns the y-offset of the page.
If you need to scroll the page to the top using jQuery (so you can do it also smoothly) you can use animate
$("html, body").animate({scrollTop:0},500); //will be done in 500ms

Facebook link creating whitespace in page

I'm using Facebook's own script, and have implemented that on my site.
The problem is that it makes a whitespace of about 35px * the page height at the right side of the site. I cannot find it anywhere in firebug, and have isolated the script to be the cause.
How can I use it, or change it so I don't get that whitespace? really annoying to get a horizontal scroll because of this!
if I set a width to the fb:like that is over 400px(the div size) the whitespace disappears but the button is placed wrong
Script:
<script src="http://connect.facebook.net/en_US/all.js#appId=222642751115062&xfbml=1"></script><fb:like href="<My Page Name>" send="true" width="350" show_faces="true" font=""></fb:like>
Screenshot:
http://imageshack.us/photo/my-images/59/problemx.png/
CURRENT SOLUTION
Put the background-image on body tag to get it to make the whitespace be the same color as background, then removing scrollbars like this:
html
{
overflow-x: hidden ! important;
overflow-y: auto ! important;
}

I think the with of the like button is simply to wide. Try setting it to a lower value (width="150"):
<script src="http://connect.facebook.net/en_US/all.js#appId=222642751115062&xfbml=1"></script><fb:like href="<My Page Name>" send="true" width="150" show_faces="true" font=""></fb:like>

How would you make an iframe's height always extend to the bottom of the browser window?

I want to generate an iframe whose height will extend to the bottom of the browser window. If the user changes the height of the browser, then the iframe's height should change dynamically as well. However, I'd like for the iframe to have a minimum height past which it would not shrink any further. How would I do this?

I'm doing something very similar.
1) Get a hold of the window resize event (I am using jQuery)
$(window).resize(function(){});
2) Pop in what you want your actions to be. For me I was setting a height explicitly on the body of the document so my CSS of height:100% on an inner container would take hold. You could do anything within the function:
$(window).resize(function(){
$('body').height($(document).height());
});
My markup :
<html>
<body>
<div class="full-height">Hello World</div>
</body>
</html>
My CSS :
body {position:relative;}
.full-height {height:100%;}

It would help to see what you're working with, but this will hopefully point you in the right direction.
iframe {
height:100%;
min-height:300px;
}

have you tried putting the iframe inside a wrapper div
<div id="iframediv" style="min-height:500; overflow:scroll">
<iframe src="http://google.com">­ </iframe>
</div>
It's worth a shot.

Scrollbars on overflow div do not appear when content is added to div using Javascript

I have an HTML Document that looks a bit like this, only is far more complex and harder to control:
<body>
<div id="title">This div does not do anything, just stays at the top.</div>
<div id="container">
<div id="navigation">Some navigation</div>
<div id="content">Most of the content</div>
</div>
</body>
Then I have a stylesheet that includes the following:
#container
{
height: auto !important;
overflow: visible !important;
overflow-x: auto;
overflow-y: scroll;
position: relative;
width: auto !important;
}
This all works absolutely perfectly. The title section stays at the top of the page, the container div becomes scrollable if the content is long enough to need to scroll, otherwise it doesn't.
The problem is, that I am then using Javascript to add a whole lot more stuff to the content div. This means that the content div is getting longer than the page after it has loaded and this seems to mean, in IE8 at least, that the scrollbars on the container never get activated, so once the Javascript added content falls off the bottom of the page it becomes inaccessible.
It doesn't help that the minute I start tinkering with the IE developer tools, the scrollbars vanish altogether and I can't make them reappear, so it becomes somewhat hard to test.

I know IE8 has some issues with overflow-y.
You should try with this maybe.
-ms-overflow-y: scroll;
Hope that helps.

Hard to say if this will work without seeing more code, but why not remove the styles from your css and add them with javascript, once the content has loaded.

The solution that has worked was a simple hackaround of resizing the element with JavaScript to match the size it actually is once I have added the extra data to it, like this:
document.all['container'].style.height = document.documentElement.clientHeight+"px";
Of course, this doesn't entirely circumvent the problem- for that we need a new function:
function resizeResults()
{
var resultPanel=document.all["container"];
var topPanel=document.all["title"];
var newHeight= document.documentElement.clientHeight;
newHeight -= topPanel.clientHeight;
resultPanel.style.height=newHeight;
}
Then we can use window.attachEvent("onresize", resizeResults); to ensure that we don't lose the scrollbar or have it otherwise messed around when the user changes the window size.

Just remove the styles you have given for the element to make it scroll before loading ajax content to it.After loading ajax content then add those attributes again.