PDA

View Full Version : info in iFrame is getting "cutout" in IE only



Uprising54
07-10-2009, 10:15 AM
Within the website I'm currently working on I'm using and iFrame to display whatever is selected in the above nav manu. When viewed in Safari and FF, all the info seems to appear correctly (and more importantly, it does so completely). However, when viewed with IE, the iFrame is not displaying all of the info. I have validated the site and (if i did it correctly) it seems to pass. I don't know why this is happening!

The site:

test.faimevi.eu/FAIMEVI/es.html

I'm not a big fan of frames in general, but in this particular project I think it to be a good solution to what "they" want.

Any ideas/suggestions would be very much appreciated!!!!

Uprising54
07-10-2009, 03:33 PM
Any ideas, I would really appreciate emm?!?!?!?!?

achardrys
07-11-2009, 01:37 AM
I really really REALLY ask that you don't use iframes.
They look and seem so easy until you try to make them cross-browser compatible.
IE is especially difficult with IFRAMES.
What specifically is your Iframe needed for?
If it's for including your menu for easy edit later on, try using the include() function with PHP.
It's so much easier, and reliable. (and cross-browser compatible ;))

achardrys
07-11-2009, 01:47 AM
Oh I'm sorry I really should have read it more closely.
So you want to be able to click the menu button, then reload the iframe to the specific URL right?
Try using Ajax.
AJAX lets you open and display files, and its way more flexible.
Here's a really good technique I use now instead of IFRAMES.

<script type="text/javascript">
<!--
function switchContent(url){
var ajaxRequest; // The variable that makes Ajax possible!

try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}

// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('contentDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;

}
}

var ajaxDisplay = document.getElementById('contentDiv');
ajaxDisplay.innerHTML = "Loading.. Please wait..";
ajaxRequest.open("GET", url, true);
ajaxRequest.send(null);
//-->
</script>
Alright, now that you've added that to your HEAD section of your webpage.

Add this anywhere in the BODY section of your webpage


<div id="contentDiv">Content will show up here</div>


Now that you've done that (I've made this easy on you), instead of making your menu buttons reload the iframe (or whatever they were doing), make sure that they look like this now:


<a href="javascript:;" onClick="switchContent('http://www.arcaderesort.com');">Sample Link</a>

That's a sample link, make sure you change the value of the URL in the onClick function to where ever you want.

Hopefully I didn't make a mistake.

Basically, the switchContent(url) javascript function that I put up there will allow you to get the url of the file you want, and will display it in the "contentDiv" DIV tag.

Have fun experimenting with that!

Uprising54
07-11-2009, 05:22 PM
Thanks for the reply!!

Ill give that a try, but the way i have it up now seems to work great ... except when viewed with IE

When viewing the site in IE, some of the content is left out of the iframe (in other-words, the scrollbar does not go ALL THE WAY TO THE BOTTOM). For example, click on the first link of the second drop down menu.

Is there some type of code (an IF clause perhaps) that could possibly correct this error since it only happen in IE????

again, the site is:
test.faimevi.eu/FAIMEVI/es.html

Thanks again!