jQuery smooth scroll on same page & different page - javascript

I'm creating a one-page website and I've found a small script for smooth scrolling and it works perfectly. But, if you leave the homepage and go to a single post or eventpage, the navigation doesn't work anymore because the anchor isn't on the existing page.
And another issue, when scrolling manually, it would be awesome if the active link could change class like it does when you click it.
Can anyone help me fix this issue? Thanks!
jQuery(document).ready(function($) {
$("#primary-menu li a").click(function(event) {
event.preventDefault();
$('#primary-menu li').removeClass('current_page_item ');
$(this).parent().addClass('current_page_item');
$('html,body').animate( { scrollTop:$(this.hash).offset().top - 68 } , 1000);
} ); } );

Related

Lightbox evolution preventing the window from scrolling issue

I hope someone might be able to help me with this. I am currently using the lightbox evolution plugin to display some nice lightboxes on my page.
I noticed that it allows the user to continue to scroll up and down the page if the modal / lightbox is shown.
I have added the following code:
$('a.light-box').lightbox({
'onOpen' : function() {$('html, body').css({'overflow': 'hidden','height': '100%'});},
'onClose' : function() {$('html, body').css({'overflow': 'auto','height': 'auto'});}
});
It prevents the scrolling from happening, but if I launch a link half way down the page then it automatically tries to scroll to the top of the page which kinda defeats the purposes of the scrolling.
Is there any other css properties that I could use to prevent it from scrolling to the top of the page ?
thanks in advance
Add this to your script:
$('a.light-box').on('click', function(e){
e.preventDefault();
});

Making links active dynamically upon click

I'm using bootstrap's default navbar. I want the active page to be represented by a dark gray block dynamically upon clicking the link. I can't seem to get it to work. Here's the code I have so far. It's similar to this question except I'm trying to integrate it with Bootstrap.
Codeply went down?
New demo with edits here.
I think you want
$(".navbar-nav a").click(function() {
$(".navbar-nav > .active").removeClass("active");
$(this).parent().addClass("active");
return false;
});

Prevent closing of a navbar with another element's trigger click

I am using jasny bootstrap offcanvas navbar ( http://jasny.github.io/bootstrap/components/#navmenu-offcanvas ) which will close whenever a click event occurs elsewhere on the page. However, we have a Twitter feed that has been modified to move between 3 different Twitter accounts. In order to switch between them a click is triggered. This is causing the navmenu to close each time the tweets switch and I cannot seem to prevent it.
Here is the twitter scroll code:
var tabCarousel = setInterval(function() {
var tabs = $('#twittertab > li'),
active = tabs.filter('.active'),
nextone = active.next('li'),
toClick = nextone.length ? nextone.find('a') : tabs.eq(0).find('a');
toClick.trigger('click');
}, 5000)
I've tried applying preventDefault() and stopPropagation() to the trigger('click') but I am very inexperienced with jQuery and am really just guessing where to put this.
For anyone having a similar issue, the answer is simple if you don't mind sacrificing the navbar closing with any click outside of the navbar itself. Ie, the solution means clicking outside the navbar will not close it.
Simply add 'data-autohide="false"'to the offcanvas element.
I then added a function to toggle the navbar state on click of a link within the navbar as follows;
$('#my-menu > li > a').click(function() {
$('.navmenu').offcanvas('toggle');
});
This means if you have links that do not go to another page, but an anchor somewhere on the same page, the menu will close when you click to move to that section.
If you are want to close the navmenu on inside link click then you must add "data-autohide="false"" on this
<div class="navmenu navmenu-default navmenu-fixed-right offcanvas">
and add this script $(document).ready(function(){$('.navmenu a').click(function() {
$('.navmenu').offcanvas('hide');
});})
in your code. that's it.
Note: It's work like charm in single page application.

Wordpress navigation add/remove class not working

I'm trying to add an active state to my 'li's' in wordpress, and I can see in the dev tools that it's adding the class but then it just disappears. Am I missing something obvious? It's a Wordpress nav. Thanks!
$(document).ready(function() {
$('#menu-nav a').click(function() {
$('#menu-nav a').removeClass('activeNav');
$(this).addClass('activeNav');
});
});
As Chris mentioned, it wouldn't be surprising if your links that are being clicked are redirecting to another page, causing the entire page to reload. If you'd like to prevent the anchors from redirecting to another page, you can use event.preventDefault() :
$(document).ready(function() {
$('#menu-nav a').click(function(e) {
e.preventDefault(); // this will cancel the action of the link
$('#menu-nav a').removeClass('activeNav');
$(this).addClass('activeNav');
});
});

ios7 click and hover not working

I have this problem on this website: http://www.gruppoedico.it/Default.aspx
The top menu has some dropdown functionality (on "Gruppo", "Attività", "Videoguide" and "Contatti"). It works like a charm on every browser exept the ones on ios7 (maybe ios6 too, I haven't tried), where the menu works on the page I linked, but not on every other page of the menu (you can try it just navigating on one of the pages from the menu).
I tried using the hover effect of css (no-js) and got the same result. Actually i'm using this script:
$(document).ready(function () {
$("nav li").click(function () {
$(".hover").removeClass('hover');
if ($(this).find("ul").hasClass('hover')) {
$(this).find("ul").removeClass('hover');
} else {
$(this).find("ul").addClass('hover');
}
});
});
I'm experiencing this problem only on apple devices.
UPDATE
I think i found the problem, it's the transition on the ul that in some way interfer with the click event. I'll try to find a solution.

Categories

Resources