Scrolling to the next element - javascript

I'm struggling with a jquery or javascript problem.
It already got annoying which tells me I might think too complicated on this one.
So my markup (simplyfied) looks like this:
<div class="container">
My Content
scroll down
</div>
<div class="container">
My Content
scroll down
</div>
<div class="container">
My Content
scroll down
</div>
<div class="container">
My Content
scroll down
</div>
Basically just some containers.
Each one contains different content and a button.
The Plan:
1) After a click on a button the window should scroll down to the next container.
2) The last button scrolls to the first container again. So I need a loop.
3) The numbers of containers may change from page to page.
EDIT: 4) The containers may not always be direct siblings to each other (see markup below)
The Problem:
I could get this to work by giving each container a unique ID as a target for the scroll effect.
The problem with that is that it gets too messy quickly.
Cant I just somehow target "the next object with the class: container", and scroll to that?
I'm not sure if js or jquery is the right approach. My knowledge in both is somewhat limited.
I would be really grateful for a push in the right direction.
EDIT: The containers may not always be direct siblings of each other.
<div class="row">
<div class="container">
My Content
scroll down
</div>
<div class="container">
My Content
scroll down
</div>
</div>
<div class="container">
My Content
scroll down
</div>
<div class="container">
My Content
scroll down
</div>
<div class="row">
<div class="container">
My Content
scroll down
</div>
<div class="container">
My Content
scroll down
</div>
</div>

