How to remove Horizontal Scrollbar in iFrames?

**ecthelion8** · 02-06-2008, 05:35 AM

I have a webpage that is using iFrames.
Is there anyway I can remove the horizontal scrollbar and enable only the vertical scrollbar in the iFrame?

I have literally broken my head over this the past few days and searched on the net as well.

Code:

<p><iframe name="I2" allowTransparency="true" marginwidth="1" marginheight="1" align="right" border="0" frameborder="0" width="550" height="280" scrolling="auto" src="test1.htm" style="border: 2px solid #D0D0D0; padding: 0">Your browser does not support inline frames or is currently configured not to display inline frames.</iframe></p>

The source page "test1.htm" is exactly 550x280 pixels (I made it in Fireworks 3). But when I put the scrolling="auto" both scrollbars appear for some reason. What I want is that just the vertical scrollbar should come but NOT the horizontal bar, even if the damned source page exceeds the iFrame length.

I tried the following code but it never worked (am I doing anything wrong)

Code:

<p><iframe name="I2" allowTransparency="true" marginwidth="1" marginheight="1" align="right" border="0" frameborder="0" width="550" height="280" scrolling="auto" src="test1.htm" style="overflow-x: hidden; border: 2px solid #D0D0D0; padding: 0">Your browser does not support inline frames or is currently configured not to display inline frames.</iframe></p>

But it didn't work (when I put the preview in MicroSoft FrontPage in IE6). I even tried overflow-x: hidden; overflow-y: auto;
in the style thing of the iFrame tag.

Somebody please help. This is getting really bugging.

Pardon the long code.

**ecthelion8** · 02-07-2008, 05:00 PM

sorry to interrupt, but this is really important and knowledge is for sharing

**sticks464** · 02-10-2008, 01:01 AM

Using overflow-x is not recognized in Opera or Firefox. But you can do it this way. Put this style in the head section

Code:

<style type="text/css">
#I2 {
width:600px; /* extra width to allow for right scrollbar width */
height:280px;
border:2px solid #D0D0D0;
padding: 0;
}
</style>

This for your iframe

Code:

<iframe id="I2" allowTransparency="true" align="right" src="test1.htm"></iframe>

The test1htm page should be styled so the content is only 550 pixels wide and 280 pixels height, otherwise it will automatically cause the iframe to add the bottom scrollbar.

**ecthelion8** · 02-10-2008, 04:15 AM

damn ur a genius..

thanks a lot..

**ecthelion8** · 02-10-2008, 01:53 PM

sticks464,
is there anyway I can change the attribute of the iFrame by an event associated with the source page?? (thru JavaScript or whatever)

What I want to happen is that on clicking a link in the source page in the iFrame, the source page (_self) of the iFrame changes AND the attributes (i.e. to change the scrolling styles from a no-scrolling initially to a scrolling type u gave). Is that possible through some _root or _parent or document thing in JavaScript? Or is the only way to create a new page with the iframe and attributes?

Please help.

**ecthelion8** · 02-12-2008, 12:41 AM

no offence and all that, but this lack of support is really sort of disappointing for a noob..

could somebody who is gifted in the field of iFrames and JavaScript please help lesser privileged persons like myself??? Please this is really important

**sticks464** · 02-12-2008, 03:16 AM

See if this will help
auto adjust iframe

**ecthelion8** · 02-13-2008, 01:12 AM

thanks a lot sticks464,
but let me explain my problem more clearly.

I have a html page with the page divided into 2 frames and in the lower frame there is this iFrame, whose dimensions are 550x280.
this iFrame is sort of like the content page, where most of the content of the site will be displayed and stuff.

Now, for the home, blah blah parts of my website, the target page of the iFrame is a page with Flash embedded exactly 550x280, so I have put the scrolling="no" attribute and everything was ok.

But, now I have some content pages which are not made with flash. (they were made with FrontPage itself) and predictably they are still the same length(550) but quite long.

All through my site, the only thing that changes on clicking any button would be the iFrame content. And so when I was toggling between the pages which had the Flash in them all was fine because they had no scrolling anyway.

But, when I click on one of the links to go to the FrontPage content pages, verything messes up.. ie. a horizontal scrollbar comes (not sure why, but I think it's because to compensate for the vertical scrollbar's width) and the vertical scorllbar (obviously).

Keepin in line with the general symmetry of the flow of control.. ie. just the iFrame content changes on any event, what I want to happen is :

- On Clicking a button in the iFrame source page which links to the pages with flash in them which are optimized for 550x280 and need no scrolling, the iFrame should remain the way it is.
- On Clicking a button in the iFrame source page which links to the pages made by FrontPage (which require vertical scorlling) the iFrame should adjust to become the compensated iFrame which was patiently explained by sticks464.

That's all. In the previous example given by sticks464, what I want to know is :

On puting those iFrame attributes anyway on the main html page will the folliwing happen :
1. WHen the source page is the normal 550x280 page with flash, will it come properly without any scrollbars.
2. When the source page is the FrontPage pages which require vert scorlling, will my required output come.

Will it check the iFrame code (adjust the iFrame) everytime a link has been clicked on the source page? Or everytime the source of the iFrame changes?

Sorry for the long post, but please help and thanks in advance.

**sticks464** · 02-13-2008, 07:04 PM

You'll have to point me to a live link so I can see what it is doing. Right now I am guessing and that won't give you any results.

**ecthelion8** · 02-14-2008, 12:19 AM

Originally Posted by sticks464

You'll have to point me to a live link so I can see what it is doing. Right now I am guessing and that won't give you any results.

sorry but it isnt uploaded yet..
i tried to explain what sort of output i am expecting..

