I have made a bilingual website in Squarespace. I am not in developper mode, so have limited access to the code. I can insert javascript / HTMl / CSS in the header, or on the page, and have used this to override several aspects such as changing the company logo in the header, and pointing it to alternate URLs with JS.
What I am trying to do is make a specific link "English" or "Francais" in my navigation act differently depending on the page (if you're on the French version of a page, clicking English in the navigation would direct you to the english version of that page). Currently, the [EN] and [FR] links in the nav simply go to the english or french homepage. They are "Link" type "Pages" in squarespace and look like this when you inspect them:
<li class=" external-link">
[EN]
</li>
Copying the selector yields:
#topNav > nav > ul > li:nth-child(7) > a
I have included this code on my page. The first function that was recommended by a wonderful user here made the french logo (overridden from the english logo set in the panel) link to the french home page, I was hoping the second part would make the nav link act as I want:
<script>
var logo = document.querySelectorAll('h1.logo');
logo[0].addEventListener("click", function() {
location.href = "/home-fr";
})
var eng = document.querySelectorAll('#topNav > nav > ul > li:nth-child(7) >
a');
eng[0].addEventListener("click", function() {
location.href = "/englishpage";
})
</script>
This is a slightly different situation vs making the logo link, because the logo was not a link to begin with.Perhaps that or my selector is why this does not work?
Edit - Here is the whole HTML for the Nav:
<div id="topNav">
<nav class="main-nav dropdown-hover"><ul data-content-field="navigation">
<li class="gallery-collection">
selected work
</li>
<li class="page-collection">
about
</li>
<li class="page-collection">
contact
</li>
<li class="gallery-collection">
réalisations
</li>
<li class="page-collection">
agence
</li>
<li class="page-collection">
coordonnées
</li>
<li class=" external-link">
[EN]
</li>
<li class=" external-link">
[FR]
</li>
<li class=" external-link">
return / retour
</li>
</ul>
</nav>
</div>
Note that most of these links are hidden through the CSS depending on which page you're on - For example, on a french page, only childs 4,5,6, and 8 are visible.
You have two options for accomplishing this.
For the Englinsh link
Change the href of the anchor to a new one like so:
var eng = document.querySelectorAll('#topNav > nav > ul > li:nth-child(7) > a');
eng[0].href = location.pathname.replace('-fr', '');
Use a click event handler like you were doing.
var eng = document.querySelectorAll('#topNav > nav > ul > li:nth-child(7) > a');
eng[0].addEventListener("click", function(e) {
e.preventDefault();
location.href = location.href.replace('-fr', '');
return false;
});
For the French link
Change the href of the anchor to a new one like so:
var fr = document.querySelectorAll('#topNav > nav > ul > li:nth-child(8) > a');
fr[0].href = location.pathname + '-fr';
Use a click event handler like you were doing.
var fr = document.querySelectorAll('#topNav > nav > ul > li:nth-child(8) > a');
fr[0].addEventListener("click", function(e) {
e.preventDefault();
location.href = location.href + '-fr';
return false;
});
Related
In my View i have navigation but problem is when i click on link and redirect me to that page it lose active class and it again become the home to active. Can anyone please help me or point me in the right direction!
Thanks in advance.
View:
<!-- Side Navbar -->
<nav class="side-navbar shrinked">
<!-- Sidebar Navidation Menus-->
<ul class="list-unstyled">
<li class="active"> <i class="icon-home"></i>Home </li>
<li> <i class=" icon-grid"></i>EMP </li>
<li> <i class="fa fa-bar-chart"></i>User </li>
</ul>
</nav>
JavaScript:
<script>
$(function () {
$('nav.side-navbar ul li a').on('click', function () {
$(this).parent().addClass('active').siblings().removeClass('active');
});
});
</script>
When you load a new page all the code in current page is gone and all the scripts you have will run again on new page.
You need to compare the page's url to the links urls on page load.
Try the following:
$(function() {
$('nav.side-navbar ul li a').each(function() {
var isActive = this.pathname === location.pathname;
$(this).parent().toggleClass('active', isActive);
});
});
I have a page with a list of menu items consisting of internal anchors. I'm trying to add an .active class to the selected item. It seems to work on load but when clicking a new item in that same page it doesn't.
When clicking a new menu item, I would like to remove all other active classes and add this class to the clicked item.
Sounds pretty simple, but I can't make it work.
I created this Fiddle, but it doesn't show the issue correctly, since I can't add hashes to the url.
However, maybe someone can point me in the right direction.
JS:
function setActiveLinks() {
var current = location.pathname;
$('.bs-docs-sidenav li a').each(function() {
var $this = $(this);
// Get hash value
var $hash = location.href.substr(location.href.indexOf('#') + 1);
if ($this.attr('href') == '#' + $hash) {
$this.parent().addClass('active');
}
})
}
setActiveLinks();
$('#leftmenu li a').click(function() {
$('#leftmenu li').removeClass('active');
setActiveLinks();
});
HTML:
<ul class="nav bs-docs-sidenav">
<li>
Download
</li>
<li class="active">
What's included
<ul class="nav">
<li class="active">Precompiled</li>
<li>Source code</li>
</ul>
</li>
<li>
Compiling CSS and JavaScript
<ul class="nav">
<li>Installing Grunt</li>
<li>Available Grunt commands</li>
<li>Troubleshooting</li>
</ul>
</li>
</ul>
Thanks. :-)
You have wrong selector to bind click event on anchor element. also you don't need to call setActiveLinks() function(which sets class based on href) here.
You can use context of clicked anchor element to traverse to parent li and add class active in it:
var $navLIs = $('.nav li')
$navLIs.find('a').click(function() {
$navLIs.removeClass('active');
$(this).parent().addClass('active');
});
Working Demo
I made a process bar using jquery and it is clickable also.But i want that if i was in second process bar then it can go only on previous bar by clicking on that and will not go to the next bar when i clicked.
Please see the jquery and tell me the condition for that.
jQuery('.nav-tabs > li > a').click(function(event){
event.preventDefault();//stop browser to take action for clicked anchor
//get displaying tab content jQuery selector
var active_tab_selector = jQuery('.nav-tabs > li.active > a').attr('href');
//find actived navigation and remove 'active' css
var actived_nav = jQuery('.nav-tabs > li.active');
actived_nav.removeClass('active');
//add 'active' css into clicked navigation
jQuery(this).parents('li').addClass('active');
//hide displaying tab content
jQuery(active_tab_selector).removeClass('active');
jQuery(active_tab_selector).addClass('hide');
//show target tab content
var target_tab_selector = jQuery(this).attr('href');
jQuery(target_tab_selector).removeClass('hide');
jQuery(target_tab_selector).addClass('active');
});
Here is the html:
<div class="mesre-tab">
<ul class="nav nav-tabs">
<li class="active collar_tab">
COLLAR
</li>
<li class="cuff_tab">
CUFF
</li>
<li class="pocket_tab">
POCKET
</li>
<li class="monogram_tab">
MONOGRAM
</li>
<li class="size_tab">
SIZE
</li>
</ul>
</div>
if anyone knows it, please help me out.
Thanks
I'm working on a project where I'm about to use the jQuery plugin mmenu (http://mmenu.frebsite.nl/).
I already had to do some customisations to fit my needs but I don't know what to do with my current issue. In mmenu, when i click on an list entry I will be navigated to the given href and the clicked item becomes active by mmenus css class ".mm-selected". So far so good.
Now I want to additionally mark the parent list item (and thats parent, and so on until menu root) as selected. This should be so when the user goes one level up in the menu he should be able to see in which category he currently is.
Below is an example of the menus html structure after mmenu was applied. This shows the code for a menu with 4 main pages (index, page1, page2 and page3) and 3 subpages (2.1, 2.2, 2.3).
<nav id="nav" class="mm-menu mm-horizontal mm-offcanvas mm-hasheader mm-current mm-opened">
<ul class="mm-list mm-panel mm-opened mm-current" id="mm-0">
<li class="mm-selected">
Index
</li>
<li>
Page 1
</li>
<li>
<a class="mm-subopen mm-fullsubopen" href="#mm-1"></a>
<span>Page 2</span>
</li>
<li>
Page 3
</li>
</ul>
<ul class="mm-list mm-panel mm-highest" id="mm-1">
<li class="mm-subtitle">
<a class="mm-subclose" href="#mm-0">Page 2</a>
</li>
<li>
Page 2.1
</li>
<li>
Page 2.2
</li>
<li>
Page 2-3
</li>
</ul>
</nav>
It would be great if you had some idea where and how I could achive such functionality.
So, for the moment I did some jQuery hacking. This seems to work for my case mentioned above. It should also work for deeper menus as it's using recursion. If there's a better way to achieve this, please let me know.
var nav = $("#nav");
nav.find("li > a:not(.mm-subopen)").click(function () {
nav.find("li.active").removeClass("active");
selectParentEntry($(this));
});
var selectParentEntry = function (a) {
var li = a.parent(),
ul = li.parent(),
back = ul.find("li > a.mm-subclose").first(),
cID = "#" + ul.attr("id"),
pID = back.length ? back.attr("href") : null;
li.addClass("active");
if (pID != null) {
var subOpen = nav.find("ul" + pID + " > li > a.mm-subopen").filter(function () {
var self = $(this);
if (self.attr("href") === cID) return self;
}).first();
if (subOpen) selectParentEntry(subOpen);
}
};
I have a drop down box navigation menu on my website here: users.aber.ac.uk/mta2/cs15020
There were minor problems with my drop downs since css can't affect parent elements when hovering children.
This is my navigaton menu including JQuery
At the moment it is affecting all the .navlists and makes them stick.
<h1 id = "title"> Max Atkins </h1>
<ul id="menu"> <!-- Drop down navigation menu -->
<li class = "navlists">
Home
</li>
<li class = "navlists"> <!-- Main buttons -->
<a> Web Assignment </a>
<ul class = "sub-menu"> <!-- Drop downs -->
<li class = "sublists">
CV
</li>
<li class = "lastitem"> <!-- Specific styling for this link -->
Write-Up
</li>
</ul>
</li>
<li class = "navlists"> <!-- Main buttons -->
<a> Richard's Assignment </a>
<ul class = "sub-menu"> <!-- Drop downs -->
<li class = "sublists">
WordPress
</li>
<li class = "lastitem"> <!-- Specific styling for this link -->
WebShop
</li>
</ul>
</li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function ()
{
$(".navlists > a").hover(function()
{
$(this).find(".navlists > a").css("border-bottom-left-radius", "0");
$(this).find(".navlists > a").css("border-bottom-right-radius", "0");
$(".sublists > a, .lastitem > a").hover(function ()
{
$(".navlists > a").css("border-bottom-left-radius", "0");
$(".navlists > a").css("border-bottom-right-radius", "0");
});
});
$(".sublists > a, .lastitem > a").mouseleave(function ()
{
$(".navlists > a").css("border-bottom-left-radius", "15px");
$(".navlists > a").css("border-bottom-right-radius", "15px");
});
});
</script>
If I understand your question correctly. Try to use parent():
$(this).find(".navlists > a").parent().css('...','...');
you can do this purely with css
you just need to use the :hover selector on the top level li and to make selectors easier add a class to menu items that have a submenu like class="hasSub"
see this fiddle http://jsfiddle.net/Vxuph/1/