Simple solution:
To get the next container, try using next().
Basically, the <div> containers are siblings of each other, so calling .next() on one div container will give you the next.
$(".button").on("click", function(e) {
$(document).scrollTop($(this).parent().next().offset().top);
// $(this).parent().next() // this is the next div container.
return false; // prevent anchor
});
http://jsfiddle.net/Pm3cj/1/
You just use $(this) to get the link object, .parent() to get the parent of the link, which is the <div>, then .next() to get the next sibling (note it will wrap automatically, so the sibling after the last <div> is the first <div>!),.offset()to get its position relative to the page,.top` to get it relative to the top border.
Then you just use $(document).scrollTop() to scroll to that location.
For a completely general solution, use:
$(".button").on("click", function(e) {
container = $(this).parent();
// if I am the last .container in my group...
while ( document != container[0] // not reached root
&& container.find('~.container, ~:has(.container)').length == 0)
container = container.parent(); // search siblings of parent instead
nextdiv = container.nextAll('.container, :has(.container)').first();
// no next .container found, go back to first container
if (nextdiv.length==0) nextdiv = $(document).find('.container:first');
$(document).scrollTop(nextdiv.offset().top);
// $(this).parent().next() // this is the next div container.
return false;
});
​The code basically uses container.find('~.container, ~:has(.container)') to find any sibling that has or is a .container. If nothing, then go up the DOM tree 1 step.
After it finds something which is or has a .container, it grabs it with nextdiv = container.nextAll('.container, :has(.container)').first();.
Lastly, if nothing is found, checked by nextdiv.length==0, just grab the first .container in the whole page.
Then scroll to whatever .container was grabbed.
http://jsfiddle.net/Pm3cj/3/
To animate the scroll, place the scrollTop property in an animate function:
// $(document).scrollTop(nextdiv.offset().top); // snaps to new scroll position
$('body').animate({scrollTop:nextdiv.offset().top},300); // animates scrolling
http://jsfiddle.net/Pm3cj/4/

JavaScript is not required for this. You can use HTML anchors.
<div class="container" id="first">
My Content
scroll down
</div>
<div class="container" id="second">
My Content
scroll down
</div>
<div class="container" id="third">
My Content
scroll down
</div>
<div class="container" id="fourth">
My Content
scroll down
</div>

What you want can be easily achieved through parent() and child().
If the number of containers on each page is different, then you should start ID'ing (don't know if that's a term) containers serially. Something like, class="container-1"
The click event on the last button should do something like:
var num = $('div[class^="container-"]').filter(function() {
return((" " + this.className + " ").match(/\scontainer-\d+\s/) != null);
});
num++;
var last_container = $(this).parent('.container' + num);
last_container .scrollTo();
Am sure you can figure out what the next button should do ;)

Related

jscroll pane multiple div with same class

I have an html page that contain multiple divs with same class name.
i-e
<div class='some-class'>
<div class='some-class'>
<div class='some-class'>
I have used jscroll pane for nice and fancy scrollbar.
it is working fine.
but scrollToBottom() function isn't working correctly.
the scroll of only first div is setting to bottom remaining divs scroll-bar are remain same to top.
here are my functions
var scrollPane = $('.some-class').jScrollPane().data('jsp');
scrollPane.scrollToBottom();
If you need that ALL of your divs with scroll go to down, iterate through them:
var scrollPanes = $('.some-class');
scrollPanes.each(function() {
var jsp = $(this).jScrollPane().data('jsp');
jsp.scrollToBottom();
});
If you need that only ONE of your divs with scroll go to down, you need to mark the divs with another class (or id, or custom attribute), and apply only to it:
<div class="some-class only-this"></div>
<div class="some-class only-that"></div>
<div class="some-class only-self"></div>
With JS:
var scrollPane = $('.some-class.only-this').jScrollPane().data('jsp');
scrollPane.scrollToBottom();

using JQuery .not( ) to fade out all divs apart from the selected and it's children

I currently have a grid of images and each image has a hover function that changes the opacity of a div. So the image is a background image, and the information is a div within grid-item.
<div class="grid">
<div class="grid-item">
<div class="image-rollover">
<div class="title">
Image title text
</div>
</div>
<div class="info">
Image information text
</div>
</div>
</div>
I've got a function that makes each grid item disappear apart from the one that is clicked:
$(".grid-item").click(function() {
var selected = this;
$(selected).children(".image-rollover").css("opacity", "1");
$(function() {
$('.grid div').not(selected).fadeOut(200);
});
});
I would like all the images apart from the clicked one to disappear and I want the rollover state of that clicked image to remain. I've got the first half, but the hover state disappears despite me setting the CSS to 1.
I think it's something to do with .not(), and it seems that .not() doesn't include all the child elements within that div??
Can anyone suggest something that selects all divs apart from the selected and ALL it's child elements?
.grid div matches all the divs, including those inside your grid-item.
If you match only on the direct children, it will work as intended.
$(".grid-item").click(function() {
var selected = this;
$('.grid>div').not(selected).fadeOut(200);
});
Note how I replaced .grid div by .grid > div.
See this JS Fiddle.
I have also removed the anonymous function inside your click handler, which is unnecessary given the context you have posted.

How do I preserve the current viewport when removing a div?

Please see JSFiddle. Essentially, I have 3 really long divs. At the end of the second div, I have a button that, on clicked, removes the first div. The problem is that removing this div makes the page scroll to the end. How do I prevent this behaviour and keep the viewport intact when this happens?
<div id="first">
<p>Some really long content ...</p>
</div>
<div id="second">
<p>Some really long content... </p>
</div>
<button onclick="$('#first').remove()">Remove First div</button>
<div id="third">
<p>Some really long content ...</p>
</div>
the behaviour explained by you is expected. To maintain back on the current position, you will need to adjust the viewport scroll's position. For example, updated in your jsfiddle: http://jsfiddle.net/d0fqts8p/1/
$('button').click(function () {
var firstElHeight = $('#first').height(); // get the height of element to be deleted
var currentHeight = $("body").scrollTop(); // get the current scroll position
$('#first').remove();
$("body").scrollTop( currentHeight - firstElHeight); //calculate and set back
});

Scrollable Div with Sticky header

I am trying to make something where I have a div that scrolls. Inside the div there are "title" elements and as I scroll I want the title element of that section to stick to the top of the div and remain there like a header.
Sort of like what people see on webpages where the menu sticks to the stop of a page as you scroll. This example can clearly be seen on the Mac OS X calendar in the "Day" view.
I think I can deal with the making the element stick part, I saw an interesting solution that I think I can adapt. However I was wondering if someone can help me figure out how to know if a title element has reached the top of a scrollable div.
The use case is as follows:
<div class="container">
<div class="floatLeft">
<div class="scrollingDiv" style="height:100px; overflow-y:scroll; overflow-x:hidden;">
<ul>
<li>
<div>
<h4>Title</h4>
<div>Content</div>
</div>
</li>
<li>
<div>
<h4>Title</h4>
<div>Content</div>
</div>
</li>
</ul>
</div>
</div>
<div class="floatRight"></div>
</div>
How would I know when the second "Title" has hit the top of my "scrollingDiv", not the top of the page itself?
Thanks!
You can make an element sticky by setting it's top property to zero and making setting position:absolute; via css.
.stickyTop {
position:absolute;
top:0px;
}
This will ensure the element stays at the top of the page always.
To identify if an element has reached the top of window you can use offset() to identify the current position and check if it's neared the top.
$('div.scrollingDiv').scroll(function() {
var active = null;
$('.scrollingDiv h4').each(function(idx, val) {
var topOffset = $(val).offset().top;
if (topOffset < 20) // elem is 20 px from top
{
// Element nearest the top
active = $(val);
}
console.log(active); // Element closest to the top
});
});
The above simply loops though all the h4 properties searching for the element closest to the top of the page, and logs it.
You can combine these together to create something like a Funky jsFiddle.

Achieving slideUp() without content distortion

I want to implement a simple slide up and slide down mechanism for revealing content on the press of a button. Using the out of the box jquery functions slideUp() and slideDown() squishes the content. I want the slide mechanism to be similar to the one used in twitter (in the timeline when you click on a tweet, more info and options slide down). There the content does not get squished. Instead the bottom border seamlessly moves over the content thus sliding up without squishing. Any pointers on how to implement this?
Edit:
The content to be slided into and out of visibility is inside a div
<div id='container'>
<div id='slider'>
<div> other content </div>
</div>
<div id='button'>
Click to slide
</div>
</div>
I listen to the click event of the 'button' div
$('.button').click(function(){
if($('.slider').is(":visible"))
{
$('.slider').slideUp();
}
else { $('.slider').slideDown(); }
});
This is a basic slider. The contents inside the 'slider' div get squished and distorted when animating.
try this demo
$(function(){
$('#button').click(function(){
if($('#slider').is(":visible"))
{
$('#slider').slideUp();
}
else { $('#slider').slideDown(); }
});
});

Categories