Menu wont stay locked on screen

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
Jay1395
Advanced
Advanced
Posts: 10
Joined: Wed Jan 11, 2006 8:39 pm

Menu wont stay locked on screen

Post by Jay1395 »

Hi-
I'm working on a site for my volunteer ems and it is a centered site where the site isnt anchored to the left. So when i specify where the menu is on the screen when the site is maximized it is in a different place then when the screen is resized because it is less pixels from the left side. Any ideas on how to fix this?

Jason
vikenk
Mega Advanced
Mega Advanced
Posts: 297
Joined: Tue Nov 29, 2005 7:38 pm

Post by vikenk »

Can you post an example URL, so we can see what's happening?
Jay1395
Advanced
Advanced
Posts: 10
Joined: Wed Jan 11, 2006 8:39 pm

surely

Post by Jay1395 »

Here is the problem:

http://www.vems.org/training.html

Now when the screen is maximized it is sorta in the right place but when you resize the window it moves to the right.
vikenk
Mega Advanced
Mega Advanced
Posts: 297
Joined: Tue Nov 29, 2005 7:38 pm

Post by vikenk »

Jason,

I'm sorry, but I don't quite understand what you're trying to do with the site. What I see is two menus on top of eachother. One is your table-based menu:

Code: Select all

<td height="206" colspan="2" rowspan="2" align="center" valign="bottom" background="images/04.gif"><table width="90%"  border="0" cellspacing="3" cellpadding="10">
          <tr>
            <td background="images/menubg.gif"><strong><a href="index.html">Home</a></strong></td>
          </tr>
          <tr>
            <td background="images/menubg.gif"><strong><a href="ourservice.html">Our Service</a></strong></td>

          </tr>
          <tr>
            <td background="images/menubg.gif"><strong><a href="#"> Alumni </a></strong></td>
          </tr>
          <tr>
            <td background="images/menubg.gif"><strong><a href="pictures.html">Pictures</a></strong></td>
          </tr>

          <tr>
            <td background="images/menubg.gif"><strong><a href="training.html">Training - CPR </a></strong></td>
          </tr>
...and ther other is the Milonic menu. Is there a reason that you're putting both menus on top of eachother? In any case: For this application, a relatively placed Milonic menu is your best choice. What you would do is load the Main Menu *only* in the table, and add position="relative"; to the menu. So, your <td> should look like this:

Code: Select all

<td><script type="text/javascript>
with(milonic=new menuname("Main Menu")){
style=menuStyle;
alwaysvisible=1;
position="relative";
orientation="vertical";
aI("status=Back To Home Page;text=Home;url=http://www.vems.org/;");
aI("showmenu=Our Service;text=Our Service;");
aI("showmenu=Alumni;text=Alumni;");
aI("showmenu=Services;text=Services;");
aI("status=Pictures;text=Pictures;url=http://www.vems.org/pictures.html;")
aI("showmenu=Training;text=Training;");
}

drawMenus();</script></td>
The rest of the code should remain in the menu_data.js file. This will allow the menu to expand and collapse with the table. See http://milonic.com/menusample9.php for more info on relative positioned menus. You can see how the script works.

Also, in your <head> section, the Milonic source files are interrupted by a style:

Code: Select all

