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

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.

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

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>

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

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>

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

Thread Tools

Search Thread

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

Similar Threads

Frame by Frame animation show/hide div with setinterval dont work in IE

JquerySlideMenu sub menus hidden by slide show in div below menu

how to see sublevels menus over other frame

Photos don't show completely in mouseover script

Cross-Frame Menus

Bookmarks

Bookmarks

Posting Permissions