moving menus

K

Karen

How do i create a menu that moves as you scroll down the page 'floating' i
suppose you'd call it?

Cheers Karen
 
A

Al Sparber

Jens Peter Karlsen said:

Microsoft CSS Expressions can also be used. It's far simpler and will
not turn every absolutely positioned element on a page to "fixed".

#menubar {
margin-top:
expression(parseInt(document.body.parentNode.scrollTop)+"px");
position: fixed;
top: 0;
left: 0;
width: whatever;
}

--
Al Sparber
PVII
http://www.projectseven.com

"Designing with CSS is sometimes like barreling down a crumbling
mountain road at 90 miles per hour secure in the knowledge that repairs
are scheduled for next Tuesday".
 
J

Jens Peter Karlsen[FP MVP]

Yes, but will it work in anything but IE6?
Besides, you didn't read the page closely enough. Not all absolutely
positioned elements on the page will be "fixed".

Regards Jens Peter Karlsen. Microsoft MVP - Frontpage.
-----Original Message-----
From: Al Sparber [mailto:[email protected]]
Posted At: 9. marts 2005 14:25
Posted To: microsoft.public.frontpage.client
Conversation: moving menus
Subject: Re: moving menus


Jens Peter Karlsen said:

Microsoft CSS Expressions can also be used. It's far simpler
and will not turn every absolutely positioned element on a
page to "fixed".

#menubar {
margin-top:
expression(parseInt(document.body.parentNode.scrollTop)+"px");
position: fixed;
top: 0;
left: 0;
width: whatever;
}

--
Al Sparber
PVII
http://www.projectseven.com

"Designing with CSS is sometimes like barreling down a
crumbling mountain road at 90 miles per hour secure in the
knowledge that repairs are scheduled for next Tuesday".
 
A

Al Sparber

Jens Peter Karlsen said:
Yes, but will it work in anything but IE6?

Of course. Only IE5.x+ reads the expression, the position: fixed
declaration is still there for modern browsers :)

Besides, you didn't read the page closely enough. Not all absolutely
positioned elements on the page will be "fixed".

I am very familier with that technique. I am the "MXVisions" reference
he made :). It was a good technique - it is now over-complicated for
the task.

One little expression is all it takes :)


--
Al Sparber
PVII
http://www.projectseven.com

"Designing with CSS is sometimes like barreling down a crumbling
mountain road at 90 miles per hour secure in the knowledge that repairs
are scheduled for next Tuesday".
 
J

Jon Spivey

Re: moving menusJens,
The expression makes it work in IE :) Other browsers support
position:fixed, so won't need the expression. The technique in that article,
ie putting this
html
{
overflow: hidden;
}
body
{
height: 100%;
overflow: auto;
}
on a page will make every absolutely positioned element fixed.
Try sticking a bunch of text and then a layer/positioned div on a page -
note the layer now behaves as position:fixed rather than position:absolute.

--
Cheers,
Jon
Microsoft MVP


Yes, but will it work in anything but IE6?
Besides, you didn't read the page closely enough. Not all absolutely
positioned elements on the page will be "fixed".
Regards Jens Peter Karlsen. Microsoft MVP - Frontpage.
-----Original Message-----
From: Al Sparber [mailto:[email protected]]
Posted At: 9. marts 2005 14:25
Posted To: microsoft.public.frontpage.client
Conversation: moving menus
Subject: Re: moving menus


Jens Peter Karlsen said:

Microsoft CSS Expressions can also be used. It's far simpler
and will not turn every absolutely positioned element on a
page to "fixed".

#menubar {
margin-top:
expression(parseInt(document.body.parentNode.scrollTop)+"px");
position: fixed;
top: 0;
left: 0;
width: whatever;
}

--
Al Sparber
PVII
http://www.projectseven.com

"Designing with CSS is sometimes like barreling down a
crumbling mountain road at 90 miles per hour secure in the
knowledge that repairs are scheduled for next Tuesday".
 
J

Jens Peter Karlsen[FP MVP]

Try reading a little further down.
As he writes, the first example has some drawbacks.

Regards Jens Peter Karlsen. Microsoft MVP - Frontpage.
-----Original Message-----
From: Jon Spivey [mailto:[email protected]]
Posted At: 9. marts 2005 20:20
Posted To: microsoft.public.frontpage.client
Conversation: moving menus
Subject: Re: moving menus


Re: moving menusJens,
The expression makes it work in IE :) Other browsers support
position:fixed, so won't need the expression. The technique
in that article, ie putting this html
{
overflow: hidden;
}
body
{
height: 100%;
overflow: auto;
}
on a page will make every absolutely positioned element fixed.
Try sticking a bunch of text and then a layer/positioned div
on a page - note the layer now behaves as position:fixed
rather than position:absolute.

--
Cheers,
Jon
Microsoft MVP


Yes, but will it work in anything but IE6?
Besides, you didn't read the page closely enough. Not all absolutely
positioned elements on the page will be "fixed".
Regards Jens Peter Karlsen. Microsoft MVP - Frontpage.
-----Original Message-----
From: Al Sparber [mailto:[email protected]]
Posted At: 9. marts 2005 14:25
Posted To: microsoft.public.frontpage.client
Conversation: moving menus
Subject: Re: moving menus


Jens Peter Karlsen said:

Microsoft CSS Expressions can also be used. It's far simpler
and will not turn every absolutely positioned element on a
page to "fixed".

#menubar {
margin-top:
expression(parseInt(document.body.parentNode.scrollTop)+"px");
position: fixed;
top: 0;
left: 0;
width: whatever;
}

--
Al Sparber
PVII
http://www.projectseven.com

"Designing with CSS is sometimes like barreling down a
crumbling mountain road at 90 miles per hour secure in the
knowledge that repairs are scheduled for next Tuesday".
 
