I have recently started working with dynamic tabs and I hit a wall trying to play with them and their respective divs.
My code is the following and works this way:
<ul id="modalFormUlId" class="bootstrapWizard form-wizard">
<li class="active" data-target="#step1"> <span class="step">1</span><span class="title">Datos Generales</span>
</li>
<li data-target="#step2"> <span class="step">2</span> <span class="title">Detalles Financieros</span>
</li>
<li data-target="#step3"> <span class="step">3</span> <span class="title">Archivos</span>
</li>
<li data-target="#step4"> <span class="step">4</span> <span class="title">Historial Transacciones</span>
</li>
<li data-target="#step5"> <span class="step">5</span> <span class="title">Resguardante</span>
</li>
<li data-target="#step6"> <span class="step">6</span> <span class="title">Etiqueta</span>
</li>
</ul>
<div class="clearfix"></div>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<br>
<h3><strong></strong> Datos Generales</h3>
</div><!-- End tab1 -->
<div class="tab-pane" id="tab2">
<br>
<h3><strong></strong> Detalles Financieros</h3>
</div>
<div class="tab-pane" id="tab3">
<br>
<h3><strong></strong> Lista Archivos</h3>
</div>
<div class="tab-pane" id="tab4">
<br>
<h3><strong></strong> Historial de Transacciones</h3>
</div>
<div class="tab-pane" id="tab5">
<br>
<h3><strong></strong> Resguardante</h3>
</div>
<div class="tab-pane" id="tab6">
<br>
<h3 ><strong></strong> Etiqueta del Bien</h3>
</div>
When I click a button, a small window (div) appears which has the
code written above.
Clicking on any of the li elements, brings out its respective div
Bootstrap class makes it so the li elements show as circles that
paint green when set as active (default for first one, then changes
as I click on any of them)
As you can see, the first li element has its class set as active,
since when the window its first opened, its the default choice shown.
When I close my div and re-open it by clicking the button, it appears
again having the last li element clicked as active (So, if I clicked
li for #step3 element then close my window and opened it again, #tab3
div would still be showing).
My problem comes when trying to set a different li element as active after reopening my window, since #step1 keeps showing as the active one even when any other div is the one currently being displayed, I know I would have to get the current active div and set its li element to active or something like that, but I'm still inexperienced in jQuery (need to do it with jQuery) and can't seem to do it.
Any tips would be appreciated.
You just need to add a click listener to your button which you use to open the modal and trigger a click manually on first tab.
Here is the code:
$(function(){
$('#modal-btn').click(function () {
$("#modalFormUlId a:eq(0)").click();
// or
//$('#modalFormUlId a:first').tab('show');
});
});
Here is working example http://jsfiddle.net/0mvt0qe5/3/
Onclick of any li, store the active tab in localStorage and when you hit the button you can check if active tab has any localStorage value and make them active accordingly. Hope this will help you. Please let me know if you face any issues using this.
Try doing this:
set the localStorage based on your active tab, you can give on onclick event of any tab
localStorage.setItem("activeTab", "Archivos");
Use localStorage.getItem("activeTab"), based on that add active class to the tab
Related
I am trying to make Bootstrap 4 dropdown have this style: slinky.js.org
This is what I have by now: https://codepen.io/nht910/pen/yLexeEM
Main code:
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="main-container">
<div class="menu-container">
<div class="menu-1">
<span>Link-1</span>
<button class="button-1">arrow-1</button>
</div>
<div class="menu-2">
<span>Link-2</span>
<button class="button-2">arrow-2</button>
</div>
</div>
<div class="submenu-container">
<div class="submenu-1"> <!-- submenu of .menu-1 -->
<div class="arrow-back">
<button class="button-back-1">Arrow back 1</button>
</div>
<div>
<span>Child 1</span>
</div>
</div>
<div class="submenu-2"> <!-- submenu of .menu-2 -->
<div class="arrow-back">
<button class="button-back-2">Arrow back 2</button>
</div>
<div>
<span>Child 2</span>
</div>
</div>
</div>
</div>
</div>
To make dropdown has slide effect:
I set two classes .submenu-1 and .submenu-2 to display: none, and when user click on arrow button, corresponding submenu will be shown and slide to it.
when user click on arrow back, it will slide back to main menu, and after finish sliding effect, it will hide submenu.
That is what I have for now. But I don't know how to resize dropdown's height to fit content inside it (dynamic height) like slinky.js.org.
Thank you so much.
Try using hide & code when you click.
you can simply do it by using jQuery
$("selector").hide() & $("selector").show()
when user clicks your custom buttons
Solution: https://codepen.io/nht910/pen/OJMobEm
I change height of dropdown using JS with .submenu-1 is the content I want dropdown to fit:
$('.dropdown-menu').height($('.submenu-1').outerHeight());
But it got one problem. At the first time I click on arrow button (it is the first time height of dropdown changed), the transition animation doesn't work. But after that, it work perfectly. So I add another line at global to make the first time that height is changed happen on page load. And now it work perfectly for me.
I have 2 div's, the first is just a link,
<div id="click1" class="grid-66 mobile-grid-100 user-photo-tag-click" style="display:block" onclick="replace()"> CLICK AND SHOW TAGS
</div>
The second is a list of photo tags,
<div id="click2" class="grid-66 mobile-grid-100 user-photo-tag" style="display:none">
<ul>
<li>RACE SHOP
</li>
<li>AAA
</li>
<li>77
</li>
</ul>
</div>
I am trying to set it up so that when the link is clicked, it disappears and the photo tags show in its place. I have started a JSFIDDLE here, https://jsfiddle.net/patricksharer/g43t1bnh/ so that my code can be viewed cleanly. My javascript function doesnt seem to be working. Can somone please take a look and tell me why? Thanks
I have a main menu. This main menu opens hidden divs that also contain inner menus that show and hide content.
You can see this in action here: http://shirleycollinsmovie.com/collins-html5/index.html#about
The user can select from the main menu and open up one of the hidden divs, and then explore the contents of the inner menu.
However when the user closes the hidden div and then opens a new one, then returns to the previous one again, instead of it displaying the contents from the beginning again it shows them exactly where they were when they left the hidden div previously. I want it to display the contents from the beginning again.
This is the code I have which shows the hidden divs from the main menu (I am using the same code for the inner menus as well):
$('#menu nav a').click(function() {
$('.draggable').hide();
$(this.getAttribute('href')).show()
});
<div id="menu">
<h1>main header</h1>
<nav>
<a id="about-link" href="#about">About</a>
<a id="news-link" href="#news">News</a>
<a id="foundation-link" href="#foundation">Foundation</a>
<a id="contact-link" href="#contact-info">Contact</a>
</nav></div>
<div id="foundation" class="hidden draggable-scroll">
<div id="foundation-nav" class="box-text">
<nav>
The Story so Far
What will the Foundation do?
The Manifesto
Who is the Foundation?
</nav>
</div>
<div id="foundation-opening" class="box-text foundation-info">
<h2>header </h2>
<p>
</p></div>
<div id="the-story" class="box-text foundation-info hidden">
<h2>The Story so far: </h2>
<p>
And she’s not done yet,</p>
</div>
<div id="what" class="box-text foundation-info hidden">
<p>
The Ballad of </p>
</div>
<div id="manifesto" class="box-text foundation-info hidden">
<h2>The proposed Manifesto: </h2>
<p>
The reason for the foundation to exist: </p>
</div>
<div id="who" class="box-text foundation-info hidden">
<h2>Who is the Foundation?</h2>
<p> </p>
</div>
<div class="close-box">
x</div>
</div>
Perhaps there is a way to target the starting content from the href of the main menu?
Or is there a way within the jQuery to re-hide the hidden content when the users selects from the main menu again?
A simple workaround,
The following code finds first/beginning Menu Item - a:first selector and trigger click on it.
$('#menu nav a').click(function() {
$('.draggable').hide();
$(this.getAttribute('href')).show().find('nav a:first').click();
});
This would always open first <a> of <nav>.
It works with your site link. Tried out in console.
so I am making a page with three nav tabs on the left and a map on the right. I have my code here for the nav tabs. On the first tab I want a field where the user can enter some info and the map will adjust accordingly. It works fine once the page loads, but if I visit another tab and come back then the input field will be gone. Any ideas?
<div class="tabbable" class='span4'> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li id='tab1' class="active">Browse</li>
<li>History</li>
<li>Wishlist</li>
</ul>
<div class="tab-content">
<!-- Browse tab -->
<div class="tab-pane active" id="tab1">
<form class="form-search">
<input type="text" class="input-medium search-query" id='location'>
<button type="submit" class="btn">Search</button>
<p><b>Find brewery by name..</b></p>
</form>
</div><!-- end Browse Tab -->
<!-- History tab -->
<div class="tab-pane" id="tab2">
<p>I've been here!</p>
</div><!-- end History tab -->
<!-- Wishlist tab -->
<div class="tab-pane" id="tab3">
<p>We still have to check these places out!</p>
</div><!-- end Wishlist tab -->
</div>
</div>
Since your nav links are a tags using anchors in their href, the page is reloaded on click. A page reload will reset any entered form information.
Is there a way to do it where I do not have to refresh? Should I change the a tags to something else?
Yes like this (looks ugly, works great IMO):
alternatively, with HTML5 you can leave out the href altogether
<a></a>
but...I wouldn't recommend that, probably some backwards compatibility issues.
After re-reading your original question though I don't think this is the root of the problem, hard to tell without a live example though.
I am using bootstrap tabs on a custom modal (my own version). The tabs open when clicked the first time the modal is opened, but no longer work the second time the modal is opened.
This is the HTML code for the tabs :
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
What I am doing is :
I have a button in my page, when clicked on it, a modal (like Lightbox) will open with the tabs in it.
The first time it is opened, the tabs are working fine; when tabs are clicked, respective content is displayed. But when it is closed and opened again, the tabs are not working; when the tabs are clicked, the respective data is not being displayed.
Here, I am dynamically adding elements to DOM, when button clicked,but I am not removing elements when CLOSE clicked, So,deleting the element after close is clicked is the solution .