How to make js drop-down menu snap to buttons?

[bhjaanus]

Hello!

Im trying to fix one error on a page Im suppose to take care of, but I cannot figure it out. The thing is that my site is using js based drop-down menus, but they are set to open up by js in absolute positions, so any screen resolution and browser, which is not mentioned in the script, will make menu open is a completely different place. So main script for menus to slide out is ypSlideOutMenus.js and the one to fix the position looks like this:

 // JavaScript Document
	<!--
	var yPosition = 178;

if(screen.width==1024){

	  //new ypSlideOutMenu("number menu", "slide position", left, top, width, height)
/*About*/				new ypSlideOutMenu("menu1", "down", 180, yPosition, 120, 130)
/*About*/				new ypSlideOutMenu("menu2", "down", 319, yPosition, 185, 130)
/*About*/				new ypSlideOutMenu("menu3", "down", 595, yPosition, 93, 130)
/*About*/				new ypSlideOutMenu("menu4", "down", 695, yPosition, 95, 130)


		}

	else{	//If 800 x 600

/*About*/				new ypSlideOutMenu("menu1", "down", 50, yPosition, 100, 130)
/*About*/				new ypSlideOutMenu("menu2", "down", 200, yPosition, 100, 130)
/*About*/				new ypSlideOutMenu("menu3", "down", 440, yPosition, 100, 130)
/*About*/				new ypSlideOutMenu("menu4", "down", 670, yPosition, 100, 130)

		}
//-->

Not much there, isn't it?
So there is 4 menus set to open in certain places.

Is there a way to modify it to make it snap to buttons and compatible with all browsers?
Or is there some other, better script available?

Or what could be the best solution?
Anyone, who can kindly find some time to help, this is the site Im talking about:

http://www.muralikrsnaswami.com

I also tried some software to create a new menu, but the best would be to have the menu snapping to buttons on the site. Or if you know some good program, to create js menus, please let me know. I tried Sothink Dhtml Menu 8, but its very limited in editing, if you're not going directly to change code, and I coulnt make the menu I wanted.

I really dont know almost anything about js, but somehow or other, I want to fix the problem and therefore ask for your kind help.

Thank you in advance.

Regards,
Jaanus

 

[Einstein47]

I use the AnchorPosition.js script from Matt Kruse. You can find it here Matt Kruse - Anchor Position script And there is a ton of detailed documentation in this script. Unless you have a hard time with English, you should be able to not only figure out how to use it - but you should be able to change your menus to Anchor to their respective buttons.

Please give it a try, and post any issues you have here. Good luck.

Einstein47
“Evil abounds when good men do nothing.“ - Nelson R.
[[]Starbase47.com]

 

[bhjaanus]

Hey Einstein 47!

Ok, downloaded the code, figured out how to implement it to my page, and got the x, y coordinates of a button, tried to change the coordinates in above shown script to make it work, but no success..

I feel like Im not getting it all the way, somewhere Im making a mistake.

As I understood, this Anchor position script will let you know the coordinates of your a tags, but when I get the coordinates, how to use them to anchor the menus to the buttons? And will they always be anchored, no matter the resolution or browser?

This is my test page:

http://www.muralikrsnaswami.com/index2.html

And also it was recommended to leave a gap before closing the a tag, but it will also make a gap on the screen, so I didn't use it (and I couldn't get it working this way or the other).

Thanks.

 

[Einstein47]

It looks to me that when you run the script that defines the slide out menus, you need at that time to find the x-position (left) of the respective anchor button. On your page you need to change your code from:

      //new ypSlideOutMenu("number menu", "slide position", left, top, width, height)
/*About*/                new ypSlideOutMenu("menu1", "down", 180, yPosition, 120, 130)

to:

      //new ypSlideOutMenu("number menu", "slide position", left, top, width, height)
[red]var anchorTest1 = getAnchorPosition('Test1');[/red]
/*About*/                new ypSlideOutMenu("menu1", "down", [red]anchorTest1.x[/red], yPosition, 120, 130)

You will also have to give NAME and ID attributes of the other <A> tags that need a slide out menu. Then just do the same thing for each to specify the left position parameter. You will also need to get rid of the test for the screen width as it will mess up your code.

Let me know if this helps.

