[lnkForumImage]
TotalShareware - Download Free Software
Confronta i prezzi di migliaia di prodotti.
Asp Forum
 Home | Login | Register | Search 


 

Forums >

microsoft.public.frontpage.programming

Re: Popup menus and scrolling layers

Jon Spivey

4/1/2004 12:30:00 AM

Actually there's no need for any script to do this its just a bit of CSS an
expression for IE and position:fixed for others - stick this code on a page
<style type="text/css">
body{margin:100px 0 0 250px;}
#fixed {
position:fixed;
top:50px;
left:10px;
background:white;
border:1px solid red;}
</style>
<!--[if gte IE 5]>
<style>
#fixed{position:absolute;top:expression(body.scrollTop + 50 + "px");};
</style>
<![endif]-->
</head>
<body>
<div id="fixed">
this box will stay fixed as you scroll
</div>
<p>put a lot of text to make sure we get scrollbars....</p>

Much easier than a ton of script :-) IE5 + Mozilla Safari etc not NN4 of
course

Jon
Microsoft MVP - FP

Jim Buyens wrote:
> It sounds like what you *really* want is to float the
> footer bar above the rest of your content, so that the
> footer bar stays in the same place, relative to the
> browser window, as the visitor scrolls the main content up
> and down.
>
> If so, you had better be a JavaScript expert. It turns out
> you really can't position a footer -- or any other layer --
> relative to the browser window; you can only position it
> relative to the page. This is a limitation of the browser,
> and not of FrontPage.
>
> So, to keep the footer in the "same" place, you trap the
> documents onscroll and onresize events, get the current
> scroll position of the document, get the current window
> height, get the footer height, and then calculate the
> required distance from the top of the web page:
>
> scroll position + window height - footer height
>
> Then, you have to position the footer layer at that
> dimension. Similar factors apply to the footer width, and
> to the pop-up menu items.
>
> And to make matters worse, you have to solve the problem
> several times, one for each browser, and then execute the
> correct code for the current browser.
>
> This is way too complicated for me to work up and post as
> a newsgroup response. However, as a place to get started,
> you might want to look at:
>
> http://www.inter.../tricks/trick05/c...
>
> which does something similar with the graphics in the
> corner. However, as coded, this page only works in IE.
>
> Jim Buyens
> Microsoft FrontPage MVP
> http://www.inter...
> Author of:
> *----------------------------------------------------
>> \---------------------------------------------------
>>> Microsoft Office FrontPage 2003 Inside Out
>>> ---------------------------------------------------
>>> Web Database Development Step by Step .NET Edition
>>> Microsoft FrontPage Version 2002 Inside Out
>>> Faster Smarter Beginning Programming
>>> (All from Microsoft Press)
>> /---------------------------------------------------
> *----------------------------------------------------
>
>
>
>
>
>> -----Original Message-----
>> I want to use popup menus from a footer bar that I have
> placed in a layer so that it is visible at all times. Can
> this be done and what is the recommended way forward? Can
> I see some examples of frontpage sites doing this?
>>
>> I also want to be able to scroll my content layer by
> using the browser scroll bar. I do not want to see a
> second scroll bar the like of which can be used to scroll
> frames. Can this be done are there any example sites to
> visit?
>>
>>
>> .
3 Answers

=?Utf-8?B?cm9kY2hhcg==?=

4/1/2004 8:11:00 AM

0

Thanks guys - off to have a go! Rgds P

----- Jon Spivey wrote: ----

Actually there's no need for any script to do this its just a bit of CSS a
expression for IE and position:fixed for others - stick this code on a pag
<style type="text/css"
body{margin:100px 0 0 250px;
#fixed
position:fixed
top:50px
left:10px
background:white
border:1px solid red;
</style><!--[if gte IE 5]><style
#fixed{position:absolute;top:expression(body.scrollTop + 50 + "px");}
</style><![endif]--></head><body><div id="fixed"
this box will stay fixed as you scrol
</div><p>put a lot of text to make sure we get scrollbars....</p

Much easier than a ton of script :-) IE5 + Mozilla Safari etc not NN4 o
cours

Jo
Microsoft MVP - F

Jim Buyens wrote
> It sounds like what you *really* want is to float th
> footer bar above the rest of your content, so that th
> footer bar stays in the same place, relative to th
> browser window, as the visitor scrolls the main content u
> and down
>> If so, you had better be a JavaScript expert. It turns ou
> you really can't position a footer -- or any other layer -
> relative to the browser window; you can only position i
> relative to the page. This is a limitation of the browser
> and not of FrontPage
>> So, to keep the footer in the "same" place, you trap th
> documents onscroll and onresize events, get the curren
> scroll position of the document, get the current windo
> height, get the footer height, and then calculate th
> required distance from the top of the web page
>> scroll position + window height - footer heigh
>> Then, you have to position the footer layer at tha
> dimension. Similar factors apply to the footer width, an
> to the pop-up menu items
>> And to make matters worse, you have to solve the proble
> several times, one for each browser, and then execute th
> correct code for the current browser
>> This is way too complicated for me to work up and post a
> a newsgroup response. However, as a place to get started
> you might want to look at
>> http://www.inte...m/tricks/trick05/...
>> which does something similar with the graphics in th
> corner. However, as coded, this page only works in IE
>> Jim Buyen
> Microsoft FrontPage MV
> http://www.inte...
> Author of
> *---------------------------------------------------
>> \--------------------------------------------------
>>> Microsoft Office FrontPage 2003 Inside Ou
>>> --------------------------------------------------
>>> Web Database Development Step by Step .NET Editio
>>> Microsoft FrontPage Version 2002 Inside Ou
>>> Faster Smarter Beginning Programmin
>>> (All from Microsoft Press
>> /--------------------------------------------------
> *---------------------------------------------------
>>>>>>> -----Original Message----
>> I want to use popup menus from a footer bar that I hav
> placed in a layer so that it is visible at all times. Ca
> this be done and what is the recommended way forward? Ca
> I see some examples of frontpage sites doing this
>>>> I also want to be able to scroll my content layer b
> using the browser scroll bar. I do not want to see
> second scroll bar the like of which can be used to scrol
> frames. Can this be done are there any example sites t
> visit
>>>>>>



news

4/1/2004 4:45:00 PM

0

This is a cool piece of code. It raises a couple of questions,
at least for me.

1. Where is the documentation that explains this statement:
<!--[if gte IE 5]>

2. Is it true that within expression() in a <style></style> block,
you can specify any JavaScript expression that would work inside
a <script></script> block?

3. Can expression() call a function? If so, where would I physically
locate the function definition?

3. The original question was for a floating footer, not a floating
header. This involves the additional difficulty of accomodating
the window height. How would you do that?

Jim Buyens
Microsoft FrontPage MVP
http://www.inter...
Author of:
*----------------------------------------------------
|\---------------------------------------------------
|| Microsoft Office FrontPage 2003 Inside Out
||---------------------------------------------------
|| Web Database Development Step by Step .NET Edition
|| Microsoft FrontPage Version 2002 Inside Out
|| Faster Smarter Beginning Programming
|| (All from Microsoft Press)
|/---------------------------------------------------
*----------------------------------------------------


"Jon Spivey" <jonspivey@tiscali.co.uk> wrote in message news:<e0sTAC4FEHA.688@tk2msftngp13.phx.gbl>...
> Actually there's no need for any script to do this its just a bit of CSS an
> expression for IE and position:fixed for others - stick this code on a page
> <style type="text/css">
> body{margin:100px 0 0 250px;}
> #fixed {
> position:fixed;
> top:50px;
> left:10px;
> background:white;
> border:1px solid red;}
> </style>
> <!--[if gte IE 5]>
> <style>
> #fixed{position:absolute;top:expression(body.scrollTop + 50 + "px");};
> </style>
> <![endif]-->
> </head>
> <body>
> <div id="fixed">
> this box will stay fixed as you scroll
> </div>
> <p>put a lot of text to make sure we get scrollbars....</p>
>
> Much easier than a ton of script :-) IE5 + Mozilla Safari etc not NN4 of
> course
>
> Jon
> Microsoft MVP - FP
>
> Jim Buyens wrote:
> > It sounds like what you *really* want is to float the
> > footer bar above the rest of your content, so that the
> > footer bar stays in the same place, relative to the
> > browser window, as the visitor scrolls the main content up
> > and down.
> >
> > If so, you had better be a JavaScript expert. It turns out
> > you really can't position a footer -- or any other layer --
> > relative to the browser window; you can only position it
> > relative to the page. This is a limitation of the browser,
> > and not of FrontPage.
> >
> > So, to keep the footer in the "same" place, you trap the
> > documents onscroll and onresize events, get the current
> > scroll position of the document, get the current window
> > height, get the footer height, and then calculate the
> > required distance from the top of the web page:
> >
> > scroll position + window height - footer height
> >
> > Then, you have to position the footer layer at that
> > dimension. Similar factors apply to the footer width, and
> > to the pop-up menu items.
> >
> > And to make matters worse, you have to solve the problem
> > several times, one for each browser, and then execute the
> > correct code for the current browser.
> >
> > This is way too complicated for me to work up and post as
> > a newsgroup response. However, as a place to get started,
> > you might want to look at:
> >
> > http://www.inter.../tricks/trick05/corners.htm
> >
> > which does something similar with the graphics in the
> > corner. However, as coded, this page only works in IE.
> >
> > Jim Buyens
> > Microsoft FrontPage MVP
> > http://www.inter...
> > Author of:
> > *----------------------------------------------------
> >> \---------------------------------------------------
> >>> Microsoft Office FrontPage 2003 Inside Out
> >>> ---------------------------------------------------
> >>> Web Database Development Step by Step .NET Edition
> >>> Microsoft FrontPage Version 2002 Inside Out
> >>> Faster Smarter Beginning Programming
> >>> (All from Microsoft Press)
> >> /---------------------------------------------------
> > *----------------------------------------------------
> >
> >
> >
> >
> >
> >> -----Original Message-----
> >> I want to use popup menus from a footer bar that I have
> > placed in a layer so that it is visible at all times. Can
> > this be done and what is the recommended way forward? Can
> > I see some examples of frontpage sites doing this?
> >>
> >> I also want to be able to scroll my content layer by
> > using the browser scroll bar. I do not want to see a
> > second scroll bar the like of which can be used to scroll
> > frames. Can this be done are there any example sites to
> > visit?
> >>
> >>
> >> .

Jon Spivey

4/1/2004 8:43:00 PM

0

Hi Jim,

See inline

> 1. Where is the documentation that explains this statement:
> <!--[if gte IE 5]>

This is microsoft conditional comment - you can choose to execute code on
certain IE versions only, the above would be seen by IE5+ Of course it will
be ignored by non IE browsers. Very useful for working around IE5 issues
especially such as box model/margin auto etc but also servers this purpose
nicely. Here's the docs
http://msdn.microsoft.com/library/default.asp?url=/workshop/author...
rview/ccomment_ovw.asp

>
> 2. Is it true that within expression() in a <style></style> block,
> you can specify any JavaScript expression that would work inside
> a <script></script> block?

Yes - anything that would make sense in a stylehseet, 9 times out of 10 it
would be some expression to find the window dimensions. Of course it will
only be seen by IE. In this case all browsers except IE support position
fixed without needing an expression. IE will ignore position:fixed and
evaluate the expression. If you test the code on IE you'll notice a very
slight flicker if you scroll fast because the expression has to be evaluated
in other browsers the div will be steady as a rock
>
> 3. Can expression() call a function? If so, where would I physically
> locate the function definition?

Don't know I've never tried it. Try it - either itll work or it won't :-)