showLayer function, layer position problem

[ruthann]

Hi,

I have this function for tabbed layers, click a tab the corresponding layer shows, click another and its layer shows and so on. The layers begin 18% from the left and 130px from the top. In conjunction with this there is a help tab which when clicked opens the help menu [layer] related to whatever layer is open. It opens in that 18% and 140px from the top. This works fine but I wanted to change the layout.

At the top left, 0 to 130px down and 18% wide is something that can't be moved. I changed the layer setup and now the layers open across the full page 150px down from the top. I changed the css and it works fine with all but the help layer. I got the help layer to be at 1px from the top, but I cannot get it to slide out and have its left side be at 18% from the left of the browser window, it stops always at the left margin which covers that thing that has to be there.

This is the function, I think it's the whole function for that slide out help menu. I wasn't sure what anyone needed so I include it all. I think the part for sliding out and sliding back in the menu and the get_left part may be the area that needs something to make that layer go that 18% out from the left.

ie=document.all?1:0
n=document.layers?1:0
ns6=document.getElementById&&!document.all?1:0

lshow=0 //visible when out
var move=20;
menuSpeed=10; //speed in milliseconds
var moveOnScroll=false; //scroll with page?

var ltop;
var tim=0;

function makeMenu(obj,nest)
{
	nest=(!nest) ? '':'document.'+nest+'.'
	if (n) this.css=eval(nest+'document.'+obj)
		else if (ns6) this.css=document.getElementById(obj).style
			else if (ie) this.css=eval(obj+'.style') 
	this.state=1
	this.go=0
	if (n) this.width=this.css.document.width
		else if (ns6) this.width=document.getElementById(obj).offsetWidth
			else if (ie) this.width=eval(obj+'.offsetWidth')
	this.left=b_getleft
	this.obj = obj + "Object"; eval(this.obj + "=this") 
}


function b_getleft() //Get's the top position.
{
	if (n||ns6) gleft=parseInt(this.css.left);
		else if (ie) gleft=eval(this.css.pixelLeft);
	return gleft;
}

function moveMenu()
{
	if(!oMenu.state)
	{
		clearTimeout(tim);
		mIn() ;
	}
	else
	{
		clearTimeout(tim);
		mOut();
	}
}

function mIn()
{
	if(oMenu.left()>-oMenu.width+lshow)
	{
		oMenu.go=1;
		oMenu.css.left=oMenu.left()-move;
		tim=setTimeout("mIn()",menuSpeed);
	}
	else
	{
		oMenu.go=0;
		oMenu.state=1;
	} 
}

function mOut()
{
	if(oMenu.left()<0)
	{
		oMenu.go=1;
		oMenu.css.left=oMenu.left()+move;
		tim=setTimeout("mOut()",menuSpeed);
	}
	else
	{
		oMenu.go=0;
		oMenu.state=0;
	} 
}

function checkScrolled()
{
	if(!oMenu.go) oMenu.css.top=eval(scrolled)+parseInt(ltop);
	if(n||ns6) setTimeout('checkScrolled()',30);
}

function menuInit()
{
	oMenu=new makeMenu('Lhelp');
	if (n||ns6) scrolled="window.pageYOffset";
		else if (ie) scrolled="document.body.scrollTop";
	oMenu.css.left=-oMenu.width+lshow;
	if (n||ns6) ltop=oMenu.css.top;
		else if (ie) ltop=oMenu.css.pixelTop;
	oMenu.css.visibility='visible';
	if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled();
}

Thanks for any help.

Alternatively, and this might be better, but more involved so I'm only mentioning it I wouldn't mind if that help layer slide down from the top instead of out from the left.

Ruth

[Till]

Hi Ruth!

There are so many DHTML-based menues who do what you ask. No need to reinvent the wheel! ;-)

Till

[ruthann]

Hi Till,

The problem is, I can't just use a dhtml menu. This help thing is just a 'sub' function, or whatever you'd call it, of a much larger js thingee. Aren't my technical terms just great

It links or has functions in it so when you click on a tab what opens is a layer with a bunch of boxes that when filled do whatever the function has told it to do after it is filled out and submitted. I guess it's like a little program with this help layer being part of it. I figured out how to move all the other layers, but not this one and I would have no idea how to take a dhtml menu and insert this program and have it open the layers and the corresponding help layer that matches whichever layer is open.

I do appreciate the response This is not critical, I just didn't like the layout and wanted it to be the way I wanted it, lol.

Ruth

[Till]

Well, for some basic slide functions and effects, I'd say you could extend your current stuff with moo.fx for example? It's a very lightweight JavaScript effect-lib.

http://moofx.mad4milk.net/