Conditional positioning of Milonic scrolling menu

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
esordini
Advanced
Advanced
Posts: 11
Joined: Sat May 14, 2005 6:49 pm

Conditional positioning of Milonic scrolling menu

Post by esordini »

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
User avatar
John
 Team
 Team
Posts: 5967
Joined: Sun May 19, 2002 8:23 pm
Location: Phoenix, AZ
Contact:

Post by John »

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...
esordini
Advanced
Advanced
Posts: 11
Joined: Sat May 14, 2005 6:49 pm

Conditional positioning of Milonic scrolling menu

Post by esordini »

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.
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 ... /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: Select all

<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
esordini
Advanced
Advanced
Posts: 11
Joined: Sat May 14, 2005 6:49 pm

Conditional positioning of Milonic scrolling menu

Post by esordini »

Here's a (probably) better version of the code snippet:

Code: Select all

<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
User avatar
John
 Team
 Team
Posts: 5967
Joined: Sun May 19, 2002 8:23 pm
Location: Phoenix, AZ
Contact:

Post by John »

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

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.
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

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

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

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

Kevin
esordini
Advanced
Advanced
Posts: 11
Joined: Sat May 14, 2005 6:49 pm

Post by esordini »

Hello Kevin,
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
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

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
esordini
Advanced
Advanced
Posts: 11
Joined: Sat May 14, 2005 6:49 pm

Post by esordini »

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

<body onload="mm_changeMenuProperty('main', 3, 200)">
but it won't work :cry:
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
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

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

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
esordini
Advanced
Advanced
Posts: 11
Joined: Sat May 14, 2005 6:49 pm

Post by esordini »

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
Post Reply