<script type="text/javascript" src="milonic_src.js"></script>	
<style type="text/css">
<!--
.style2 {color: #ACACAC}
.style10 {color: #6A6A6A}
-->
</style>
<script type="text/javascript">
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");		
  else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>"); 
</script>
<script type="text/javascript" src="menu_data.js"></script>
Move .style2 and .style10 out and place it either before or after the Milonic files. I'm not sure if it'll make a huge difference, but the Milonic source files should be continuous.

Hope this helps,

Viken K.
Jay1395
Advanced
Advanced
Posts: 10
Joined: Wed Jan 11, 2006 8:39 pm

Post by Jay1395 »

thanks so much, the reason for the two menus is the text on is the original and i am just testing the java one right now and i was just fooling around with placement. thanks for your help
Jay1395
Advanced
Advanced
Posts: 10
Joined: Wed Jan 11, 2006 8:39 pm

Post by Jay1395 »

So i tried what you suggested, but if you look it seems to distort the whole page. any ideas?

vikenk wrote:Jason,

I'm sorry, but I don't quite understand what you're trying to do with the site. What I see is two menus on top of eachother. One is your table-based menu:

Code: Select all

<td height="206" colspan="2" rowspan="2" align="center" valign="bottom" background="images/04.gif"><table width="90%"  border="0" cellspacing="3" cellpadding="10">
          <tr>
            <td background="images/menubg.gif"><strong><a href="index.html">Home</a></strong></td>
          </tr>
          <tr>
            <td background="images/menubg.gif"><strong><a href="ourservice.html">Our Service</a></strong></td>

          </tr>
          <tr>
            <td background="images/menubg.gif"><strong><a href="#"> Alumni </a></strong></td>
          </tr>
          <tr>
            <td background="images/menubg.gif"><strong><a href="pictures.html">Pictures</a></strong></td>
          </tr>

          <tr>
            <td background="images/menubg.gif"><strong><a href="training.html">Training - CPR </a></strong></td>
          </tr>
...and ther other is the Milonic menu. Is there a reason that you're putting both menus on top of eachother? In any case: For this application, a relatively placed Milonic menu is your best choice. What you would do is load the Main Menu *only* in the table, and add position="relative"; to the menu. So, your <td> should look like this:

Code: Select all

<td><script type="text/javascript>
with(milonic=new menuname("Main Menu")){
style=menuStyle;
alwaysvisible=1;
position="relative";
orientation="vertical";
aI("status=Back To Home Page;text=Home;url=http://www.vems.org/;");
aI("showmenu=Our Service;text=Our Service;");
aI("showmenu=Alumni;text=Alumni;");
aI("showmenu=Services;text=Services;");
aI("status=Pictures;text=Pictures;url=http://www.vems.org/pictures.html;")
aI("showmenu=Training;text=Training;");
}

drawMenus();</script></td>
The rest of the code should remain in the menu_data.js file. This will allow the menu to expand and collapse with the table. See http://milonic.com/menusample9.php for more info on relative positioned menus. You can see how the script works.

Also, in your <head> section, the Milonic source files are interrupted by a style:

Code: Select all

<script type="text/javascript" src="milonic_src.js"></script>	
<style type="text/css">
<!--
.style2 {color: #ACACAC}
.style10 {color: #6A6A6A}
-->
</style>
<script type="text/javascript">
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");		
  else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>"); 
</script>
<script type="text/javascript" src="menu_data.js"></script>
Move .style2 and .style10 out and place it either before or after the Milonic files. I'm not sure if it'll make a huge difference, but the Milonic source files should be continuous.

Hope this helps,

Viken K.
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

Hi Jay,

The main menu needs to be only in the table cell. Remove it from the menu_data.js file. Also, the call for the menu files should be the first thing after the body tag rather than in the head.



Ruth
Jay1395
Advanced
Advanced
Posts: 10
Joined: Wed Jan 11, 2006 8:39 pm

Post by Jay1395 »

I have tried this also, to no avail:

to get a better aspect here are two pages, before the script http:\\www.vems.org/training.html and after the script http:\\www.vems.org/training1.html
vikenk
Mega Advanced
Mega Advanced
Posts: 297
Joined: Tue Nov 29, 2005 7:38 pm

Post by vikenk »

Code: Select all

http:\\www.vems.org/training1.html
This links doesn't work. Also, is the first link supposed to have the menu in it?

Viken K.
Jay1395
Advanced
Advanced
Posts: 10
Joined: Wed Jan 11, 2006 8:39 pm

Post by Jay1395 »

first link no menu, second link menu. sorry, they both work now
vikenk
Mega Advanced
Mega Advanced
Posts: 297
Joined: Tue Nov 29, 2005 7:38 pm

Post by vikenk »

Code: Select all

<script type="text/javascript"> 
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");       
  else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>"); 
</script> 
<script type="text/javascript" src="menu_data.js"></script>
You forgot to include the Menu source file :>) The very first script item should be:

<script type="text/javascript" src="milonic_src.js"></script>

Then:

<script type="text/javascript">
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>");
</script>

Then:

<script type="text/javascript" src="menu_data.js"></script>

Try again one more time. I'll be up for a few more minutes.

Viken K.
Jay1395
Advanced
Advanced
Posts: 10
Joined: Wed Jan 11, 2006 8:39 pm

Post by Jay1395 »

and yet still nothing, this is tough
vikenk
Mega Advanced
Mega Advanced
Posts: 297
Joined: Tue Nov 29, 2005 7:38 pm

Post by vikenk »

Jason,

Hold on. I'm checking it out.
vikenk
Mega Advanced
Mega Advanced
Posts: 297
Joined: Tue Nov 29, 2005 7:38 pm

Post by vikenk »

Copy this code to your page, in the appropriate place. I got it to work:

Code: Select all

<table width="100%" height="100%" border="0">
			<tr>
				<th height="244" scope="col"></th>
				<td>
				<script type="text/javascript"> 
with(milonic=new menuname("Main Menu")){ 
style=menuStyle; 
alwaysvisible=1; 
position="relative"; 
orientation="vertical"; 
aI("status=Back To Home Page;text=Home;url=http://www.vems.org/;"); 
aI("showmenu=Our Service;text=Our Service;"); 
aI("showmenu=Alumni;text=Alumni;"); 
aI("showmenu=Services;text=Services;"); 
aI("status=Pictures;text=Pictures;url=http://www.vems.org/pictures.html;") 
aI("showmenu=Training;text=Training;"); 
} 

drawMenus();
</script></td></th>
          </tr>
        </table>
Try it out.

Viken K.
Jay1395
Advanced
Advanced
Posts: 10
Joined: Wed Jan 11, 2006 8:39 pm

Post by Jay1395 »

Quite amazing, thanks soo much, you have a great night.

-Jason Malia
vikenk
Mega Advanced
Mega Advanced
Posts: 297
Joined: Tue Nov 29, 2005 7:38 pm

Post by vikenk »

You're welcome.
Post Reply