SillyDog701

by **webguy** » Tue 26 Jan, 2010 11:28 am

Hello Pro's- I have a situtaion where I would have to remove the scrollbars of an iframe at runtime. That is the page is rendered first and has an iframe with scrollbars, I would have to remove the scrollbars after the page is loaded.
I have tried different ways but I was unable to remove the scrollbars using javascipt. Any help is appreciated :-)

Here is the code I was playing with...
info - adding a new iframe using JS with the attribute 'scrolling=no' removes scrollbars but does not work/remove scrollbars for an existing iframe

<html>
<script>
var count=1;
function removeScroll()
{
var testIframeObj=document.getElementById("testIframe");
var scrollStr=testIframeObj.scrolling;
alert("scrollStr="+scrollStr);
//testIframeObj.scrolling="no";
testIframeObj.scrolling="no";
testIframeObj.width="600";
testIframeObj.src="http://www.w3schools.com/html/default.asp";
//adding a new iframe with the attribute 'scrolling=no' works but does not work for an existing iframe
newIFrame = document.createElement("IFRAME");
newIFrame.width=300;
newIFrame.height=300;
newIFrame.scrolling="no";
newIFrame.id = "runtimeIframe"+count++;
newIFrame.src = "http://www.w3schools.com/";
document.body.appendChild(newIFrame);
//testIframeObj=newIFrame;
}
</script>
<style>
iframe
{
scrolling:no;
}
</style>
<body>

<p>An iframe where scrollbars are always shown:</p>
<iframe src ="http://www.w3schools.com/" width="200" height="200" scrolling="yes">
<p>Your browser does not support iframes.</p>
</iframe>

<p>An iframe where scrollbars are never shown:</p>
<iframe id="testIframe1" src ="http://www.w3schools.com/" width="200" height="200" scrolling="no">
<p>Your browser does not support iframes.</p>
</iframe>

<iframe id="testIframe" src ="http://www.w3schools.com/" width="200" height="200" >
<p>Your browser does not support iframes.</p>
</iframe>
<input type="button" value="remove scroll" onclick="removeScroll();"/>

</body>
</html>

UserAgent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; Monsanto; US; STL; .NET CLR 1.1.4322; .NET CLR 2.0.50727; InfoPath.2)

by **Don_HH2K** » Tue 26 Jan, 2010 12:38 pm

I cut your code down to this:

Code: Select all: <html> <script> function removeScroll() { document.getElementById("testIframe").scrolling="no"; } </script> <body> <iframe id="testIframe" src ="http://www.w3schools.com/" width="200" height="200" > <p>Your browser does not support iframes.</p> </iframe> <input type="button" value="remove scroll" onclick="removeScroll();"/> </body> </html>

...and can confirm that the removeScroll() function is working as expected, it removes the scrollbars from the <iframe> element with ID "testIframe" when you hit the button labeled "remove scroll".

If you want to have it remove the scrollbars when the page is finished loading, you can make use of the onLoad event in the <body> element, as such: [tt]<body onload="removeScroll();">[/tt].

UserAgent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.3a1pre) Gecko/20100121 Minefield/3.7a1pre

by **webguy** » Tue 26 Jan, 2010 2:33 pm

Hello Don!
Thanks for your help. I tried your code and it did not work. Which browser version are you on...? I tried your code with IE-6/7.0.
Any thaughts?

UserAgent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; Monsanto; US; STL; .NET CLR 1.1.4322; .NET CLR 2.0.50727; InfoPath.2)

SillyDog701

remove scrollbars of an IFrame using javascript

remove scrollbars of an IFrame using javascript

The code did not work...

Who is online