stop Images from scrolling...?

**abbi** · 11-15-2005, 05:14 PM

Ive been looking all over for a script that will stop a specific image from scrolling with the page, and I know it can be done because Ive seen it before. It's sorta like a floating image only it doesn't move around the page at all, it just moves up and down the page With the scrollbar. If anyone could help with this it'd be greatly appreciated.

**Naild** · 11-15-2005, 09:47 PM

Originally Posted by abbi

Ive been looking all over for a script that will stop a specific image from scrolling with the page, and I know it can be done because Ive seen it before. It's sorta like a floating image only it doesn't move around the page at all, it just moves up and down the page With the scrollbar. If anyone could help with this it'd be greatly appreciated.

You mean like a text area with a scrollbar? If you give me your URL I could probably help if I could look at what you mean.

**abbi** · 11-16-2005, 03:29 PM

no, not a text area with a scrollbar. I know how to do those. It's within the regular screen, like a floating image, only it doesn't bounce all over the page.

and i would give you a link only that it's a layout Im working on, and I never put any of my stuff online before Im finished on it. I'll go ahead and try to put it up I guess though...

**abbi** · 11-16-2005, 08:40 PM

here's a link to a site that has what Im wanting. it's to the left, the "sign up for free" thing. does anyone know how to do this?
50webs.com

**jscheuer1** · 11-17-2005, 06:03 AM

In current W3C standards compliant browsers, that would be the position:fixed style. However, IE does not support that. Here is a demo I once saw of a method to give the fixed property to an element in IE, while still utilizing the W3C standard for those browsers that do support it. You will need to adapt the code to your element (its outermost container, probably). It requires that your page be styled a certain way to work. This may interfere with other layout styling for the page but, you may be able to compensate if that happens. Here it is:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>Position fixed equivalent</title>
	<style type="text/css">
		html, body {
			height: 100%;
			margin: 0;
			padding: 0;
		}

		* html {
			overflow: hidden;
		}
		* html body {
			overflow: auto;
		}
		
		/* to actually be fixed, this element's stacking
		   context must be relative to the root element. */
		.fixed {
			position: fixed;
			right: 10px;
			bottom: 10px;
		}
		* html .fixed {
			position: absolute;
			right: 25px;
		}
	</style>
</head>
<body>
	<div class="fixed">hey, look at me, fixed text in IE!</div>
	<p>a paragraph</p>
	<p>a paragraph</p>
	<p>a paragraph</p>
	<p>a paragraph</p>
	<p>a paragraph</p>
	<p>a paragraph</p>
	<p>a paragraph</p>
	<p>a paragraph</p>
	<p>a paragraph</p>
	<p>a paragraph</p>
	<p>a paragraph</p>
	<p>a paragraph</p>
	<p>a paragraph</p>
	<p>a paragraph</p>
	<p>a paragraph</p>
	<p>a paragraph</p>
	<p>a paragraph</p>
	<p>a paragraph</p>
	<p>a paragraph</p>
	<p>a paragraph</p>
	<p>a paragraph</p>
	<p>a paragraph</p>
	<p>a paragraph</p>
	<p>a paragraph</p>
	<p>a paragraph</p>
	<p>a paragraph</p>
	<p>a paragraph</p>
	<p>a paragraph</p>
	<p>a paragraph</p>
	<p>a paragraph</p>
	<p>a paragraph</p>
	<p>a paragraph</p>
</body>
</html>

**abbi** · 12-04-2005, 04:14 AM

yeah that didn't work. I guess i'll just have to keep looking for how to do it the way Im wanting, because I know there's a way to do it. thanx anyways.

**jscheuer1** · 12-04-2005, 05:51 AM

You just didn't try hard enough though, it was a bit of a trick for me and I'm used to this kind of stuff. Here is a demo of your page with a fixed position for your sign-up graphic and link (remove this line:

HTML Code:

<base href="http://www.50webs.com/" /> <!-- remove for live use -->

for live use):

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Free Web Hosting, Domain Hosting - 50webs.com Reseller Program, Affiliates, Reliable Provider, PHP, MySQL, Linux, Ecommerce, Inexpensive, Low Cost, Affordable</title>
<meta name="keywords" content="web hosting, business, picture, web site, ecommerce, small business, online, server, internet web site, free web hosting, free web site, network, ftp, internet business, submit web site, web server, php hosting, file sharing, cheap web host, ecommerce web host, php, business web hosting, php web hosting, web hosting plan, low cost webhosting, web hosting solution, linux web hosting, web master, mysql web hosting, ecommerce web site, e commerce business, web hosting php mysql, cheap phpweb hosting, web hosting unlimited bandwidth, web hosting acconut, cheap business web hosting, cheapweb hosting solution, business web hosting service, cheap web hosting php mysql, cheap web hosting reseller, network solution, online business, mysql, free image hosting, reseller hosting, ftp server, ecommerce solution, freehosting, business solution, pop3, smtp, web master resource, data center, linux server, search engine, search engine optimization"> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<base href="http://www.50webs.com/" /> <!-- remove for live use -->
<link href="/css/styles.css" rel="stylesheet" type="text/css">
<link href="css/menu.css" rel="stylesheet" type="text/css">
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
* html {
overflow: hidden;
}
* html body {
overflow: auto;
}
/* to actually be fixed, this element's stacking
 context must be relative to the root element. */
