Current location: Hot Scripts Forums » General Web Coding » JavaScript » Make a div follow page scroll - the continued


Make a div follow page scroll - the continued

Reply
  #1 (permalink)  
Old 07-23-09, 06:18 PM
k-knudsen's Avatar
k-knudsen k-knudsen is offline
Newbie Coder
 
Join Date: Jan 2004
Location: Denmark
Posts: 13
Thanks: 0
Thanked 0 Times in 0 Posts
Make a div follow page scroll - the continued

Hi !

this is the part 2 of the "make a div follow page scroll".

the original thread: http://www.hotscripts.com/forums/jav...croll-how.html

the problem: no ie8 support anybody knows how to fix this ?

Test server: http://limitededition.dk/test.html

here is the souce code. it's copy & paste ready feel free to use the code on your own projects

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/main.dwt" codeOutsideHTMLIsLocked="false" -->

<html>
	<head>
		<style type="text/css">
		#fixme { 
			margin-top: 30px;
			width: 200px;
			background-color: blue;  
			top:200px;
			margin-left: 400px
		}
		#wrap {width: 600px; margin: 0 auto; background-color: #333;}
		div > div#fixme { position: fixed; }
		
		pre.fixit { 
			overflow:auto;
			border-left:1px dashed #000;
			border-right:1px dashed #000;
			padding-left:2px; }
			
		#header {
			background-color: gray;
			top:200px;
			left:20px;
			height:200px;
		}
		</style>
		
		<!--[if gte IE 5.5]><![if lt IE 7]>
			<style type="text/css">
			div#fixme {
				right: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
				top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
			}
			
		</style>
		<![endif]><![endif]-->
	<script type="text/javascript">
		function reposition(){
			var el = document.getElementById('fixme');
			
			var ScrollTop = document.body.scrollTop;
			if (ScrollTop == 0)
			{
				if (window.pageYOffset)
					ScrollTop = window.pageYOffset;
				else
					ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
			}
			if(ScrollTop < 200)
				el.style.top = 200 - ScrollTop + "px";
			else
				el.style.top = "0px";
		}
	</script>
	
	
</head>
	<body onscroll="reposition()">
	<div id="wrap">
<div id="header">
	header
</div>

<div id="content">
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>


	<div id="fixme">
		http://www.hotscripts.com/forums/javascript/52088-make-element-follow-page-scroll-how.html
	</div>

</div>
</div>

</body>
</html>
/Kenneth
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #2 (permalink)  
Old 07-24-09, 04:37 AM
DaiLaughing DaiLaughing is offline
Newbie Coder
 
Join Date: Jul 2009
Posts: 37
Thanks: 0
Thanked 0 Times in 0 Posts
I didn't see the original thread and I don't quite understand it. Is it OK if the menu stays in exactly the same position on the screen regardless of the other content? This would mean that other content would appear to scroll under the menu and be obscured but it does work VERY easily and on IE8. Just style the DIV the menu is in with:

Code:
position:fixed;
left:50px;
top:50px;
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #3 (permalink)  
Old 07-24-09, 05:00 AM
k-knudsen's Avatar
k-knudsen k-knudsen is offline
Newbie Coder
 
Join Date: Jan 2004
Location: Denmark
Posts: 13
Thanks: 0
Thanked 0 Times in 0 Posts
Hi DaiLaughing

Thanks for the quick reply!

the function of this scroll is:

on page load: the "menu" will be 200px from the page top.

when user scrolls down it will not move until there is a 30px distance - and then move with the page


if you have ietester, then try to test it
Ie7 get's it! but ie8 does not work :/

Thanks again for the reply
Kenneth
__________________
Personal Homepage: K-Knudsen
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #4 (permalink)  
Old 07-24-09, 05:04 AM
DaiLaughing DaiLaughing is offline
Newbie Coder
 
Join Date: Jul 2009
Posts: 37
Thanks: 0
Thanked 0 Times in 0 Posts
I can see why it got complicated then. The fixed positioning solution is so easy and fast is there any chance you might be happy with how that works? Then there is no javascript to slow things down or add compatibility issues.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #5 (permalink)  
Old 07-24-09, 05:09 AM
k-knudsen's Avatar
k-knudsen k-knudsen is offline
Newbie Coder
 
Join Date: Jan 2004
Location: Denmark
Posts: 13
Thanks: 0
Thanked 0 Times in 0 Posts
your right! i would be easy, the only problem is this:

screen size and page size. my new site has from pagetop to actual content 620px. if the menu is 350px long it would be 970px - and the menu would be very far down. this means that users with 1024*768 can't see the menu correctly :/
__________________
Personal Homepage: K-Knudsen
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #6 (permalink)  
Old 07-24-09, 05:37 AM
DaiLaughing DaiLaughing is offline
Newbie Coder
 
Join Date: Jul 2009
Posts: 37
Thanks: 0
Thanked 0 Times in 0 Posts
I agree that is the problem with almost any fixed layout. There are still people using 800x600 as well which would be even worse.

I'm guessing you are set on the layout but another suggestion just in case. Could the content scroll rather than the page? Then the header and the menu would always be there.

Hopefully someone else will give you a way to do what you want but it's beyond my very limited Javascript abilities.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #7 (permalink)  
Old 07-24-09, 06:05 AM
k-knudsen's Avatar
k-knudsen k-knudsen is offline
Newbie Coder
 
Join Date: Jan 2004
Location: Denmark
Posts: 13
Thanks: 0
Thanked 0 Times in 0 Posts
Thanks for the advice

i'm all set on a specific layout, the only problem now is ie8 support :/

The content scroll sounds interesting! but i'm holding on to my layout

what i did find on the original post was a support for ie6 and 5.5 -- credit goes to Yeroon:

Code:
<!--[if gte IE 5.5]><![if lt IE 7]>
			<style type="text/css">
			div#fixme {
				right: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
				top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
			}
			
		</style>
		<![endif]><![endif]-->
__________________
Personal Homepage: K-Knudsen
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #8 (permalink)  
Old 07-25-09, 04:38 AM
k-knudsen's Avatar
k-knudsen k-knudsen is offline
Newbie Coder
 
Join Date: Jan 2004
Location: Denmark
Posts: 13
Thanks: 0
Thanked 0 Times in 0 Posts
use this line for ie8 hack. it emulates ie7
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
__________________
Personal Homepage: K-Knudsen
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiShare on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
Reply

Bookmarks


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
how do i make php open another web page? wonderland PHP 6 09-23-08 07:55 PM
Classified Ads skipper23 Perl 3 11-22-05 03:22 AM
Classified Ads skipper23 Perl 2 12-30-03 04:43 AM
need to make a confirmation page codeguru21 PHP 1 10-02-03 05:18 PM
How to make the index.html page for each categories ? vuzzan PHP 2 07-01-03 06:35 AM


All times are GMT -5. The time now is 01:27 PM.
vBulletin® Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.