Develop Reference

jQuery scroll to sections in button click

I'm having problem to scroll in each section separately by using the same button. If I click for the first time, this should send me to section2, and then If i click again the same button, this should send me to section3
I have tried to make it by every click to scroll 500px to bottom or something like that but seems that this is not good solution for me.
$(document).ready(function() {
$('.scroller').click(function() {
var fuller = $(this).closest('.fullscreen').next(),
section = $(this).closest('.section');
section.animate({
scrollTop: section.scrollTop() + fuller.offset().top
}, 700);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">
<a href=# class="scroller">Scroll</>
<div class="section1">
<div class="section1">Content2</div>
</div>
<div class="section2">
<div class="half-screen">
<div class="s">Content 2</div>
</div>
</div>
<div class="section3">
<span>
<div class="">Content 3</div>
</span>
</div>
<div class="section4">
<div class="half-screen">
<div class="s">Content 4</div>
</div>
</div>
</div>
This kind of code send me just to the section2 and then doesn't work.

You can use a counter to achieve your task. When the button is clicked, we check if counter hasn't reached the sections (those to be scrolled to) length (the number of the sections in the page), scroll to the next section and increment the counter otherwise scroll to the first section and assign 0 to the counter so we can click again and have the same functionality.
But before digging into the code (logic), I have some points to talk about :
your HTML is semantically wrong : an inline level element (a span in your case) can't host block level elements (a div in your case).
the button (the a.scroller element) is the only one component that has the scrolling functionality, select it (in jQuery) based on it's ID (we'll give it one) seems more better than a class (that's faster as jQuery will use the native getElementByID to select the element, you can read the jQuery code and get how it does the selecting job).
as I tried to say, classes are used to select more than one element in the page. The sections (to be scrolled to) should have a common class (also to be used in jQuery).
So building on those points above, I prepared a demo example for you in which you can extend to achieve your desired end results. Also, the example has a wealth of helpful comments to help you when reading the code.
$(() => {
/**
* select the main elements having affect in the process.
* sections: the sections to be scrolled to.
* btn: the "a" element that that triggers the scrolling effect.
* idx: the counter that used to distinguish which section should we scroll to.
**/
let sections = $('.scroll-to'),
btn = $("#scroller"),
idx = 1;
/** adding the click listener to the "a" element **/
btn.on('click', e => {
e.preventDefault(); /** preventing the jump to top (and adding "#" to the URL) **/
idx >= sections.length && (idx = 0); /** if the counter reaches the number of the section in the page we must decrement it to 0 **/
/** scroll effect: the "body" and the "html" elements should scroll not a section but the scroll destination is based on the section with the index "idx" offset from the top of the page (all the page not only the viewport) **/
$("html, body").animate({
scrollTop: $(sections[idx++]).offset().top
}, 700);
});
});
/** basic styling for the demo purposes and to allow the scroll effect to be seen **/
.scroll-to {
height: 100vh;
border: 2px solid blue;
}
#scroller {
position: fixed;
top: 0;
left: 50%;
transform: translate3d(-50%, 0, 0);
background-color: #000;
color: #fff;
padding: 8px 15px;
border-radius: 0 0 4px 4px;
text-align: center;
box-shadow: 0 0 25px -1px rgba(18, 18, 18, .6);
z-index: 999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- no "span" elements having "div" ones which is semantically wrong -->
<!-- the sections to be scrolled to have a common class "scroll-to" which will be used to select all these section in "jQuery" -->
<!-- the "a" element now have an ID of "scroller" to select it rapidly with "jQuery" -->
<div class="section">
Scroll
<div class="scroll-to fullscreen">
Some content
</div>
<div class="scroll-to section2">
<div class="half-screen">
<div class="s">Content 2</div>
</div>
</div>
<div class="scroll-to section3">
Content 3
</div>
<div class="scroll-to section4">
<div class="half-screen">
<div class="s">Content 4</div>
</div>
</div>
</div>
I'm here for any clarifications.
Hope I pushed you further.

How to find the boundary of child Divs

Im trying to right align the Title on top of the last Div. As per the below image , the text should be on top of "Hello 5 / 4 / 3". When we resize the window button will float which is working and the text should be always be on top of the last button.
Unsure why the wrapper div is adding extra space to the right of the button and not aligning to the edge of the right most div. Extra space is coming even if the Title is not there , any insights about Div width calculation would be great.
I tried calculating the number of buttons in the top row using javascript and added offset to the title , but it seems tedious and not aligning at certain resolution.
http://jsbin.com/nonexegiqa/embed?html,css,console,output
HTML
<div class="wrapper">
<div class="title">Title</div>
<div class="clear"/>
<div class="btn">Hello 1</div>
<div class="btn">Hello 2</div>
<div class="btn">Hello 3</div>
<div class="btn">Hello 4</div>
<div class="btn">Hello 5</div>
<div class="btn">Hello 6</div>
<div class="clear"/>
</div>
CSS
.wrapper{
border:solid gray 1px;
}
.btn{
width:96px;
height:46px;
float:left;
border:solid gray 1px;
margin-left : 11px;
margin-bottom : 11px;
text-align:center;
}
.title{
float:right;
}
.clear{
clear:both;
}

You need to find count of .btn in first row when page resizing, Then set position of .title to last .btn in first row.
$(window).on("resize", function(){
var parWidth = $(".wrapper").innerWidth();
var chiWidth = $(".wrapper .btn").first().outerWidth(true);
var childCount = 0;
while(parWidth >= chiWidth){
parWidth -= chiWidth;
childCount ++;
}
var left = $(".btn:eq("+(childCount-1)+")").position().left;
$(".title").css("margin-left", left);
});
To better understanding, i create demo but because you can't change demo page size in here, i create it in JSFiddle.

yes, display:flex may be very helpful. As a work around you could set the width of the .wrapper to 70vw, or something similar. The .wrapper div width is creating the "extra space."

How to make visible and hide particular divs?

All div are generated dynamically, and having same class class="bucket". This div had one more div inside class="restPart" rest part, which will hide, when page load first time.
What I want, I have more than one div,
1. Each divs hides the rest part, when page load first time.
2. Each div are diving into two part, one part will always show and rest part will not show.
3. Rest part will appear only when we click the link "show more",
4. When div are fully shown It will show link "show less", when we click on it, will hide the rest part.
5. This should work only for one div on which we are clicking, other divs should be unaware.
_data_grid.html
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#restPart").hide();
$('#grid_content').on('click','.more', function(){
//$("#restPart").show();
$("div").children("div").show();
$("#showRest").hide();
});
$('#grid_content').on('click','.less', function(){
//$("#restPart").hide();
$("#showRest").show();
$(this).closest("div").hide();
});
});
</script>
#grid_content {
overflow: hidden; clear: both;
}
#grid_content .bucket {
width: 290px; float: left; margin: 0 0 48px 20px;
border: 1px solid #262626;
background: $gray-lighter;
}
#grid_content .bucket ul {
margin: 0 0 0 0; padding: 0 0 0 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<section id="grid_content">
<!--1st -->
<div class="bucket">
... Content of visible part of bucket...
Show More.
<!--Below is the rest part when we click on the above link, Showrest it will show-->
<div class="restPart" id="restPart">
... Content of Rest Part and click on the Show Less It will hide this div...
Show Less.
</div>
</div>
<!--2nd -->
<div class="bucket">
... Content of visible part of bucket...
Show More.
<!--Below is the rest part when we click on the above link, Showrest it will show-->
<div class="restPart" id="restPart">
... Content of Rest Part and click on the Show Less It will hide this div...
Show Less.
</div>
</div>
</section>
What I want
In the like following figures, more div will be generated dynamically, previously all will hide, when I click on first div show the rest content, but rest will not show, please see the figure 2,
Figure 1
Figure 2