.fixed {
position: fixed;
left: 0px;
top: 13px;
}
* html .fixed {
position: absolute;
left: 0px;
}
</style>
</head>
<body bgcolor="#FFFFFF" >
<a class="fixed" href='http://www.50webs.com/signup/'><img src="/graphical/signup.gif" width="112" height="88" border="0" style="width:113px!important;width:112px;"></a>
<table width="780" border="0" cellpadding="0" cellspacing="0" class="tableblueborderAll" align="center">
<tr>
<td ><a href="http://www.50webs.com/" ><img src="/graphical/50webs_01.gif" width="196" height="162" alt=""  border="0"></a></td>
<td ><img src="/graphical/50webs_02.gif" alt="" width="389" height="162" border="0" usemap="#Map2"></td>
<td ><img src="/graphical/50webs_03.gif" width="195" height="162" alt=""></td>
</tr>
<tr>
<td colspan="1">
<img src="/graphical/first_back.gif" width="196" height="25" alt=""></td>
<td colspan="5">
<img src="/graphical/second_back.gif" width="584" height="25" alt=""></td>
</tr>  <tr>	
<td align="right">
</td></tr>
</table>
<map name="Map2">
<area shape="poly" coords="381,160,380,140,375,137,311,137,308,144,309,159" href="http://www.50webs.com/members/">
<area shape="poly" coords="305,160,304,140,299,137,235,137,232,144,233,159" href="http://www.50webs.com/about_us.html">
<area shape="poly" coords="229,159,228,139,223,136,159,136,156,143,157,158" href="http://forum.50webs.com/">  
<area shape="poly" coords="154,159,153,139,148,136,84,136,81,143,82,158" href="http://www.50webs.com/signup/">
<area shape="poly" coords="78,159,77,139,72,136,8,136,5,143,6,158" href="http://www.50webs.com/">  
</map>
<!-- Start Middle Part --> 
<table width="782" border="0" cellpadding="0" cellspacing="0" align="center" class="tablegreenborder">
<tr>
<td colspan="2"><img src="/graphical/50webs_06.gif" width="196" height="64" alt=""></td>
<td width="1" rowspan="3" background="/graphical/dot.gif"></td>
<td width="388" rowspan="3" ><table width="371"  border="0" align="center" class="tableblueborderAll"  vspace="3">
<tr>
<td  align="center"><a href="http://www.50webs.com/signup/" ><img src="/graphical/mainbanner.gif" width="369" height="120" border="0" ></a></td>
</tr>
<tr>
<td   bgcolor="#6E97C5"  class="mainMenu"><p align="justify"><span class="mainMenu">Welcome::</span></p></td>
</tr>
<tr>
<td  class="normaltd"   >We're experts in web hosting, and have provided hosting solutions to millions of people. We have a solution for you, whether you're a small business, mid-sized business, clubs, organizations or an individual user that is trying to create your own online "personality". If you're looking for stable, reliable hosting services from a company who knows what they're doing - you've found us. We promise to work continually to provide you with high-quality alternatives to high-cost hosting. So get online with our hosting plan features everything you need and start sharing. Create your career using our services and solutions for ceative and modern begining.</td>
</tr>
<tr>
<td   bgcolor="#6E97C5"  class="mainMenu" >Forum::</td>
</tr>
<tr>
<td class="normaltd">The <a href="http://forum.50webs.com">50Webs forum </a> is a place were you can find answers and friends that enjoy working together and learning from each other's experiences in web hosting. There is also a growing group of people that just like to talk and exchange know-how. Need help in figuring out what this forum can do for you, and you haven't been able to find your answers in the FAQ yet? Just visit the support forums and ask specific questions about what you need to know! </td>
</tr>
</table></td>
<td width="1" rowspan="3" background="/graphical/dot.gif"></td>
<td width="193" rowspan="4" valign="top"><table width="100%"  border="0" class="normaltd">
<tr>
<td align="center"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="133" height="420" align="absmiddle">
<param name="movie" value="/graphical/bannerhelp.swf">
<param name="quality" value="high">
<embed src="/graphical/bannerhelp.swf" width="133" height="420" align="absmiddle" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object></td>
</tr>
 <tr>
