JQuery Div expand and scroll to bottom

Question

im using jquery to expand a div when a button is clicked, here is the button code:

<input type="button" value="Reply" onclick="jQuery('#replycont').slideToggle()" />

and then obviously the actual div:

<div id="replycont" style="display:none; border:1px #000000 solid; padding:10px;">
<form method="post" action="index.php?id=viewticket&seq=<?php echo $_GET["seq"]; ?>#updates_bottom" enctype="multipart/form-data" class="form-stacked">
        <div class="control-group">
            <label class="control-label bold" for="message">Message</label>
            <div class="controls">
                <textarea name="ticket_update" id="ticket_update" rows="12" style="width:100%;"></textarea>
            </div>
        </div>
    <p><input type="hidden" name="ticketnumber" id="ticketnumber" value="<?php echo $_GET["seq"]; ?>" />
    <input type="submit" name="addupdate" id="addupdate" value="Submit" /></p>
</form>
</div>

the button is at the top of the page and then the div is down the bottom, what would be the best way to make the page scroll to the bottom so the div is visible as well as the button expanding the div?

http://stackoverflow.com/questions/6677035/jquery-scroll-to-element — klewis, May 09 '13 at 13:48

score 1 · Answer 1 · answered May 09 '13 at 13:52

1

It is preferred not to use inline js, add an id to your button, and then

$('#mybutton').on('click',function(){
$('#replycont').slideToggle(function(){
$('html, body').animate({
    scrollTop: $('#replycont').offset().top
}, 500);
});
});

And there you go, the animation will launch when the toggle is done, if you want it to run at the same time,

 $('#mybutton').on('click',function(){
$('#replycont').slideToggle();
$('html, body').animate({
    scrollTop: $('#replycont').offset().top
}, 500);
});

answered May 09 '13 at 13:52

Patsy Issa

10,623
3
52
72

ok so ive added this for the button and the jquery:
but its not working – May 09 '13 at 14:10
just done this one: $(function(){ $('#reply-button').on('click',function(){ $('#replycont').slideToggle(); $('html, body').animate({ scrollTop: $('#replycont').offset().top }, 500); }); }); but still nothing :( – May 09 '13 at 14:14
does it need to go underneath the button html or above it? – May 09 '13 at 14:15
like this: still nothing - its not even expanding the div now (how confusing :/ ) – May 09 '13 at 14:19
just taken off the .top but still the same – May 09 '13 at 14:21
chrome, safari and ie 9. im getting an error on dreamweaver though. did you save a new version of that fiddle? – May 09 '13 at 14:30
well its working on jsfiddle but not on my site for some reason :/ – May 09 '13 at 14:32
@charliejsford Check the comment above i forgot to save it earlier :P if it works i ll edit the answer and let's delete these comments – Patsy Issa May 09 '13 at 14:32
@charliejsford Can you copy the error it is giving ? and make sure to include jquery ofc – Patsy Issa May 09 '13 at 14:33
no error - just not working. when i click the button its not doing anything – May 09 '13 at 14:55
1

err...did you give the button the id `reply-button`? – David Fregoli May 09 '13 at 15:07
yeah i did - its in the fiddle – May 09 '13 at 15:08
@charliejsford Is there a link where i can see the website ? If it's not doing anything or any errors the listener on the button is not being attached properly – Patsy Issa May 09 '13 at 15:08
erm i cant coz its a client area that needs to be logged into. erm how about this new fiddle? - http://jsfiddle.net/G8TxZ/ its not working on there either – May 09 '13 at 15:23
@charliejsford and now it is http://jsfiddle.net/G8TxZ/2/ :P You forgot to include jquery in your last fiddle – Patsy Issa May 09 '13 at 15:24
@charliejsford nop i added the margin and include jquery but it's the same fiddle you gave me – Patsy Issa May 09 '13 at 15:28
1

can you add a `console.log('test')` inside the click handler in your code – David Fregoli May 09 '13 at 15:30

score 0 · Answer 2 · answered May 09 '13 at 13:48

0

$('html,body').animate({
    scrollTop: $('#replycont').offset().top
})

answered May 09 '13 at 13:48

David Fregoli

3,282
1
16
37

actually I did it opn my own :p – David Fregoli May 09 '13 at 13:54

JQuery Div expand and scroll to bottom

2 Answers2