View Full Version : Moving a div within overflow div when scrolling

12-20-2010, 03:11 PM
I have lost my touch with JavaScript recently and resorted to using pre-made code.

I am using this scrolling code: Absolute Floating Menus (http://www.jtricks.com/javascript/navigation/floating.html)

I have the following coded:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#container {
font-family: "Lucida Console", Monaco, monospace;
height: 200px;
width: 450px;
border: medium dotted #000;
overflow: auto;
position: absolute;
#cart {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
float: right;
height: auto;
width: 100px;
list-style-type: square;
position: relative;
list-style-position: inside;
display: inline;
border: thin solid #00F;
right: 5px;
<script type="text/javascript" language="javascript" src="js/floating-1.1.js"></script>

<div id="container">
<div id="shop">
<div id="cart">
<li>1 </li>
<script type="text/javascript" language="JavaScript">
//targetBottom: 0,

// prohibits movement on x-axis
prohibitXMovement: true,

// Remove this if you don't want snap effect
snap: true


When I scroll through the div the menu doesn't move. I am stuck in trying to get this to work.

Does anyone have any examples that will show how to move the menu down when scrolling in a div. Everything that I find will ONLY scroll the menu if the Browser is able to scroll down, then the div moves.

Thanks in advance.

12-20-2010, 04:18 PM
I'm just taking a wild stab at it here, but there are a couple of things that I noticed - one is that the documentation says:

Make sure your page has DOCTYPE set. It doesn't matter if it is HTML 4.01 or XHTML, but the script will fail to work if Internet Explorer is in quirks mode.

and I don't see a doctype in your code

the other is that you have the line:
prohibitXMovement: true

does setting that to false make a difference? (I guess I should really know which one the x axis is before asking that question :D)

12-20-2010, 05:46 PM
As the above poster said, is this all your code or do you not have a valid doctype and clisong html tag? Do you have a link to your live site?

12-21-2010, 03:12 PM
Thanks for the replies.

here is the live page for what I posted: demo (http://www.nationalophthalmics.com/scrollme.html)

Here is the actual production page (http://www.nationalophthalmics.com/customLane.php) that I am trying to get the cart to scroll or even STAY when scrolling the DIV. The problem is the positioning is all relative to the browser page, not the DIV. I am sure I am missing something obvious and simple.

12-22-2010, 03:13 PM
I contacted the developer of this script and opted for their $7 support option. They were VERY responsive and have fixed the issues.

If I can post the solution here I will, but I have a feeling that they will post it on their site.

Thank you to those that replied to help get more info.