Hi
This is my first post here and although I have been using the brilliant Milonic Menu system for a number of years, I have come to a point where I need a little assistance.
I have a page with a series of DIV Layers. They are all 900px wide. At the top is a Header DIV 155px high. This contains the Menu DIV at the bottom and this is 25px high. Below the Header DIV is the Content DIV which is 630px high.
I have placed the horizontal Milonic Menu into the Menu DIV and it works perfectly (as one would expect!). When I click on a menu item to open a page, it is opened in a new browser page, also as one would expect.
But what I would like is for this new page to open within the Content DIV. Looking at various websites trying to find the solution shows that many people are trying to put the Milonic Menu itself into a DIV or a Table. But I've already done that. Now I want to put the "output" from a menu item into another DIV (Not a table!).
I am relatively certain that this is possible, and I look forward to reading a huge number of solutions.
Many thanks in advance.
Terry
Milonic Menu item into a DIV
Re: Milonic Menu item into a DIV
Hi,
Is it another page you are opening? I need to know that and then if you can please give me the layout and your menu data I'll try and work something up.
Ruth
Is it another page you are opening? I need to know that and then if you can please give me the layout and your menu data I'll try and work something up.
Ruth
Re: Milonic Menu item into a DIV
Hi Ruth
Sorry about the delay in answering, but just after I posted my query, I noticed my profile contained an email address that I no longer used. So I changed it to a current one, little realising that changes like that require administrator approval. So I have that and below you will find the details you requested.
There is one other problem, perhaps related to my original query, is if I have the menu in one layer and it drops down over an empty layer below. This is OK, but as soon as I put something in the bottom layer, the drop-down part of the menu is hidden.
And Yes, it is another page, on the same domain, that I want to put in the other layer (See index.html)
This is the CSS Style file. (islam_style.css)
/* Main Container */
#layer101 {
position: absolute;
width: 900px;
height: 830px;
left: 190px;
top: 0px;
}
/* Header Container */
#layer102 {
position: absolute;
width: 900px;
height: 155px;
left: 0px;
top: 0px;
}
/* Body Container */
#layer103 {
position: absolute;
width: 900px;
height: 630px;
left: 0px;
top: 155px;
/* z-index:1; */
}
/* Footer Container */
#layer104 {
position: absolute;
width: 900px;
height: 40px;
left: 0px;
top: 785px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: blue;
}
/* Menu Container */
#layer105 {
position: absolute;
width: 900px;
height: 25px;
left: 0px;
top: 130px;
/* z-index:200; */
}
This is the Menu Data (menu_data.js)
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
style=menuStyle;
//aI("text=Home;url=index.html;");
//aI("showmenu=Samples;text=Menu Samples;");
//aI("showmenu=Milonic;text=Milonic;");
//aI("showmenu=Partners;text=Partners;");
//aI("showmenu=Links;text=Links;");
//aI("showmenu=MyMilonic;text=My Milonic;");
aI("text=Home;url=index.html;");
aI("showmenu=islam_online;text=Islam Online;");
aI("showmenu=topical_articles;text=Topical Articles;");
aI("showmenu=question_time;text=Question Time;");
aI("showmenu=new_menu_1;text=New Menu 1;");
aI("showmenu=new_menu_2;text=New Menu 2;");
}
with(milonic=new menuname("islam_online")){
style=menuStyle;
aI("text=Registration/Login;url=#;");
aI("text=Continue Study;url=#;");
aI("text=Stage 1 Lessons;url=#;");
aI("text=Stage 1 Tests;url=#;");
aI("text=Stage 2 Lessons;url=#;");
aI("text=Stage 2 Tests;url=#;");
aI("text=Stage 3 Lessons;url=#;");
aI("text=Stage 3 Tests;url=#;");
}
with(milonic=new menuname("topical_articles")){
left=305;
top=27;
itemwidth=200;
style=menuStyle;
aI("text=Concept of Brotherhood;url=./docs/concept_brotherhood.html;");
aI("text=Global Warming;url=./docs/global_warming.html;");
aI("text=Honour Killing;url=./docs/honour_killing.html;");
aI("text=Natural Disasters;url=./docs/natural_disaster.html;");
aI("text=Scientific Prophecies;url=./docs/scientific_prophecies.html;");
aI("text=Service to Humanity;url=./docs/service_humanity.html;");
aI("text=Suicide in Islam;url=./docs/suicide_islam.html;");
aI("text=Loyalty in Islam;url=./docs/loyalty_islam.html;");
}
This is the index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<TITLE>Free Online Islamic Course - Study and Learn about Islam Online</TITLE>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<link href="style/islam_style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body { background-image:url("images/main_background.jpg"); }
</style>
<script type="text/javascript">
function updateObjectIframe(which){
document.getElementById('layer103').innerHTML = '<'+'object id="main_body" name="main_body" type="text/html"data="'+which.href+'"><\/object>';
}
</script>
</head>
<body>
<!-- Layer for Main Container -->
<div id="layer101">
<!-- Layer for Header -->
<div id="layer102">
<div style="background-image: url('images/header_logo.gif'); height: 130px; width: 900px;"></div>
<!-- Layer for Milonic Horizontal Menu -->
<div id="layer105">
<script type="text/javascript" src="milonic_src.js"></script>
<script type="text/javascript" src="mmenudom.js"></script>
<noscript><a href=http://milonic.com/>Milonic JavaScript Menu is only visible when JavaScript is enabled</a></noscript>
<script type="text/javascript" src="menu_data.js"></script>
</div>
</div>
<!-- Layer for Main Body -->
<div id="layer103">
<object id="main_body" name="main_body" type="text/html" data="./docs/main_body.html"></object>
</div>
<!-- Layer for Footer -->
<div id="layer104">
<div align="center"><a href=http://milonic.com/>DHTML Menu By Milonic JavaScript</a></div>
</div>
</div>
</body>
</html>
I hope it is enough for you to realise where I've gone wrong. And a big thankyou in advance just in case.
Terry
Sorry about the delay in answering, but just after I posted my query, I noticed my profile contained an email address that I no longer used. So I changed it to a current one, little realising that changes like that require administrator approval. So I have that and below you will find the details you requested.
There is one other problem, perhaps related to my original query, is if I have the menu in one layer and it drops down over an empty layer below. This is OK, but as soon as I put something in the bottom layer, the drop-down part of the menu is hidden.
And Yes, it is another page, on the same domain, that I want to put in the other layer (See index.html)
This is the CSS Style file. (islam_style.css)
/* Main Container */
#layer101 {
position: absolute;
width: 900px;
height: 830px;
left: 190px;
top: 0px;
}
/* Header Container */
#layer102 {
position: absolute;
width: 900px;
height: 155px;
left: 0px;
top: 0px;
}
/* Body Container */
#layer103 {
position: absolute;
width: 900px;
height: 630px;
left: 0px;
top: 155px;
/* z-index:1; */
}
/* Footer Container */
#layer104 {
position: absolute;
width: 900px;
height: 40px;
left: 0px;
top: 785px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: blue;
}
/* Menu Container */
#layer105 {
position: absolute;
width: 900px;
height: 25px;
left: 0px;
top: 130px;
/* z-index:200; */
}
This is the Menu Data (menu_data.js)
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
style=menuStyle;
//aI("text=Home;url=index.html;");
//aI("showmenu=Samples;text=Menu Samples;");
//aI("showmenu=Milonic;text=Milonic;");
//aI("showmenu=Partners;text=Partners;");
//aI("showmenu=Links;text=Links;");
//aI("showmenu=MyMilonic;text=My Milonic;");
aI("text=Home;url=index.html;");
aI("showmenu=islam_online;text=Islam Online;");
aI("showmenu=topical_articles;text=Topical Articles;");
aI("showmenu=question_time;text=Question Time;");
aI("showmenu=new_menu_1;text=New Menu 1;");
aI("showmenu=new_menu_2;text=New Menu 2;");
}
with(milonic=new menuname("islam_online")){
style=menuStyle;
aI("text=Registration/Login;url=#;");
aI("text=Continue Study;url=#;");
aI("text=Stage 1 Lessons;url=#;");
aI("text=Stage 1 Tests;url=#;");
aI("text=Stage 2 Lessons;url=#;");
aI("text=Stage 2 Tests;url=#;");
aI("text=Stage 3 Lessons;url=#;");
aI("text=Stage 3 Tests;url=#;");
}
with(milonic=new menuname("topical_articles")){
left=305;
top=27;
itemwidth=200;
style=menuStyle;
aI("text=Concept of Brotherhood;url=./docs/concept_brotherhood.html;");
aI("text=Global Warming;url=./docs/global_warming.html;");
aI("text=Honour Killing;url=./docs/honour_killing.html;");
aI("text=Natural Disasters;url=./docs/natural_disaster.html;");
aI("text=Scientific Prophecies;url=./docs/scientific_prophecies.html;");
aI("text=Service to Humanity;url=./docs/service_humanity.html;");
aI("text=Suicide in Islam;url=./docs/suicide_islam.html;");
aI("text=Loyalty in Islam;url=./docs/loyalty_islam.html;");
}
This is the index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<TITLE>Free Online Islamic Course - Study and Learn about Islam Online</TITLE>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<link href="style/islam_style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body { background-image:url("images/main_background.jpg"); }
</style>
<script type="text/javascript">
function updateObjectIframe(which){
document.getElementById('layer103').innerHTML = '<'+'object id="main_body" name="main_body" type="text/html"data="'+which.href+'"><\/object>';
}
</script>
</head>
<body>
<!-- Layer for Main Container -->
<div id="layer101">
<!-- Layer for Header -->
<div id="layer102">
<div style="background-image: url('images/header_logo.gif'); height: 130px; width: 900px;"></div>
<!-- Layer for Milonic Horizontal Menu -->
<div id="layer105">
<script type="text/javascript" src="milonic_src.js"></script>
<script type="text/javascript" src="mmenudom.js"></script>
<noscript><a href=http://milonic.com/>Milonic JavaScript Menu is only visible when JavaScript is enabled</a></noscript>
<script type="text/javascript" src="menu_data.js"></script>
</div>
</div>
<!-- Layer for Main Body -->
<div id="layer103">
<object id="main_body" name="main_body" type="text/html" data="./docs/main_body.html"></object>
</div>
<!-- Layer for Footer -->
<div id="layer104">
<div align="center"><a href=http://milonic.com/>DHTML Menu By Milonic JavaScript</a></div>
</div>
</div>
</body>
</html>
I hope it is enough for you to realise where I've gone wrong. And a big thankyou in advance just in case.
Terry
Re: Milonic Menu item into a DIV
Hi,
The problem is in the way you have the menu set up. Because it is in a div/layer, it must be relatively positioned. That requires a different method. Here is a kind of tutorial for how to do it http://support.milonic.com/beginners/ta ... /index.htm, and this http://milonic.com/tablemenu.php gives the explanation.
I tend to use method two which is the old method. I've seen some questions with regard to the newest method, method 1, but not many. But, I know the old method works in all the browsers I've tried.
If you need more help once you have set this up correctly, let me know
Ruth
The problem is in the way you have the menu set up. Because it is in a div/layer, it must be relatively positioned. That requires a different method. Here is a kind of tutorial for how to do it http://support.milonic.com/beginners/ta ... /index.htm, and this http://milonic.com/tablemenu.php gives the explanation.
I tend to use method two which is the old method. I've seen some questions with regard to the newest method, method 1, but not many. But, I know the old method works in all the browsers I've tried.
If you need more help once you have set this up correctly, let me know
Ruth
Re: Milonic Menu item into a DIV
Hi Ruth
Thanks very much for that. I now have the menu (9) working in DIV inside a Table cell OK. Underneath that I have another Table cell with a DIV in it for the main Body of the page. Inside the DIV is a PHP include which just loads an information HTML page into the DIV.
That works fine as well, and when I hover over a Menu Item, the drop-down menu items appear on top of the BODY page. Exactly as it should.
So what I would now like to do is when I click on one of the drop-down menu items, I would like that HTML or PHP page to be loaded into the BODY DIV.
Do you, or anyone else, know how I might achieve this?
I have included the relevant code code below just in case.
This bit of Menu 9 code is just after the BODY tag.
And this is the TABLE with the cells and DIVs. The underlined comments explain what I want.
I look forward to more brilliant ideas and coding suggestions
Thanks
Terry
Thanks very much for that. I now have the menu (9) working in DIV inside a Table cell OK. Underneath that I have another Table cell with a DIV in it for the main Body of the page. Inside the DIV is a PHP include which just loads an information HTML page into the DIV.
That works fine as well, and when I hover over a Menu Item, the drop-down menu items appear on top of the BODY page. Exactly as it should.
So what I would now like to do is when I click on one of the drop-down menu items, I would like that HTML or PHP page to be loaded into the BODY DIV.
Do you, or anyone else, know how I might achieve this?
I have included the relevant code code below just in case.
This bit of Menu 9 code is just after the BODY tag.
Code: Select all
<script type="text/javascript" src="milonic_src.js"></script>
<noscript><a href="https://milonic.com/">DHTML Menu JavaScript Menu powered by Milonic</a></noscript>
<script type="text/javascript">
<!--
if(ns4)_d.write("<scr"+"IPT LANGUAGE=JavaScript src=mmenuns4.js><\/src"+"IPT>");
else _d.write("<scr"+"IPT LANGUAGE=JavaScript src=mmenudom.js><\/scr"+"IPT>");
-->
</script>
<script type="text/javascript" src="menu_data.js"></script>Code: Select all
<table border="1" width="75%" align="center">
<tr> // [u]This cell is for the Site Header picture[/u].
<td height="130px">
<div style="background-image: url('images/header_logo.gif'); height: 130px; width: 900px;"></div>
</td>
</tr>
<tr> // [u]This cell is for the horizontal Melonic Menu[/u].
<td height="30px">
<div align="center">
<script type="text/javascript" src="main_menu.js"></script>
</div>
</td>
</tr>
<tr> // [u]This cell contains the contents of "[b]main_body.php[/b]" and I want to put Menu Selected HTML or PHP pages into the DIV "[b]layer03[/b]"[/u].
<td height="630px" valign="top">
<div id="layer03">
<?php include("main_body.php"); ?>
</div>
</td>
</tr>
<tr> // [u]This cell is just for the Footer[/u].
<td height="25px">
<div id="layer_footer" align="center">
<a href="http://websites.milonic.com/milonic.com/>DHTML Menu By Milonic JavaScript</a>
</div>
<div id="layer_footer" align="center">
Created by Terence C Mold - 2010
</div>
</td>
</tr>
</table>Thanks
Terry
Re: Milonic Menu item into a DIV
Hi,
Sorry, but I need you to give me the complete html page code. I'm unable to put that table into the other code you gave me. I can't figure it out, so could you post the full html page code as you have it now working? I already have the css in its file and the menu info that you posted, but I need the page coding, i.e. the html so I can see the divs and table and how you have it set up. Thanks
Ruth
Sorry, but I need you to give me the complete html page code. I'm unable to put that table into the other code you gave me. I can't figure it out, so could you post the full html page code as you have it now working? I already have the css in its file and the menu info that you posted, but I need the page coding, i.e. the html so I can see the divs and table and how you have it set up. Thanks
Ruth
Re: Milonic Menu item into a DIV
Hi again
Here is the full HTML for index.php. As you can see, it isn't much more than I posted yesterday. Also, I have attached the CSS file as well.
INDEX.PHP
and ISLAM_STYLE.CSS
This CSS file is only partly used now. Most of the layers etc were for when I was trying to get it all working with CSS Layers instead of Tables. Also, the borders are only so I can see what is, or isn't, happening.
Regards
Terry
Here is the full HTML for index.php. As you can see, it isn't much more than I posted yesterday. Also, I have attached the CSS file as well.
INDEX.PHP
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Free Online Islamic Course - Study and Learn about Islam Online</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<link href="./style/islam_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript" src="milonic_src.js"></script>
<noscript><a href="https://milonic.com/">DHTML Menu JavaScript Menu powered by Milonic</a></noscript>
<script type="text/javascript">
<!--
if(ns4)_d.write("<scr"+"IPT LANGUAGE=JavaScript src=mmenuns4.js><\/src"+"IPT>");
else _d.write("<scr"+"IPT LANGUAGE=JavaScript src=mmenudom.js><\/scr"+"IPT>");
-->
</script>
<script type="text/javascript" src="menu_data.js"></script>
<table border="1" width="75%" align="center">
<tr>
<td height="130px">
<div style="background-image: url('images/header_logo.gif'); height: 130px; width: 900px;"></div>
</td>
</tr>
<tr>
<td height="30px">
<div align="center">
<script type="text/javascript" src="main_menu.js"></script>
</div>
</td>
</tr>
<tr>
<td height="630px" valign="top">
<div id="layer03">
<?php include("main_body.php"); ?>
</div>
</td>
</tr>
<tr>
<td height="25px">
<div id="layer_footer" align="center">
<a href="http://websites.milonic.com/milonic.com/>DHTML Menu By Milonic JavaScript</a>
</div>
<div id="layer_footer" align="center">
Created by Terence C Mold - 2010
</div>
</td>
</tr>
</table>
</body>
</html>Code: Select all
body {
background-color: #FFFACD;
background-image: url("../images/main_background.jpg");
background-repeat: repeat;
background-attachment: fixed;
}
/* Header Layer */
#layer01 {
width: 900px;
height: 130px;
position: absolute;
top: 0px;
left: 190px;
border: 1px solid blue;
}
/* Menu Layer */
#layer02 {
width: 900px;
height: 30px;
position: absolute;
top: 135px;
left: 190px;
border: 1px solid red;
}
/* Body Layer */
#layer03 {
position: relative;
top: 0px;
left: 0px;
border: 1px solid blue;
}
/* Footer Layer */
#layer04 {
width: 900px;
height: 30px;
position: absolute;
top: 775px;
left: 190px;
border: 1px solid red;
font-size: 10px;
color: #808080;
font-weight: normal;
}
/* Footer Layer */
#layer_footer {
font-size: 10px;
color: #808080;
font-weight: normal;
}Regards
Terry