9 Replies Latest reply: Oct 28, 2013 5:29 AM by kennethkawamoto2 RSS

    Javascript Stop Scrolling

    gabessdsp Community Member

      So I need my adboxes to not scroll above a certain height, and to not scroll below a certain height.

       

      It seems to work perfectly in the jsfiddle

       

      http://jsfiddle.net/FDv2J/4/

       

      but then when I apply it to the site....it fails me

       

      http://testing123.crimsonlakemc.com/

        • 1. Re: Javascript Stop Scrolling
          gabessdsp Community Member

          Ideally I would also like the ads to float at

           

          top: 50%;

          margin-top: -300;

           

          if anybody could help me do that. When I tried adding that it just broke it a lot so I figured I could ask since it's broken now for some reason anyway.

          • 2. Re: Javascript Stop Scrolling
            gabessdsp Community Member

            So is there a better place to post javascript problems? Because this is the first time I've never seen anybody respond to one of my posts for help.

            • 3. Re: Javascript Stop Scrolling
              kennethkawamoto2 Community Member

              Ideally I would also like the ads to float at

               

              top: 50%;

              margin-top: -300;

              This doesn't make sense because unless the window height is more than 1000px your banner goes behind the header area.

               

              The main reason why your script is not working is this:

              var top = $el.parent().position().top;

              Your banner's parent is <body> so the value of top is 0. Try setting it to 200 because that is the height of your header.

               

              --

              Kenneth Kawamoto

              http://www.materiaprima.co.uk/

              • 4. Re: Javascript Stop Scrolling
                gabessdsp Community Member

                Who am I to rule out people, especially gamers who will be the biggest user of this site who have screens that are 1080px heigh, or 1200px high.

                 

                 

                I myself run a windows size larger than 1000px. And the point of this script is to stop it from going behind the header, that's why I need help.

                 

                 

                I tried your change but it didn't do anything. Could you please modify the jsfiddle and post the new one? I provided that for a reason. Apparently I am not understanding your code or where to put it even though I thought I did.

                 

                The goal I am trying to achieve is so that the adbox cannot go behind the header, or the footer. And if the user is scrolling and the page is long enough then the ad position will be positioned to the center of the screen which would be top: 50%; and margin-top:-300px; in my case.

                • 5. Re: Javascript Stop Scrolling
                  kennethkawamoto2 Community Member

                  The goal I am trying to achieve is so that the adbox cannot go behind the header, or the footer. And if the user is scrolling and the page is long enough then the ad position will be positioned to the center of the screen which would be top: 50%; and margin-top:-300px; in my case.

                  If that's your goal then why are you using a script that scrolls the banner ad? You want it to be stationery.

                   

                  --

                  Kenneth Kawamoto

                  http://www.materiaprima.co.uk/

                  • 6. Re: Javascript Stop Scrolling
                    gabessdsp Community Member

                    That's what I had it set to, but because my header is so large on same screens it will still slide under the header just a little bit. But I am having a large footer as well, so it will go partially behind the footer. Which is why I need it to stop when it hits the footer or header. I suppose a better way to do this is to detect the div and such and if collision or something is true then it stops moving but I have no idea how to do that. Still new to javascript

                    • 7. Re: Javascript Stop Scrolling
                      kennethkawamoto2 Community Member

                      That's what I had it set to, but because my header is so large on same screens it will still slide under the header just a little bit.

                      Logically, if you have a window taller than (200 + 300)*2 = 1000px (you said you and your audience all have that) your banner will never go under the header. (By "window" I mean the viewable area, not the monitor size.)

                       

                      --

                      Kenneth Kawamoto

                      http://www.materiaprima.co.uk/

                      • 8. Re: Javascript Stop Scrolling
                        gabessdsp Community Member

                        My entire audience isn't guaranteed to use that large of monitors, some of them might use smaller monitor sizes. Which is why I need this code to do what I said.

                        • 9. Re: Javascript Stop Scrolling
                          kennethkawamoto2 Community Member

                          My entire audience isn't guaranteed to use that large of monitors

                          That's my point. You don't know the user environment so that you'll need to prepare for all possible situations.

                           

                          • Your banner is to be placed in the middle of the window.
                          • If your content area is less than 600px tall there's no space for your banner.
                          • If the window is less than 1000px tall you cannot place the banner in the middle of the window.
                          • If the window is shorter than 800px the banner will not be fully visible.
                          • If your body is shorter than the window you cannot place the banner in the middle of the window.
                          • The banner cannot touch the footer.

                           

                          Not sure how far you want to go but I'd probably start with the CSS media query to set the initial positioning.

                           

                          --

                          Kenneth Kawamoto

                          http://www.materiaprima.co.uk/