Start Free Trial

asked on

CSS scroll range?

Het guys,

I have this little webshop with a scrolling cart. You can vieuw it here: http://www.wapenvanrijsenburg.nl/nick/wijnen.php

Now the problem is when you scroll to the bottom, it overlaps the footer. Is there a way to set a range or something to make it stop? Same goes for the header, if you scroll to the top again it overlaps the header.

So i was wondering if there is something like a range to set, where it stops if it comes to that point.

Thanks :)

Hi,

Probably you should embed it in the page container, where the container should have CSS statement position:relative;

Can you post the CSS code of the scrolling box?

ASKER

Sure!

// Scrolling shopping cart
      $().ready(function() {
            var $scrollingDiv = $("#cart");

            $(window).scroll(function(){
                  $scrollingDiv
                        .css({'position':'absolute','z-index':'200', 'right':'0'})
                        .stop()
                        .animate({"marginTop": ($(window).scrollTop() - 300) + "px"}, "slow" );
            });
      });

I have the CSS in my jQuery function.

Hi priktop, I will explain to you the logic and leave it upto you to put the appropriate tags and ccs to accomplish that. Reason being I don't use jQueries.

What you need to make sure of, is that you split your page into a header, body and footer (name them whatever you want).
Divide the body into two, the left part (which is your content) and the right part. In the right part, set its width to be slightly more than your moving cart and insert your cart in there.
Thus your cart will b guaranteed to stay within that region and you won't have to worry about it, if you change the header or footer height (or even if you take them out altogether) in the future (or on some other page).

ASKER

Thanks for you answer Gene.

Although i already have that setup, and it still overflows.

But thanks again for taking the time to answer!

There are other ways to deal with this, but this is extremely easy and more importantly requires zero maintenance.

If you have already placed it in side such a column, then what you need to check is that as it changes position, it never exceeds the height of 0, placed within the DIV or whatever container you chose as a relative position.

Priktop,

When activate JQuery Scroll, your #cart div is not related to the position:relative of #main-margin div.

Try embeding the jQuery script insite #main-margin div.

ASKER

Hmmm, i've put the script above the div #cart, but that still won't work. Or am I understanding it wrong?
What position do I have to give the #cart div?

I now have this CSS:

#cart {
position:relative;
width:35%;
float:right;
}

And the jQuery script:

      $().ready(function() {
            var $scrollingDiv = $("#cart");

            $(window).scroll(function(){
                  $scrollingDiv
                        .css({'position':'absolute','z-index':'200', 'right':'0'})
                        .stop()
                        .animate({"marginTop": ($(window).scrollTop() - 200) + "px"}, "slow" );
            });
      });

please put a plus instead of minus in the jQuery statement
$(windows).scrollTop() + 200....

#cart {
 position:relative;
 width:35%;
 float:right;
}

And the jQuery script:

      $().ready(function() {
            var $scrollingDiv = $("#cart");
 
            $(window).scroll(function(){                  
                  $scrollingDiv
                          .css({'position':'absolute','z-index':'200', 'right':'0'})
                        .stop()
                        .animate({"marginTop": ($(window).scrollTop() + 200) + "px"}, "slow" );                  
            });
      });

Open in new window

$scrollingDiv
.css({'position':'absolute','z-index':'200', 'right':'0'})

Why are you using absolute positioning there?

ASKER

Well the reaseon i made a minus was because now i've turned it into + 200 and as you can see it moves out of the screen.

ASKER

Because if i dont use absolute, the content below the cart will move down aswell.

I removed the absolute so you can see.

<div id="header">
</div>
<div id="pagecontent">
<div id="leftside">All my content goes here</div>
<div id="floatingmenucontainer">CART GOES HERE and nothing else. So it won't push anything else when its position is relative and it goes down</div>
</div>
<div id=footer">
</div>

ASKER

Thanks for your reply.
I have that structure, but i don't know how to style that floatingmenucontainer class.
And how to style the #cart itself.

So i should have a #cartcontainer and #cart right? Where i can control #cart with the jQuery.

priktop, can you copyyour own source, strip it down from all the actual content and pastein here the HTML for a sec please?

Basically strip it down to just the html "framework" you have, and also paste underneath it the CSS.
You have a minor mistake somewhere screwing everything up for you.

