Develop Reference

disable on click animation to deselect choice

I have a button that does a "flyin" animation when click. But if the user clicks the button to deselect their choice i need to disable the animation.
The class changes when they have selected their choice from ".simple-button" to ".simple-button active".
jQuery(document).ready(function ($) {
$(".simple-button").on('click', function () {
//Scroll to top if cart icon is hidden on top
$('html, body').animate({
'scrollBottom': $(".view-my-beds").position().top
});
//Select item image and pass to the function
var itemImg = $(this).parent().find('img').eq(0);
flyToElement($(itemImg), $('.view-my-beds'));
});
});

It my experience, it's best to add a class on click. This means we can detect if it's in use, thus - making your problem simple to solve:
$('.simple-button').on('click', function ()
{
if (!$(this).hasClass('active')) {
$('html, body').animate({
'scrollBottom': $('.view-my-beds').position().top
});
var itemImg = $(this).parent().find('img').eq(0);
} else {
// do whatever without animation
}
})

Bootstrap scrolling navbar issues

The website I'm working on: zarwanhashem.com
You can find my previous question (which includes my code) here: Bootstrap one page website themev formatting problems
The selected answer solved my issues but I have another problem because of the jQuery adjustment with the -50. Now the navbar incorrectly indicates the page I am on. i.e. The navbar is supposed to darken the section that you are currently in. So if you click "about" it will take you to the about page and darken the about link in the navbar. But the link BEFORE the page you are on is highlighted because the -50 makes the navbar think that it is on the previous section. You can easily try this to see what I mean.
How can I fix this? Thanks. The reason I didn't add this onto my old question is because the person stopped looking at it.
Also please keep your explanations simple/dumb them down a little for me. I know very basic HTML and CSS, and I don't know any Javascript.
scrolling js:
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top -50
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
js added at end of document as suggested by poster in previous question:
$(window).ready(function(){
$('div[class^="content-section"]').css('min-height', $(window).height());
})

You are putting the .active class on the wrong element somehow. You need to put the .active class on the clicked element. You should handle the active state with js. This is my solution based on your HTML structure but I'm sure there are different solutions as well.
$(document).on('click', '.page-scroll', function(event) {
var clicked = event.target; //get the clicked element
if($(clicked).closest('ul').hasClass('dropdown-menu')){ //check if clicked element is inside dropdown
$(clicked).closest('ul').parent().siblings().removeClass('active'); //remove active class from all
$(clicked).closest('ul').parent().addClass('active'); add active class on clicked element parent - in your case <li> tag.
}else{
$(clicked).parent().siblings().removeClass('active');
$(clicked).parent().addClass('active');
}
}
Let me know if this works for you.
EDIT after you posted your code
Try replacing your function with this:
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top -50
}, 1500, 'easeInOutExpo');
if($($anchor).closest('ul').hasClass('dropdown-menu')){
$($anchor).closest('ul').parent().siblings().removeClass('active');
$($anchor).closest('ul').parent().addClass('active');
}else{
$($anchor).parent().siblings().removeClass('active');
$($anchor).parent().addClass('active');
}
event.preventDefault();
});
});

here is a work around this problem.
just change the contents of your scrolling-nav.js to the following:
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top -50
}, 1500, 'easeInOutExpo', function(){
$('ul.navbar-nav li, ul.dropdown-menu li').removeClass('active');
$($anchor).parent('li').addClass('active');
});
event.preventDefault();
});
});

Scroll to NEXT/PREV buttons with Bootstrap ScrollSpy

I was looking through answers for creating next and prev buttons that go through anchor points on a page, but couldn't find something I need. This one might of been close to what I wanted so I decided to use it as a starting point: How can I make a link go to the next anchor on the page without knowing anchor name?
I created a fiddle with the concept presented in that answer and tried to make it work together with bootstrap's scrollspy (detects the current section and anchor).
I have gotten this far: http://jsfiddle.net/gukne0oL/2/
$('.next').click(function (e) {
e.preventDefault();
var current_anchor = $('li.active a');
var next_anchor = current.next('li a');
$('body').animate({
scrollTop: next_anchor.offset().top
});
})
$('.previous').click(function (e) {
e.preventDefault();
var current_anchor = $('li.active a');
var previous_anchor = current.prev('li a');
$('body').animate({
scrollTop: previous_anchor.offset().top
});
})
The original answer targets the <a> tag, but in bootstrap's scrollspy, it adds the active class to the <li> tag wrapping the <a> tag. So I changed it accordingly... I feel like it's close? but I can't tell...
Can anyone help? Thank you!

Target active li, find the previous/next li, and drill down to the anchor.
http://jsfiddle.net/gukne0oL/9/
// Activate bootstrap scrollspy
$('body').scrollspy({
target: '.navbar'
})
$('.next').click(function (e) {
var next = $('.navbar ul li.active').next().find('a').attr('href');
$('html, body').animate({
scrollTop: $(next).offset().top
}, 500);
})
$('.previous').click(function (e) {
var prev = $('.navbar ul li.active').prev().find('a').attr('href');
$('html, body').animate({
scrollTop: $(prev).offset().top
}, 500);
})

.js ScrollTop to div or section tag

I have the following script that allows me to add an anchor-link with a .class attached to my HTML document, which would then scroll the user to a position on the webpage when clicked on.
HTML:
<li class="about-scroll">About</li>
JavaScript:
$('.about-scroll').click(function () {
$('body,html').animate({
scrollTop: 646
}, 1600);
return false;
});
This works fine, however, as the content isn't always static (drop-down accordions, a responsive layout etc.), how would I be able to scroll to a specific #div or section tag rather than a numeric value on the page?
Example:
<div class="about">
<h3>About</h3>
...
...
...
</div> <!-- end .about -->

Give the h3 an id, say header. Then, you would reference the click event by using href="#header"
HTML
<h3 id="hi">HIIIIII</h3>
Scroll to Top
jQuery
$('a').on('click', function (e) {
e.preventDefault(); // prevents default action of <a>
var target = this.hash, // gets the href of the <a>
$target = $(target); // puts it as a selector
$('html, body').stop().animate({
'scrollTop': $target.offset().top // scrolls to the top of the element clicked on
}, 900, 'swing', function () {
window.location.hash = target;
});
});
Fiddle
The great thing about this function is that it is reuseable

If you're OK with no animation you can go with the answer which says just give the element you want to go to an ID and reference it with href="#the_id_you_placed"
for animation, you can still use the ID, but find the offset and animate to there:
$('.about-scroll').click(function () {
$('body,html').animate({
scrollTop: $('#the_id_you_placed').offset().top
}, 1600);
return false;
});

How can I make it jump to "a name" part when a link is clicked?

This code automatically inserts value to input field class name chat_box when a link is clicked.
Now, it works completely fine.
I want to add one more action here.
I want it to jump to chat_box part when a link is clicked.
How can I do that?
jQuery(document).ready(function () {
$(document).on('click', 'a#username', function() {
$(".chat_box#body_input").val($(this).attr('value'));
});
});

Use scrollIntoView
$(".chat_box#body_input").val($(this).attr('value'))[0].scrollIntoView();
Changed requirement:
In case you need to jump 20px above of chat_box and focus to the input field, try this:
var input = $(".chat_box#body_input");
input.val($(this).attr('value'));
$(document).scrollTop(input.offset().top - 20);
input.focus();

You can do this:
$(document).on('click', 'a#username', function (e) {
e.preventDefault(); // Cancel the default action (navigation) of the click
var $elem = $(".chat_box#body_input");
$elem.val(this.value);
$('html, body').animate({
scrollTop: $elem.offset().top - 20
}, 'slow');
});