We Keep Coding

JS Scrolling doesn't seem to work on my website

So I am trying to use the smooth scrolling animation used in this template:
https://blackrockdigital.github.io/startbootstrap-scrolling-nav/
After adding the js files to my directory, including the basic JQuery files, I've seen the custom .js file that adds the scrolling uses the .class parameter in an anchor tag to detect if clicking it should trigger the smoothscrolling. So I added those to my anchor tags.
Below is the relevant code.
I will include a live preview too.
index.html file
<!-- Navigation section -->
<section class="nav" id="nav">
<div class="container">
<div class="row" style="width: 100%; text-align: center;">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<a class="js-scroll-trigger btn btn-lg btn-nav" href="#about">About me</a>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<a class="js-scroll-trigger btn btn-lg btn-nav" href="#work">My work</a>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<a class="js-scroll-trigger btn btn-lg btn-nav" href="#contact">Contact</a>
</div>
</div>
</div>
</section>
Script imports in index.html
<!-- Import js -->
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
Scrolling-nav.js
(function($) {
"use strict"; // Start of use strict
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[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, "easeInOutExpo");
return false;
}
}
});
})(jQuery); // End of use strict
I have nearly no experience with JQuery / JS, so it's hard for me to understand where it might be going wrong.
Here is a live preview of the website with above code in it:
Live preview
Full code:
Github link
If there's any information missing, let me know.

jQuery is missing, and you're using jQuery in your click event...

Add this code in you jquery
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});

How to disable the option: Open in new tab [duplicate]

This question already has answers here:
How to disable or hide the Open In New Tab option for hyperlinks [closed]
(3 answers)
Closed 8 years ago.
How to disable the option: Open in new tab
I asynchronously loading content is responsible for what the code below:
jQuery:
$(document).ready(function()
{
init();
$(window).resize(init);
$('#floatMenu,#smallMenu').find('>a').click(function()
{
var t = this;
$('#wynik').animate({opacity:0}, 'fast', function()
{
$(this).load(t.href, function()
{
$(this).animate({opacity:1}, 'fast');
})
});
//$('#wynik').load(this.href);
$(this).addClass('active').siblings().removeClass('active');
}).first().click();
});
HTML:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="list-group" id="smallMenu">
TEXT
TEXT
TEXT
TEXT
TEXT
</div>
</div>
</div>
<div class="row">
<div class="col-md-3" id="menu-padding-top">
<div class="list-group" id="floatMenu">
TEXT
TEXT
TEXT
TEXT
TEXT
</div>
</div>
<div class="col-md-9">
<div id="wynik">
{* Here is content loading. *}
</div>
</div>
</div>
</div>
I tried swapping to (jQuery code as well) and href to data-href - does not work.

... try to add preventDefault() inside the .click() handler. Without it when you click the link the browser navigate to the page indicate to the href attribute.
Add this line:
e.preventDefault();
in your code:
$(document).ready(function()
{
init();
$(window).resize(init);
$('#floatMenu,#smallMenu').find('>a').click(function(e)
{
e.preventDefault(); //ADD HERE
var t = this;
$('#wynik').animate({opacity:0}, 'fast', function()
{
$(this).load(t.href, function()
{
$(this).animate({opacity:1}, 'fast');
})
});
//$('#wynik').load(this.href);
$(this).addClass('active').siblings().removeClass('active');
}).first().click();
});
now you block the loading of a new page. And javascript perform your handler without redirect you in a new page.
AN EXAMPLE...

Just add the event.preventDefeult() function on the first line of your handler, like this:
$('#floatMenu,#smallMenu').find('>a').click(function(event)
{
event.preventDefault();
var t = this;
$('#wynik').animate({opacity:0}, 'fast', function()
{
$(this).load(t.href, function()
{
$(this).animate({opacity:1}, 'fast');
})
});
//$('#wynik').load(this.href);
$(this).addClass('active').siblings().removeClass('active');
}).first().click();

Execute function on clicking any element in a page except for two elements (in jQuery Mobile, jQM)

Execute a function on clicking any element in a page (with id='home_page') except for two elements (id='link1', id='link2'). These two elements have different function to execute on click.
The below are the two jQuery codes I've tried unsuccessfully.
Code1:
$( document ).on("pageinit", '#home_page', function () {
$('#home_page').not('#link1, #link2').click(function(){
alert();
});
});
Code2:
$( document ).on("pageinit", '#home_page', function () {
$('#home_page:not(#link1, #link2)').click(function(){
alert();
});
});
The below is the jQM code for the page:
<div data-role="page" id="home_page">
<div data-role="header" data-theme="a" ><!-- Header -->
<a id='link1' href="/done" rel="external">Home</a>
<a id='link2' href="/exit" rel="external">Exit</a>
</div><!-- Header -->
<div data-role="content">
<p>Home Page</p>
<!-- Other elements -->
</div>
</div>

