Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Moving a div within overflow div when scrolling

    I have lost my touch with JavaScript recently and resorted to using pre-made code.

    I am using this scrolling code: Absolute Floating Menus

    I have the following coded:

    Code:
    <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>&nbsp;</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.
    Last edited by gwolanin; 12-20-2010 at 03:12 PM. Reason: wrong title

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    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 )

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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?

  • #4
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the replies.

    here is the live page for what I posted: demo

    Here is the actual production page 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.

  • #5
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •