?
Solved

Get Rid of iFrame scroll bars!

Posted on 2004-08-07
13
Medium Priority
?
1,904 Views
Last Modified: 2012-05-05
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
Comment
Question by:rermeling
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
13 Comments
 
LVL 7

Expert Comment

by:suramsureshbabu
ID: 11745692
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
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 2000 total points
ID: 11746430
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
 
LVL 9

Expert Comment

by:waygood
ID: 11749659
Just use  scrolling="no"  in the iframe tag instead of auto
0
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
LVL 5

Expert Comment

by:cristy56
ID: 11749690
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
 
LVL 5

Expert Comment

by:cristy56
ID: 11749695
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
 
LVL 13

Expert Comment

by:davidlars99
ID: 11758549
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
 
LVL 13

Expert Comment

by:davidlars99
ID: 11758584
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
 
LVL 1

Expert Comment

by:quddhus
ID: 11771077
<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
 
LVL 5

Expert Comment

by:cristy56
ID: 11771148
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
 
LVL 9

Expert Comment

by:cwolves
ID: 11903619
in the iframe, do something like:

<script>window.parent.iframename.height=window.offsetHeight;</script>
0
 
LVL 13

Expert Comment

by:davidlars99
ID: 11992715
none of these solutions solved your problem...?
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

801 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question