Log in

View Full Version : Menu in I-Frame does not show my sub-menus completely


d3sign3r
10-01-2014, 02:56 AM
Hi -

I'm looking for help on how to display my sub-menu within an i-frame. Currently they are getting cut off.

Here is my page: http://ktwin.com/ap_temp.php

Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>96.3 KTWIN</title>
<style>
body { background:#ffffff url("http://www.ktwin.com/images/custombg.jpg"); }
</style>
</head>

<body style="topmargin:0px; margin:0px;">

<div style="height:500px;"><iframe src="http://ktwin.com/ap_index_header.php" WIDTH="100%" HEIGHT="370" frameborder="0" scrolling="no" style="position: absolute; margin-top:0px; padding-top:0px;" allowTransparency="true"></iframe></div>

<div align="center">
<table cellpadding="0" cellspacing="0" border="0" width="990" height="10" id="table">
<tr>
<td class="main_container"><img src="/images/spacer.gif" width="990" height="10"></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="990" height="200" id="table">
<tr>
<td width="10"><img src="/images/spacer.gif" width="10"></td>
<td width="970" height="400" valign="top" align="center"> __CONTENT__</td>
<td width="10"><img src="/images/spacer.gif" width="10"></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="990" height="10" id="table">
<tr>
<td class="main_container"><img src="/images/spacer.gif" height="10" width="990"></td>
</tr>
</table>
</div>

<div><iframe src="http://ktwin.com/ap_index_footer.php" width="100%" height="400" frameborder="0" scrolling="no"></iframe></div>
</body>
</html>
molendijk
10-01-2014, 09:44 AM
Replace


<div><iframe src="http://ktwin.com/ap_index_footer.php" width="100%" height="400" frameborder="0" scrolling="no"></iframe></div>

with:


<div style="position: relative; width: 100%; height: 400px">
<?php include("http://ktwin.com/ap_index_footer.php"); ?>
</div>

or use the technique explained here (http://www.dynamicdrive.com/forums/entry.php?294-Loading-files-into-divs-having-a-custom-src-attribute).
d3sign3r
10-01-2014, 01:32 PM
Hi - Thanks for your help.. i'm not quite there, i attempted the technique, but it's giving me a blank page.

1 - I will need to save this file as .html, so i dont want to call an include via php
2 - I have 3 components here
MENU, CONTENT, FOOTER

The MENU lives in an i-frame, and i would like the submenu items to appear over the CONTENT w/ out getting cut off.

Here is my code - i placed an ID in each DIV


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>96.3 KTWIN</title>
<style>
body { background:#ffffff url("http://www.ktwin.com/images/custombg.jpg"); }
</style>
</head>

<body style="topmargin:0px; margin:0px;">

<div id="menu" style="height:500px;"><iframe src="http://ktwin.com/ap_index_header.php" WIDTH="100%" HEIGHT="370" frameborder="0" scrolling="no" style="position: absolute; margin-top:0px; padding-top:0px;" allowTransparency="true"></iframe></div>

<div id="content" align="center">
<table cellpadding="0" cellspacing="0" border="0" width="990" height="10" id="table">
<tr>
<td class="main_container"><img src="/images/spacer.gif" width="990" height="10"></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="990" height="200" id="table">
<tr>
<td width="10"><img src="/images/spacer.gif" width="10"></td>
<td width="970" height="400" valign="top" align="center"> __CONTENT__</td>
<td width="10"><img src="/images/spacer.gif" width="10"></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="990" height="10" id="table">
<tr>
<td class="main_container"><img src="/images/spacer.gif" height="10" width="990"></td>
</tr>
</table>
</div>

<div id="footer"><iframe src="http://ktwin.com/ap_index_footer.php" width="100%" height="400" frameborder="0" scrolling="no"></iframe></div>

</body>
</html>
molendijk
10-01-2014, 03:36 PM
I'm not sure I understand you correctly. You say you don't want to call an include via php, but your iframes load php-files. Do you want to replace them with html-files?
Anyhow, including a menu via a iframe loading it, is not a good idea, because the iframe is too 'narrow' for the expanding menu.

You can use jquery-ajax for loading external files into a div. For instance, if your div has id="menu", you can load an external file (which might be named http://ktwin.com/ap_index_header.html) into it by just putting the following script immediately before the closing body tag

<script>
function load_menu()
{
$('#menu').load('http://ktwin.com/ap_index_header.html')
}
load_menu()
</script>
(But this will only work if http://ktwin.com/ap_index_header.html belongs to your own domain, and if you have this in the head section of your page:


<script src="http://code.jquery.com/jquery-1.10.2.js"></script>