jQuery Plugins » Scroll

Move vertically (scroll up) one div within another one

Admin — Wed, 19 Oct 2011 16:14:18 +0000

Post link: Move vertically (scroll up) one div within another one

How to move the content of the inner div up, without click any buttons, I mean, like an animation. And is there any way to trigger an event when the animation is done?

newest questions tagged jquery – Stack Overflow

cross browser keypress -scroll to top

Admin — Sun, 16 Oct 2011 18:15:42 +0000

Post link: cross browser keypress -scroll to top

I found this code a while back for use with an html element

$  ("a[href='#top']").click(function() {
  $  ("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

But how do I trigger this when the ‘t’ key is pressed? For all major browsers?

newest questions tagged jquery – Stack Overflow

Smooth scroll on scroll

Admin — Fri, 14 Oct 2011 04:13:05 +0000

Post link: Smooth scroll on scroll

I have made this script:
http://jsfiddle.net/X5P3W/3/
And it great in Chrome, allright in IE and Safari, but not great in Firefox

How else can you achieve this effect, without programming a custom scrollbar?.

newest questions tagged jquery – Stack Overflow

Continuously scroll a div background image by animating its X position

Admin — Sat, 08 Oct 2011 15:13:22 +0000

Post link: Continuously scroll a div background image by animating its X position

There is an example of what I am trying to achieve here:

http://www.queness.com/resources/html/bgscroll/index.html

However it doesn’t appear to work with recent versions of jQuery.

newest questions tagged jquery – Stack Overflow

How do I scroll an element with the page, but confine it to it’s parent DIV?

Admin — Thu, 06 Oct 2011 13:18:14 +0000

Post link: How do I scroll an element with the page, but confine it to it’s parent DIV?

I am using the method described here: http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/

Initially, I can get everything working (current CDN loaded jquery) but when scrolling to the bottom of the page the sidebar element carries on scrolling down, which makes the page longer, which it then scrolls down again creating an infinite scroll.

I want to confine the sidebar to within the parent element – in this case main-container. When the element hits the bottom of this div, I want it to stop scrolling. I’ve attempted to manipulate the answer here: Jquery Scrolling div – Prevent from entering site footer but with little success. Any clues?

#HTML Structure




    
        
            

            header
            
                Sub header
                
                    Blah blah blah
                
            
            
                

                    
                        
                            Blah
                        
                        
                            Blah
                        
                        

                        Linky
                    

                
                
                    Floaty box content
                    Blah
                
            
            
                
                
                
                
            
            
            
        
    



# CSS

#container {
    padding:10px;
    margin:10px;
    margin:auto;
    width:1000px;
    overflow:auto;
}

.listing {
    margin-bottom:5px;
    position:relative;
    clear:both;
    overflow:auto;
    width:800px;
}

.listing-description {
    float:left;
    width: 49%;
    font-weight:bold;
}

.listing-response {
    float:left;
    width:50%;
    padding-left:5px;
}

#main-container {
    clear:both;
    overflow:auto;
}

#main {
    float:left;
}

#sidebar {
    float:left;
    padding-left:10px;
}

#secondary-container {
    clear:both;
    overflow:auto;
    border: 1px solid;
}

#secondary-left {
    width:50%;
    float:left;
}

#secondary-right {
    width:50%;
    float:left;
}

newest questions tagged jquery – Stack Overflow

Howto: Check if on Page, if not Redirect and then Scroll

Admin — Mon, 03 Oct 2011 15:15:06 +0000

Post link: Howto: Check if on Page, if not Redirect and then Scroll

I am trying to get one last thing working:

I have a blog link in the main navigation and when you click it, it scrolls down to the blog. But when I’m on any other page, this logic obviously doesn’t work. It should first consequently first go to the root page and then scroll. I’ve got the opposite thing working here, but haven’t quite gotten this task done yet.

Any help?

newest questions tagged jquery – Stack Overflow

jQuery fadeIn fadeOut makes page scroll

Admin — Wed, 28 Sep 2011 15:14:27 +0000

Post link: jQuery fadeIn fadeOut makes page scroll

I have wordpress enabled website where I want to create a featured block. This featured block will have featured articles fading one after another. I got it working by using the fadeIn and fadeOut APIs of jQuery, but there is a problem with the implementation.

Here is the code I have -

var count=0;
var sticky_count=;

jQuery(document).ready(featured_block);

    function featured_block(){
        jQuery(".featured" + count % sticky_count).delay(5000).fadeOut(callback);
    }

    function callback() {
        count++;
        jQuery(".featured" + count % sticky_count).fadeIn().delay(5000);
        jQuery(".featured" + count % sticky_count).fadeOut(callback);
    }

The fadeIn – fadeOut effect is working fine till the user navigates to the bottom of the page. When the user is at the bottom of the page, the entire page scrolls up when the fade switch happens.

You can see this in action at http://www.ronakg.com

Please advice how can I avoid the page scroll.

newest questions tagged jquery – Stack Overflow

Adding dynamic html to modal causes window to scroll up

Admin — Thu, 22 Sep 2011 19:16:39 +0000

Post link: Adding dynamic html to modal causes window to scroll up

Explanation: I have a modal that pops up when an html element is clicked. The modal is then appended to the document body and is positioned absolute. The top and left css attributes are set based of the element’s offset that was clicked to trigger the modal.

Problem: The modal fires properly and is positioned appropriately. There is a button within the modal that has a click function that adds further markup to the modal. When the button is pressed the markup is added correctly, but if the window is scrolled to any position, the window scrolls directly to the top.

What is the cause of the window scrolling and how can I prevent it from happening?

Thanks.

newest questions tagged jquery – Stack Overflow

How to hide a Div when the scroll bar is moving with jQuery?

Admin — Mon, 12 Sep 2011 16:26:05 +0000

Post link: How to hide a Div when the scroll bar is moving with jQuery?

I just want the #menu to fade when the scroll bar is moving to provide a less cluttered interface. Is there code that would allow this?

Thank you so much!

newest questions tagged jquery – Stack Overflow

Why does opening a Shadobox.js scroll long windows to the top?

Admin — Fri, 02 Sep 2011 21:13:56 +0000

Post link: Why does opening a Shadobox.js scroll long windows to the top?

I have a really long page that is 1263px wide by 1880px high where opening a Shadowbox via button down at the bottom of the page causes the page to scroll all the way to top of page while the shadowbox centers itself vertically.

function DisplayAgreementWizard(selectedPort, yesSelector, noSelector, madeBy, madeByPos, madeOn)
{
    var baseUrl = resolveUrl('/ALLUSERS/Agreement.aspx');
    var actionUrl = resolveUrl('/Handlers/DataHandler.ashx');

    Shadowbox.init({ skipSetup: true });
    Shadowbox.open({
        content: baseUrl + '?port=' + selectedPort,
        player: 'iframe',
        height: 450,
        width: 750,
        options: {
            onOpen: function() {
                $  (yesSelector).focus(); // This prevents the shadowbox from scrolling to the top of the page
            },
            onClose: function() {
                $  .get(
                    actionUrl + '?port=' + selectedPort + '&func=getstate',
                    function(data, status) {
                        // Do stuff with the data handler after the shadowbox is done.
                    }
                );
            }
        }
    });
}

You may notice there’s an onOpen event handler there that calls $ (yesSelector).focus(). That stops the scroll to the top but the windows is still centered on the page.

How do I make the shadowbox center in the viewable area?

newest questions tagged jquery – Stack Overflow