(Javascript) Open a tab, make tab active, scroll to anchor - javascript

[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.

Related

how to auto close Materialize css mobile navbar?

I have created a website Link. Here I have used Only Materialize css and vanilla js, Plain Css. I have made a single page application where page sections are being hidden or showing using event listeners. It works fine. However, In the mobile navbar, the menu is not auto-closing after taping on it. I didn't find any docs relating to autoclose in this specific matter. How I can close the navbar whenever the user taps on a menu option?
You can add .sidenav-close to every link in the sidenav. From the documentation:
Close Trigger
Add the class .sidenav-close to an element inside the sidenav and any click event on that element will cause the sidenav to close. This is useful in Single Page Apps where the page does not refresh on link clicks.
<ul id="slide-out" class="sidenav">
<li><a class="sidenav-close" href="#!">Clicking this will close Sidenav</a></li>
</ul>

Disable scroll to content when using Foundation Tabs

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.

jQuery tab with multiple web forms

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>

Preventing page from going to the top when using anchor on an external page

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)

Apply facebox to links displayed using Ajax

I have a small problem. So I have this page that loads dynamic content using jQuery Ajax after the page is done loading. On the top of the page is a link called "Add News". When you click on that Link, a facebox pops open. This link is static and is only displayed once on the top of the page. Its labeled:
<a href="linktopage" rel='facebox[.xhr]'>Add News</a>
The dynamic page (loaded from Ajax) lists all the existing news in the DB. They are labeled:
<a href="linktonews?id=1" rel='facebox[.xhr]'>News 1</a>
<a href="linktonews?id=2" rel='facebox[.xhr]'>News 2</a>
<a href="linktonews?id=3" rel='facebox[.xhr]'>News 3</a>
and so on... Clicking one of the news items, open a facebox where you can view/edit the news.
Every time a new news item is added, the dynamic content reloads without refreshing the page.
The definition of facebox is instantiated using $('a[rel*=facebox]').facebox(); when the main index page is loaded.
Now my problem is that this $('a[rel*=facebox]').facebox(); does not apply to the news content loaded using ajax. So clicking on those links does not open a facebox. How can I achieve this?
Thanks in advance.
I had the same problem so I started looking at the pull requests in GitHub and found:
https://github.com/dator/facebox/commit/5ce6a75927d81b9fff1eeff9b933f0ad93f12801
by Dator (props to him! :D)
As it seems that the pull request isn't merged yet I just changed that line in my facebox.js and it works great :D
Hope this helps :)

Categories

Resources