Milonic provide full featured pull down web menus for some of the worlds largest companies
click here to see what it can do for you

Download Milonic DHTML Menu
Buy Milonic DHTML Menu

Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:50

Conditional positioning of Milonic scrolling menu


Poster: esordini
Dated: Wednesday November 1 2006 - 18:36:09 GMT

Dear all,
is it possible to conditionally set the x coordinate ("left=x") of the DHTML scrolling menu depending on the context, i.e. on the kind of page it appears in or the current screen resolution?

What I'm seeking here is the equivalent of a statement such as the following:

if (condition/screen resolution) then
left=x1;
else
left=x2;

Any help with this issue will be highly valued.

Regards
Emmanuele Sordini


Poster: John
Dated: Wednesday November 1 2006 - 18:56:19 GMT

Depending on the language in which you're writing the page - yes. You are allowed to change the suffix of the _data.js file to anything you need; e.g., .php, .cfm, .asp - and to satisfy Kevin - even .js. Therefore, you can place corresponding statements/functions into the _data file to get what you need.

Hope that makes some sense...

Conditional positioning of Milonic scrolling menu


Poster: esordini
Dated: Wednesday November 1 2006 - 20:50:25 GMT

Quote:
Depending on the language in which you're writing the page - yes

I am writing either in plain HTML or JSP. But I don't think it matters that much.
Quote:
Therefore, you can place corresponding statements/functions into the _data file to get what you need.

Hmm... I think I didn't understand the above statement, probably because I am no Javascript whiz. Could you please elaborate a bit more on that?

Something like the following menu property change function would make do:

http://support.milonic.com/demos/change_menu_property/index.htm

but I would like the change to take place automatically when the page is loaded rather than by clicking a button. Here is the code snippet I've come up with so far:
Code:
<script type="text/javascript">

  var myWidth = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
  }

  function mm_changeMenuProperty(menuName, propertyRef, newValue)
  {
    var menuNum = getMenuByName(menuName);
    _m[menuNum][propertyRef] = newValue;
    // BDMenu(menuNum);
  }

  var offset = (screen.width - myWidth)/2;
  // window.alert("ScreenWidths " + myWidth + " " + offset);

  mm_changeMenuProperty("Main", 3, offset);

  BDMenu(menuNum);
</script>


Please note that:
1) This code is placed after the reference to the Milonic scrolling menu;
2) it doesn't work :cry: :cry:

Any ideas as to what could be wrong here?

Thanks again,
Emmanuele

Conditional positioning of Milonic scrolling menu


Poster: esordini
Dated: Wednesday November 1 2006 - 20:57:33 GMT

Here's a (probably) better version of the code snippet:
Code:
<script type="text/javascript">

  var myWidth = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
  }

  function mm_changeMenuProperty(menuName, propertyRef, newValue)
  {
    var menuNum = getMenuByName(menuName);
    _m[menuNum][propertyRef] = newValue;
    BDMenu(menuNum);
  }

  var offset = (screen.width - myWidth)/2;
  // window.alert("ScreenWidths " + myWidth + " " + offset);

  mm_changeMenuProperty("main", 3, offset);
</script>


The outcome is pretty much the same though...

Emmanuele


Poster: John
Dated: Wednesday November 1 2006 - 21:57:46 GMT

Kevin is our JS whiz here (I'm not!), so I'm going to have to defer to him. I'm sure he can come up with something for you.

What I meant in my comment was you can use language-specific items in the data file, just so you change the file suffix; e.g., I have the following ColdFusion item in one of my menus...
Code:
aI("text=Browser: <cfoutput>#cgi.http_user_agent#</cfoutput>;image=/sai/graphics/xpblank.gif;");

Given that, I have named that file menu_data.cfm. Calling it menu_data.js would not allow the ColdFusion statement to execute.


Poster: kevin3442
Dated: Thursday November 2 2006 - 6:12:47 GMT

If the condition is detectable with javascript, then you could do the following:

(1) Make a function to test the conditions you're interested in (we'll call it setLeftPos() for an example... rename as you see fit). The function will return the left position that results from the conditional tests. E.g.,

Code:
function setLeftPos()
{
  var leftPos;

  if (conditions) {
    leftPos = 10;
  }
  else {
    leftPos = 20;
  }

  return leftPos;
}


(2) When defining the menu, set its left property using the value returned by the setLeftPos() function. Like so:

Code:
with(milonic=new menuname("MainMenu")){
style = menuStyle;
alwaysvisible = 1;
orientation = "horizontal";
left = setLeftPos();
top = 75;
aI("...");
.
.
.
aI("...");
}


Hope that helps,

Kevin


Poster: esordini
Dated: Thursday November 2 2006 - 23:27:58 GMT

Hello Kevin,
Quote:
If the condition is detectable with javascript, then you could do the following:

(1) Make a function to test the conditions you're interested in (we'll call it setLeftPos() for an example... rename as you see fit). The function will return the left position that results from the conditional tests.