ASKER

Yeah i had a loop unclosed, it's working again now.

Let me put in the HTML here:

<body>
      <div id="container">
      <div id="header">

<ul id="subnav">
      //header nav
</ul>

<div id="slider">
//slider
</div>

</div>

<ul id="nav">
// main nav
</ul>

<div id="main">
      <div id="main-margin">

<div id="cart">
       //cart
</div>

<div class="products">
/// every wine category has this class
</div>
</div>
</div>
<div id="footer">
//footer
</div>
</body>

ASKER

Here's the CSS:

body {
      background: #ededed;
      overflow-y: scroll;
}

#container {
      width: 1020px;
      margin: 0 auto;
}

#header {
      height: 338px;
      background: url(../img/header.jpg) no-repeat;
}

#main {
      position: relative;
      top: 22px;
      background: url(../img/contentTop.jpg) top left no-repeat;
      padding-bottom: 35px;
      min-height: 300px;

}

#main-margin {
      position: relative;
      top: -15px;
      left:70px;
      width: 880px;
}

#footer {
      position: relative;
      top: 25px;
      width: 100%;
      padding: 50px 0px 35px 0px;
      border-top: 1px dashed #333;
      background: url(../img/footerbg.jpg) repeat-x;
}

a {
outline: 0;
text-decoration:none;
color: #b0271c;
}

ul, li {
margin: 0;
padding: 0;
}

#nav {
position: relative;
float: left;
      width:100%;
}

/* Shop */

.products { width:64%; float:left; }
#cart { position:relative; width:35%; float:right; }

fieldset { border:0; }

.clear { clear:both; }

Change your framework to:

<body>
<div id="container">
<div id="header">

<ul id="subnav">
//header nav
</ul>

<div id="slider">
//slider
</div>

</div>

<ul id="nav">
// main nav
</ul>

<div id="main">

<div id="main-margin">
<div class="products">
/// every wine category has this class
</div>

<div id="cartContainer">
<div id="cart">
//cart
</div>

</div>
</div>
<div id="footer">
//footer
</div>
</body>

And set the position of the cardContainer div to occupy the right side of the main-margin div.

Then do all your moving of the cart div and thus the cart will be reduced to moving only inside the cartContainer div, as long as you set its position to relative and then just handle its movement in relation to the cartContainer's height.

ASKER

And set the position of the cardContainer div to occupy the right side of the main-margin div.

I'm sorry, i have no idea how to do this :(

#cartcontainer { position:relative; width:35%; float:right }

is what i have now...

float:right should work, as long as your products are floating to the left
What i posted mate is not exactly what you had, in your html. I made a small change and put the cart inside its own dedicated div, the cartContainer and let the cartContainer take the cart's position in the main-margin div.

So, your cart will no longer need to float to the right only the cartcontainer. The cart itself will simply move up and down WITHIN the cartContainer.

ASKER

I know you did :) that's why i don't understand why it doesnt work. i have this:

.products { width:64%; float:left; }

#cartcontainer { position:relative; width:35%; height:inherit; float:right }
#cart { position:relative; width:35%; float:right; }

Oh wait, I see that it doesn't move over the header anymore, so we're half way :)

ASKER

i removed the float:right in the #cart, but it still won't work :(

Is the url above in your original post, now updated with these changes?

ASKER

It is now. But the container moves my cart a bit.
Anyway, im at the point of giving up. I have tried to fix this all day.....

#cartcontainer { position:relative; width:35%; float:right; }
#cart { position:relative; width:35%; }
.products { width:65%; float:left; }

the css at this point.

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

I'll be logging off, so i won't be able to reply till tomorrow, but try to achieve what I have just described.

ASKER

Thank you very much for the patience :) I don't know how exactly I did it but it suddenly works thanks to your tips.

Thanks again!!

Glad I could be of help priktop.
My general tip I have for you in regards to using CSS, is whenever things are not exactly working, strip it down to its html framework and examine the relevant css parts to help you spot where the error is. ;)
(the same process I put you through here to track down where the problem was)
If you got any future css questions feel free to 'flag' me, i think there's a feature you can call on specific experts, not sure.

ASKER

Alright, i'll keep that in mind :) Thanks again!