Solved

Get Rid of iFrame scroll bars!

Posted on 2004-08-07
13
1,885 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
13 Comments
 
LVL 7

Expert Comment

by:suramsureshbabu
Comment Utility
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
Comment Utility
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
Comment Utility
Just use  scrolling="no"  in the iframe tag instead of auto
0
 
LVL 5

Expert Comment

by:cristy56
Comment Utility
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
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 13

Expert Comment

by:davidlars99
Comment Utility
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
Comment Utility
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
Comment Utility
<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
Comment Utility
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
Comment Utility
in the iframe, do something like:

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

Expert Comment

by:davidlars99
Comment Utility
none of these solutions solved your problem...?
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
I will show you how to create a ASP.NET Captcha control without using any HTTP HANDELRS or what so ever. you can easily plug it into your web pages. For Example a = 2 + 3 (where 2 and 3 are 2 random numbers) Session("Answer") = 5 then we…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

771 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now