(2) When defining the menu, set its left property using the value returned by the setLeftPos() function. Like so:

Hope that helps,
Kevin

that definitely helped: however, there is still one improvement that could be made. The condition to be detected with Javascript is a test on the current browser window width: your code works, but when the window is resized the scrolling menu position remains the same until the page is explicitly reloaded via the browser button.

So here's my new question: is it possible to call the setLeftPos() function on each resize event?

Thanks,
Emmanuele


Poster: kevin3442
Dated: Friday November 3 2006 - 22:00:32 GMT

esordini wrote:

So here's my new question: is it possible to call the setLeftPos() function on each resize event?

-----

Hi Emmanuele,

You could call the function as an onresize handler, but it would not have the desired effect. The only way that function will work is by setting the position when the menu is first built. If you want to re-set the left position dynamically, in response to conditions that may continue to change after the page is loaded, then you'd have to do it a different way. If it comes down to that, we could probably work it out. However, I'm wondering if there might be a better way. If you could describe in some detail how you want to position the menu in response to the window size changing, we might have a better solution. What might be better would be if you have a test page that we could get to; can you make a test page and post a url so that we could get to it?

Cheers,

Kevin


Poster: esordini
Dated: Friday November 3 2006 - 22:58:19 GMT

Quote:
If you could describe in some detail how you want to position the menu in response to the window size changing, we might have a better solution.

The situation is quite simple. A part of my site is built in plain HTML jsp, while another part is hosted on a Infoglue CMS instance running on the very same server.

The Infoglue-powered pages are coded so that the whole page content always centers automatically when the browser window is resized, while the HTML page layout is left-aligned. So, what I'd like to do is to change the left menu property when the Milonic menu is called from the Infoglue-powered pages.

I even tried to declare the well-known mm_changeMenuProperty() function in the menu_data code and call it on the body onload event like this:
Code:
<body onload="mm_changeMenuProperty('main', 3, 200)">


but it won't work :cry:
Quote:
What might be better would be if you have a test page that we could get to; can you make a test page and post a url so that we could get to it?

Here it comes:

http://tinyurl.com/ydf5om

which has all the above code/modifications I made, so you can see for yourself.

Thanks again,
Emmanuele


Poster: kevin3442
Dated: Saturday November 4 2006 - 0:06:21 GMT

Hi Emmanuele,

I think there's a better way. If your goal is just to center the menu, then you can remove the left property altogether and use the screenposition property instead (see code below). Otherwise, you can combine screenposition with a left offset from center using the left property; negative values will offset to the left, positive to the right. So... try this:

(1) Get rid of all calls to setLeftPos() ... you won't be needing it (might as well remove the function from your js code too).

(2) Change your "Main" menu to the following:

Code:
with(milonic=new menuname("Main")){
style=menuStyle;
orientation="horizontal";
screenposition="center";
top=95;
left="offset=-50";
alwaysvisible=1;
followscroll=1;
aI("text=Home;url=http://www.bloomingstars.com/bloomingstars/jsp/home.jsp;");
aI("showmenu=Astronomy;text=Astronomy;");
aI("showmenu=Software;text=Software;");
aI("showmenu=Hardware;text=Hardware;");
aI("showmenu=About;text=About;");
aI("showmenu=Travel;text=Travel;");
aI("showmenu=JDA1;text=JDA1 suite;");
}


(3) Adjust the values assigned to top and the offset value assigned to left until the menu sits where you want it in relation to page content. When you widen or narrow the browser window, the menu will automatically shift to track.

The trick here is combining screenposition="center" with left="offset=-XX"... so that the menu is positioned with respect to the center of the page rather than the left of the browser window. (If you just want to center the menu, then remove the left property entirely.)

Hope that helps,

Kevin


Poster: esordini
Dated: Monday November 6 2006 - 22:43:38 GMT

Quote:
Hi Emmanuele,
I think there's a better way. If your goal is just to center the menu, then you can remove the left property altogether and use the screenposition property instead (see code below). Otherwise, you can combine screenposition with a left offset from center using the left property; negative values will offset to the left, positive to the right. So... try this:

Hello Kevin,
at last, I decided to go another route. Since I needed the Milonic scrolling menu to change its look depending on the pages it was loaded from, I went back to the "setLeftPos()" approach. I did find a way to correctly figure out the scrolling menu left position by searching the host URL for a given substring, so now the menu knows where it has to show up.

Actually, the screenposition solution sounded very appealing too and probably even better, but after some struggling with Javascript (which I don't find particularly programmer-friendly 8O), I couldn't rig up a working function to generate a valid "offset=..." string. Since the "setLeftPos()" trick worked fine, I finally went with it.

Anyway, thanks very much for your assistance.

Cheers
Emmanuele

©1998-2012 Milonic Solutions Ltd. UK Registered Company #4406835
Privacy Policy | License Agreement | Contact Us | Tech Support