Develop Reference

scroll to a div when scrolling, and scroll to top when div disappear

I have 2 divs on my webpage. first div is "#pattern" (red one), and second on is "#projets".(blue one)
when use scrolls for the first time, the window scrolls automaticaly to the the second div "#projets". I'm using jquery scroll-To plugin.
it works nice, even if when the users scroll with a large amount of scroll there could be on offset from the "#projets" div... If someone has an idea to correct this would be nice, but that's not my main trouble...
Now i'm trying to scroll back to the top of the page ("#pattern" div) as soon as "#pattern" div reappears when scrolling, the red one. so basically it should be as soon as the offset from the top of my screen of my div "#projets" is supperior to 1.
I've tried so many solutions without results, using flags, multiple conditions... it can be the same kind of thing as on this page, but user should be abble to scroll freely inside the page, not scrolling from hash to hash :
http://www.thepetedesign.com/demos/onepage_scroll_demo.html
here is my html :
<div id="pattern"></div>
<div id="projets"></div>
my css :
#pattern {
height:300px;
width: 100%;
background-color:red
}
#projets {
height:800px;
width: 100%;
background-color:blue
}
and my jquery :
var flag=0 ;
$(window).on('scroll',function(){
var top_projets_position = $("#projets").offset().top - $(window).scrollTop();
if((flag==0) && $(window).scrollTop()>1){
$(window).scrollTo('#projets', 500);
flag=1;
}
if($(window).scrollTop()==0){
flag=0;
}
});
here is jsfiddle :
http://jsfiddle.net/jdf9q0sv/
hope someone can help me with this, I can't figure out what I'm doing wrong, maybe a wrong method ! thanks

It looks like you need to track 3 things:
The scroll direction occurs.
The area you are currently viewing.
If scroll animation is currently happening (we need to wait until it's done, or problems will occur).
http://jsfiddle.net/vx69t5Lt/
var prev_scroll = 0; // <-- to determine direction of scrolling
var current_view ="#pattern"; // <-- to determine what element we are viewing
var allowed = true; // <-- to prevent scrolling confusion during animation
var top_projets_position = $("#projets").offset().top + 1;
$(window).on('scroll',function(){
var current_scroll = $(window).scrollTop();
if(current_scroll < top_projets_position && current_view=="#projets" && current_scroll < prev_scroll){
scrollToTarget("#pattern");
}
if($(window).height() + current_scroll > top_projets_position && current_view=="#pattern" && current_scroll > prev_scroll){
scrollToTarget("#projets");
}
prev_scroll = current_scroll;
});
function scrollToTarget(selector){
if(allowed){
allowed = false;
$(window).scrollTo(selector, {
'duration':500,
'onAfter': function(){ allowed = true; current_view = selector;}
});
}
}
This is just a quick solution based on your original code. A better solution would be to do something more Object Oriented (OOP) and track values in an object. Perhaps take an array of elements on object creation, grab all the boundaries and use the boundaries in your scroll handler to determine when to scroll to the next div.

Script that change the width of multiple divs with the same class name

After gotten help from #michael-p who had made a script that works excellent,
i was looking for some code that could work better in my new situation (old topic link).
The "container" class or id (as shown below) displays flexbox content ("box") who go from top to bottom and when reaching the bottom makes another row to the right en start over.
This was a issue because as explained in my old topic, Chrome doesn't recognize the flexbox content and does not stretch the width.
Michael P solved this however through some scripting but the script was made for one "container" class (it freaks out when multiple divs has the same class name, because they have different amount of "box" classes inside it, so different widths).
What i would like to achieve:
A script (can be modified from Michael-P script) that focuses only in the div that its placed in, and stops when the div stops, so there would be no need to specify a certain class by name.
Doing so there would be no limit of how many div copies there could be with the same class name but different amount of "box" contents in it.
Fiddle from Michael P
<div id="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
maybe here the script? that stops when </div> is shown?
</div>
Script
// Find the biggest offset right
var maxOffsetRight = 0,
currentOffsetRight;
$('#container').children().each(function(index) {
currentOffsetRight = $(this).position().left + $(this).outerWidth(true);
if (currentOffsetRight > maxOffsetRight) {
maxOffsetRight = currentOffsetRight;
}
});
$('#container').css('width', maxOffsetRight);

JS FIDDLE
Change the id of container to a class, and then just iterate over each container class. You'll also need to change the scope of your maxOffsetRight var then from global to only applying to each iteration of container.
$('.container').each(function(){
var maxOffsetRight = 0;
var currentOffsetRight - 0;
$(this).children().each(function(index) {
currentOffsetRight = $(this).position().left + $(this).outerWidth(true);
if (currentOffsetRight > maxOffsetRight) {
maxOffsetRight = currentOffsetRight;
}
});
$(this).css('width', maxOffsetRight);
})

The script I wrote for your previous question was designed for the case you presented, i.e. with one flexbox container. But it could be easily adapted for a whole set of flexbox containers.
First we will have to change the id to a class, because we will have more than one container. Then, we will iterate on each container, and compute the largest offset right of the flexbox items. Therefore we have to put the variable initialization inside a function iterated on the containers. As follows :
$('.container').each(function() {
var maxOffsetRight = 0,
currentOffsetRight;
// Find the biggest offset right of all childs
$(this).children().each(function(index) {
currentOffsetRight = $(this).position().left + $(this).outerWidth(true);
if (currentOffsetRight > maxOffsetRight) {
maxOffsetRight = currentOffsetRight;
}
});
// Set the width of the current container
var offsetLeft = $(this).position().left;
$(this).css('width', maxOffsetRight - offsetLeft);
});
Note that when setting the width, we have to substract the offsetLeft of the container. Should have done that in the previous version, but didn't notice it as there was only one container, and he was at an offset left of 0.
Fiddle

Scroll Div With increase height

$(".clickable").each(function(idx, elem) { // register click for slides
elem = $(elem);
elem.click(function() {
scaleClicked(elem);
});
});
function scaleClicked(elem) { // slide clicked
var id = elem.attr("id"),
num = id.slice(-1),
postId = "post"+num,
posts = $(".post");
posts.each(function(idx, p) {
if($(p).attr("id") == postId) {
scaleUp(p);
}
else {
scaleDown(p);
}
});
}
function scaleUp(item) {
$(item).animate({height:1000},1000);
}
function scaleDown(item) {
$(item).animate({height:30},1000);
}
I need to Increase div height on click, like example 01 and at the same time, That Div Must scroll to Top of the window Like Example 02. Can You Help With This.
i tried few ways but when div increase the height, but it is scrolling to beyond the top level. but i need to stop div,when it scroll to top level of the window.

Instead of using an anchor to scroll like the example you gave you can scroll like this, for example to scroll to the bottom of a div:
$("#mydiv").animate({ scrollTop: $('#mydiv')[0].scrollHeight}, 1000);
To scroll to an item in the div you can find the position to scroll to in a number of ways, there's a good discussion here:
How do I scroll to an element within an overflowed Div?

Responsive Javascript Image Slider, managing state change

I have a responsive site that has an image slider that the user can look through.
Here is the link to that slider:
http://firehousecoffeeco.com
I was able to get the slideshow to return to the first slide when they click the "right" button on the last slide, without the right edge of the last slide ever coming too far into the window. This is done by checking the viewport width against the container div's width (see the left button's click handler below).
My question is: How do I make it so that the same thing that is happening with the last slide happens with the first slide. (no matter what, I never want the container's left edge to go above 0px). I tried to do the same with the first slide as with the last, but it didnt' work, please see below:
Here is the markup of the slider:
<section id="photoGallery">
<div id="slides">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
<!--left and right buttons-->
<div id="left" data-dir="left"></div>
<div id="right" data-dir="right"></div>
</section>
The container div is "slides" and it is what is being moved.
Here is my script's click handlers and transition function:
//click handlers
leftButton.on('click', function(){
var viewport = $(window).width();
var slidesContainerLeftEdge = $('#slides').get(0).getBoundingClientRect().left;
var slidesContainer = $('#slides').width();
if (slidesContainerLeftEdge == 0) { //if on first image (this is not working, help!)
slides.animate({marginLeft: ""+-(slideShowLimiter * 320)+"px"}, 200);
console.log("working");
} else {
transition("+=");
}
});
rightButton.on('click', function(){
var viewport = $(window).width();
var slidesContainerEdge = $('#slides').get(0).getBoundingClientRect().right;
var slidesContainer = $('#slides').width();
if (slidesContainerEdge < viewport + 320) { //if last slide
slides.animate({marginLeft:"0px"}, 200);
} else {
transition("-=");
}
});
function transition(direction) {
slides.animate({marginLeft: ""+direction+""+movement+"px"}, 200);
}
Hopefully you guys can help me out of a jam. Thanks in advance!

if(0 >=slidesContainerLeftEdge > -320){ // if first slide
slides.animate({marginLeft: ($(window).width()-$('#slides').width())+"px"}, 200);
}else{
//...
}
Just to follow the logic here you used for the rightClick, so when it's the first slide on the left, you'll move the slides to the left (by setting the margin-left) so its right matches the right of the window.
See Full Code:
leftButton.on('click', function(){
var viewport = $(window).width();
var slidesContainerLeftEdge = $('#slides').get(0).getBoundingClientRect().left;
var slidesContainer = $('#slides').width();
if (0 >=slidesContainerLeftEdge > -320) {
slides.animate({marginLeft: (viewport-slidesContainer)+"px"}, 200);
} else {
transition("+=");
}
});

How do I make a div shift above or below another div based on the scroll bar?

Here's my situation:
I have a bunch of rows. In each row is a button that when clicked displays a set of options. Depending on where the row is in the page, the settings need to open above or below the button. If the button is at the top of the page, the settings would display beneath the button. If the button is at the bottom of the page, it should open above.
If the user picks something at the bottom of the page, but then scrolls so it's towards the top, I need the settings to shift under the button as opposed to on top. What's the best way to do this? I'm not actually sure of ANY way to do this, so any advice would be appreciated.

http://jsfiddle.net/573zJ/
Test the position of the element relative to the viewport midpoint, and move it to the first or last position relative to its container, like so:
<div class="container">
<div class="element-set">
<div class="normal">content</div>
<div class="flipper">flipper</div>
</div>
... random number of .element-set
<div class="element-set">
<div class="normal">content</div>
<div class="flipper">flipper</div>
</div>
</div>
and
$(window).scroll(function () {
flippers();
});
function flippers() {
var midpoint = $(window).height() / 2;
$('.flipper').each( function () {
var $flipper = $(this);
var $parent = $flipper.parent();
var top = $parent.position().top - $(window).scrollTop();
if ( top > midpoint ) {
$flipper.prependTo( $parent );
} else {
$flipper.appendTo( $parent );
}
});
}