J

Jon Spivey

Re: moving menusJens,
I read all the way down - I tend to do that when reading an article :)

He puts forward one, and only one, example which may have been useful some
while ago but has been overtaken by events. The expression another guy
posted up would be a better solution or one could accomplish the same thing
by scripting against the IE only onscroll event - a purist would probably
want to do everything with CSS.

What would you suggest is the best way to "fake" position:fixed in IE?

--
Cheers,
Jon
Microsoft MVP

in message Try reading a little further down.
As he writes, the first example has some drawbacks.
Regards Jens Peter Karlsen. Microsoft MVP - Frontpage.
-----Original Message-----
From: Jon Spivey [mailto:[email protected]]
Posted At: 9. marts 2005 20:20
Posted To: microsoft.public.frontpage.client
Conversation: moving menus
Subject: Re: moving menus


Re: moving menusJens,
The expression makes it work in IE :) Other browsers support
position:fixed, so won't need the expression. The technique
in that article, ie putting this html
{
overflow: hidden;
}
body
{
height: 100%;
overflow: auto;
}
on a page will make every absolutely positioned element fixed.
Try sticking a bunch of text and then a layer/positioned div
on a page - note the layer now behaves as position:fixed
rather than position:absolute.

--
Cheers,
Jon
Microsoft MVP


Yes, but will it work in anything but IE6?
Besides, you didn't read the page closely enough. Not all absolutely
positioned elements on the page will be "fixed".
Regards Jens Peter Karlsen. Microsoft MVP - Frontpage.
-----Original Message-----
From: Al Sparber [mailto:[email protected]]
Posted At: 9. marts 2005 14:25
Posted To: microsoft.public.frontpage.client
Conversation: moving menus
Subject: Re: moving menus


Jens Peter Karlsen said:

Microsoft CSS Expressions can also be used. It's far simpler
and will not turn every absolutely positioned element on a
page to "fixed".

#menubar {
margin-top:
expression(parseInt(document.body.parentNode.scrollTop)+"px");
position: fixed;
top: 0;
left: 0;
width: whatever;
}

--
Al Sparber
PVII
http://www.projectseven.com

"Designing with CSS is sometimes like barreling down a
crumbling mountain road at 90 miles per hour secure in the
knowledge that repairs are scheduled for next Tuesday".
 
J

Jens Peter Karlsen[FP MVP]

A little farther down on the page you find this example:

body
{
overflow: hidden;
}
div.content
{
height: 100%;
overflow: auto;
}

Which you can see is somewhat different from the first example on the
page which you quoted.
About this example he also notes that:

Absolutely positioned elements outside of div.content will be fixed in
respect to the viewport, absolutely positioned elements inside of
div.content will behave normally.

So as you see not all absolutely positioned elements on the page will
appear "fixed".

As to what I will recommend depends on how the expression based solution
works. If it works in IE5+ as he writes and doesn't stutter on the
screen as the script based examples I have seen, I will recommend that.
Otherwise the solution above would be my choice for now.
I will write a simple test later so I can see how it behaves.

Regards Jens Peter Karlsen. Microsoft MVP - Frontpage.
-----Original Message-----
From: Jon Spivey [mailto:[email protected]]
Posted At: 10. marts 2005 01:43
Posted To: microsoft.public.frontpage.client
Conversation: moving menus
Subject: Re: moving menus


Re: moving menusJens,
I read all the way down - I tend to do that when reading an
article :)

He puts forward one, and only one, example which may have
been useful some while ago but has been overtaken by events.
The expression another guy posted up would be a better
solution or one could accomplish the same thing by scripting
against the IE only onscroll event - a purist would probably
want to do everything with CSS.

What would you suggest is the best way to "fake" position:fixed in IE?

--
Cheers,
Jon
Microsoft MVP

"Jens Peter Karlsen[FP MVP]" <jpkarlsen@ot difficult to
undermvps.org> wrote in message
Try reading a little further down.
As he writes, the first example has some drawbacks.
Regards Jens Peter Karlsen. Microsoft MVP - Frontpage.
-----Original Message-----
From: Jon Spivey [mailto:[email protected]] Posted At: 9. marts 2005 20:20
Posted To: microsoft.public.frontpage.client
Conversation: moving menus
Subject: Re: moving menus


Re: moving menusJens,
The expression makes it work in IE :) Other browsers support
position:fixed, so won't need the expression. The technique
in that article, ie putting this html
{
overflow: hidden;
}
body
{
height: 100%;
overflow: auto;
}
on a page will make every absolutely positioned element fixed.
Try sticking a bunch of text and then a layer/positioned div
on a page - note the layer now behaves as position:fixed
rather than position:absolute.

--
Cheers,
Jon
Microsoft MVP


Yes, but will it work in anything but IE6?
Besides, you didn't read the page closely enough. Not all absolutely
positioned elements on the page will be "fixed".
Regards Jens Peter Karlsen. Microsoft MVP - Frontpage.
-----Original Message-----
From: Al Sparber [mailto:[email protected]]
Posted At: 9. marts 2005 14:25
Posted To: microsoft.public.frontpage.client
Conversation: moving menus
Subject: Re: moving menus


message Read this:
http://devnull.tagsoup.com/fixed/

Microsoft CSS Expressions can also be used. It's far simpler
and will not turn every absolutely positioned element on a
page to "fixed".

#menubar {
margin-top:
expression(parseInt(document.body.parentNode.scrollTop)+"px");
position: fixed;
top: 0;
left: 0;
width: whatever;
}

--
Al Sparber
PVII
http://www.projectseven.com

"Designing with CSS is sometimes like barreling down a
crumbling mountain road at 90 miles per hour secure in the
knowledge that repairs are scheduled for next Tuesday".
 
Top