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"> More </h3>
</div> <!-- End button-->
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.
Related
I have a set of buttons on a page and when someone's clicks I want the button to expand and scroll to the top of the page (viewport height, not the actual top). This is my code -
<div class="team-header" id="brian">
<div class="teamlogo">
<img src="images/logos/wolves.png" />
<h1>Brian</h1>
</div>
</div>
<div class="brian-roster team-rosters">
<?php include ('brian.php'); ?>
</div>
<div class="team-header" id="carlos">
<div class="teamlogo">
<img src="images/logos/leverkusen.png" />
<h1>Carlos</h1>
</div>
</div>
<div class="carlos-roster team-rosters">
<?php include ('carlos.php'); ?>
</div>
There are 14 of those divs in total, that's just an example of two.
I have this jQuery code for each one -
const brianRoster = $(".brian-roster");
const brianID = $("#brian");
brianID.on("click", function () {
$("html, body").animate(
{
scrollTop: $("#brian").offset().top - 60,
},
100
);
$(brianRoster).slideToggle(700);
});
(the -60 is to compensate for a sticky header)
Right now if you click the button it expands but does not scroll to the top. If you click the button again it collapses (as it should), and then scrolls to the top.
How can I get it to scroll to the top?
try this :
$(window).scrollTop(0);
instead of
scrollTop: $("#brian").offset().top - 60,
or try
$("html, body").animate(
{
scrollTop: $("#brian").offset().top,
},
slow
);
I have a list of images that I display in an html page side by side grouped in a div. when there are many images that force the div to be expanded, the div will scroll automatically from left to right vice versa.
When the user puts the cursor on that div, the animation should stop, and when the cursor goes out, the animation should start again. But it doesn't work, sometimes it stops, sometimes not.
HTML rendered by django
<div class="row" style="position: relative;">
<div id='mainDiv' class="col-sm-12" style="">
<h1">Title</h1><hr>
<div style="overflow:hidden;white-space: nowrap;">
{% for img in all_images %}
<div class="" style="height:200px;display:inline-block">
<img height="100" title="" src="{{img.scr}}">
</div>
{% endfor %}
</div>
</div>
</div>
JS
function animatethis(targetElement, speed) {
var scrollWidth = $(targetElement).get(0).scrollWidth;
var clientWidth = $(targetElement).get(0).clientWidth;
$(targetElement).animate({ scrollLeft: scrollWidth - clientWidth },
{
duration: speed,
complete: function () {
targetElement.animate({ scrollLeft: 0 },
{
duration: speed,
complete: function () {
animatethis(targetElement, speed);
}
});
}
});
};
var sec = 20000;
animatethis($('#mainDiv'), sec);
$("#mainDiv").hover(function(){
$(this).stop(true)
});
$("#mainDiv").mouseout(function(){
animatethis($(this), sec);
});
--- <div id="mainDiv" class="col-sm-12" style="">
+++ <div class="col-sm-12" style="">
--- <div style="overflow:hidden;white-space: nowrap;">
+++ <div id="mainDiv" style="overflow:hidden;white-space: nowrap;">
You have the mainDiv id tag in the container component. That's not the div you're targeting to animated.
Here's a working one: https://codepen.io/anon/pen/KxgdWO
I'm trying to scroll to the next div when the current div almost came to its lower limit.
I'm using the jQuery plugin MouseWheel. The following code that I have, run the animation scrollTop when I scroll. But not when it reaches a certain desired point that would be its lower limit. Because, some div contain a lot of text with images.
This is the structure HTML
<html>
[...]
<body>
<div id="main">
<div class="item">
[Only a Image]
<!-- Only a Img? I'm 2px distance to the next div OK, ScrollTop When Scroll1 -->
</div>
<div class="item">
[Some Text]
<!-- mmmm Some text. Ok, I let you read this.. Scroll 1.. Scroll 2.. Scroll 3..
Wait! I'm 40px distance to the next div ... scrollTop -->
</div>
<div class="item">
[Some text with Image]
<!-- mmmm Some text with Image. Ok, I let you read this.. Scroll 1.. Scroll 2.. Scroll 3.. Scroll 4... Scroll 5.. Scroll 6..
Wait! I'm 40px distance to the next div ... scrollTop -->
</div>
<div class="item">
[....]
</div>
</div>
</body>
</html>
This is the JS:
$('#main').on('mousewheel', '.item', function(e) {
if (e.deltaY < 0) {
$('html, body').animate({
scrollTop: $(e.currentTarget).next().offset().top
}, 1000);
} else {
$('html, body').animate({
scrollTop: $(e.currentTarget).prev().offset().top
}, 1000);
}
e.preventDefault();
});
Add the hight of the element to the offset
$('#main').on('mousewheel', '.item', function(e) {
if ($(document).scrollTop() >= $(e.currentTarget).offset().top+$(e.currentTarget).height();) {
$('html, body').animate({
scrollTop: $(e.currentTarget).next().offset().top;
}, 1000);
}
e.preventDefault();
});
I want to click this button, which is a section head of an accordion and have it move to the top of page (based on window)
I feel like this is simple --- but it was a long day. Any ideas?
Some background is that this is an accordion like thing - and the buttons are headers. Because the accordion is long - and the phone screen is small --- when you fold and open... you can end up in some random middle area of a section and I'm trying to get that section to move to the top instead of a hash... I've tried a few hash ideas, but I'll also need an if statement to avoid this happening on larger screens. I hope that is clear. Thanks. OH and HERE is a fiddle
HTML
<div class="some-div"></div>
<div class="some-div"></div>
<button>button to endup up at top</button>
<div class="some-div"></div>
<div class="some-div"></div>
<div class="some-div"></div>
<div class="some-div"></div>
<div class="some-div"></div>
<div class="some-div"></div>
<div class="some-div"></div>
<button>button to endup up at top</button>
javascript
$('button').on('click', function() {
$(this). go-to-the-top-with-an-offset-of-10px();
});
With this, you can move at the top of the page ("based on window"):
$('button').click(function() { // on button click
$("html, body").animate({ // catch the `html, body`
scrollTop:0 // make their `scrollTop` property 0, to go at the top
}, 1000); // in 1000 ms (1 second)
});
DEMO
Or if you want to move up by an offset of 10px, use:
$('button').click(function () { // on button click
$("html, body").animate({ // catch the `html, body`
scrollTop: $(this).offset().top - 10 // button's offset - 10
}, 1000); // in 1000 ms (1 second)
});
DEMO
Or let's say you want to bring the 8th div to the top on click, use:
$('button').click(function () { // on button click
$("html, body").animate({ // catch the `html, body`
scrollTop: $("div:nth-of-type(8)").offset().top // 8th div's top offset
}, 1000); // in 1000 ms (1 second)
});
DEMO
I want to jump to a destination <div> using href in html. I am using the id of the <div> to call the <div> and successfully jump.
Here is my code.
<a href='#idx'>click here</a>
|
|
|
|
<div id="idx">test scroll up</div>
But the position of the <div> is always in the top of the page if it's called.
I want the position of the <div> in the center of the page, when <div> called even click...how do I achieve that, using javascript maybe?
thanks..
For every screen height,
Check here DEMO http://jsfiddle.net/yeyene/J3zyq/1/
JQUERY
$(document).ready(function() {
$('a#gotoID').click(function() {
var id_offset = ($(window).height() - $('#idx').height())/2;
$('html, body').animate({
scrollTop: ($("#idx").offset().top - (id_offset/1.5))
}, 800);
});
});
<a id="idx-link">click here</a>
js:
$('a#idx-link').click(function() {
$('html, body').animate({
scrollTop: ($("#idx").offset().top - 200)
}, 800);
});
Change 200 appropriately based on where you want the div to be after the animation.