gwolanin
12-20-2010, 02: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:
<head>
<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;
}
-->
</style>
<script type="text/javascript" language="javascript" src="js/floating-1.1.js"></script>
</head>
<body>
<p> </p>
<div id="container">
<div id="shop">
<div id="cart">
<ul>
<li>1 </li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<p>test</p>
<p>test2</p>
<p>test</p>
<p>test2</p>
<p>test</p>
<p>test2</p>
<p>test</p>
<p>test2</p>
<p>test</p>
<p>test2</p>
<p>test</p>
<p>test2</p>
</div>
</div>
<script type="text/javascript" language="JavaScript">
floatingMenu.add('cart',
{
targetTop:10,
//targetBottom: 0,
// prohibits movement on x-axis
prohibitXMovement: true,
// Remove this if you don't want snap effect
snap: true
});
</script>
</body>
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.
I am using this scrolling code: Absolute Floating Menus (http://www.jtricks.com/javascript/navigation/floating.html)
I have the following coded:
<head>
<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;
}
-->
</style>
<script type="text/javascript" language="javascript" src="js/floating-1.1.js"></script>
</head>
<body>
<p> </p>
<div id="container">
<div id="shop">
<div id="cart">
<ul>
<li>1 </li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<p>test</p>
<p>test2</p>
<p>test</p>
<p>test2</p>
<p>test</p>
<p>test2</p>
<p>test</p>
<p>test2</p>
<p>test</p>
<p>test2</p>
<p>test</p>
<p>test2</p>
</div>
</div>
<script type="text/javascript" language="JavaScript">
floatingMenu.add('cart',
{
targetTop:10,
//targetBottom: 0,
// prohibits movement on x-axis
prohibitXMovement: true,
// Remove this if you don't want snap effect
snap: true
});
</script>
</body>
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.