Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

iFrame breaking PHP div?


  • Please log in to reply

#1
Hitokage

Hitokage

    Member

  • Member
  • PipPip
  • 76 posts
I am having a somewhat bizarre problem maybe someone here has seen before and/or could help with.

I have an iFrame that displays when an object is clicked through a little js script - no problem there. However, the iFrame seems to be breaking the confines of a div on the page the iFrame is displaying and ruining it.

http://shadow-tigres...olio/index.html

If you click on 'photos', you'll see the iframe display. The Polaroids are supposed contained in a 600x400 div. If you go to the actual page - http://cgi.shadow-ti...otos/photos.php - it's clearly working and they are being contained.

As soon as they are put in the iframe on the index page, they break out of that div.

If I just put them in an iFrame (on a blank html page) it still works just fine.

What is causing this breakage to happen? I've played with everything and just can't seem to figure it out.

Thanks!
  • 0

Advertisements


#2
AstraNut

AstraNut

    Member

  • Member
  • PipPipPip
  • 384 posts
Try correcting the coding first:

HTML errors

CSS errors [Ignore any properly coded CSS 3 rules that are flagged as errors]
  • 0

#3
Hitokage

Hitokage

    Member

  • Topic Starter
  • Member
  • PipPip
  • 76 posts
There is a LOT of CSS3 in that stylesheet - I think all the errors are it complaining about CSS3 and the older browser fixes.

I fixed a few little HTML things, but they were all small. It still holds the same problem.
  • 0

#4
Hitokage

Hitokage

    Member

  • Topic Starter
  • Member
  • PipPip
  • 76 posts
Any possible help?
  • 0

#5
Hitokage

Hitokage

    Member

  • Topic Starter
  • Member
  • PipPip
  • 76 posts
After a LOT of testing, I found the issue but it's a bizarre one.

function photos_clicked(){
var thediv=document.getElementById('display_photos');
if(thediv.style.display == "none"){
thediv.style.display = "";
}else{
thediv.style.display = "none";
}
return false;
}



<div id="display_photos" style="display:none">
<iframe id="photos_iframe" src="http://cgi.shadow-ti...tos/photos.php" scrolling="no"></iframe>
</div>


These are the two bits of code. If I remove the style="display:none" (which makes the JS pointless, obviously) the iFrame works as it should be. If I make it display:block or anything other than none, it works. But as soon as I put back in "none" to make the JS work... the iFrame breaks.

Any idea why? How to fix?
  • 0

#6
AstraNut

AstraNut

    Member

  • Member
  • PipPipPip
  • 384 posts
Have you tried:

visibility: hidden;

Using display: none; removes the element from the document flow.
  • 0

#7
Hitokage

Hitokage

    Member

  • Topic Starter
  • Member
  • PipPip
  • 76 posts
I have. It seems the JS won't change visibilty hidden.
  • 0

#8
AstraNut

AstraNut

    Member

  • Member
  • PipPipPip
  • 384 posts
Might try changing this:

thediv.style.display

to this:

thediv.style.visibility

And "none" to "hidden"

function photos_clicked(){
	var thediv=document.getElementById('display_photos');
	if(thediv.style.visibility == "hidden"){
		thediv.style.visibility = "";
	}else{
		thediv.style.visibility = "hidden";
	}
	return false;
}



<div id="display_photos" style="visibility:hidden">
		<iframe id="photos_iframe" src="http://cgi.shadow-tigress.com/photos/photos.php" scrolling="no"></iframe>
	</div>

Not too sure about the JS as I don't see where a change is made to: thediv.style.visibility = "visible";
  • 0

#9
Hitokage

Hitokage

    Member

  • Topic Starter
  • Member
  • PipPip
  • 76 posts
I had already tried altering the javascript to try to make the visibility:hidden thing work. When I alter it (HTML and JS both), and click to make the div appear, nothing happens. So... currently not functioning.
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP