Need stationary gif (banner)

C

Curmudgeon

I'm looking for a "sliding banner" - a short, page-width gif that
remains stationary in the middle of a page in the foreground while the
page scrolls behind it. Any suggestions - the simpler the better -
would be appreciated. The banner doesn't need any scrolling text or
hyperlinking.

Thanks
Dave
 
E

Evertjan.

Curmudgeon wrote on 09 dec 2008 in comp.lang.javascript:
I'm looking for a "sliding banner" - a short, page-width gif that
remains stationary in the middle of a page in the foreground while the
page scrolls behind it. Any suggestions - the simpler the better -
would be appreciated. The banner doesn't need any scrolling text or
hyperlinking.

Perhaps you mean "in the middle of the screen",
because it cannot be in the middle of the page
as THAT SAME page scrolls behind it?
 
C

Curmudgeon

Curmudgeon wrote on 09 dec 2008 in comp.lang.javascript:


Perhaps you mean "in the middle of the screen",
because it cannot be in the middle of the page
as THAT SAME page scrolls behind it?

Of course - poor choice of words.
 
S

SAM

Le 12/9/08 9:11 PM, Curmudgeon a écrit :
I'm looking for a "sliding banner" - a short, page-width gif that
remains stationary in the middle of a page in the foreground while the
page scrolls behind it. Any suggestions - the simpler the better -
would be appreciated. The banner doesn't need any scrolling text or
hyperlinking.

Thanks
Dave

With my Firefox :

<style type="text/css">
#banner {
position: fixed;
top: 50%; left: 50%;
width: 300px; height: 100px;
margin-left: -150px; margin-top: -50px;
z-index: -1;
}
</style>
</head>
<body>
<img id="banner" src="mybanner.gif" alt="" />


Of course it doesn't work with IE (at least <7 )

idea :
<http://msdn.microsoft.com/en-us/library/ms533005(VS.85).aspx#Fixed_Positioning>
and scroll down to the Jscript for IE4
 
D

David Mark

Le 12/9/08 9:11 PM, Curmudgeon a écrit :



With my Firefox :

<style type="text/css">
#banner {
        position: fixed;
        top: 50%; left: 50%;
        width: 300px; height: 100px;
        margin-left: -150px; margin-top: -50px;
        z-index: -1;
        }
</style>

That is an approximation of a fixed and centered background image
(with compatibility issues.) The OP requested a "foreground" image.

[snip]
 
S

SAM

Le 12/10/08 3:55 AM, David Mark a écrit :
That is an approximation of a fixed and centered background image
Absolutely.

(with compatibility issues.)

Yes, that was precised.
The OP requested a "foreground" image.

and ?

doesn't it appear in rear ?
leaving the background for other so beautiful wall-paints

Is it never possible to answer with a different light than was waited ?
(asked, expected)


The background image centered in viewport ... (works too in my IE6)

<style type="text/css">
body { background: url(banner.gif) no-repeat fixed center center #eee; }
</style>



Ho! ? *FORE*ground ?
^^^^^^
What a strange idea !

The previous style is OK for me if the z-index is deleted.
(probably better if the image is just before </body> )
I suppose that works with IE 7



Proposition (for IE6 and missing : resize) waiting observations:

<script type="text/javascript">
var t;
function fix() {
if(!t) t = document.all.banner.offsetTop;
document.all.banner.style.top = t + document.body.scrollTop +'px';
// facultative verification :
window.status = t +' - '+document.all.banner.offsetTop+' - '+
document.body.scrollTop;
}
</script>
<style type="text/css">
#banner {
position: fixed;
top: 50%; left: 50%;
width: 300px; height: 100px;
margin-left: -150px; margin-top: -50px;
_position: absolute; /* hack IE */
_margin-top: -25px; /* correction IE (status bar ?) */
}
</style>
</head>
<body onload="if(document.all) fix();"
onscroll="if(document.all) fix();">
<img id="banner" src="banner.gif" alt="" />
 
D

David Mark