<td align="center" >&nbsp;</td>
</tr>
<tr>
<td align="center"  >&nbsp;</td>
</tr>
<tr>
<td align="center"  class="tableblueborderAll"><a href="http://www.best-free-web-hosting.info">Free Web Hosting Directory</a></td>
</tr>
</table></td>
</tr>
<tr>
<td width="182"  rowspan="2"><div id="main-menu" >
<a href="faq.html?q=1">60 MB Free Hosting</a>
<a href="http://www.50webs.com/signup/">Free Account Sign Up</a>
<a href="faq.html?q=3">Free Sub-Domain Hosting</a>
<a href="faq.html?q=5">Free FTP Account</a>
<a href="faq.html?q=6">Free POP3 Email Account</a>			
<a href="faq.html?q=7">Free Web Page Hosting</a>
<a href="faq.html?q=9">Free Unlimited Bandwidth</a>
<a href="faq.html?q=10">Free Host of Your Pictures</a>
<a href="faq.html?q=12">Ultra Fast Network</a>
<a href="faq.html?q=15">Add Your Own Domains</a>
<a href="faq.html?q=11">Fast Secure Linux Servers</a>
<a href="faq.html?q=13">Host Unlimited Web Sites</a>
<a href="web-hosting-privacy.html#Personallity">Host online 'personallity'</a>
<a href="faq.html?q=8">Hosting Software</a>
<a href="faq.html?q=14">Short Sub-Domain</a>
<a href="http://www.50webs.com/signup/">Instant Activation</a></div><table width="100%"  border="0">
<tr>
<td align="center" class="normaltd"><a href="faq.html?q=2">$0.0 Cost</a></td>
</tr>
</table></td>
<td background="/graphical/backborder.gif" width="15" rowspan="2"></td>
</tr>
<tr>
</tr>
<tr>
<td colspan="2"><img src="/graphical/50webs_11.gif" alt="" width="196" height="81" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="1,2,187,24" href="http://www.50webs.com/signup/">
</map></td>
<td background="/graphical/dot.gif"></td>
<td >&nbsp;</td>
<td background="/graphical/dot.gif"></td>
</tr>
</table>
<map name="Map">
<area shape="rect" coords="1,2,187,24" href="http://www.50webs.com/signup/">
</map>
<!-- End Middle Part -->
<table width="782" border="0" align="center" cellpadding="0" cellspacing="0" class="tableblueborderAll">
<tr class=> 
<td height="16" colspan="2" align="left" bgcolor=#92B1D4> 
<span class="sbottom"><a href="http://www.50webs.com/terms.html">Terms and Conditions</a> | <a href="http://www.50webs.com/web-hosting-privacy.html">Privacy 
Policy</a> |<a href="http://www.50webs.com/LinkToUs.html"> LinkToUs</a> | <a href="http://www.50webs.com/resources.html">Resources</a> | <a href="http://www.50webs.com/faq.html">FAQ</a> | <a href="http://tutorials.50webs.com">Video Tutorials</a> </span></td>
<td height="16" align="right" bgcolor=#92B1D4  class="sbottom" >Copyright 
(C) 2004-2005 50Webs.com</td>
</tr>
<tr>
<script type="text/javascript" language="javascript" src="http://counter.fateback.com/javapro.php?user=10008"></script><noscript>
<a href="http://counter.fateback.com" target="_blank">
<img src="http://counter.fateback.com/webstatpro.php?user=10008" alt="counter" border="0"></a></noscript>
</tr>
</table>
<script type="text/javascript">
if (window.opera)
document.images[0].style.width='111px'
</script>
</body>
</html>

**jscheuer1** · 12-04-2005, 06:13 AM

I just noticed that adding the DOCTYPE messes up the styling from menu.css, which has some invalid entries for:

Code:

#main-menu a {
	font-size: 10px;
	text-decoration: none;
	font-family: Tahoma;
	font-weight: bold;
	letter-spacing: 0px;
	color: #666666;
	display: block;
	margin: 0 5px 0 3px;
	padding: 4px 0 4px 4px;
	background-image: url(../images/yes.gif);
	background-repeat: no-repeat;
	background-position: right;
}

Add in the red parts and it will work with the DOCTYPE which is necessary for the fixed effect to work.

Thread: stop Images from scrolling...?

Thread Tools

Search Thread

stop Images from scrolling...?

Bookmarks

Bookmarks

Posting Permissions