I'm not really a jquery expert so please bear with me. I have "googled" but couldn't find any solution.
Here is the code:
<div id="navbarResponsive" class="collapse navbar-collapse col-auto">
<ul id="primary-menu" class="navbar-nav text-uppercase">
<li id="menu-item-1725" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1725 nav-item">Home</li>
<li id="menu-item-1739" class="nav-item menu-item menu-item-type-custom menu-item-object-custom menu-item-1739"><a rel="nav-link js-scroll-trigger" href="#services" class="nav-link js-scroll-trigger">Services</a></li>
<li id="menu-item-1735" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1735 nav-item">Portfolio</li>
<li id="menu-item-1736" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1736 nav-item">About</li>
</ul>
Here is the portion of the script/snippet:
(function($) {
"use strict"; // Start of use strict
$('a.nav-link.js-scroll-trigger').click(function(e) {
console.log(e);
});
$('.js-scroll-trigger').on('click', 'a', function(e) {
console.log(e);
});
$('li').find('a.js-scroll-trigger').click(function(e) {
console.log(e);
});
$('a').click(function(e) {
console.log(e);
});
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(e) {
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 - 54)
}, 1000, "easeInOutExpo");
return false;
}
}
});
The problem is that it only triggers $('a') and ignores the rest of the selectors.
I have tried checking it on the browser:
console - https://www.screencast.com/t/sikIcYY1J
sources using debugger -- https://www.screencast.com/t/TgbNhIb1usy
It appears that it was targeting the correct selectors but fails to trigger the condition as shown above. My smooth scrolling won't work anymore unless I place $('a') as the only condition. It used to work few days before, I dunno what happened. Something must have triggered it not to work. Could someone please enlighten me? Answers would really be appreciated, many thanks...
change target.length to $(target).length
add e.preventDefault();
fix var target = this.hash;
but, why do you need this for? if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
All you need is this:
$(function() {
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(e) {
e.preventDefault();
var target = this.hash;
if ($(target).length) {
$('html, body').animate({
scrollTop: ($(target).offset().top - 54)
}, 1000, "easeInOutExpo");
return;
}
});
});
Anyway, here is the fix to your script.
$(function() {
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(e) {
e.preventDefault();
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 - 54)
}, 1000, "easeInOutExpo");
console.log(target);
return;
}
}
});
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="navbarResponsive" class="collapse navbar-collapse col-auto">
<ul id="primary-menu" class="navbar-nav text-uppercase">
<li id="menu-item-1725" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1725 nav-item">Home</li>
<li id="menu-item-1739" class="nav-item menu-item menu-item-type-custom menu-item-object-custom menu-item-1739"><a rel="nav-link js-scroll-trigger" href="#services" class="nav-link js-scroll-trigger">Services</a></li>
<li id="menu-item-1735" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1735 nav-item">Portfolio</li>
<li id="menu-item-1736" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1736 nav-item">About</li>
</ul>
</div>
<p>ggwgsgwg</p>
<p> </p>
<p>ggwgsgwg</p>
<p>ggwgsgwg</p>
<p> </p>
<p> </p>
<p> </p>
<p>ggwgsgwg</p>
<p> </p>
<p> </p>
<p> </p>
<p id="services">ggwgsgwg</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>ggwgsgwg</p>
<p> </p>
<p>ggwgsgwg</p>
<p>ggwgsgwg</p>
<p> </p>
<p>ggwgsgwg</p>
<p>ggwgsgwgv</p>
Change your JS "(function($) {" to this:
$(document).ready(function() {
With this, the events work for me.
It is a syntax error.
(function($) {
should need to change
$(function() {
DEMO
I have another script which I made that adds classes to make the smooth scrolling work. It was called AFTER the script above, so I moved it BEFORE inside the functions.php (Wordpress). The scripts started to work again. Silly of me not to notice that. Sorry for the trouble, & thank you, guys...
Related
I'm working on designing website but facing a issue that href # tags are not working in chrome but working in firefox
<ul class="navigation" style="margin-top: 75px;">
<li><a class="scroll-to" href="#section-1">Home</a></li>
<li><a class="scroll-to" href="#section-2">About Us</a></li>
<li><a class="scroll-to" href="#section-4">Products</a></li>
<li><a class="scroll-to" href="#section-5">Clients</a></li>
<li><a class="scroll-to" href="#section-6">Team</a></li>
<li><a class="scroll-to" href="#section-7">Contact Us</a></li>
</ul>
<section id="section-1" class="banner-container color-light center nav-trigger">
I am not sure where its going wrong
The following works fine for me in Chrome 62. Are you closing your section tag? Are you sure there is enough height that it would actually scroll?
section {
padding: 100px;
border: 1px solid blue;
}
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Clients</li>
<li>Team</li>
<li>Contact Us</li>
</ul>
<section id="section-1">Home</section>
<section id="section-2">About Us</section>
<section id="section-4">Products</section>
<section id="section-5">Clients</section>
<section id="section-6">Team</section>
<section id="section-7">Contact Us</section>
You can try follow this.
https://www.gregoryvarghese.com/chrome-anchor-link-not-working-fix/
$(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;
}
}
});
});
Make sure you have enough height for each div so that page can scroll. Without page scroll you can't see changes, because nothing wrong with your code.
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Clients</li>
<li>Team</li>
<li>Contact Us</li>
</ul>
<section style="height:500px" id="section-1">Home</section>
<section style="height:500px" id="section-2">About Us</section>
<section style="height:500px" id="section-4">Products</section>
<section style="height:500px" id="section-5">Clients</section>
<section style="height:500px" id="section-6">Team</section>
<section style="height:500px" id="section-7">Contact Us</section>
I guess its a bug in certain versions of Chrome, this workaround did the trick for me, good luck! -
$(document).ready(function () {
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if (window.location.hash && isChrome) {
setTimeout(function () {
var hash = window.location.hash;
window.location.hash = "";
window.location.hash = hash;
}, 300);
}
});
For me, it was the href that redirected to pages with hashtags, so I did this workaround:
$('body').on('click', 'a[href*="#"]:not([href="#"])', function(e) {
if($(this).attr('href').indexOf('http') > -1 && /chrome/i.test( navigator.userAgent) ){
e.preventDefault();
window.location.href = $(this).attr('href');
window.location.reload();
return false;
}
});
I don't know javascript too well so I apologize if it's some simple fix - but I'm wondering how to get this smooth scroll to div to work. I have a fixed sidebar, with the jump to divs working here:
<div class="row-offcanvas row-offcanvas-left">
<div id="sidebar" class="sidebar-offcanvas">
<div class="col-md-12">
<center><h1 class="logo">
<a href="#">
<img src="assets/images/pglogo.png"/>
</a>
</h1></center>
<ul class="nav nav-pills nav-stacked">
<li class="active">Home</li>
<li><a class="smoothScroll" href="#discovery">Discovery</a></li>
<li><a class="smoothScroll" href="#wireframing">Wireframe</a></li>
<li><a class="smoothScroll" href="#visual-design">Visual Design</a></li>
<li><a class="smoothScroll" href="#project-development">Project Setup</a></li>
<li><a class="smoothScroll" href="#test-debugging">Test & Debugging</a></li>
<li><a class="smoothScroll" href="#final-product">Final Product</a></li>
<li><a class="smoothScroll" href="#contact">Contact</a></li>
</ul>
</div>
I also have the javascript smooth scroll function here:
$(function() {
$('.smoothScroll').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;
}
}
});
});
Any insight onto why this isn't working?
I'd like to be able to add and remove classes based on the users mouse moving over certain areas. Below is the navigation code as generate by WordPress:
<nav id="site-navigation" class="main-navigation" role="navigation" data-small-nav-title="Navigation">
<ul id="menu-new-blog-main-2" class="nav-bar clearfix">
<li id="menu-item-10168" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10168">About Proforma</li>
<li id="menu-item-10169" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10169">Proforma.com</li>
<li id="menu-item-10170" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10170">Contact Us</li>
</ul>
</nav>
I've come up with the following JavaScript that targets the <li> in order to change the class of the link within the <li>:
<script>
$(document).ready(function(){
$('#site-navigation li').mouseenter(function(){
$(this).find('li.menu-item a').addClass('animated, bounceIn');
//$(this).find('.span').addClass('fadeInUp');
});
$('#site-navigation li'').mouseleave(function(){
$('#site-navigation li'').find('li.menu-item a').removeClass('animated, bounceIn');
//$('#site-navigation li').find('.span').removeClass('animated, fadeInUp');
});
});
</script>
I've checked the Console and it looks like the event isn't even firing for the code to work. Any help is greatly appreciated.
Check out this fiddle.
Here is the snippet. (I have added alert on enter and leave events for testing).
$(document).ready(function() {
$('#site-navigation li').mouseenter(function() {
alert("Enter " + $(this).text());
$(this).find('li.menu-item a').addClass('animated, bounceIn');
//$(this).find('.span').addClass('fadeInUp');
});
$('#site-navigation li').mouseleave(function() {
alert("Leave " + $(this).text());
$('#site-navigation li').find('li.menu-item a').removeClass('animated bounceIn');
//$('#site - navigation li ').find('.span ').removeClass('animated, fadeInUp ');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="site-navigation" class="main-navigation" role="navigation" data-small-nav-title="Navigation">
<ul id="menu-new-blog-main-2" class="nav-bar clearfix">
<li id="menu-item-10168" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10168">About Proforma
</li>
<li id="menu-item-10169" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10169">Proforma.com
</li>
<li id="menu-item-10170" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10170">Contact Us
</li>
</ul>
</nav>
When adding/removing classes with jQuery, they should be space separated, not comma separated. So:
$(this).find('li.menu-item a').addClass('animated bounceIn');
Also, you shouldn't nest your mouseleave inside your mouseenter functions. Also, you should use $.on instead.
Also, within your event handlers, you aren't accessing your elements correctly. $(this) refers to the element that has been entered or left. Since you've set the mouseenter handler on the <li> elements, $(this).find('li.menu-item a') finds nothing.
Try this:
// It's often best practice to cache jQuery objects
// so you're not looking up the elements multiple times.
var $listItems = $('#site-navigation li');
$listItems.on('mouseenter', function(){
$(this).find('a').addClass('animated bounceIn');
});
$listItems.on('mouseleave', function(){
$(this).find('a').removeClass('animated bounceIn');
});
All of this said, if you're simply trying to have an animation on hover, you can achieve that in CSS only with a single class on your <a> elements. The jQuery might be overkill, here.
$('#site-navigation li'')
should be either
$('#site-navigation li')
or
$("#site-navigation li")
(You have wrong quote marks)
and prevent using selector's repetition, do it like this:
var $el = $('#site-navigation li')
$el.mouseenter(function(){
$(this).find('li.menu-item a').addClass('animated bounceIn');
$(this).find('.span').addClass('fadeInUp');
});
$el.mouseleave(function() {
$(this).find('li.menu-item a').removeClass('animated bounceIn');
}
For further reading: http://www.sitepoint.com/efficient-jquery-selectors/
Good Luck
Note: I'm new to webdev and i'm building this site with bootstrap
I'm building a one page site and the navbar at the top directs the user to the relevant id. the problem i'm having is that i want it to scroll to the id when clicked (see http://www.blastprocessor.co.uk/). I also want to set the class as active when the user scrolls past a specific id.
I have no idea where to start but i'll post my html code here.
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="34">
<div class="container">
<div class="navbar-collapse collapse navbar-responsive-collapse" id="main-menu">
<ul class="nav navbar-nav">
<li class="active">What We Are</li>
<li class="">Why Us</li>
<li class="">What We Offer</li>
<li class="">Contact Us</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li>Right Link</li>
</ul>
</div>
</div>
</nav>
You can use the following function to make your scroll animation. Regarding adding a class 'active' to the past id actually you can follow the answer of #ahb. For your need i just added a var reduce in the function which will help you reduce 50px from the actuall offset.
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
var reduce = 50;
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 - reduce
}, 1000);
return false;
}
}
});
});
ORIGINAL SOURCE
DEMO
Using JQuery:
See here to scroll and animate to your ID.
To add your class after scrolling past your ID use:
//assign the window and all the contents into variables
//instead of going and grabbing it from the DOM on every scroll
var $window = $(window),
$content = $('.content');
$window.scroll(function () {
$content.each(function () {
//for each element that has a class of content
//check its position and add SomeClass
if ($window.scrollTop() >= $(this).position().top) {
$(this).addClass('SomeClass');
} else if ($window.scrollTop() <= $(this).position().top) {
//if window position is less then remove it
$(this).removeClass('SomeClass');
}
});
});
Super newb question here, but my brian is not working tonight. I'm using a provided JS script on a wordpress site to make a single-page website menu scroll to the relevant section.
I have a menu with options 'Home' 'People' 'Info' 'Contact'
These links are structured like so: "http://sample.com/#home"
<!-- Navigation Menu -->
<div class="collapse navbar-collapse" id="navigation">
<ul id="menu-menu-1" class="nav navbar-nav navbar-right"><li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15">
Home</li>
<li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom menu- item-51">
People</li>
<li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14">
Info</li>
<li id="menu-item-54" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-54">
Contact</li>
</ul>
</div>
<!-- End Navigation Menu -->
The JS follows below.
//Navigation Scrolling
$('#navigation a[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;
}
}
});
The problem: When clicking the menu-links, the page reloads and shows the relevant section.
I would like the menu items to scroll to the relevant section instead.
Thanks.
TL;DR Menu items reload page instead of scrolling to relevant section. JS above.
Just prevent the default functionality of the anchor tag by using event.preventDefault(),
$('#navigation a[href*=#]').click(function(e) {
e.preventDefault();
//Rest of your code