Le 12/10/08 3:55 AM, David Mark a écrit :





Yes, that was precised.


and ?

And nothing.
doesn't it appear in rear ?

The rear can hardly be considered the front.
leaving the background for other so beautiful wall-paints

Is it never possible to answer with a different light than was waited ?
(asked, expected)

The background image centered in viewport ... (works too in my IE6)

<style type="text/css">
body { background: url(banner.gif) no-repeat fixed center center #eee; }

You don't need two "centers."
</style>

Ho! ? *FORE*ground ?
       ^^^^^^
What a strange idea !

The previous style is OK for me if the z-index is deleted.
(probably better if the image is just before </body> )
I suppose that works with IE 7

Remove the z-index and you will have (more or less) what the OP asked
for.
Proposition (for IE6 and missing : resize) waiting observations:

You are a glutton for punishment.
<script type="text/javascript">
var t;
function fix() {
  if(!t) t = document.all.banner.offsetTop;

Don't use document.all. And what if t is 0?
  document.all.banner.style.top = t + document.body.scrollTop +'px';

You are stuck in quirks mode (as usual.)
  // facultative verification :
  window.status = t +' - '+document.all.banner.offsetTop+' - '+
document.body.scrollTop;}

</script>
<style type="text/css">
#banner {
        position: fixed;
        top: 50%; left: 50%;
        width: 300px; height: 100px;
        margin-left: -150px; margin-top: -50px;
        _position: absolute; /* hack IE */

This is silly. Never bank on a parsing quirk. Use a separate style
sheet in a conditional comment for IE < 7. Realize that IE7 doesn't
do fixed either in quirks mode.
        _margin-top: -25px;  /* correction IE (status bar ?) */

Same. And no, it has nothing to do with the status bar (you could
have found that out for yourself by hiding the status bar.)
        }
</style>
</head>
<body onload="if(document.all) fix();"
       onscroll="if(document.all) fix();">

Object inferences. Did you intend for this "fix" to run in Opera (or
other browsers featuring a document.all property?)

[snip]
 
S

SAM

Le 12/10/08 1:03 PM, David Mark a écrit :
Remove the z-index and you will have (more or less) what the OP asked
for.

So we are (almost) OK for this point.
You are a glutton for punishment.

I love too much !
Don't use document.all.

Why ?
I don't want to disturb my FF.
And what if t is 0?

That could happens ?
You are stuck in quirks mode (as usual.)

Probably with :

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Yikes !
In not quirksmode the background fixed image works in my IE6 ! ?
Shocked !
If something works normally in IE where we go ?
This is silly. Never bank on a parsing quirk. Use a separate style
sheet in a conditional comment for IE < 7. Realize that IE7 doesn't
do fixed either in quirks mode.


Same. And no, it has nothing to do with the status bar (you could
have found that out for yourself by hiding the status bar.)

I did try without success.
(I'm not very familiar with IE)
Done and nothing better ... from where come these 25px ?
Object inferences. Did you intend for this "fix" to run in Opera (or
other browsers featuring a document.all property?)

I don't like Opera.
What has he to play à la IE ?


This time in not quirksmode (doctype HTML4.01 strict)
the body.onscroll doesn't work in my IE.6 :-(

<script type="text/javascript">
var t;
var IE;
if(document.all)
IE = !( navigator.userAgent.indexOf('pera')>0 ||
navigator.userAgent.indexOf('iCab')>0) );
function fix() {
if(!t) t = document.all.banner.offsetTop;
document.all.banner.style.top = t + document.body.scrollTop;
}

</script>
<style type="text/css">
#banner {
position: fixed;
top: 50%; left: 50%;
width: 300px; height: 100px;
margin-left: -150px; margin-top: -50px;
}
</style>
<!--[if lt IE 7]>
<style>
#banner {
position: absolute;
margin-top: -25px;
}
</style>
<![endif]-->
</head>
<body onload="if(IE) fix();"
onscroll="if(IE) fix();">
<img id="banner" src="banner.gif" />
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top