[jQuery] Re: How do I stop my div from sliding?
Sorry about that, I've been working on it. Try it again and lower
your resolution to at least 1024x768 and scroll all the way down.
You'll see the overflow that I'm talking about. If I use CSS, I won't
get the smooth animation or?
On Sep 29, 12:12 pm, Jon Banner wrote:
> as soon as i scroll your demo, the div disappears off the top of the page in
> firefox and IE7
>
> From the behaviour you describe i think this might be useful to you
>
> http://www.cssplay.co.uk/layouts/fixed.html
>
> best.
> Jon
>
> 2009/9/29 jpearson311
>
>
>
>
>
> > Hi all. JQuery noob here. I'm building a site right now that has a
> > left column navigation and the navigation is nested inside a div,
> > which is nested inside a table cell (i.e., ). I'm using JQuery to
> > make it so when the user scrolls down the page, the div slides down
> > with smoothly and always stays at the top of the page. I have this
> > working just fine, but when I change resolutions (i.e., 1024x768), the
> > div scrolls over the bottom of the page, which is what I don't want.
> > How can I calculate in order for the div to know when it hast reached
> > the bottom of the table cell? I tried using outerHeight to calculate
> > the height of the table cell and then subtracting the height of the
> > div from it, but I'm clearly doing it wrong because it's still not
> > working. You can view the page I'm referring to at
> >www.ts24.com/watersedge/overview.cfm.
> > The JS code I'm using is below. If anyone has any pointers, I'd
> > really appreciate it. Thanks!
>
> > Jesse
>
> > var name = "#scroller";
> > var menu_top_limit = 0;
> > var menu_bottom_limit = $('#holder > #scroller').outerHeight() - 560;
> > var menu_top_margin = -15;
> > var menu_shift_duration = 500;
> > var menuYloc = null;
> > ///
> > $(window).scroll(function()
> > {
> > // Calculate the top offset, adding a limit
> > offset = menuYloc + $(document).scrollTop() + menu_top_margin;
>
> > // Limit the offset to 0 pixels...
> > // This keeps the menu within it's containing TD boundaries
> > if(offset < menu_top_limit){
> > offset = menu_top_limit;
>
> > // Give it the PX for pixels:
> > offset += "px";
> > }
>
> > /*else if(offset > menu_bottom_limit){
> > offset = menu_bottom_limit;
>
> > offset += "px";
> > }*/
>
> > // Animate:
> > $(name).animate({top:offset},
> > {duration:menu_shift_duration,queue:false});
> > });- Hide quoted text -
>
> - Show quoted text -
[jQuery] Re: How do I stop my div from sliding?
I agree with Jon, you would be better off using css fixed style for
this rather than javascript.
On Sep 29, 5:12 pm, Jon Banner wrote:
> as soon as i scroll your demo, the div disappears off the top of the page in
> firefox and IE7
>
> From the behaviour you describe i think this might be useful to you
>
> http://www.cssplay.co.uk/layouts/fixed.html
>
> best.
> Jon
>
> 2009/9/29 jpearson311
>
>
>
> > Hi all. JQuery noob here. I'm building a site right now that has a
> > left column navigation and the navigation is nested inside a div,
> > which is nested inside a table cell (i.e., ). I'm using JQuery to
> > make it so when the user scrolls down the page, the div slides down
> > with smoothly and always stays at the top of the page. I have this
> > working just fine, but when I change resolutions (i.e., 1024x768), the
> > div scrolls over the bottom of the page, which is what I don't want.
> > How can I calculate in order for the div to know when it hast reached
> > the bottom of the table cell? I tried using outerHeight to calculate
> > the height of the table cell and then subtracting the height of the
> > div from it, but I'm clearly doing it wrong because it's still not
> > working. You can view the page I'm referring to at
> >www.ts24.com/watersedge/overview.cfm.
> > The JS code I'm using is below. If anyone has any pointers, I'd
> > really appreciate it. Thanks!
>
> > Jesse
>
> > var name = "#scroller";
> > var menu_top_limit = 0;
> > var menu_bottom_limit = $('#holder > #scroller').outerHeight() - 560;
> > var menu_top_margin = -15;
> > var menu_shift_duration = 500;
> > var menuYloc = null;
> > ///
> > $(window).scroll(function()
> > {
> > // Calculate the top offset, adding a limit
> > offset = menuYloc + $(document).scrollTop() + menu_top_margin;
>
> > // Limit the offset to 0 pixels...
> > // This keeps the menu within it's containing TD boundaries
> > if(offset < menu_top_limit){
> > offset = menu_top_limit;
>
> > // Give it the PX for pixels:
> > offset += "px";
> > }
>
> > /*else if(offset > menu_bottom_limit){
> > offset = menu_bottom_limit;
>
> > offset += "px";
> > }*/
>
> > // Animate:
> > $(name).animate({top:offset},
> > {duration:menu_shift_duration,queue:false});
> > });
[jQuery] Re: How do I stop my div from sliding?
as soon as i scroll your demo, the div disappears off the top of the page in
firefox and IE7
>From the behaviour you describe i think this might be useful to you
http://www.cssplay.co.uk/layouts/fixed.html
best.
Jon
2009/9/29 jpearson311
>
> Hi all. JQuery noob here. I'm building a site right now that has a
> left column navigation and the navigation is nested inside a div,
> which is nested inside a table cell (i.e., ). I'm using JQuery to
> make it so when the user scrolls down the page, the div slides down
> with smoothly and always stays at the top of the page. I have this
> working just fine, but when I change resolutions (i.e., 1024x768), the
> div scrolls over the bottom of the page, which is what I don't want.
> How can I calculate in order for the div to know when it hast reached
> the bottom of the table cell? I tried using outerHeight to calculate
> the height of the table cell and then subtracting the height of the
> div from it, but I'm clearly doing it wrong because it's still not
> working. You can view the page I'm referring to at
> www.ts24.com/watersedge/overview.cfm.
> The JS code I'm using is below. If anyone has any pointers, I'd
> really appreciate it. Thanks!
>
> Jesse
>
> var name = "#scroller";
> var menu_top_limit = 0;
> var menu_bottom_limit = $('#holder > #scroller').outerHeight() - 560;
> var menu_top_margin = -15;
> var menu_shift_duration = 500;
> var menuYloc = null;
> ///
> $(window).scroll(function()
> {
>// Calculate the top offset, adding a limit
>offset = menuYloc + $(document).scrollTop() + menu_top_margin;
>
>// Limit the offset to 0 pixels...
>// This keeps the menu within it's containing TD boundaries
>if(offset < menu_top_limit){
>offset = menu_top_limit;
>
>// Give it the PX for pixels:
>offset += "px";
>}
>
>/*else if(offset > menu_bottom_limit){
>offset = menu_bottom_limit;
>
>offset += "px";
>}*/
>
>// Animate:
>$(name).animate({top:offset},
> {duration:menu_shift_duration,queue:false});
> });
>
