Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1918
  • Last Modified:

Get Rid of iFrame scroll bars!

I am trying to get rid of scroll bars on iFrames, but our application is a little tricky I think.

We are providing HTML for a client to copy and paste on their web site. The HTML is as follows:

<iframe name="Stretchinternet Event Viewer"
src="http://live.stretchinternet.com:9898/demo/games.php?user=stream@stretchinternet.com&o=cal_date"
frameborder="0"
scrolling="auto" height="100%" width="100%">
</iframe>

The iFrame pulls up a PHP page that is dynamically linked to a database.

Is there anyway to force the client's web page to accomodate the iFrame so that there are no scrollbars? It would seem the typical JavaScript methods of grabbing the height would not work since the iFrame is dynamically generated.
0
rermeling
Asked:
rermeling
1 Solution
 
suramsureshbabuCommented:
i dont think its possible as the iframe will occupy the whole of the window

so if the data is more than the explorer window can contain we will get the scroll bars

suresh :)
0
 
COBOLdinosaurCommented:
You need to put some scripting on the generated page. Put this in the head of the page going to the iframe:
<script type="text/javascript">
function setSize()
{
var x,y;
var test1 = document.body.scrollHeight;
var test2 = document.body.offsetHeight
if (test1 > test2) // all but Explorer Mac
{
      x = document.body.scrollWidth;
      y = document.body.scrollHeight;
}
else // Explorer Mac;
     //would also work in Explorer 6 Strict, Mozilla and Safari
{
      x = document.body.offsetWidth;
      y = document.body.offsetHeight;
}
}
onload=setSize;
</script>

It is possible to reference the internals of a page in an iframe from the main page; but you won't be able to do that because you are going cross-domain and the would just genrate a security violation message.

Cd&
0
 
waygoodCommented:
Just use  scrolling="no"  in the iframe tag instead of auto
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
cristy56Commented:
You can also try this :

<script language="JavaScript">
function movedown(target)
{
       target.scrollBy(0,200);
}

function moveup(target)
{
       target.scrollBy(0,-200);
}
</script>


<iframe src="test.htm" NAME="content_frame" width=600 height=400 scrolling=no frameborder=1></iframe>
<IMG SRC="./images/up.gif" onclick="return moveup(content_frame)">
<IMG SRC="./images/down.gif" onclick="return movedown(content_frame)">

you can create 2 button using some graphics, and then use javscript to control the up and down scroll.

Cristy
0
 
cristy56Commented:
And, the 200 in target.scrollby can be adjustrf to any height difference you want for each press on the button, if u want to scroll less, you might reduce it to 100 or anything up to you.

Cristy
0
 
davidlars99Commented:
hi, of course you can do thing like that. try this: inside the body of the page which is the --src-- of iframe in your case --games.php--  put  --style="overflow:hidden"-- this css must be declared like this <body style="overflow:hidden">.

OR you can use DOM

if you're loading an extrenal  page in iframe you are going to use Javascript and set owerflow property from there to iframe object like this:
window.frames["StretchinternetEventViewer"].document.body.style.overflowY="hidden";
window.frames["StretchinternetEventViewer"].document.body.style.overflowX="hidden"

see..? you got two ways...

cheers!
 dave
0
 
davidlars99Commented:
remmember thou... you cannot use DOM if source of the iframe is from another server in this case you can use <iframe src="bla.php" scrolling="no"></iframe>. I just tested it in every way I said. I tested in Opera, Mozzila, Netscape and IE they are all latest builds of its kind
0
 
quddhusCommented:
<IFRAME src='http://hostname/pagename'
              width='100%'
              height='650'
              frameborder='0'
              scrolling='no'
</IFRAME>

make sure that height specified accomodates whole page which is to be displayed. This should solve the problem of scroll bar in iFrame.

All the best.
0
 
cristy56Commented:
Hi quddhus,  the author said that the iFrame is dynamically generated, how can he specific a certain height before hand ? is that possible ?

Cristy
0
 
cwolvesCommented:
in the iframe, do something like:

<script>window.parent.iframename.height=window.offsetHeight;</script>
0
 
davidlars99Commented:
none of these solutions solved your problem...?
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now