I'm trying to use jQuery to add an .active class to my Bootstrap navigation links. I'm using some simple code I found elsewhere but have had to modify it.
I want the .active class to be added to the relevant .nav-link when on any page in the relevant directory, e.g. to be added to the Photography link in the nav bar whether a user is on the /photography page or /photography/fashion page.
This is what I have so far;
$(document).ready(function() {
var urlFull = window.location.pathname.split( '/' );
var urlFirst = '/' + urlFull[1];
$('.navbar-nav .nav-link').each(function() {
if (this.href === urlFirst) {
$(this).addClass('active');
}
});
});
I'm pretty sure my issue is to do with the if statement, but I'm pretty new to Javascript and I can't see the problem! I've used console.log to check my variables and they correspond with the links set in the navigation.
Any help would be very much appreciated.
Answering my own question...
It looks like my issue was with this.href when it should have been this.pathname. It seems to be working correctly now, but time will tell when I've built more pages!
Related
Quite simple,
I would like on click, to arrive to a specific section on a new page.
Usually www.mydomain.com/page1/#section should work, #section being the ID of the section.
However, the menu I'm using is breaking this. Si I'm trying to see if it's possible to do this by Jquery, using Hash. ( When url have this hash example www.myd0main.com/page/#contact - do this)
SO far I tried the following:
<script>
jQuery(document).ready(function() {
if (window.location.hash.split('-')[0] == '#contact') {
$('#contact').addClass('hashed');
}
});
</script>
Withotu any sucess.
Do you guys have any turnaround / idea to make this work ?
It will be lovely !
Thank you !
Perhaps
if (window.location.hash == '#contact') {
// Scroll to #contact
$(document).scrollTop($("#contact").offset().top);
}
I am helping a client do some minor Style/JS updates to a BigCommerce theme. I know next to nothing about BigCommerce theming. I need to apply CSS to every page except the home page. Ordinarily do page specific JS or scope my CSS better, but in this case I am limited by the existing theme code.
Here is what I am trying to do:
var check_url = 'http://www.someurl.com'
if (document.url != check_url) {
$('.header').css('height', '32vh');
}
What am I doing wrong? Seems like a very simple concept.
Thanks
if (window.location.pathname != '/') {
$('.header').css('height', '32vh');
}
Worked!
I'm trying to add jQuery to a website so when the link to the next page in the nav menu is clicked, then "active" class is switched to the "active" or current page. The "active" class is also set initially to the home page. Additionally, it's a website using Bootstrap so I was wondering if something was conflicting with my jQuery. Seems simple enough and my code works somewhat. It removes the active class from the Home page and briefly flashes on the next tab, but it does not stay "active." Here's the jQuery:
$(".nav li").click(function() {
$('li').removeClass('active');
$(this).addClass("active");
});
Any thoughts on what I may be doing wrong? Thanks in advance.
Andrew
I had a similar problem and wrote the following script:
var _urlpath = $(location).attr('pathname').split('/').pop();
$('#menu > li').each(function(){
var _this = $(this);
var _str = _this.find('a').attr('href');
_str !== _urlpath ? _this.removeClass('active') : _this.addClass('active');
});
It's fairly simple: filter the url path name, store it in a variable, and then most importantly, when a new page is loaded, loop through all the li's and try and match the url hash (I don't know the exact terminology), hash in the li > a's .
Alas, there might be a better way of doing this.
I'm quite new at using jquery but learning a bit everyday. I have solved many problems searching this web but I can't seem to find any solution for this one:
The web I'm workign at the moment use quite a lot of page anchors.
I have localscroll and scrollto as jquery libraries.
I animated the transition with this little script:
<script type="text/javascript">
$(document).ready(function () {
$('.scrolllento').localScroll({ duration: 1000 });
});
</script>
and it works fine whatever I add the class "scrolllento" to the cointainer of my links.
Now the problem I have is when a link jumps to an anchor of inside different page. my client has asked me if it's possible to load the page first then move to the anchor with same web transition.
I have been working on it with my little knowdlege and this is what I have atm:
<script type="text/javascript">
$(document).ready(function () {
var nosalto = $(location).attr('href');
if (nosalto.indexOf("HistoriaBMG") > 0) {
$.fn.gotoAnchor = function (anchor) {
location.href = this.selector;
}
$('#historia').gotoAnchor();
}
});
</script>
"HistoriaBMG" is the new page and "#historia" is the anchor I want to go inside that page.
and it seems again that it works...
the problem is I have no idea how to implement now the transition as the class "scrolllento" in the container of the link going to ../HistoriaBMG is ignored.
could anyone help me? thanks so much in advance and excuse my english, hope this question is clear enough.
According to the localScroll docs:
The plugin also adds a function, $.localScroll.hash() , that checks the URL in the address bar, and if there's a hash(#an_id), it will scroll to the element. It accepts a hash of settings, just like $.localScroll. You will likely call it on document ready. Check the regular example to see it in action.
So you simply need to call $.localScroll.hash()on $(document).ready()
I'm attempting to hide a div based on the url hash tag. I'm using a jquery plugin called zozo tabs that allows for deep-linking and it shows and hides divs.
There is a particular div on the page (not in the tab area) I would like to hide given the url/s. I've searched but cannot figure it out. Please excuse my javascript noobness!!! I've tried this. No such luck. It doesnt seem to work. Any help would greatly appreciated.
I've tried php but it doesnt work on the hash
To start the plugin creates this type of url
http://localhost:8888/site/funds/#tabbed-nav=fund-strategy
The html is:
<ul>
<li data-link="fund-strategy"><a>Fund Strategy</a></li>
<li data-link="portfolio-characteristics"><a>Portfolio Characteristics</a></li>
<li data-link="performance"><a>Performance</a></li>
</ul>
<div class="strategy">This copy shows when the li is clicked on</div>
This is me attempting to hide a div given the url with js
var jQ = jQuery.noConflict();
jQ(document).ready(function() {
var url = document.location.href;
if (url.indexOf('http://localhost:8888/site/funds/#tabbed-nav=fund-strategy') >= 0) {
jQ('.fourth').hide();
};
});
<div class="fourth">Hide me please!</div>
Just try to use something like this:
var currentHash = window.location.hash;
if (currentHash=="#tabbed-nav=fund-strategy") {
$('.fourth').hide();
}
Be sure that there is a html element with class 'fourth' in your html code. Otherwise this will not hide anything.
I think i pinpointed the problem. The zozo tabs utilizes hashchange. So after hitting my head against the wall and HUGE inspiration from users here. I downloaded the ba.hashchange and wrapped the given answers in a hashchange function here is the code if anyone is interested. This seemed to work.
var jz = jQuery.noConflict();
jz(function(){
jz(window).hashchange( function(){
// Alerts every time the hash changes!
var hash = document.location.hash;
if (hash == '#tabbed-nav=risk' || hash == '#tabbed-nav=fund-strategy') {
jz('.fourths').show();
} else {
jz('.fourths').hide();
}
})
jz(window).hashchange();
});