As noted by others, remove duplicate IDs.
Judging by your image,
your button Show more, (once clicked - reveals the content and) becomes: Show less so...
change button text (So use a single toggle button!)
toggle/slide the previous DIV
$(function() { // DOM is now ready
$("#grid_content").on("click", ".toggle", function(evt) {
evt.preventDefault(); // Prevent window following #hash / jump
var more = $(this).text() === "Show More";
$(this).text(more ? "Show Less" : "Show More").prev(".restPart").slideToggle();
});
});
.bucket {
width: 290px;
float: left;
margin: 0 0 48px 20px;
border: 1px solid #262626;
background: lightgray;
}
.restPart{
overflow:auto;
display:none; /* hide initially */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="grid_content">
<div class="bucket">
<p>Visible part....</p>
<div class="restPart">
<p>Content...</p>
</div>
Show More
</div>
<div class="bucket">
<p>Visible part....</p>
<div class="restPart">
<p>Content...</p>
</div>
Show More
</div>
</section>

First of all - your naming strategy is a bit wrong. HTML document can contain (by standards) only one object with one ID - that's the purpose of ID as such. So, you can't have many objects with id="showRest" or id="restPart" or id="showless".
Possible solution for your problem.
Design your HTML something like
<div class="bucket">
<div class="mininfo">
<div class="intro">some intro bucket 1...</div>
Show more
</div>
<div class="maxinfo" style="display: none;">
<div class="intro">Here is full content 1 of everything</div>
Show less
</div>
</div>
<div class="bucket">
<div class="mininfo">
<div class="intro">some intro bucket 2...</div>
Show more
</div>
<div class="maxinfo" style="display: none;">
<div class="intro">Here is full content 2 of everything</div>
Show less
</div>
</div>
Next, in JavaScript part you can use selectors such as:
$(".bucket .showmore").on('click', function(){
var $bucket = $(this).parents('.bucket');
$bucket.find('.mininfo').hide();
$bucket.find('.maxinfo').show();
});
$(".bucket .showless").on('click', function(){
var $bucket = $(this).parents('.bucket');
$bucket.find('.mininfo').show();
$bucket.find('.maxinfo').hide();
});
Updated 1: added two buckets to example.
Updated 2: example in JSFiddle
Updated 3: update in JSFiddle with some content kept

Last created DIV to be above other DIVs

I'm creating DIVs dynamically and appending them to a particular DIV.
My question is how do I always make the last created DIV to be above other DIVs within the appended (its parent) DIV?
So basically I want the last created DIV to be on the top level of the other.
DIV 4 - [created at 4:32pm]
DIV 3 - [created at 4:29pm]
DIV 2 - [created at 4:27pm]
DIV 1 - [created at 4:26pm]
the dynamic DIV css:
.dynamicDIV{
width:100%;
position: relative;
}
the append DIV css:
.parentDiv{
width: 100%;
margin-top: 5px;
}
I'm not referring to the z-index. I want to position it above the others.

var parentElement;
var newFirstElement;
parentElement.insertBefore(newFirstElement, parentElement.firstChild);

As I pointed out in my comment, .prepend() can be used here:
$('.parentDiv').prepend('<div class="dynamicDIV">New Div</div>');
but there is a second possibilty:
$('<div />').addClass('dynamicDIV').text('New Div').prependTo('.parentDiv');
This solution is a bit more maintainable.
Demo
Reference
.prepend()
.prependTo()

Use .prepend() on whatever element you want to be preceeded with the new one:
http://api.jquery.com/prepend/

When a DIV is at position: absolute, the last sibling in the DOM is over the others. This doesn't depend on the time you inserted it.
But you can override this behavior by using z-index: 1.
Look at this HTML code:
<style>
div.container > div {position: absolute; z-index: 0}
div#C {z:index: 7}
</style>
<div class="container">
<div id="A">A</div>
<div id="B">B</div>
<div id="C">C</div>
<div id="D">D</div>
</div>
This code will display C hidding D, hidding B, hidding A.

CSS with display:flex and flex-direction:column-reverse; can help you:
body {/* parent container of div to shw in a reverse flow*/
display:flex;
flex-direction:column-reverse; /* row-reverse if on line*/
}
div {
width:50%;
border:solid;
margin:auto;
}
div:last-of-type:after {
content:'last in document !';
color:red;
}
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
<div> 4 </div>
anyway, in the DOM or for CSS selector, last will be last. reverse order only shows at screen.

Positioning a hide/show div relative to trigger

I'm struggling to find the right Jquery to show/hide a div at a height that is parallel to the trigger button. I attempted to offset the show/hide div to the right, but because the footnotes appear in different left/right positioning, each would be different. Instead, I will need to place the divs inside of another div along the right.
My hope is to add hyperlinked footnotes to some text, so that readers will not have to search for the footnotes, but also won't be overwhelmed with too much text. I would prefer to have more than one footnote open at a time, but if it needs to be one at a time to properly display, so be it.
EDIT:
#rohan-kumar helped with this code
$('.a_footnote').on('click',function(e){
e.preventDefault();
var divId=$(this).data('divid');
console.log(divId);
$('#'+divId).toggle();
});
So here's the way it stands: http://jsfiddle.net/6n28t/21/
However, my primary problem remains -- how can I make the footnote appear at the same height as the trigger? These will be long pieces of text and I want the footnotes to appear at the same height as the corresponding mark. How can I made [2] appear farther down on the page?

So, basically combining the other answers leads to this Fiddle
Html is the same as what you have in your fiddle.
CSS
.wrapp{
border:1px solid red;
height:100%;
}
.clear{
clear:both;
}
.footnotes div {
position: relative;
display: none;
}
JavaScript
$('.a_footnote').on('click',function(e){
e.preventDefault();
var divId=$(this).data('divid');
var height = $(this).position().top;
console.log(divId);
$(".footnotes div").hide();
$('#'+divId).toggle().css("top", height - 10);
});

You don't need the floats, I am assuming that you would want this text to appear inline in your paragraphs. You need to position the notes absolutely and then set the top/left according to the position of your clicked element + width of element + offset.
jsFiddle Demo
HTML:
<div class="content">
<p> Lorem ipsum ([1]).</p>
<p> Lorem ipsum ([2]).</p>
</div>
<div class="footnotes">
<div class="footnote1">1. Foo Bar</div>
<div class="footnote2">2. Foo Bar</div>
</div>
CSS
.footnotes > div { display: none; position: absolute; border: solid 1px red; }
JavaScript
$('.footnote').on('click', function(e) {
e.preventDefault();
var $note = $('.' + this.id);
var $position = $(this).position();
$('.footnotes > div').hide();
$note.css({
top : $position.top,
left: $position.left + $(this).width() + 5
}).show(); })

Try this,
HTML
<div class="wrapp">
<div class="content" style="float:left;">
<div> Lorem ipsum (<a class="a_footnote" href='javascript:;' data-divid="footnote1">[1]</a>).</div>
</div>
<div class="footnotes" style="float:right">
<div id="footnote1">1. Foo Bar</div>
</div>
<div class="clear"></div>
</div>
CSS
.wrapp{
border:1px solid red;
height:50px;
}
.clear{
clear:both;
}
SCRIPT
$('.a_footnote').on('click',function(e){
e.preventDefault();
var divId=$(this).data('divid');
console.log(divId);
$('#'+divId).toggle();
});
If you want the div.footnotes will be hidden initially, then you need to add a css like
div.footnotes {display:none;}
Fiddle http://jsfiddle.net/6n28t/7