javascript / Jquery .slideToggle - page does not scroll with content

I am using .slideToggle - Jquery to create an accordion and It works so far.

However, When div#slickbox goes down or up the page does not scroll with it. The page maintain scroll position.

I have 2 huge images(700px x 1300px) inside div#slickbox.

I want to scroll the page with the content, down & up.

How can I do this?

Thank you!

jquery

$('#slickbox').hide(); $('.more a').click(function() { $('#slickbox').slideToggle(3200); return false; });

HTML

<div id="slickbox"> <div id="slide_show"> <div id="slider"> <ul> <li> <img alt="figure 1" src="images/fig1.jpg" width="700" height="1300"> </div><!-- End slide_show --> </div><!-- End slickbox --> <div class="donate done"> <h3 class="more"><a href="#" title="More"> More </a></h3> </div> <!-- End button-->

--------------Solutions-------------

You can store the .height() of the #slickbox element then use that as the animation for scrollTop, like this:

var height = $('#slickbox').hide().height();
$('.more a').toggle(function() {
$('#slickbox').slideDown(3200);
$('html, body').animate({ scrollTop: '+=' + height }, 3200);
return false;
}, function() {
$('#slickbox').slideUp(3200);
$('html, body').animate({ scrollTop: '-=' + height }, 3200);
return false;
});​

You can give it a try here, this will cause the page to scroll down the same number of pixels it expanded because of the images, and at the same rate since it has the same duration.

Category:javascript Time:2010-09-03 Views:1

Related post

  • Javascript/Jquery after page is updated 2011-05-03

    I'm making a Safari extension that easily posts to tumblr by clicking and holding an image. The code is all working fine currently except, tumblr uses an infinite scroll feature on their page (as you scroll, more posts are loaded onto the page using

  • Javascript/JQuery perform function when user scrolls near bottom of page 2011-04-10

    On a prominent news site (sry, can't remember exactly which one) I saw a really cool effect... when you scroll near the bottom of the page, a new element slides down from the top of the browser viewport with a lot of social media options (tweet, shar

  • Javascript (jQuery) disable page scroll when dragging items 2012-02-07

    I have a widget-like system with widgets that are able to be dragged around (with jQuery draggable/sortable). The problem is now that when a user drags one of those widgets and moves the cursor on the edge, the parent div scrolls to the direction of

  • How do I slide/open specific menu item using javascript / jquery on page load? 2012-01-22

    I'm new to java and jquery scripting, I've managed to learn how to open menu on item mouse click, but how do I open specific menu on page load? I'm using this: <!-- menu --> <div id="menuone"> <ul id="menu"> <li> <a href="#

  • profiler for slow javascript (jquery) on page event? "Unresponsive Script" error 2011-06-10

    I am troubleshooting some slow jquery code on a drupal module. After the page loads on a configuration form, you click on an area to expand out a fieldform. However, this expansion takes forever, and most browser give a warning "The script has become

  • Javascript / jQuery plugin to allow horizontal scroll effect 2012-02-11

    Basically I would like to archive results like that: http://www.pixelapse.com/# Does someone know any nice plugins for that or good articles explaining how to do such effect. I'm able to google http://flowplayer.org/tools/scrollable/ but maybe you kn

  • JQuery Mobile page does not load getJSON content until page is refreshed 2011-10-17

    I have a list of "patients" that is queried and linked like so: list.append($(document.createElement('li')).html("<a href='./patient.html?id="+data[i].UnitNumber+"'><img src='http://URLGOESHERE/wcf/PatientSearch.svc/patientpic.jpg?unitnumber

  • How to scroll to top of page with JavaScript/jQuery? 2010-11-18

    Is there a way to control browser scrolling with JavaScript/jQuery? When I scroll my page half way down, then trigger a reload, I want the page to go pack to the top, but instead it tries to find the last scroll position. So I did this: $('document')

  • Javascript: check IF page is at top 2011-11-21

    Is there a way to check, with javascript, if the page is at scroll(0,0)? Reason being I've got a full page slider that I need to pause the second the page is not at origin. And it might not necessarily be because the page is being scrolled live as I'

  • How can I focus on a given table's row using javascript/jquery? 2010-02-02

    Having a big html table with many rows that does not fit on the screen, do you know how to focus on a given row with javascript/jquery avoiding the need to scroll down? --------------Solutions------------- Look up the "scrollIntoView" function. It's

  • Scroll to a specific position on a page using Javascript / Jquery 2011-06-15

    It is possible to move to a certain position on a page using #elementId. How can I do the same thing using Javascript / Jquery. When a JS function is called, I want to scroll to the specific position on that page. Thanks in advance. --------------Sol

  • jQuery slideToggle "flicker" on page load 2010-07-20

    I know there are many questions about jQuery slideToggle "flickering" but I haven't seen any that specifically address this flicker upon page load. Click here for the working example. If you click Refresh or click on another datasheet page (under the

  • Page down with Javascript/jQuery? 2011-07-12

    How do I perform a "page down" operation with Javascript/jQuery so that it works correctly if the user has zoomed in/out? i.e. it should scroll no more and no less than would happen if the user had actually pressed the key, whether or not the user ha

  • jQuery: Anchor loads page and then scrolls to div 2011-09-10

    I have a one page website which scrolls to the correct section when a navigation link it clicked - Please see http://www.cleanupbritain.org for a live example. I am now extending the website and adding a blog which is located in a subdirectory, I am

  • Custom Scrolling (for grid layout) in Javascript / JQuery oriented problem 2011-09-22

    EDIT* Heres a JFiddle version so you can get a better idea of the current problem. http://jsfiddle.net/Tr7Xs/ Thank you for taking the time to help me with my problem if you browse my query. Now, About my situation... I'm trying to create a Multi Dir

  • Populating A Page with XML and Javascript/Jquery, checking if the url is the same as an xml tag 2009-05-01

    I need to create a javascript function that will write a page based on the url, so basically I am trying to create a javascript function that will check the url, and find the corresponding xml item from there. The reason behind this is so that the ht

  • hide javascript/jquery scripts from html page? 2009-10-27

    This question already has an answer here: how do i hide javascript code in a webpage? [duplicate] 10 answers How do I hide my javascript/jquery scripts from html page (from view source on right click)? please give suggestion to achive this . Thanks.

  • How can I take the user to a new page, along with some variables, using Javascript/jQuery, without causing a URI Too Large error? 2010-12-09

    Using Javascript/jQuery, I need to take the user to a new page when a button is clicked, and also send along a bunch of variables to the new page. At the moment I'm doing it like this: location.href=window.location.href + '/new_note?id='+$('#note_id'

  • How do I loosely couple javascript on a page and javascript in a modal/jQuery UI Dialog? 2011-01-27

    I have page where users click an "add person" button. That pops up a modal loaded via ajax and displayed with jQuery UI Dialog. The popup contains a search form where the users selects a person to be added. When they hit 'ok' I would like the javascr

Copyright (C) pcaskme.com, All Rights Reserved.

processed in 0.579 (s). 13 q(s)