I've a paper-menu with links
<paper-menu>
Home
About
</paper-menu>
When I click any link, Polymer adds a .iron-selected CSS class to it, but if occurs a page reload or a page redirect, I lose the CSS class.
My question is: how can I do Polymer add that class based on URL?
You can see a working example here
When you go to the page "cekuda", the cekuda menu item is selected,
When you go to the page "jegano", the jegano menu item is selected.
Use the global variable "location" to check the url of the page.
Wait until the "WebComponentsReady" event has fired before trying to do anything to the paper-menu.
Analysis the paper-menu children through paper-menu.items
Add the class to the element that is to be selected using paper-menu.select
Thanks for the tips Ryan!
My solution was:
document.addEventListener('WebComponentsReady', function(){
var menu = document.querySelector('paper-menu')
var paths = menu.items.map(function(item){
return item.pathname
})
window.setInterval(function () {
menu.select(paths.indexOf(location.pathname))
}, 100);
})
Related
I've started using this plugin for multilevel side menu:
https://tympanus.net/codrops/2015/11/17/multi-level-menu/
When i grabbed example code from this page i saw that plugin don't it my needs.
I mean, when i will reload page, everytime main panel is opened, and i'm looking for any solution, to keep track about last opened panel.
I can use localstorge or cookies, but i don't see any way how to select opened, store this info and then call function to open this saved panel.
I don't provide example code, as i'm using this code from link.
Thank you for any ideas !
In the tympanus code when you select an item in the menu, the current class is added to the selected item (for menuItem and menuLevel). It means that you can get the current selected menuItem and menuLevel by matching this class and then save it in a cookie.
function getCurrentMenuItemSelected() {
var currentMenuItem = $(".menu__item .menu__link--current");
console.log(currentMenuItem.html());
}
function getCurrentMenuLeveItemSelected() {
var currentMenuLevel = $(".menu__level.menu__level--current");
console.log(currentMenuLevel.data("menu"));
}
getCurrentMenuItemSelected();
getCurrentMenuLeveItemSelected();
Following on my from my previous question here:
How to show a page by default on page load
I'm basically using jQuery to load links in a div - this works perfectly. However, what I want to now achieve, is when one of the pages (opened in the div) has a hyperlink, how can I open the hyperlink in the same div the page sits in now?
Let's say I have a menu:
Home | Service | About
If you click service - it loads the page inside a div - awesome.
But let's say service has a hyperlink to another page (on the same domain/setup) - currently using my code referenced in the question above, the link just opens in a new tab... This isn't the behaviour I want.
Here is the code:
$('[data-target]').click( function (e) {
$.get($(this).attr('href'), function(data){
$('#halloffame').empty();
$(data).find(".partner_body").appendTo("#halloffame");
});
e.preventDefault(); // prevent anchor from changing window.location
});
$.get( "pages/accounting-software/", function( data ) {
$('#halloffame').empty();
$(data).find(".partner_body").appendTo("#halloffame");
});
This lets me open hyper links in the div "halloffame". But it doesn't control the links in the pages - even if I use the same code on the master page:
<a data-target="#halloffame" href="pages/returns/">
If anyone can point me to where I'm going wrong, I would appreciate it :)
Have an awesome Friday, folks!
Your event listener is bound the the currently existing DOM, when you add new elements(from your ajax call) you need to either bind your event listener to the new elements aswell or use deferred event handling(eg jQuerys on).
See this answer for more details
I'm using the minimal accordion tabs from the bourbon refills site, http://refills.bourbon.io/ and would like to know how I can link to a specific tab from another page in my site. When the page with the tabs loads the first tab is always displayed.
I'd like to know how to link to the page with tabs from a different page on my site but instead of having the first default tab active have the second or third tab be active. You can see exactly what I'm referring to by visiting http://codepen.io/andrewjcurrie/details/qbqvxo/ and below is the JavaScript that powers the tabs.
$(document).ready(function () {
$('.accordion-tabs-minimal').each(function(index) {
$(this).children('li').first().children('a')
.addClass('is-active').next().addClass('is-open').show();});
$('.accordion-tabs-minimal').on('click', 'li > a.tab-link', function(event) {
if (!$(this).hasClass('is-active')) { event.preventDefault();
var accordionTabs = $(this).closest('.accordion-tabs-minimal');
accordionTabs.find('.is-open').removeClass('is-open').hide();
$(this).next().toggleClass('is-open').toggle();
accordionTabs.find('.is-active').removeClass('is-active');
$(this).addClass('is-active'); } else {
event.preventDefault();}});});
As you can see on the pen, I'm hoping to have the links work with hash tags. I'd like to be able to add #Second_Tab to the base URL and have the second tab become active when that link is accessed. Any tips or suggestions on how best to accomplish this would be greatly appreciated, Thanks!
Andrew.
Three steps to get this to work:
remove is-active from the first tab-link in your HTML
add the necessary IDs to each of your tabs (following your example, I added id="Second_Tab" etc.
update the first JS function as follows:
$('.accordion-tabs-minimal').each(function(index) {
if (window.location.hash) {
var hash = $.trim(window.location.hash);
$(hash).addClass('is-active').next().addClass('is-open').show();
} else {
$(this).children('li').first().children('a').addClass('is-active').next().addClass('is-open').show();
}
});
This first checks if the URL has a hash and, if so, adds the necessary classes to that tab and content and displays them. If no hash is in the URL, it instead does the default behavior of displaying the first tab. You can see my working CodePen here http://codepen.io/angeliquejw/pen/xVqzKV?editors=1000
I have a list ul (its id is menu_) with multiple elements li, these lis are initially in class in-active, I want when the client click on one li to be redirected to another page and then change the CssClass of this li to active. I've tried this JS code but didn't work, it didn't redirected to the another page after client click an li (it remains in the same page):
$(function () {
$('#menu_ li').click(function () {
$("li.active").removeClass("active");
$(this).addClass("active");
return false;
});
});
You can do this inside each page.
$("li.active").removeClass("active");
$( "ul#menu li:nth-child(n)" ).addClass("active");
Keep this code in ready event.
n is number of li that you want to add class to.
You are mixing server-side/client-side functionality here. Your JS code is purely client-side and it will toggle the classes correctly, but having return false; means that the link will not be followed, so no redirection will be performed (no server side code will be run).
You could remove return false; and then the classes will be changed and the redirection will be performed, but once the redirect has been done, you have a new page and the class changes will not persist.
You basically have three options:
Have a JS code as Imadoddin Ibn Alauddin suggest above inside each child page which takes care of setting the correct element in the navigation to active once the page loads.
Somehow persist the state between requests, once you add the active class, save the state in a cookie or local storage for example. Then every time a page loads, check if the cookie/local storage contains such data and update the state accordingly.
Change the state of the navigation on the server side, so once each page loads, add the active class to the corresponding page.
I'd recommend option 3.
Bottom line: You cannot mix things like you are doing now. Having return false; will cancel the redirection out. Once the redirection is performed, a new page will load and the navigation will be reset so any change you made using JS before the redirection was done is gone.
Script:
$(".classname li a").each(function() {
var hreflink = $(this).attr("href");
if (hreflink == location.href) {
$(this).addClass("active");
} else {
$(this).removeClass("active");
}
});
CSS:
.classname li a.active{color:#ef9223;}
Whenever I do a page refresh, if the same link is on a different page, the active class is no longer applied to that link.
Actual exmple
i have the following Navigation links A B C D E F G H .... Z. And the same Navigation is in the main page(header section).. so when i click on any one link .. it needs to be active on when i arrive to any one A B C D E..or Z pages. And even on page refresh it needs to retain the active link. Hope that explains...and helps :)
Any help, inputs, solution would be much appreciated.
Inside of your each loop, this is actually the anchor tag not the tag that has the class 'classname'. Your css should be:
.active {color:#ef9223;}
Also, you do not need the remove class if this code is being run on page load.
CHeck out this jsFiddle for an example - http://jsfiddle.net/XWLWL/7/
A class, or anything that you add with JavaScript does not persist on page refresh. That's just how it works.
JavaScript is only modifying your locally loaded HTML elements and structure. Once you refresh the page, or go to another page, all of that state is cleared out by the incoming page load. The server has no knowledge of anything you did on that page. It will send a new page with the default state, and any JavaScript will then run. This script also has no knowledge of any previous page loads or script execution.
If you want state to persist across page loads, you need to do it at the server side, which involves making AJAX calls to the server to let it know what links you want to be "active", and then the server would be responsible for adding that class on subsequent page loads.