I'm trying to use a bootstrap tab click function but I'm having trouble with also using the animation for an anchor tag I got from stackoverflow. It seems like the on click function is messing up the on click function for the tab Is there a way around this?
<div id="tab1">
<ul class="tab1-titles">
<li class="active">
Tab1
</li>
<li>
Tab2
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="1a">
<ul>
<li>list-item-1</li>
<li>list-item-2</li>
</ul>
</div>
<div class="tab-pane active" id="2a">
<ul>
<li>list-item-1</li>
<li>list-item-2</li>
</ul>
</div>
</div>
</div>
Javascript
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
instead of adding new click event handler, just use built-in tab change event like below
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
var hash = $(e.target).attr("href");
//your code goes here
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(hash);
target = target.length ? target : $('[name=' + hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
}
}
});
I had a co-worker look at it for me and he suggest of just adding a class to the anchor tag within this script. So I did and it works perfectly! I just had to make a more direct call for this function to work. He even added a offset scrolltop just in case you have a fixed header into the equation.
$('a[href^="#"].anchortargets:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: parseInt(target.offset().top) - 140 + 'px'
}, 500);
return false;
}
}
});
Related
when I click on navbar item the hash link scroll event not matched with the correct nav menu item
I tried to change the 'scrollto' variable up or down but the problem still exists
below is the code :
// Smooth scroll for the menu and links with .scrollto classes
var scrolltoOffset = $('#header').outerHeight() - 21;
var clicked = false;
$('.nav-menu a, #mobile-nav a, .scrollto').on('click', function(e) {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
debugger;
if (target.length) {
e.preventDefault();
var scrollto = target.offset().top - scrolltoOffset;
if ($(this).attr("href") == '#header') {
scrollto = 0;
}
$('html, body').animate({
scrollTop: scrollto
}, 1500, 'easeInOutExpo');
if ($(this).parents('.nav-menu').length) {
$('.nav-menu .menu-active').removeClass('menu-active');
$(this).closest('li').addClass('menu-active');
}
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('#mobile-nav-toggle i').toggleClass('fa-times fa-bars');
$('#mobile-body-overly').fadeOut();
}
return false;
}
}
});
this is the live site innovators.com
Easy fix. You are not scrolling enough.
Just scroll two pixels less: -21 => -23
// Smooth scroll for the menu and links with .scrollto classes
var scrolltoOffset = $('#header').outerHeight() - 23;
var clicked = false;
$('.nav-menu a, #mobile-nav a, .scrollto').on('click', function(e) {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
debugger;
if (target.length) {
e.preventDefault();
var scrollto = target.offset().top - scrolltoOffset;
if ($(this).attr("href") == '#header') {
scrollto = 0;
}
$('html, body').animate({
scrollTop: scrollto
}, 1500, 'easeInOutExpo');
if ($(this).parents('.nav-menu').length) {
$('.nav-menu .menu-active').removeClass('menu-active');
$(this).closest('li').addClass('menu-active');
}
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('#mobile-nav-toggle i').toggleClass('fa-times fa-bars');
$('#mobile-body-overly').fadeOut();
}
return false;
}
}
});
I have this function that I found online that causes the href in my tags to be scrolled to rather than just appear there:
$(function () {
var headerHeight = 70;
$('a[href*=#]:not([href=#])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - headerHeight
}, 1000);
return false;
}
}
});
});
Now I need to get to a location in the page by using javascript code because I have an awkward situation where the form submit button should also scroll to a location:
<div
value="GO"
id="go-div"
class="bubble">
<input type="submit"
value="GO"
id="go-button"
style=" position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;"
onclick="location.href='#search-results-page';">
</input>
</div>
So how do I change the location.href='#search-results-page'; to use the scrolling function?
Multiple ways to do that. Here is an example: https://jsfiddle.net/nx7xf1nb/
$(function () {
var headerHeight = 70;
$('a[href*="#"]:not([href="#"])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
if (gotoTarget(this.hash))
return false;
}
});
$('input[data-target]').click(function() {
if (gotoTarget($(this).data("target")))
return false;
})
function gotoTarget(targetName) {
var target = $(targetName);
target = target.length ? target : $('[name="' + targetName.slice(1) + '"]');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - headerHeight
}, 1000);
return true;
}
return false;
}
});
Button:
<input style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
type="submit"
data-target="#search-results-page"
value="GO"
id="go-button">
I'm learning jquery and found a script for smooth scrolling on click, which works perfect, but I don't understand it and I want to understand the code and why does what it does:
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
First I get that it begins with:
$('a[href*="#"]:not([href="#"])').click()
this says that every time you click on something with a href link to a '#'
then
if(location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname)
I have no idea what is that
neither this:
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1)
what is ".hash"? and what about the '?'? and the ':'?
the rest I got it.
thanks!
hash is the string that follows the #. So in the url index.html#path the hash will be path. The pathname checks if it's under the same original hostname and page, so it's a URL that points to the same page and will be scroll, if it's another page, scroll has no sense.
Ternary operators are like if() statements but in shorthand:
var a = (b == 1) ? "b equal one" : "b not equal one";
It's the same as:
var a;
if(b == 1) {
a = "b equal one";
} else {
a = "b not equal one";
}
I need something link this
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top-55
}, 1000);
return false;
}
}
});
});
But it works only for that link offer. I want that this code works for this link for example offer2
I think your jquery selector is wrong.
See
http://jsfiddle.net/9shvmhwh/5/
$(function() {
$("a[href*='#']:not([href='#'])").click(function(event) {
location = $(this).attr('href');
event.stopPropgation();
return true;
});
});
How can I add a 3 seconds pause before the smooth scroll?
The user will click on the button, then there will be a sleep of 3 seconds and then the smooth scroll will run.
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
You could add an setTimeout() like so:
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
setTimeout(function(){
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
}, 3000);
return false;
}
}
});
});
You could use the JavaScript-standard setTimeout() function:
JavaScript
setTimeout(function () {
// function that is executed after the timer ends
}, 3000);
As you can see, the setTimeout function takes two parameters: a handler (function) that will be executed after the timer ends, and an integer, that defines the timer duration in milliseconds.
If you are unfamiliar with all this "handling" concept, consider the below example instead, where we do the same, but first "save" the function in a variable:
JavaScript
var fnCallback = function () {
console.log('This plague works.');
};
// Call setTimeout() with a handler function (fnCallback), and an integer (3000)
setTimeout(fnCallback, 3000);