[thelist] CSS dynamic layer position

Rob Whitener rwhitener at DesignOptions.com
Thu Dec 19 09:45:01 CST 2002


Something that may also work is to write an event handler using setInterval
that updates the position of the layer as the user scrolls.  That is how
they create the menu on the page at dynamicdrive.  Instead of having the
layer chase the scrollbar, check every millisecond or so and set the layer
top equal to clientheight - scrollTopY - layerHeight (or imageheight).  Make
sure clientheight property is the total page no matter where the user has
scrolled to before you use that.  Below is some code I used to scroll menu
much like the menu on dynamicdrive:

function pollScrollBar(){
//call back function to pass into setInterval()

	var menu = document.getElementById("float_menu");
	var offset = 0;
	var increment;
	var scrolltop;
	var i;
	if(document.all){
	 scrolltop = document.body.scrollTop  //get the position of the top
scroll bar.
	 offset = parseValue(menu.style.top);
	 			 if(scrolltop == oldtop){//the menu only
needs to move once the scrollbar has stopped moving
					if(offset <= scrolltop){//if the top
of the scrollbar is above the menu, scroll it up
						for(i = 0; i <
Math.abs(scrolltop-offset)*2; i++){
							offset = offset +
.5;
						}
					}else{//the scrollbar is below the
menu, so scroll it down
						for(i = 0; i <
Math.abs(scrolltop-offset)*2; i++){
							offset = offset -
.5;
						}
					}

					menu.style.top = offset
		 }
		 oldtop = scrolltop;

	}else{
		menu.style.top = window.pageYOffset;
	}

	if(document.all){
		top = document.body.scrollTop;//IE
	}else{
		top = window.pageYOffset;//Netscape
	}
}

function pollForScroll(){ //this starts the "thread" that polls for the
position of the scroll bar
	setInterval("pollScrollBar()",50);
}

Try it out, modify the code where the loops are, it might work for you.

To see it in action go to
http://www.designoptions.com/designtest/firtstrun.htm (this is still a work
in progress, but at least you will be able to see the behavior of the menu)

Rob

-----Original Message-----
From: dn at dittodesign.co.uk [mailto:dn at dittodesign.co.uk]
Sent: Thursday, December 19, 2002 9:53 AM
To: thelist at lists.evolt.org
Subject: Re: [thelist] CSS dynamic layer position


> Not sure if this is exactly what you are looking for but it may help point
you in the right direction with some tweaking.
http://www.dynamicdrive.com/dynamicindex1/staticmenu.htm  Look at the bottom
left you will see a menu, as you scroll down the page the menu floats and
scrolls with you.  If you try and tweak it, maybe you can get what you are
looking for.

its close, and with some code surgery it will probably do the job.
I want the change to be as invisible as possible.

I've ended up using a DW extension that I've used in the past briefly
and almost forgotten. Snap Layers by Project Seven. If anyones
interested. Works very well.

http://dynamic.macromedia.com/bin/MM/exchange/search_result.jsp?BV_SessionID
=@@@@0816775247.1040309493@@@@&BV_EngineID=edadcgcedkkdibeecgemcgcgk.0&pageN
ame=%2Fexchange%2Fextension_tab.jsp&select=Select+a+Category&queryString=PVI
I

wow, thats a tad large


Darren

----- Original Message -----
From: "Frank Gorton" <fgorton at bixler.com>
To: <thelist at lists.evolt.org>
Sent: Thursday, December 19, 2002 2:32 PM
Subject: RE: [thelist] CSS dynamic layer position


> Not sure if this is exactly what you are looking for but it may help point
you in the right direction with some tweaking.
http://www.dynamicdrive.com/dynamicindex1/staticmenu.htm  Look at the bottom
left you will see a menu, as you scroll down the page the menu floats and
scrolls with you.  If you try and tweak it, maybe you can get what you are
looking for.
>
> Good Luck.
> Frank
>
> -----Original Message-----
> From: dn at dittodesign.co.uk [mailto:dn at dittodesign.co.uk]
> Sent: Thursday, December 19, 2002 9:16 AM
> To: thelist at lists.evolt.org
> Subject: [thelist] CSS dynamic layer position
>
>
> I'm trying to position a layer at the bottom of the browser window
> onload and on resize, containing an image to act as a bottom border.
>
> I've tried a few DW extensions that didn't quiet live up to their promise,
> plus searching the web, but I can't seem to find anything.
>
> I'm running out of time on this one and shouldn't really be going as far
> as I am with the design but going that bit further is going to make all
the
> difference. So I'd appreciate a link to some possible code candidates
> if anyone has some handy.
>
> I need to use layers because the border sweeps up and
> will be under other layers on the page.
>
> Sounds straight forward, but I've spent the whole day so far
> looking for some code. I have a number of solutions but non
> of them quiet go the whole way.
>
> tia,
>
> Darren Yates
> dn at dittodesign.co.uk
> http://dittodesign.co.uk


--
* * Please support the community that supports you.  * *
http://evolt.org/help_support_evolt/

For unsubscribe and other options, including the Tip Harvester
and archives of thelist go to: http://lists.evolt.org
Workers of the Web, evolt !



More information about the thelist mailing list