in a nutshell, basically i want this :
- I have an iFrame with scrolling="no".
- on clicking a link in the source page of the iFrame, which has a target="_self", can I change iFrame attributes (make it the solution by sticks with the styles .... change from scrolling="no" to the scrolling without hor.scrollbar).
Or in other words, when I click on a link in the iFrame page, it should chage the iFrame source page (obviously) AND change iFrame attributes such as height, etc.

That's all. I cant figure out how to do this.. sticks464, u seem to be a javascript guru, so please help

**sticks464** · 02-14-2008, 02:11 AM

With the script I gave you it will look like this
On you source page with the iframe

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

<style type="text/css">
#frame {
border:2px solid #D0D0D0;
width:600px;
}
#myframe {
width:600px; /* extra width to allow for right scrollbar width */
padding: 0;
overflow:visible; 
display:none
}
</style>
<script type="text/javascript">
/***********************************************
* IFrame SSI script II- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids=["myframe"]

//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide="yes"

var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers

function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids[i])
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight; 
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}

function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}

if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller

</script>
</head>

<body>
<div id="frame">
<iframe id="myframe" src="test2.html" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0"></iframe>
</div>
</body>
</html>

For test1

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.test1 {
width:550px;
padding:0 10px;
}
</style>
</head>

<body>
<div class="test1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. <a href="test2.html">Cras faucibus</a>, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
</div>
</body>
</html>

test2

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.test2 {
width:550px;
padding:0 10px;
}
</style>
</head>

<body>
<div class="test2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. <a href="test1.html">Cras faucibus</a>, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
</div>
</body>
</html>

Only FF will put a scrollbar on the right side, IE6 and 7 will not have any scrollbars. This does not work in Opera.
The 2px border goes around the div, IE does not display a border on the iframe but will on the div.

**ecthelion8** · 02-14-2008, 03:57 AM

sticks464, i really appreciate you taking the time out for helping me.. respect

The horizontal scrollbar issue has been resolved (thanks a million sticks464) but now What im looking for it to apply that condition checking the source page of the iFrame.

im realy sorry but im sure im bungling up something and the autoresize iframe thing because i am getting both horizontal AND vertical scorllbars disabled.
i can't understand head or tail of it anyway but that's not saying much since i am pretty confuzzled in these matters.

Once again, I'll try to explain what I exactly am trying to do (this code does not work btw for unknown reasons

)

this is my main page which contains the iframe to be changed (I2)

Code:

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<base target="_self">

<script lang="JScript">

function change()
{
var fam=parent.document.getElementById('I2'); 
var source=fam.src;

if(source=='videos1aa.htm' || source=='videos1ab.htm')
{
fam.width=400; //Just a test to see if it really works (to change the size)
fam.height=400;//
}
}

</script>

</head>

<body background="videos1bg.jpg">

<p><iframe name="I1" allowTransparency="true" marginwidth="1" marginheight="1" height="282" width="184" scrolling="no" align="left" border="0" frameborder="0" src="links1.htm">Your browser does not support inline frames or is currently configured not to display inline frames.</iframe></p> 

<p><iframe name="I2" onLoad="change()" allowTransparency="true" marginwidth="1" marginheight="1" align="right" border="0" scrolling="no" frameborder="0" width="550" height="280" src="test1a.htm" style="border: 2px solid #D0D0D0; padding: 0"></iframe></p>

</body>

</html>

I hope now its sort of clear.

What I want to do is :
1. Check the source of the iFrame everytime (or everytime the source changes?)
2. If it is videos1a.htm or videos1b.htm, i want to change the size of the iFrame to make it the way sticks464 told me with the styling, but here just with javascript. (hopefully im guessing this should work??)
3. if it isnt any of these (i.e. if it is test1a.htm', the size should be 550x280)

The scenario is :
initially the iFrame source is 'test1a.htm' which has 2 links in it :
1. to videos1a.htm
2. to videos1b.htm

when i click on either of these (in the source of the iFrame, ie test1a.htm) i want the iFrame to check its source.
if it is one of the videos1a or b, it has to change its size. that's all

the output im getting with my code :
there is no change of size of the iFrame, videos1a and 1b are just loaded in the iFrame with same dimensions.

if i still am vague, the first post in this thread is exactly exactly just wha i want :
http://www.webmasterworld.com/javascript/3333890.htm
sticks464 im really really sorry for like bugging you so much but please this problem has taken more than week for me.. i implore you, please help

**ecthelion8** · 02-14-2008, 05:45 AM

ok everybody
i found a solution.. sort of.

what i did was :
all unchanged except :
in my pages videos1a.htm and videos1ab.htm, i put the following code;
in the body i put an onload="change()"
and

Code:

<script lang="JScript">
function change()
{
var fam=parent.document.getElementById('I2'); 
fam.width=300; 
fam.height=200;
fam.scrolling="auto";
}

the size thing works fine, BUT the scrolling doesnt!!
WHYYY!!
in the parent i have put scrolling="no".. and it seems like the function of the page in the iframe cannot change it!!
can someone tell me what's going wrong and how can I change the scrolling attribute from inside the iframe page..

**Cuppencake** · 08-25-2012, 10:48 AM

Code:

<style type="text/css">
#iframe {
width: 600px; /* extra width to allow for right scrollbar width */
height:280px;
border:10px double #8d617a;
padding: 0;
}
</style>

this works, however whenever i click on a link- although my links are targeted to open in "iframe" it opens in a new tab.

Thread: How to remove Horizontal Scrollbar in iFrames?

Thread Tools

Display

How to remove Horizontal Scrollbar in iFrames?

Posting Permissions