I am using Foundation 5.5.3, and I'm having a serious problem with the content tabs. I've tried everything I can think of, but for some reason whenever a user clicks on a tab, it scrolls the page down to the content. I'm not using deep linking, as I understand there's some issue with deep linking/scroll to content.
Here's an example of the html:
<ul class="tabs" data-tab data-options="scroll_to_content: false">
<li class="tab-title active">Tab 1</li>
<li class="tab-title">Tab 2</li>
</ul>
<div class="tabs-content">
<div id="tab1" class="content active">
<p>Tab 1 content</p>
</div>
<div id="tab2" class="content">
<p>Tab 2 content</p>
</div>
</div>
Yet it still scrolls to the content when the tab is clicked. I'm at a loss, any help would be greatly appreciated.
Put together a solution with some help from this answer.
The issue seems to stem from the way MixPanel handles tracking links. It intercepts the click action, does some tracking stuff, and then manually directs the browser to where it should be going. This is normally fine, but Foundation tries to disable the default action when clicking on a content tab. MixPanel then comes along and ignores that, sending the browser to the link anyway, causing the scrolling issue.
Disabling link tracking altogether solves the issue, but that also means that we're collecting a lot less useful data. So I went around trying to find a way to disable link tracking on in-page links. That's where the answer above came in handy, as it's a neat little function that allows using a jQuery selector in determining which links to track.
Instead of the standard link tracking setup, I used the provided delegate_links method, as such:
mixpanel.delegate_links(document.body, 'a:not([href^=#])', 'Clicked Link');
That ignores any links starting with #, so it disables tracking on the in-page links. Normal links are tracked as they were, but the tab specific links no longer trigger MixPanel, and the browser no longer scrolls to the content on click.
Related
[Edit] Unlike some other questions on Stackoverflow, I am not looking just to scroll to an anchor. I need the page to scroll to the tabs, open and make the tab active, and then scroll the rest of the way to the anchor.
I am looking for some help with some code, but it is a bit hard to explain. I am rather new to Javascript and will provide as much detail as I can.
I have some regular tabs, each with some content within them. One of the tabs is a table of product comparisons. Above the tabs on the same page, I have an a href linked to an anchor. What I am trying to achieve is, through Javascript, if a user clicks the external link, it will:
Scroll to the tabs section of the website
Click the "Compare Configurations"tab that has the table (this will have the anchor on it.)
Scroll to the anchor within that tab.
An example of what I am trying to achieve is similar to the GoPro website: EXAMPLE
When you click on the "Compare Editions" (below the PayPal part), it scrolls the page to the correct tab, opens it, and displays the table. That is what I am trying to achieve.
So far, I have the following code for my tabs:
<ul id="tabs">
<li class="active">FEATURES</li>
<li>SPECIFICATIONS</li>
<li>COMPARE CONFIGURATIONS</li>
</ul>
<ul id="tab">
<li class="active">
This is the first tab.
</li>
<li>
<br>
This is the second tab.
</li>
<li>
<br>
This is the third tab.
</li>
</ul>
Is there any way to get what I am trying to achieve with Javascript or the like? I am open to any and all suggestions and appreciate any help with this. If you would like to see my page and see how the page is laid out with the tabs, feel free to visit my site.
You can simply toggle the 'active' class using addClass removeClass using jQuery like this:
<ul id="tab">
<li >
This is the first tab.
</li>
<li class="active">
<br>
This is the second tab.
</li>
<li>
<br>
This is the third tab.
</li>
(I think only .active will visible at a time.)
And after that you can scroll to that element:
$('html,body').animate({
scrollTop: $("#tab").offset().top
}, 1000)
NOTE: you need Jquery for this.
I am trying to navigate multiple web pages using jQuery tab like below
<div id="tabs">
<ul>
<li>General</li>
<li>Education</li>
<li>Employment</li>
</ul>
</div>
this is working fine, when I navigate through tab click. But, if any post back happens within the pages, they are popping out of the tab(with out tab). I tried using the tab in a Master Page, it is showing the tab properly in Master page, but showing the ul markup again in the child pages.
Since I have lot of condition checks in every page, I am trying with separate pages, rather than putting everything into one single page.
Currently I am using User Control as the menu, to navigate between these pages. I am just curious to try the same with jQuery tab. Can anyone help me out to resolve this issue. Thanks in advance.
Because Your web forms are targeting the same master page (this result in render the whole page including html and head... tags)!
So, to solve this issue, you need to replace webforms by partial views (as of MVC) or simple user controls (as of WebForm) or webForm not having a master page, nor html tag
<div id="tabs">
<ul>
<li>General</li>
<li>Education</li>
<li>Employment</li>
</ul>
</div>
I have this code in a phonegap html page:
<div class="row">
<div class="small-12 columns" onclick="window.open('http://www.something.com/');">
<h3>some text</h3>
<a href="#" onclick="window.open('http://www.something.com');" class="read-more">read
more
</a>
</div>
</div>
I have a menu page that links to this page (which works fine):
<a href="page.html">
<h2>page</h2>
</a>
I build the apk, when I open it on my smartphone, I get the menu. When I click the page item, the page opens, but then the onclick event fires immediately, without even clicking it.
Can someone help me out
This is an issue with how Android webviews handle click actions. It is best not to use onclick if possible. I have had the best luck with the touchstart event but in some rare cases I have had to implement a hack with the following steps:
onclick/touch append a div element that covers the entire screen and it's z-index is above all elements (but is transparent)
use setTimeout to remove this div element after 301 milliseconds
run the action you want to trigger directly after creating the setTimeout method
This is not a great solution, but if nothing else works this will.
I had a complicated situation that involved a variety of sliders that just wouldn't work as tabbed content even though it was designed that way, on a one page wordpress site.
The site is here: http://carubba.brandconstructors.com/ and the "project" section is the issue.
So I made different wordpress page templates for each category. I used onlick=window.location to navigate through the so-called tabs. However, when you click through to the next tab, the page jumps to the very top for a brief second then back down. Is there a way to make this not happen and go straight to the anchor location? I tried adding return false, and javascript:void(0) and that didn't work either.
Here is the code for the links:
<ul class="projects-cat">
<li>Commercial</li>
<li>Marine</li>
<li>Institutional</li>
<li>Civil</li>
<li>Specialty</li>
<li>Residential</li>
</ul>
Any help would be awesome.
EDIT*
This is in the footer:
<script>
$(document).ready(function() {
$('.projects-cat li a').click(function(e) {
e.preventDefault();
});
});
</script>
No, the browser is always going to jump down as it renders the page and calculates how far down to move.
You should stay on the same page, and either load all content, and hide and show as needed, or load the content for each page via AJAX.
I've spend hours trying to find a solution for this without any success. There are similar issues/solutions I've found but nothing seems to match the problem I'm having.
I have some external links on my page that contain an anchor tag. When clicked and the new page opens the browser goes to the top first then it goes to the actual anchor so the viewer can see an unpleasant jump on the page.
I'd like that when you click on the link, it takes you to the external page, straight to the anchor without going first to the top of the page.
<ul class="secNavSubPag">
<li class="aboutSubMenu">our story</li>
<li class="creatTeamSubMenu">creative team</li>
</ul>
The page that contains the anchor has this:
<a id="offsetAnchor"></a>
I haven't done this before so maybe I'm doing it wrong but any help is appreciated.
You can see the page here:
http://arthurscatering.com/devOct13/about.php
The links are in the Secondary nav, bottom left. The links are "our story" and "creative team"
Thanks again :0)