navigation
a webmaster learning community
     Home    Register     Search      Help      Login    
Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums
 

Advanced search
Recent Posts

 Todays Posts
 Most Active posts
 Posts since last visit
 My Recent Posts
 Mark posts read

Microsoft MVP

 

image position to stay on top of page

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets >> image position to stay on top of page
Page: [1]
 
malky800

 

Posts: 104
Joined: 1/11/2006
Status: offline

 
image position to stay on top of page - 3/10/2008 22:47:58   
Is there a way to keep an image on top of the page in css even as you scroll down the page?
jaybee

 

Posts: 13784
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

 
RE: image position to stay on top of page - 3/11/2008 9:38:11   
body {
background-image: url(xxxxxxxx.gif);
background-attachment: fixed
}

_____________________________

If it ain't broke..... fix it until it is.
:)

:)
GAWDS
Now where did I put that Doctype?

(in reply to malky800)
malky800

 

Posts: 104
Joined: 1/11/2006
Status: offline

 
RE: image position to stay on top of page - 3/11/2008 11:22:16   
I want that even if I'm halfway down the page the image should move and still stay on top.
I tried background-attachment:scroll
I have this css style in a td. Is that why it's not working? Do you need it to be in only certain element tags?

(in reply to jaybee)
rdouglass

 

Posts: 9136
From: Biddeford, ME USA
Status: offline

 
RE: image position to stay on top of page - 3/11/2008 14:47:43   
I use a JS on a demo page I have running if you want to look at it; it may suit what you need. I use it to hold a moving mouse-over help window but I'm sure you could put an image or two or three in there just fine.

http://www.rogerdouglass.com/genericContactLite/genericContactLiteConfig.asp

Log in (UN and PW on page) and click the "Configuration" menu and then scroll up and down. You should see the window following the screen. It's a fairly common JS effect but IMO should not be overdone.

That page could be a little hard to follww in the code but I got the original (and hacked at it) from dynamicdrive.com .

The essence is the JS here:

<script type="text/javascript">

/***********************************************
* Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}

function staticbar(){
	barheight=document.getElementById("topbar").offsetHeight
	var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
	var d = document;
	function ml(id){
		var el=d.getElementById(id);
		if (!persistclose || persistclose && get_cookie("remainclosed")=="")
		el.style.visibility="visible"
		if(d.layers)el.style=el;
		el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
		el.x = startX;
		if (verticalpos=="fromtop")
		el.y = startY;
		else{
		el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
		el.y -= startY;
		}
		return el;
	}
	window.stayTopLeft=function(){
		if (verticalpos=="fromtop"){
		var pY = ns ? pageYOffset : iecompattest().scrollTop;
		ftlObj.y += (pY + startY - ftlObj.y)/8;
		}
		else{
		var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
		ftlObj.y += (pY - startY - ftlObj.y)/8;
		}
		ftlObj.sP(ftlObj.x, ftlObj.y);
		setTimeout("stayTopLeft()", 10);
	}
	ftlObj = ml("topbar");
	stayTopLeft();
}

if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>


That JS and the stuff inside the DIV <div id="topbar">. Just there is other JS on that page as well that swaps out the help text and that isn't necessary for the following window.

Hope it helps.

_____________________________

Don't take you're eye off your final destination.

ASP Checkbox Function Tutorial.

(in reply to malky800)
jaybee

 

Posts: 13784
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

 
RE: image position to stay on top of page - 3/11/2008 15:16:29   

quote:

ORIGINAL: malky800

I want that even if I'm halfway down the page the image should move and still stay on top.
I tried background-attachment:scroll
I have this css style in a td. Is that why it's not working? Do you need it to be in only certain element tags?


Yep, that's exactly why it's not working. A td is a table cell, when you scroll the page the table and the cell goes with it.

_____________________________

If it ain't broke..... fix it until it is.
:)

:)
GAWDS
Now where did I put that Doctype?

(in reply to malky800)
malky800

 

Posts: 104
Joined: 1/11/2006
Status: offline

 
RE: image position to stay on top of page - 3/11/2008 22:01:32   
basically the only thing I can scroll is a body background image?
on my site there is background images to all the tables so it is overlapping any body image I put in.
Is there a way to define which image should be the top layer?

Is there any other tag I can put it in that would allow the image to scroll?

(in reply to jaybee)
jaybee

 

Posts: 13784
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

 
RE: image position to stay on top of page - 3/11/2008 22:17:22   
Not that I can think of. I reckon Roger's solution above is the way to go.

There are ways to put a box above everything else with css using z-index but I can't think how you'd stop it scrolling with the page.

_____________________________

If it ain't broke..... fix it until it is.
:)

:)
GAWDS
Now where did I put that Doctype?

(in reply to malky800)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets >> image position to stay on top of page
Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts