Develop Reference

Click to scroll to content within div JQuery not working correctly

I have a tabbed section which has content in div scrolling based on link clicked position but scrolling is not working properly, here is the JSfiddle demo
and this is the code firing on click
$(document).ready(function ($){
$('.scrollable_tab > ul > li > a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if( target.length ) {
event.preventDefault();
$('.scrollable_content_main').stop().animate({
scrollTop: target.offset().top
}, 1000);
}
});
});
Please help!

You need to take an account of the container div as well.
Try like this.
$('.scrollable_tab > ul > li > a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
console.log($(".scrollable_content_main").scrollTop()+target.offset().top );
if( target.length ) {
event.preventDefault();
$('.scrollable_content_main').animate({
scrollTop: $(".scrollable_content_main").scrollTop() + target.offset().top
}, 1000);
}
});
Fiddle : https://jsfiddle.net/xcht52eh/

How to make active class in <ul> <li> menu visible at loading page first

I'm just begin learn js, and have a problem.
This sidebar menu.
http://jsfiddle.net/q8b041s5/
How i can get visible display block, if line <li> or <ul> is active?
Tis need, when go to link, sidebar menu was in the same place of click.
(function ($) {
$(document).ready(function () {
$(document).ready(function () {
$('#cssmenu > ul > li ul').each(function (index, e) {
$(e).closest('li').children('a');
});
$('#cssmenu > ul > li > a').click(function () {
$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');
var checkElement = $(this).next();
if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return true;
}
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if ($(this).closest('li').find('ul').children().length == 0) {
return true;
}
return false;
});
});
});
})(jQuery);

Not sure that I understood correctly but in common case you can emulate clicking on menu when you need it (for example when page loaded):
$('#cssmenu > ul > li > a').click();

jquery issues when changing active navigation class on scroll and on click

I'm doing a single page where navigation .active class should change both on scroll and on click. I'm also changing class of header when scrolling down (".large" and ".small"), but this two scripts somehow don't work with each other.
For header resizing I'm doing this:
$(document).on("scroll",function(){
if($(document).scrollTop()>200){
$('header').removeClass('large').addClass('small');
} else{
$('header').removeClass('small').addClass('large');
}
});
For change active class I'm doing this:
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#top-menu a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.
position().top + refElement.height() > scrollPos) {
$('#top-menu ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
This works perfectly when scrolling, but clicking on a top nav link just crashes "header" function and it doesn't resize anymore. Can anyone see what's the problem is?

As f00bar mentioned, $(document).off("scroll"); removes the eventhandler. The scroll event wont be fired anymore. so your top code wont run after a click.

jquery scroll issues on ipad

http://jqueryfordesigners.com/demo/scroll-link-nav.html
The link above is more or less what im looking for in terms of the active state responding to the scroll position.
But if one tries this on an ipad the active state sticks in certain places and trying to navigate purely by tapping the buttons, it stops scrolling after the first tap.
Anyone know any fixes for this for the ipad issues?

I have one solution which does the scrolling on all browsers
http://jsfiddle.net/t9mna/1/ all browsers
$("nav ul li a").click(function(){
$(".selected").removeClass("selected");
$(this).addClass("selected");
var $scrollTo = $($(this).attr("href"));
$('html, body').animate({
scrollTop: $scrollTo.offset().top
}, 500);
});
​and another for just iPad, i don't have an iPad so i personally can't test it so let me know how it goes
http://jsfiddle.net/t9mna/3/ just for iPad //not been tested by me
function isiPad() {
return navigator.userAgent.match(/iPad/i);
}
$("nav ul li a").click(function(){
$(".selected").removeClass("selected");
$(this).addClass("selected");
var $scrollTo = $($(this).attr("href"));
$(function() {
if ($(isiPad).length != 1) {
$('html, body').animate({
scrollTop: $scrollTo.offset().top
}, 500);
}
});
});​

$("nav ul li a").click(function(){
$(".selected").removeClass("selected");
$(this).addClass("selected");
var $scrollTo = $($(this).attr("href"));
$(function() {
if ($(isiPad).length != 1) {
$('html, body').animate({
scrollTop: $.scrollTo.offset().top //point
}, 500);
}
});
});​

Using multiple tab-blocks on the same page (jQuery)

$('.tabbed-block .tab-content:first').show();
$('.tabbed-block ol li:first').addClass('active');
$('.tabbed-block ol li a').click(function () {
$('.tabbed-block ol li').removeClass('active');
$(this).parent().addClass('active');
var a = $(this).attr('href');
$('.tabbed-block .tab-content').hide();
$(a).show();
return false;
});
.. works great, but not if used more than once of the same page, interferes with each other. What should I change?
Thanks!

This should work. Although, why aren't you just using jQuery UI Tabs?
$('.tabbed-block').each(function(){
var $block = $(this);
$block.find('.tab-content:first').show();
$block.find('ol li:first').addClass('active');
$block.find('ol li a').click(function () {
var $link = $(this);
$link.closest('ol').find('li a').removeClass('active');
$link.parent().addClass('active');
var a = $link.attr('href');
$link.closest('.tabbed-block').find('.tab-content').hide();
$(a).show();
return false;
});
});