Solved

Get Rid of iFrame scroll bars!

Posted on 2004-08-07
13
1,893 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 500 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
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!

 
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

Industry Leaders: 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!

Question has a verified solution.

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

Most of the sites are being standardized with W3C Web Standards. W3C provides lot of web standard services to the web. They have the web specification, process and documentation for all the web standards. You can apply HTML, CSS and Accessibility st…
Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL several years ago, it seemed like now was a good time to update it for object-oriented PHP.  This article does that, replacing as much as possible the pr…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

739 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