Develop Reference

Scrolling buttons - with jQuery

So I'm working on a list that you can scroll through by clicking on buttons. And it also needs to have a scrollbar visible and working too. But I don't know how to edit my code to get them both to function. I can either have the buttons working or the scrollbar, not both. Can someone help?
var itemsToShow = 3;
$('#scroll>li').each(function(i,k) {
var ele = $(this);
$(ele).attr('id', 'scroll' + i);
});
$('#up').bind('click', function() {
if ($('#scroll0:hidden').length > 0)
{
// This means we can go up
var boundaryTop = $('ul li:visible:first').attr('id');
var boundaryBottom = $('ul li:visible:last').attr('id');
if ($('ul li#'+ boundaryTop).prev().length > 0)
{
$('ul li#'+ boundaryTop).prev().show();
$('ul li#'+ boundaryBottom).hide();
}
}
});
$('#down').bind('click', function() {
if ($('#scroll li:last:hidden').length > 0)
{
// This means we can go down
var boundaryTop = $('#scroll li:visible:first').attr('id');
var boundaryBottom = $('#scroll li:visible:last').attr('id');
if ($('#scroll li#'+ boundaryBottom).next().length > 0)
{
$('#scroll li#'+ boundaryBottom).next().show();
$('#scroll li#'+ boundaryTop).hide();
}
}
});
.lg {
overflow-x:auto;
height:90px;
overflow-y:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="lg">
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ul>
<div id="updown">
<a class="btn btn-primary" id="up" href="#">up</a>
<a class="btn btn-primary" id="down" href="#">down</a>
</div>
What am I doing wrong? Someone please help!
Thank you!

Here is how you scroll to top and bottom:
https://jsfiddle.net/45cmhys8/
// Scroll to the top
$('a#up').on('click', function(){
$('.lg').animate({ scrollTop: 0 }, 600);
})
// Scroll to the bottom
$('a#down').on('click', function(){
$(".lg").animate({ scrollTop:$(document).height()}, 600);
})

You can use the scrollTop() function in jQuery to do this in a one-liner.
10 is the amount of pixels you want to jump up/down.
$('#up').click(function(){
$('ul.lg').scrollTop($('ul.lg').scrollTop()- 10);
});
$('#down').click(function(){
$('ul.lg').scrollTop($('ul.lg').scrollTop() + 10);
});

It looks like you are trying to literally show/hide the fields, which removes them from the flow of the browser. Rather then show/hide, you should probably set the scrollTop position of the scrollable div using javascript, rather then manipulate the elements inside of it.

Bootstrap scrollspy offset and smooth animate

Html:
<div id="mark" class="container">
<div class="col-xs-12">
<img src="/images/newdesk3.jpg" width="60px">
<span>Lorem ipsum dolor</span>
<div id="t3"><button class="btn btn-warning">Buy Now</button></div>
<div id="t2">Technical</div>
<div id="t1">Product presentation</div>
</div>
</div>
...
<div id="similarproducts">
...
</div>
<div id="oneeye">
...
</div>
jquery offset:
var offset = 80;
$('#t2 a, #t1 a').click(function(event) {
event.preventDefault();
$($(this).attr('href'))[0].scrollIntoView();
scrollBy(0, -offset);
});
jquery smooth animate:
$("#t2 a, #t1 a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
}
});
Jquery offset and smooth animate(scrolling) are working individual as a code but when I put them together are not working.
I use jquery version 1.9.1 with Bootstrap v3.3.5
I need to specify an offset position with animate.
What is the proper code jquery to combine these codes and working properly?

the new jquery code will be
$("#t2 a, #t1 a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top -80
}, 800, function(){
window.location.hash = hash;
});
}
});

Window.resize doesn't work unless page is reloaded

I have this responsive layout. What I want to achieve is that at "desktop" size, once a menu link is clicked it will navigate to that part of the page. I want the same thing for "mobile" size. Also, once the menu links are clicked, the menu will slideUp.
I have both of these things working, however it only works when the page is reloaded. To summarize, here are the problems:
At desktop size: navigation is fine, but when resized to mobile the menu doesn't show.
At mobile size: navigation works fine, when resized to desktop it also works fine, but the menu keeps on toggling.
I created a jsFiddle for it. Here is my code:
HTML
<div id="head" class="clearfix">
Pull Menu
<div class="menu-wrap clearfix">
<div class="nav">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>
</div>
</div>
<div id="test1" class="section">Test1</div>
<div id="test2" class="section">Test2</div>
<div id="test3" class="section">Test3</div>
JavaScript
var respMenu = function(event) {
var menu = $('.menu-wrap');
if ($(window).width() < 501) {
$("#pull").on('click', function() {
menu.slideToggle('slow');
});
$(".nav ul li a").click(function() {
menu.slideUp('slow');
});
}
else{
}
return false;
event.preventDefault();
};
var onClick = function() {
$('a').bind('click',function(event){
var $anchor = $(this);
if ($(window).width() > 500) {
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 90 }, 1000,'easeInOutExpo');
}
else{
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 50 }, 1000,'easeInOutExpo');
}
event.preventDefault();
});
};
$(window).load(function(){
respMenu();
onClick();
});
$(window).resize(function(){
respMenu();
onClick();
});

The issue is that you bind a new handler to the click event each time your window is re-sized and you never unbind them. So the handlers number keep increasing, which means that multiple events will be fired after a click once you've re-sized the window.
So what you can do is to unbind the handlers using the unbind or off methods.
Take a look here: http://jsfiddle.net/yohanrobert/p987prdd/

Add class to a child element on scroll (JQuery)

I'm having trouble with jQuery and JS in general. How do I add a class to a child element on vertical scroll in order to animate it?
Ex:
<div class="wrapper">
<p> Lorem ipsum </p>
</div>
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if(scroll <= 770) {
$('.wrapper p').addClass('animate fadeInDownBig');
}
});
I just wanna addClass to the paragraph. Not the wrapper.

As per your recent edit:
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if(scroll <= 770) {
$('.wrapper').find("p").addClass('animate fadeInDownBig');
}
});
DEMO

scroll to the sibling element on click

Please take a look at this FIDDLE that shows and hides the text in a container on click . What I'm trying to do is that when I click open the first hidden text and then scroll down to click open another one, I want it to scroll back to the sibling image of that opened text to keep it in view. How can I find the sibling element and scroll to it on click?
This one is not valid.
$('.slider2').click(function(e) {
var imageposition = $(this).closest('.imageclass');
$(document.body).animate({scrollTop: imageposition.offset().top}, 'fast');
});
HTML:
<div class="container" style="border:2px solid #222;">
<img class="imageclass" style="width:100px;height:100px" src ="image.jpg">
<div class="slider2">Hi</div>
<div class="internal" style="display: block;">Text<p></p></div>
</div>
<div class="container" style="border:2px solid #222;">
<img class="imageclass" style="width:100px;height:100px" src ="image.jpg">
<div class="slider2">Hi</div>
<div class="internal" style="display: block;">Text<p></p></div>
</div>
..............
JS:
$('.slider2').click(function(e) {
e.preventDefault();
$(this).next(".internal").load($(this).data("ship"));
$('.internal').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
var imageposition = $(this).closest('.imageclass');
$(document.body).animate({scrollTop: imageposition.offset().top}, 'fast');
});
$('.internal').hide();

You've at least a couple of problems here
$(this).closest('.imageclass') doesn't select the image that is previous sibling of <a>
even if you get your desired image, the moment your scrolling code runs, the image has not placed itself to its final position.
using $(document.body) to scroll the window (I'm doubtful about it myself)
Below code selects the right image element, gets the scrolltop at right moment, and scrolls the html, body using working syntax.
$(function () {
$('.slider2').click(function (e) {
e.preventDefault();
$(this).next(".internal").load($(this).data("ship"));
$('.internal').slideUp('normal');
var imageposition = $('.imageclass', $(this).closest('.container'));
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal', function () {
$('html, body').animate({scrollTop: $(imageposition).offset().top})
});
}
});
$('.internal').hide();
});

There's a bit of a problem with how your scrolling function works because the position of the active .container alters in relation to other containers(when active and inactive state).
Also, you should not be looking for the closest position but for its parent element.
Please take a look at my code: CSS
.slider2 {
margin:40px;
}
.internal p {
padding:5px;
}
.internal h3 {
text-align:center;
}
.container {
position: relative;
}
You might need to look for a way, to detect the height of an inactive container since I made mine as a static value.
JS:
$('.slider2').click(function (e) {
e.preventDefault();
$(this).next(".internal").load($(this).data("ship"));
var containerHeight = 205;
var containerIndex = $(this).offsetParent().index();
$('.internal').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
var scrollPosition = containerHeight * containerIndex;
$('body').animate({
scrollTop: scrollPosition
}, 'fast');
});
$('.internal').hide();