How can I link to a specific tab? - javascript

I am using a theme that has tabs (list items) that are only displayed when the class is "active". By clicking on a tab, it changes the tab's class to 'active' (li class="active"), and only displays the content in the 'active' tab.
If I wanted to link to a specific tab from a different page, how can I create a link (presumably via javascript) that will send you to the page, and change an elements class?
Here's the HTML for reference
<div class="q_tabs horizontal center" style="visibility: visible;">
<ul class="tabs-nav"><li class="active">First Tab</li><li class="">Second tab</li><li class="">Third tab</li></ul>
<div class="tabs-container">
<div id="tab-1428877498-1-88" class="tab-content" style="display: block;">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>First tab text</p>
</div>
</div>
</div>
<div id="tab-1428877498-2-39" class="tab-content" style="display: none;">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>Second tab text</p>
</div>
</div>
</div>
<div id="tab-1428877529303-2-2" class="tab-content" style="display: none;">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>Third tab text</p>
</div>
</div>
</div> </div>
</div>`

As far as I know, sadly, there is no way with only Javascript to open up a tab in a new page. Fortunately, there are a few way to transfer information within the URL.
1. Using the # symbol
Send info within the URL without reloading the page.
For instance, yoursite.com/yoursecondpage#yourtabselection If you are to add the # plus the tab number, your page would not reload. With javascript, you could find the number using the .hash property. This is the easier way to do it.
2. Using the ? symbol
Send info within the URL with reloading the page.
For instance, yoursite.com/yoursecondpage?tab=2 If you are to add ?tab=tabnum to the end of the URL, your page would reload. With javascript, this method is a little bit harder to find. This is the harder way to do it.
I hope this helps!

how about you create a function that recive a tab id(as an argument) and it will show only that tab (as it also hides the others).
then if you want to link it from another page make sure to pass the id(of the tab) via the url so you'll be able to make a simple JS check if there is any request for a specific tab and then use the function (as I described before).
use jQuery it shouldn't take more then 5min'
good luck.

Related

How can I select an Animatedmodal to display different demos using one ID

I have a website that i am trying to personalize and I am trying to use the AnimatedModal.js framework. I have been able to display some content in one modal, but when it comes to make several modal it gets tricky, because there is just one ID. My question i, how can i use the same ID and change the content for other modals(demo03,demo04..etc.), in order to personalize each.
I will put some code in order to understand the problem
I have been reading the documentation but I am still stuck in this problem.
<!-- single work -->
<div class="col-md-4 col-sm-6 ads graphics">
<a id="demo02" href="#animatedModal" class="portfolio_item">
<img src="img/portfolio/03.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Should open here </span> <em> ads / Graphics </em>
</div>
</div>
</div>
</a>
</div>
<!-- end single work -->
Then I have the demo where it displays the content of the modal, where it has the #animatedmodal ID
<div id="animatedModal" class="popup-modal ">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
<div id="btn-close-modal" class="close-animatedModal close-popup-modal">
<i class="ion-close-round"></i>
</div>
<div class="clearfix"></div>
<div class="modal-content ">
<div class="container">
<div class="portfolio-padding" >
Hello World
</a>
</div>
</div>
</div>
</div>
this is my Js file where there is just one element assigned to it, to avoid showing the same content into all different classes.
$("#demo02").animatedModal();
I don't think it can be done without hacking the plugin.
As a matter of fact, the script jQuery.animatedModal ALWAYS TARGETS the page element which has id="animatedModal"
You can see the plugin source code here:
https://cdn.jsdelivr.net/npm/animatedmodal#1.0.0/animatedModal.js
...
//Defaults
var settings = $.extend({
modalTarget:'animatedModal',
...
Here is the AnimatedModal reference:
https://joaopereirawd.github.io/animatedModal.js/
At the bottom of the page, I can't see any OPTION regarding how to specify a different target, all options are about styles and animation features.
At this point, I think the only way to allow multiple modals on the same page is to rewrite the plugin, but I'm pretty sure you don't want to choose this way.

Adding background color in TurnJS

I have experienced problem I have never faced before and even googling it did not help.
I have basic code from the official page of script TurnJS, which is the problem I have with.
<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div class="hard"></div>
<div class="hard"></div>
This works as it should but is has transparent background so when you have any text on pages it overlays themselves so you cannot read the text properly.
When I add
#flipbook div{
background: white;
}
It somehow breaks. Pages skew when hovered etc.
I cannot insert a jsfiddle example because the link for turnjs script is not https and I am not allowed to insert http links. And here it shows me error in code.
The skewed page is shown on image below.
Does someone know how to add a bg-colorto that flipbook?
I would aprreciate any comments.
You can add another class to your pages which specifies a background colour:
<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div class="pageStyle"> Page 1 </div>
<div class="pageStyle"> Page 2 </div>
<div class="pageStyle"> Page 3 </div>
...
And then specify everything you need in that class. The other method is to load background images for each page. This is generally how a magazine would be created in TurnJS as it's easier to automate.
Although I just went over their docs looking for this (I know it works, I've done it before) and couldn't find much about it.

How to remember and keep the active nav tab using bootstrap 3? (Asp Mvc 5 if this matters)

Using bootstrap 3 I am trying this exameple. It works fine as expected, the first tab is active when page is shown. However when I navigate to an other page in my app, then back to this page, it forget the active tab, always the first tab is the active.
I would like to the page remember what was the active tab.
What I was tried so far:
I've tried to leave the class="active" from the li element and the class="in active" part from the div element. Unfortunately this case no tabs displayed at all, the user must explicitly click on the nav to show any tab, so this does not seems to be the solution.
Thanks in advance.
<ul class="nav nav-tabs">
<li class="active">graduation</li>
<li>graduate</li>
<li>extension</li>
</ul>
<div class="tab-content" id="TabContent">
<div class="tab-pane fade" id="graduation">
<p>
anything
</p>
</div>
<div class="tab-pane fade in active" id="graduate">
<p>
graduate
</p>
</div>
<div class="tab-pane fade" id="extension">
<p>
extension
</p>
</div>
</div>
You actually store this information in your url.
If your original url to this page is "//foo.bar/example", then you can extended to these three urls
//foo.bar/example#graduation
//foo.bar/example#graduate
//foo.bar/example#textension
When user clicks on a tab, you can update the url, and when your page loads, you can use window.location.hash to get the hash fragment and use the hash fragment to activate the corresponding tab.
If you are using some frontend framework like backbone or angular, they have builtin routing support that makes things easier for you.
Advantage of this over cookies/localStorage is that you can send these urls to other people, and they will be taken to the exact tab indicated.

foundation tabs with one up not working

I have two tabs on my page and I would like the page to init with both tabs closed. I cannot get it to work. If I switch to accordion I can get both to init closed.
Is there a different property for tabs?
Also I would assume closing a tab would occur if you click on a tab that is already open. However that is not the case.
<div class="section-container auto tabs" data-section data-options="one_up: false;">
<section>
<p class="title" data-section-title>Section 1</p>
<div class="content" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Section 2</p>
<div class="content" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
</div>
http://jsbin.com/omuvik/1/
I believe this was a design decision on the part of the Foundation team, as tabbed content normally has one section open at all times. If you resize a browser window with all accordion elements closed to the breakpoint where those become tabs, the first one will be forced open, which makes it seem like a deliberate behavior.
You can try setting a callback function in your data-options attribute: if you remove the "active" class from all tab sections, they'll all be closed.

jQTouch _webapp link

I have one main page and other sources on other pages. Since I can't use ajax loading because of the server limitation, I have to use target="_webapp" attribute to load on new page
<div id="home">
Link to external page
... content ...
</div>
Since normal back button ( a href="#") doesn't work with external page, I'm using javascript:history.go(-1)
<div id="the-external-page">
<div class="toolbar">
<h1>The External Page</h1>
<a class="back" href="javascript:history.go(-1)">Back</a>
</div>
<ul>
<li>Internal page</li>
<li>Internal page</li>
</ul>
... content ...
</div>
<div id="page1">
<div class="toolbar">
<h1>Page 1</h1>
<a class="back" href="#">Back</a>
</div>
.. content...
</div>
<div id="page2">
<div class="toolbar">
<h1>Page 2</h1>
<a class="back" href="#">Back</a>
</div>
.. content...
</div>
It works if user navigate #home -> #the-external-page -> #home
but since the other pages have multiple link within it when user visit #page1, #page2 all the history stack and the back button doesn't work until pressed multiple time.
I can't put absolute link in the back button either because the list of original pages are dynamically generated.
Is there way to go back to resolve this ?
Did not test with your code, but I suspect .goBack() in the jQtouch object may be what you're looking for: https://code.google.com/p/jqtouch/wiki/PublicObject
Relevant section:
goBack( to:object )
Forces jQTouch to go back to a certain page in the history. You can pass a specific page ID, a number of pages to go back, or nothing to go back one page. If the specified page can not be found, jQTouch will go back one page by default.

Categories