I do have a strange problem with my jquery script on the following site: http://www.zugestellt.com
When I scroll down or up, the current area is highlighted correctly in menu (added class "current-menu-item").
Now the strange thing:
If I choose a menu item by click the class "current-menu-item" isn't deleted anymore from the menu item that I clicked.
Here is my code:
(function($){
var lastId,
topMenu = $("#header #menu"),
topMenuHeight = topMenu.outerHeight() + 15,
menuItems = topMenu.find("a"),
scrollItems = menuItems.map(function(){
var href = $(this).attr("href");
href = '.scroll-' + href.replace('/#','').toLowerCase();
var item = $( $(href) );
if (item.length) { return item; }
});
menuItems.parents('li').removeClass("current-menu-item");
$(document).on('click', "#header #menu a" ,function(e) {
var href = $(this).attr("href");
href = '.scroll-' + href.replace('/#','').toLowerCase();
var offsetTop = href === "#" ? 0 : $(href).offset().top - topMenuHeight + 1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 300);
e.preventDefault();
});
$(window).scroll(function(){
var fromTop = $(this).scrollTop() + topMenuHeight;
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
cur = cur[cur.length-1];
var id = '';
if(cur && cur.length) {
id = $.grep(cur[0].className.split(" "), function(v, i){
return v.indexOf('scroll-') === 0;
}).join();
}
if (lastId !== id) {
lastId = id;
var new_url = id.replace('scroll-','/#');
menuItems
.parents('li')
.removeClass("current-menu-item")
.end()
.filter('a[href*="' + new_url + '"]')
.parents('li')
.addClass("current-menu-item");
}
});
})(jQuery);
Now,if you are wondering why I don't work with hashes to choose the right section, this is a template from themeforest and the sitebuilder from this theme doesn't allow to add ids but classes.
Hope anyone can help me.
when you click again on menu it add .sfHover class .. So you need to remove it as well .. try this
menuItems
.parents('li')
.removeClass("current-menu-item")
.removeClass("sfHover")
.end()
.filter('a[href*="' + new_url + '"]')
.parents('li')
.addClass("current-menu-item");
Related
I have a list where are li with triger id. I need, when you click on li you scroll down the page to the container with the same id. I have this script, but, when I click on liyou scroll on the top page.
(function($) {
$(function() {
var lop = "<ol>";
$('.boxes-section .box-section-item .btText h2 strong').each(function() {
let uid = "ID-"+Math.floor(Math.random() * Math.floor(99999));
lop+="<li data-trigger='"+uid+"'>"+$(this).text()+"</li>";
$(this).attr('id', uid);
});
lop+="</ol>";
$('.listofparticipants').html(lop).show();
$(".listofparticipants ol li").click(function() {
var extraspace = $('header#header').height()+$('#wpadminbar').height()+$('#wpfront-notification-bar').height();
extraspace = extraspace+40;
$('html, body').delay(2000).animate({scrollTop: $("#"+$(this).attr('data-trigger')).offset().top-extraspace }, 1000);
});
});
})(jQuery);
You can try this
$(function() {
let lop = "<ol>";
$('.boxes-section .box-section-item .btText h2 strong').each(function() {
let uid = "ID-"+Math.floor(Math.random() * Math.floor(99999));
lop += "<li data-trigger='"+uid+"'>"+$(this).text()+"</li>";
$(this).attr('id', uid);
});
lop += "</ol>";
$('.listofparticipants').html(lop).show();
$(document).on("click", ".listofparticipants ol li", function() {
var extraspace = $('header#header').height() + $('#wpadminbar').height() + $('#wpfront-notification-bar').height();
extraspace = extraspace + 40;
$('html, body').delay(2000).animate({scrollTop: $("#" + $(this).attr('data-trigger')).offset().top - extraspace}, 1000);
});
});
Am currently trying to add scroll spy to my WordPress one page layout with the following code but nothing happens when I scroll down the page.
The only thing that code is doing,is to remove the active class for.
(function( $ ){
$("nav ul li a").addClass("marker");
var navLinks = $('nav ul li a'),
navH = $('nav').height(),
section = $('section'),
documentEl = $(document);
documentEl.on('scroll', function() {
var currentScrollPos = documentEl.scrollTop();
section.each(function() {
var self = $(this);
if (self.offset().top < (currentScrollPos + navH ) && (currentScrollPos + navH) < (self.offset().top + self.outerHeight())) {
var targetClass = '.' +self.attr('class') + 'marker';
navLinks.removeClass('active');
$(targetClass).addClass('active');
}
});
});
})(jQuery);
I simply added a dark background to active class in order to see he menu item changing color when I scroll down each section.
.active{
background-color:#000;
}
How can I apply the scroll spy properly?
Try to wrap your js in dom ready statement
jQuery(function(){
$("nav ul li a").addClass("marker");
var navLinks = $('nav ul li a'),
navH = $('nav').height(),
section = $('section'),
documentEl = $(document);
documentEl.on('scroll', function() {
var currentScrollPos = documentEl.scrollTop();
section.each(function() {
var self = $(this);
if (self.offset().top < (currentScrollPos + navH ) && (currentScrollPos + navH) < (self.offset().top + self.outerHeight())) {
var targetClass = '.' +self.attr('class') + 'marker';
navLinks.removeClass('active');
$(targetClass).addClass('active');
}
});
});
});
I am looking to use jquery to add a class of "selected" both on clicking of a nav item as well as scrolling past that section div.
So far I have got the class added on clicking of the nav item but I am unsure how to neatly add the same affect when scrolling past each section div.
Here's my script for adding the class on click (which is pretty straightforward and standard):
$('#fixednav li').click(function(){
$('#fixednav li').removeClass("selected");
$(this).addClass("selected");
});
...It all works great when user clicks the items in the fixed menu. But how do I add the selected class when user just scrolls down the page without using the fixed menu? Each section has a div id so I would think it would be easy to add something in to add the class on scroll past the div id....
Here's my fiddle
Scroll down a bit to see the fixed nav pop in....
i had the same issue and i used scrollspy to fix it here is the link and demo on bootstrap :
scrollspy
if you get some pb please let me know.
Check if this helps you fiddle
This is the js used, check the fiddle for html and css.
var hei = $("#header").height();
$(window).scroll(function(){
if($(window).scrollTop() > hei){
$("#header").addClass('fixed');
$('.body-wrapper').css('margin-top',hei);
}else{
$("#header").removeClass('fixed');
$('.body-wrapper').css('margin-top','0');
}
});
$("#header li a").on('click', function(event){
event.preventDefault();
var header_height = $("#header").height();
var target = $(this).attr('href');
$('html, body').animate({
scrollTop: $(target).offset().top-header_height
}, 1000);
});
var aChildren = $("#header li").children(); // find the a children of the list items
var aArray = []; // create the empty aArray
for (var i=0; i < aChildren.length; i++) {
var aChild = aChildren[i];
var ahref = $(aChild).attr('href');
aArray.push(ahref);
} // this for loop fills the aArray with attribute href values
$(window).scroll(function(){
var windowPos = $(window).scrollTop(); // get the offset of the window from the top of page
var windowHeight = $(window).height(); // get the height of the window
var docHeight = $(document).height();
for (var i=0; i < aArray.length; i++) {
var theID = aArray[i];
var divPos = $(theID).offset().top-hei-30; // get the offset of the div from the top of page
var divHeight = $(theID).height(); // get the height of the div in question
if (windowPos >= divPos && windowPos < (divPos + divHeight)) {
$("a[href='" + theID + "']").addClass("nav-active");
} else {
$("a[href='" + theID + "']").removeClass("nav-active");
}
}
});
The scrollspy effect was working fine, but suddenly it stopped working.
This is my code:
/ Cache selectors
var lastId,
topMenu = $("#timenav"),
topMenuHeight = topMenu.outerHeight()+15,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 300);
e.preventDefault();
});
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
// Set/remove active class
menuItems
.parent().removeClass("active")
.end().filter("[href=#"+id+"]").parent().addClass("active");
}
});
When I checked above code not working when.
"/home#id" is used instead of "#id" in the href attributes
can someone help me with this
http://www.drkeenly.com/
Any help would be great. Thanks in advance !
I used a jquery script to get my page smooth scrolled between anchors and set "active" to the menu.
The scrolling is stuck and not scrolled smoothly.
Did anyone else now about this issue?
my page is: http://miriwein.com/
my script for smooth scroll:
// Cache selectors
var lastId,
topMenu = $(".anc"),
topMenuHeight = topMenu.outerHeight()-150,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 2000);
e.preventDefault();
});
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
// Set/remove active class
menuItems
.parent().removeClass("active")
.end().filter("[href=#"+id+"]").parent().addClass("active");
}
});