Develop Reference

Bourbon Refills How-To Link To Tabs

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

How to execute select() method on polymer elements based on URL?

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);
})

Is it possible to activate a tab from drawer using javascript in Material Design Light?

Is it possible to activate a tab using javascript in Material Design Lite?
I want to activate a tab using the links inside mdl-layout__drawer?
Is there a function for that?

No problem. I assume you want everything in the drawer to mirror your tabs. If you want to only have certain items activate tabs and not all, just adjust the last line in the sample code, maybe add a "drawer-tab-clicker" class if you want to single out which links activate tabs and which don't. I wanted them all, so the sample below does all the drawer links.
You should give your drawer links the same exact href hashes as the tab you want to activate, then do some magic jQuery ...
function opentab() {
var draweritem = this;
var target = $(draweritem).attr('href');
$('.mdl-layout__obfuscator').click();
$('a[href='+target+'].mdl-layout__tab span').click();
return false;
}
$(".mdl-layout__drawer a").on('click',opentab);
This grabs the drawer item you just clicked on, reads the href it's pointing to, then clicks the "obfuscator" to close the drawer and then finds the layout tab based on that href. It then clicks on the span inside the link (yeah, not the link itself).
Works for me!

Currently toggling tabs programatically isn't supported.
You would need to reverse how tabs are toggled and implement your own function to handle the same logic.

Off-canvas panel closes when removing element

I am setting up a small shop using simpleCart.js and Bootstrap 3.
For displaying the cart I was hoping to use an off-canvas panel that I have enabled using the Jasny-bootstrap add-on. Everything works fine but when I eliminate elements from the cart the off-canvas panel closes. This way the user his unable to modify content in the cart without having to reopen the panel after each click. How can I keep the panel open until the user chooses to close it?
Here is an FIDDLE demonstrating the issue
From looking at this snippet from (link straight to code) simpleCart.js - line 337-353, am I right in assuming that once you remove an item it reloads the cart and therefore it causes the panel to close? If this is the case, then how would a version of this code look like to fix my problem?
// empty the cart
empty: function () {
// remove each item individually so we see the remove events
var newItems = {};
simpleCart.each(function (item) {
// send a param of true to make sure it doesn't
// update after every removal
// keep the item if the function returns false,
// because we know it has been prevented
// from being removed
if (item.remove(true) === false) {
newItems[item.id()] = item
}
});
sc_items = newItems;
simpleCart.update();
},
Thank you in advance :)

The option autohide controls if the navbar should be closed when a user clicks outside of it. Setting it to false, means it stays open until the user clicks on the 'CLOSE PANEL HERE' link.
See the fiddle
Note that normally the navmenu doesn't close when clicked on a link inside of it. I'm not sure why this is happening in your case.

How can I get the destination url of a link on the web page in the Javascript onbeforeunload event?

Is it possible to capture what link on the web page the user clicked on?
Not talking about if they manually entered an url in the address bar or if they clicked on the back button - but an existing link or menu item on the current page.
This is for a commercial web page that has a standard header & footer containing links to other pages on the company's web site.
They have a complicated order form where it's not practical to try saving & restoring the state of the form.
If in the process of filling out an order the customer needs to visit another page on the web site - to review product, etc.. Ideally I would be able offer the option of opening the link in another browser window or tab instead of leaving the page so that the user doesn't loose the work they've put into the order.
I know that I could have a different set of headers & footers that are written to open their links in another window/tab but to simplify maintenance & updating I'm trying to minimize the number of variations used. Also it is possible that the user wants to abandon the order form and may get confused if in trying to do so that another window opens instead.
I am using JQuery & Javascript.

Instead of having a completely different set of headers/footers you could replace all links in certain areas with links that open in a new window like so:
$('#header a, #footer a').each(function() {
$(this).attr('target', '_blank');
});

This is what I came up with to handle this and it is working for me.
Detects when user clicks on a page link then evaluates link to determine how to handle appropriately. It does not work for links typed in the browser address bar.
I use jquery magnific-popup (http://dimsemenov.com/plugins/magnific-popup/) to create a popup window (.popupForm-handleExitRequest in my code) that offers the user the option of opening link in same window (and losing their order data), in new window or returning to order form.
$('body a').click(function(e) {
//if link is reference to page element
if ($(this).attr('href').charAt(0)=="#") {
return;
}
//check if link is to same window
var pathname = window.location.pathname;
var pathname2 = $(this).attr('href');
pathname2 = pathname2.replace(/^.+\.\//, '');
if (pathname.indexOf(pathname2) >= 0) {
//link clicked is contained on same page
//prevent page from getting reloaded & losing data
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
return;
}
//link clicked on is another page
if (hasMerchandise) { //var to indicate user has items on order form
//give user options: leave page, open link in other page, stay, etc.
// $('.popupForm-handleExitRequest').click(); //roll your own code
//prevent page from getting reloaded & losing data
//in case user wants to cancel page change or open link in another window
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
} else {
//load new page
$(this).removeAttr('target');
}
});