Menu in I-Frame does not show my sub-menus completely

Printable View

10-01-2014, 02:56 AM
d3sign3r

Menu in I-Frame does not show my sub-menus completely

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>
10-01-2014, 09:44 AM
molendijk

Replace

Code:

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

with:

Code:

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

or use the technique explained here.
10-01-2014, 01:32 PM
d3sign3r

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

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 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>
10-01-2014, 03:36 PM
molendijk

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

Code:

<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:

Code:

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