Solved

Javascript implemented iFrame has extended bottom how do I hide it?

Posted on 2009-04-08
7
339 Views
Last Modified: 2012-05-06
Hiya

Popular question on positioning content exactly within iframe and I have only found one true solution however I can't perfect its use.

Code Below.

You should be able to quickly test it yourself and see that my example is a flash game which is boxed off nicely HOWEVER. If you put a div below the iframe it ends up about 500 pixels lower creating a large empty space. Its obvious what setting creates the exact height however when I change it from 794 to anything lower it effects the iframe content view. Counter balance has been impossible, maybe something I'm not getting!

Any help on would be great. I know iFrames are to be buried however I don't believe they should be and plan to use them a lot so help is great right now.
<style type="text/css">

				#outerDiv{overflow:hidden;

				position:relative;

				width:200px;

				height:100px;}

				#innerIframe{ position:absolute;

				/* increase to nudge right, decrease to nudge left. Note negative number. */

				left:-823px;

				/* increase to nudge down, decrease to nudge up. Note negative number. */

				top:-403.5px;

				width:200px;

				height:100px;

				border:1px;}

				</style>

				<div id='outerDiv'>

				<iframe id='innerIframe' scrolling=no  src=''>

				</iframe>

				</div>

				<script type='text/javascript'>

				_rect=new Array();

				_rect.push(-220);//site left

				_rect.push(-385);//moved site up

				_rect.push(130);//increase window size to right

				_rect.push(0);//extends or decreases bottom bottom

				_rect.push(622);//changed overall view width

				_rect.push(794);//Changed overall view height

				_outer=document.getElementById('outerDiv');

				_outer.style.width=_rect[4]+'px';

				_outer.style.height=_rect[5]+'px';

				_inner=document.getElementById('innerIframe');

				_inner.src='http://www.yogames.net/yogames/xstuntbike_game.html';

				_inner.style.top=_rect[1]+'px';

				_inner.style.left=_rect[0]+'px';

				_inner.style.width=(_rect[2]+_rect[4])+'px';

				_inner.style.height=(_rect[3]+_rect[5])+'px';

				</script>

Open in new window

0
Comment
Question by:Ryan Bayne
  • 4
  • 3
7 Comments
 
LVL 3

Expert Comment

by:Duboux
ID: 24103558
Okay, lol... first of all.. please tidy your script, as this is pain to look at ;P
Second.. Have you tested your script in other browsers than IE (or w/e u were using) ?

And I'm not sure what you are trying to do, other than just showing that game on your page, so here's how you show that game on your page, in all browsers, using clean, neat and tidy code ;)


<style type="text/css">

    #outerDiv{

        overflow:hidden;

        position:relative;

        width: 550px;

        height: 400px;

        border: 10px solid yellow;

    }

</style>
 

<div id="outerDiv">

    <object id="FlashGame" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="550" height="400">

        <param name="movie" value="http://www.yogames.net/flash2/xstuntbike.swf">

        <param name="quality" value="high">

        <embed src="http://www.yogames.net/flash2/xstuntbike.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" class="FlashGame" width="550" height="400">

    </object>

</div>

Open in new window

0
 
LVL 2

Author Comment

by:Ryan Bayne
ID: 24105795
Its not actually my script and I normally get it working then tidy so sorry about that.

I need the iFrame working as it is to be used many times. That flash game was just a quick example.

You can see the problem if by testing that script and putting another div or paragraph under all of it. It ends up way down the page. Hope that makes sense.
0
 
LVL 3

Expert Comment

by:Duboux
ID: 24105874

Okay, so you want an iframe that has a page inside, scrolled to the right position to show a specific area ?
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 2

Author Comment

by:Ryan Bayne
ID: 24116455
Yes, I used to do it easy a long time ago but the usual code did not work and I read its become a bit old with W3C so I figured the browser was not supporting it or something?!

Are you going to tell me I don't need this JS?
0
 
LVL 3

Expert Comment

by:Duboux
ID: 24119152
Well, while I'll look for your answer, your code in the first post doesn't work in other browsers than IE.
And most browsers exept IE only work according to the W3C rules and standards.
0
 
LVL 3

Accepted Solution

by:
Duboux earned 250 total points
ID: 24119856
Okay, bad news...

JavaScript is restricted to act on pages outside the domain.
https://developer.mozilla.org/En/Same_origin_policy_for_JavaScript

But I can´t seem to get a page inside an iframe to scroll anyway, whether it´s a local page in there or not.. Unless the javacommand to scroll (which is scrollBy(xvalue, yvalue), btw) is on the page inside the iframe itself..

So, what you can try to do, and this is a dirty trick, is to make a local php-page inside the frame, that fetches the source code from the page you want to show, and adds the correct javascript command to scroll on load.


Sorry for the bad news..
0
 
LVL 2

Author Comment

by:Ryan Bayne
ID: 24121876
Well that changes a lot of my plans for implementing a lot of iFrames in a lot of ways! I was going to display all of my clients websites on 1 page in my admin area for a quick status check on stats and other implementations for handyness.

I'll look into using those standard frames but I aint used them since before uni and I hate them! Thanks for doing that research and coming to a conclusion. Sometimes when I was reading about iFrames I couldnt figure out if people were saying they had a complete solution or PART of a solution or NONE at all!  lol

Cheers
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

895 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