Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
| Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old September 5th, 2005, 08:57 AM
Friend of Wrox
Points: 8,019, Level: 38
Points: 8,019, Level: 38 Points: 8,019, Level: 38 Points: 8,019, Level: 38
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2005
Location: Mauchline, East Ayrshire, Scotland
Posts: 1,525
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to crmpicco Send a message via AIM to crmpicco Send a message via MSN to crmpicco Send a message via Yahoo to crmpicco
Default <div> follows you as you scroll - absolute pos

Code:
<div id="booking_details" class="demo" style="visibility:hidden">

....

</div>
I have this div that is shown when a link is clicked, is there a way to have the <div> 'follow'
you as you scroll. like about.com??

It is absolutely positioned at the foot of the page.

www.crmpicco.co.uk
www.crmpicco.co.uk.tt
www.milklemonadechocolate.uk.tt
www.griswolds.uk.tt
www.piccosmini.co.uk.tt
www.morton.uk.tt
__________________
_______________________
Ayrshire Minis - a Mini E-Community
http://www.ayrshireminis.com
http://www.crmpicco.co.uk
 
Old September 5th, 2005, 09:00 AM
Friend of Wrox
Points: 8,019, Level: 38
Points: 8,019, Level: 38 Points: 8,019, Level: 38 Points: 8,019, Level: 38
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2005
Location: Mauchline, East Ayrshire, Scotland
Posts: 1,525
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to crmpicco Send a message via AIM to crmpicco Send a message via MSN to crmpicco Send a message via Yahoo to crmpicco
Default

e.g. http://php.about.com/

www.crmpicco.co.uk
www.crmpicco.co.uk.tt
www.milklemonadechocolate.uk.tt
www.griswolds.uk.tt
www.piccosmini.co.uk.tt
www.morton.uk.tt
 
Old September 5th, 2005, 02:10 PM
Friend of Wrox
Points: 894, Level: 11
Points: 894, Level: 11 Points: 894, Level: 11 Points: 894, Level: 11
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Sep 2005
Location: London, , United Kingdom.
Posts: 166
Thanks: 2
Thanked 33 Times in 33 Posts
Default

Hi Craig,

i found this great one a couple of years back:
http://www.webreference.com/dhtml/column37/index.html
but it doesnt work in everything, e.g. firefox.

To work in other browsers you need to set an absolute position and handle onscroll events, something like this:

<script>
function movediv()
{
  booking_details.style.top = document.body.scrollTop;
}
</script>
<body onscroll="movediv()">
<div id="booking_details" class="demo" style="visibility:hidden; position:absolute;top:0px;left:0px;">....</div>
</body>

Hope this helps
Philip Cole
 
Old September 14th, 2005, 06:58 AM
Friend of Wrox
Points: 8,019, Level: 38
Points: 8,019, Level: 38 Points: 8,019, Level: 38 Points: 8,019, Level: 38
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2005
Location: Mauchline, East Ayrshire, Scotland
Posts: 1,525
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to crmpicco Send a message via AIM to crmpicco Send a message via MSN to crmpicco Send a message via Yahoo to crmpicco
Default

thanks Philip, that code is great but:

Code:
function movediv()
{
    booking_details.style.top = document.body.scrollTop;
}

---------------

<style>
.demo {color:#000000; border-color:#666666; background-color:#FFCC00; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold;
layer-background-color:#cccccc; position:absolute; left:12.5%; bottom:0px; width:100%; height:100px; visibility:hidden; z-index:5; border-color:#FFFFFF; border:inherit;}
</style>

---------------

<body onScroll="movediv();">

<div id="booking_details" class="demo" style="visibility:hidden">
....
.... code .....
....
</div>

</body>
When i scroll the DIV sticks to the TOP of the browser, is there any way to
make it sticks to the BOTTOM of the browser as you scroll?

www.crmpicco.co.uk
www.crmpicco.co.uk.tt
www.milklemonadechocolate.uk.tt
www.griswolds.uk.tt
www.piccosmini.co.uk.tt
www.morton.uk.tt




Similar Threads
Thread Thread Starter Forum Replies Last Post
<div> with a absolute position crmpicco Javascript How-To 0 August 30th, 2005 05:42 AM
Javascript with <div> aware Javascript How-To 3 August 25th, 2005 05:57 AM
<style> tags in a <body> vs. <div> bcat BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 1 March 27th, 2005 08:50 AM
sizeable <div> johnjohn Javascript How-To 1 December 8th, 2004 08:28 PM
<A><DIV><TABLE></DIV></A> anshul HTML Code Clinic 2 July 17th, 2004 02:17 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.