relative position..

[ceratok]

can we do relative positioning with the menu? has anybody done this b4? pls share.. thanks.

[AlexKunin]

There are two ways to make COOLjsMenu positioned relatively:

Way #1. Move it around with "move(x, y)" method: you have to calcualte coordinates relatively (simpliest way to do this is to place invisible link where menu is expected to be - almost all browsers including NN4.x allow to calculate absolute position of the link);

Way #2. Purchase COOLjsMenu PRO - it has "relative positioning" feature built-in.

[blouwagi]

// Auto resizing of window by Scriptbreaker (http://www.ScriptBreaker.com), enhanced by Bart Louwagie (http://bart.louwagie.com)

//find out browser window width, depending on browser
function BwindowWidth()
{
if (window.innerWidth) return window.innerWidth;
else if (document.body && document.body.offsetWidth) return document.body.offsetWidth;
else return 0;
}

//find out browser window height, depending on browser, not used here
//shown for example
/*
function BwindowHeight()
{
if (window.innerHeight) return window.innerHeight;
else if (document.body && document.body.offsetHeight) return document.body.offsetHeight;
else return 0;
}
*/

// Offset from left of screen
function CalcOffset(mOffSet)
{
mOffset = (Width-(mMenuItemWidth*3+180))/2;
if (mOffset < 0)
mOffset = 0;
}


function recal()
{
mResizeAmount = (Width - BwindowWidth()) ;
// would need window height in certain situations, not here: + (Height - BwindowHeight());
if (mResizeAmount < 0)
mResizeAmount = (-1) * mResizeAmount;
// reposition of resize amount is larger than 150 pixels, do not put this
// TOO low because full page refresh happens for most browsers
if (mResizeAmount > 150)
{CalcOffset(mOffset);
window.history.go(0)};
}

/ this section positions menu in center horizontally
// I have done the similar code once for vertically, worked too.

if(!window.Width && document.body && document.body.offsetWidth)
{
window.onresize = recal;
// Internet explorer always shows the vertical scroll bar and includes that in the width,
// deducting some (25) to compensate for that
Width = BwindowWidth()-25;
// Height = BwindowHeight();
}

// initialise mOffSet

mOffset = 0;
CalcOffset(mOffset);
// you could also calculate the menu width here it is is a fixed value.
mMenuItemWidth = 137;


// Below based on CoolJsMenu see cooljsmenu.js http://javascript.cooldev.com/scripts/coolmenu/
//BLANK_IMAGE="/MenuSystem/img/b.gif";
//keywords
var code="code";var url="url";var sub="sub";
//styles
var color3 = {"border":"#666666", "shadow":"#DBD8D1", "bgON":"#505050","bgOVER":"#777777"};

var css = {"ON":"clsCMOn", "OVER":"clsCMOver"};
var STYLE = {"border":0, "shadow":0, "color":color3, "css":css};


//items and formats
var MENU_ITEMS_LINDA =
[
{"pos":[(mOffset),105], "itemoff":[0,mMenuItemWidth], "leveloff":[23,0], "style":STYLE, "size":[22,mMenuItemWidth]},


You can see it work at www.lindapuiatti.com

Regards

[AlexKunin]

This code does not handle resize at all, it just does some positioning during page load. You have to extend implementation of "CalcOffset()" to call menu's "move()" method.

[blouwagi]

You're right I misunderstood the word "resize". Mea culpa !

Should be able to use the same principle, calculate screen width, divide by amount of horizontal menu items, use variable menu width, but maybe resize means even something else so I will stop putting my foot in my mouth (is that the correct expression?)

Bart

[Thathump]

Try something like this. It worked for me:

<div id='MenuPos' style='position:relative'>

<script type="text/javascript">new COOLjsMenu("menu1", MENU_ITEMS_POSITIONING1)</script>

</div>

Good luck!

[theIrish1]

If you are not familiar with JS, and are using these menu systems, just do as Alex says... buy the pro version with the built in relative positioning.

Irish