Einstein47
“Evil abounds when good men do nothing.“ - Nelson R.
[&#91;]Starbase47.com]

 

[bhjaanus]

Hello Einstein47!

Ok, I tried to change the code as you suggested. Here is my js file

// JavaScript Document
	<!--
	var yPosition = 178;

if(screen.width==1024){

    //new ypSlideOutMenu("number menu", "slide position", left, top, width, height)
var anchorTest1 = getAnchorPosition('test1');
/*About*/                new ypSlideOutMenu("menu1", "down", anchorTest1.x, yPosition, 120, 130)
var anchorTest2 = getAnchorPosition('test2');
/*About*/				new ypSlideOutMenu("menu2", "down", anchorTest2.x, yPosition, 185, 130)
var anchorTest3 = getAnchorPosition('test3');
/*About*/				new ypSlideOutMenu("menu3", "down", anchorTest3.x, yPosition, 93, 130)
var anchorTest4 = getAnchorPosition('test4');
/*About*/				new ypSlideOutMenu("menu4", "down", anchorTest4.x, yPosition, 95, 130)


		}

	else{	//If 800 x 600

var anchorTest1 = getAnchorPosition('test1');
/*About*/                new ypSlideOutMenu("menu1", "down", anchorTest1.x, yPosition, 100, 130)
var anchorTest2 = getAnchorPosition('test2');
/*About*/				new ypSlideOutMenu("menu2", "down", anchorTest2.x, yPosition, 100, 130)
var anchorTest3 = getAnchorPosition('test3');
/*About*/				new ypSlideOutMenu("menu3", "down", anchorTest3.x, yPosition, 100, 130)
var anchorTest4 = getAnchorPosition('test4');
/*About*/				new ypSlideOutMenu("menu4", "down", anchorTest4.x, yPosition, 100, 130)

		}
//-->

I guess the "else" is not required anymore, but since I didnt get it working, I left it as it was. So the menu is not manifesting now. After changing the above script, menu appears in one big block as in DW, so the script is not working correctly. You can look:

http://www.muralikrsnaswami.com/index2.html

I got rid of the test script.

I also tried "getAnchorPosition('test1');", with small "t", since the ID and NAME are small letters, but it didnt change anything.

Any clues?

And thanks for your time.

 

[BillyRayPreachersSon]

FYI, Your logic is very, very flawed. Your positioning will assume that the user's browser is no doubt fully maximized at the resolution you specify. If it is not, the menus will still appear out of place.

Your best bet is to not use absolute positioning, and use a decent, hierachical menu (e.g. suckerfish dropdowns, etc).

Using your current site without JS looks bad, and navigation is next to impossible.

You really should ditch all that table crud as well.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Einstein47]

Looking at your source code, I can't see where you are calling the getAnchorPosition function. I also don't see where you have imported Matt Kruse's .js file.

One thing you might want to do is put an alert after each getAnchorPosition to findout what the x value is being set to. Something like this:

var anchorTest1 = getAnchorPosition('test1');
[red]alert('test1.x='+anchorTest1.x);[/red]
new ypSlideOutMenu("menu1", "down", anchorTest1.x, yPosition, 120, 130)

because if it is returning an error or zero, or undefined, then your menus might be showing up all at once.

Give that a shot and see if you can make some progress.

Einstein47
“Evil abounds when good men do nothing.“ - Nelson R.
[&#91;]Starbase47.com]

 

[bhjaanus]

I learned some js basics in the meanwhile to start understanding better what am I dealing with here.

Actually I tried Suckerfish dropdowns, but I couldnt add my buttons to their code, and here, if it will work, thats the main thing.

And if everything fails, then I can always try something else.

I added the Kruse's js, which I forgot.
So this is what I came up with. I tried to call the getAnchorPosition function, but still its not working. So this is my calling:

<A                                onmouseover="ypSlideOutMenu.showMenu('menu1')" 
                                onmouseout="ypSlideOutMenu.hideMenu('menu1')" 
                                [COLOR=red]href="javascript: getAnchorPosition('test1')[/color]" NAME="test1" ID="test1"><img src="images/srilabut.gif" ...

Actually I do realize that Im not calling properly, cause to call this function, you have to press the button, but the function should be called, when mouse slides over the button, isn't it? So how to call properly?

And this is the positioning script

//menu_home2.js//

	var yPosition = 178;

if(screen.width==1024){

    //new ypSlideOutMenu("number menu", "slide position", left, top, width, height)
var anchorTest1 = getAnchorPosition('test1');
alert('test1.x='+anchorTest1.x);
    new ypSlideOutMenu("menu1", "down", anchorTest1.x, yPosition, 120, 130)
var anchorTest2 = getAnchorPosition('test2');
alert('test2.x='+anchorTest2.x);
	new ypSlideOutMenu("menu2", "down", anchorTest2.x, yPosition, 185, 130)
var anchorTest3 = getAnchorPosition('test3');
alert('test3.x='+anchorTest3.x);
	new ypSlideOutMenu("menu3", "down", anchorTest3.x, yPosition, 93, 130)
var anchorTest4 = getAnchorPosition('test4');
alert('test4.x='+anchorTest4.x);
	new ypSlideOutMenu("menu4", "down", anchorTest4.x, yPosition, 95, 130)
		}

This is also not perfect, cause yPosition is absolute and screen width is defined. Could we just delete screen witdh and instead of yPosition = (number), put anchorTest.y?
Is it working like this? Why do you add ".x" to the variable? Does it then understand to show only x coordinate?

Thanks for the help Einstein47.

Also, if you have this Kruse script working someplace, maybe you can give me a link, so I can understand it better and also save your time in this regard. Im really learning this for the first time.

Jaanus