Conditional positioning of Milonic scrolling menu
Conditional positioning of Milonic scrolling menu
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
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
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...
Hope that makes some sense...
Conditional positioning of Milonic scrolling menu
I am writing either in plain HTML or JSP. But I don't think it matters that much.Depending on the language in which you're writing the page - yes
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?Therefore, you can place corresponding statements/functions into the _data file to get what you need.
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>
1) This code is placed after the reference to the Milonic scrolling menu;
2) it doesn't work
Any ideas as to what could be wrong here?
Thanks again,
Emmanuele
Conditional positioning of Milonic scrolling menu
Here's a (probably) better version of the code snippet:
The outcome is pretty much the same though...
Emmanuele
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>
Emmanuele
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...
Given that, I have named that file menu_data.cfm. Calling it menu_data.js would not allow the ColdFusion statement to execute.
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;");
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.,
(2) When defining the menu, set its left property using the value returned by the setLeftPos() function. Like so:
Hope that helps,
Kevin
(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;
}
Code: Select all
with(milonic=new menuname("MainMenu")){
style = menuStyle;
alwaysvisible = 1;
orientation = "horizontal";
left = setLeftPos();
top = 75;
aI("...");
.
.
.
aI("...");
}
Kevin
Hello Kevin,
So here's my new question: is it possible to call the setLeftPos() function on each resize event?
Thanks,
Emmanuele
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.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
So here's my new question: is it possible to call the setLeftPos() function on each resize event?
Thanks,
Emmanuele
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
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
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.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 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)">
Here it comes: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?
http://tinyurl.com/ydf5om
which has all the above code/modifications I made, so you can see for yourself.
Thanks again,
Emmanuele
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:
(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
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;");
}
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
Hello Kevin,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:
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 ), 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