I think you should use .on() method for binding events and as suggested in other answer you have a missing closing tag }); for click event:
$( document ).on("pageinit", '#home_page', function () {
$('#home_page').not('#link1, #link2').on('click touchstart', function(){
alert(); //---try adding "touchstart"--------^^^^^^^^^^
});
});
and make sure that you have stopped the event to bubble up on '#link1, #link2' links with event.stopPropagation(); only if you have bound some js events to these links.
As per your comments i just came with this:
$(function () {
$('#home_page').not('#link1, #link2').click(function () {
alert('page clicked');
});
$('#link1, #link2').click(function (e) {
e.stopPropagation(); //<---stops the event to bubble up
});
});
What i noticed you have mentioned the href for your anchor tag to http://www.google.com/, what seems to me that navigating to google is not working in the fiddle while other link is working properly.
Try to change the first link href to this:
<a id='link1' href="http://www.apple.com/mac/" rel="external">link1</a>
<a id='link2' href="http://www.apple.com/" rel="external">link2</a>
Demo # Fiddle

Seem like you're missing closing }) for your click function:
$( document ).on("pageinit", '#home_page', function () {
$('#home_page').not('#link1, #link2').click(function(){
alert();
}); // <-- Here
});

jQuery smooth scrolling to anchor after button clicked

I can't get this to smoothly scroll down to the anchor for some reason. Can anybody see why?
This is the html:
<div id="onward">
<a href="#xdroneslogan" class="btn">
<i class="icon-chevron-down icon-white"></i> Onward
</a>
</div>
This is the javascript:
<script>
$("#onward a").click(function(){
var onwardId = $(this).attr("href");
$("html, body").animate({scrollTop: $(onwardId).offset().top}, "slow");
return false;
});
</script>

Try this out:- http://jsfiddle.net/adiioo7/bguAG/1/
JS:-
$("#onward a").click(function () {
var onwardId = $(this).attr("href");
$("html, body").animate({
scrollTop: $(onwardId).offset().top
}, "slow");
return false;
});
HTML:-
<div id="xdroneslogan" style="height:1000px;background:red;"></div>
<div id="onward">
<i class="icon-chevron-down icon-white"></i> Onward
</div>
Also make sure the jQuery.fx.off is set to false.

Why is this JavaScript function not working?

I am working with bootstrap and attempting to create a button in tab 1 which "activates" (switches to) tab 2.
Here's my code:
HTML navigation tabs:
<ul id="pageSwitcher" class="nav nav-tabs" style="width:100%;">
<li>Page One</li>
<li>Page Two</li>
</ul>
HTML tab content:
<div class="tab-content" style="width:100%;">
<div class="tab-pane active" id="page1">
<button type="button" onclick="showPageTwo();">Proceed to page 2</button>
</div>
<div class="tab-pane" id="page2">
<p>Page 2 content here!</p>
</div>
</div>
JavaScript:
<script type="text/javascript">
$(document).ready(function() {
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
}
});
function showPageTwo() {
$('#pageSwitcher li:eq(1) a').tab('show');
}
</script>
Anyone willing to provide some insight as to where exactly I'm going wrong? I've copied several examples almost exactly... clicking on the tabs themselves works fine, I just can't seem to make a button at the bottom of page 1 that activates page 2.

One: bad form, inline onclick call... you don't need it, get rid of it:
<button type="button">Proceed to page 2</button>
Two: you have two JS errors. You didn't close your .click() function, and you're trying to trigger the first tab with the specifier of li:eq(0)...
$(document).ready(function() {
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
// ALSO, you were missing a closing paren, here!
});
//two issues ... onclick inside your button is trying to access
// your function before it's available... inline js like that, bad idea anyhow
// so hook into it inside your DOM ready code here anyhow.
var showPageTwo = function() {
// secondly, you're looking at the wrong item!
// li:eq(0) means "look at the first li in the array of li"
$('#pageSwitcher li:eq(1) a').tab('show');
};
$(".tab-content").on("click","#page1 button", showPageTwo);
});
See this jsFiddle for a working example: http://jsfiddle.net/mori57/Xr9eT/

Give your button an ID :
<div class="tab-content" style="width:100%;">
<div class="tab-pane active" id="page1">
<button type="button" id="myButton">Proceed to page 2</button>
</div>
<div class="tab-pane" id="page2">
<p>Page 2 content here!</p>
</div>
</div>
and just trigger a click on the right anchor, bootstrap does the rest :
$(document).ready(function() {
$('#myTab a').on('click', function(e) {
e.preventDefault();
$(this).tab('show');
});
$('#myButton').on('click', function() {
$('.nav-tabs li:eq(1) a').trigger('click');
});
});

You should not use specific code for your button, but generic event-driven process:
- you should add an attribute to your button to specify towards which page it will redirect
- then attach a click event
- attach click event to tabs to do the same
HTML:
<button type="button" id="btn" gotoPage="#page2">Proceed to page 2</button>
JS to process tab switching:
function showPage(pageId){
$('.tab-pane').each(function(){
$(this).removeClass('active');
$(this).hide();
});
$(pageId).show();
$(pageId).addClass('active');
}
(Not sure you need to use show or hide functions if you CSS manages thats thanks to active class)
Then for your button:
$('#btn').click(function(){
var destPage = $(this).attr('gotoPage');
showPage(destPage);
});
For tabs:
$('#pageSwitcher a').each(function(){
$(this).click(function(e){
showPage($(this).attr('href'));
});
});
And you can load page one at startup, if needed:
$(document).ready(function(){
showPage("#page1"); // default: load page 1
});
Example: http://jsfiddle.net/DSbrj/1/

showPageTwo() should be declared outside of the document.ready() call.