Right now I have a anchor link which upon clicking opens a modal window. Inside modal window I have Two tabs.
When the link is clicked the modal opens and tabs are shown.
Here is the code:
<a href="#" data-reveal-id="myModal" data-animation="fade" >Weekly Schedule</a>
And here is the modal window with tabs:
<div id="myModal" class="reveal-modal">
<a class="close-reveal-modal">×</a>
<div id="tabs">
<ul>
<li>Schedule 1</li>
<li>Schedule 2</li>
</ul>
<div id="tabs-1">
Schedule 1 content
</div>
<div id="tabs-2">
Schedule 1 content
</div>
</div>
</div>
Here is the JSFiddle :
http://jsfiddle.net/3npaykxd/7/
It is working fine. But now I want to change the anchor link to select drop down. So that whenever user changes the option. Modal window opens with the selected option tab open as default.
Like this :
<select name="schedule">
<option value="">Please Select schedule </option>
<option value="0">Schedule 1 </option>
<option value="1">Schedule 2</option>
</select>
So choosing option 1 will open modal window with tab 1 open as default inside it. And similarly choosing tab 2 will open modal with tab 2 open as default inside it.
How do I achieve this?
Ahmar
Thank to this: How do I open a tab from with jQuery UI Tabs from an link outside of the div?
When select box change, tabs also change. Here is jsFiddle: http://jsfiddle.net/3npaykxd/8/
$('#schedule').on('change',function(e){
console.log($(this).val());
$( "#tabs" ).tabs("select",$(this).val());
})
I think you can handle fadeIn/fadeOut yourself
Related
I have a button in my index page when clicking on that button I need to open a specific tab section of another page. the button is on one page and the tab is on the second page.
I have multiple tabs on the 2nd page but only writing here 1 tabs that one I need to open when is clicked from home page
Page 1 - Where I have a button
<p>View Example Worksheet</p>
Page 2 - tabs exist
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link " data-toggle="tab" href="#w1">Worksheet</a>
</li>
<div id="w1" class="container tab-pane fade"><br>
<div class="container">
<div class="row">
<div class="col-12 col-sm-11">
<p class="f-15 gry2">The primary use of this worksheet is to provide a detailed checklist that will facilitate precise development of specifications with drawings, to ensure that all parties are talking about the same type and quality of building.</p>
<p>
</div>
</div>
</div>
</div>
Firstly this is not right way for tabs UI.
But if you want use
<script>
$(document).ready(function(){
$(".btn_readmore2").click(function(){
$("#w1").load("demo_test.txt");
});
});
</script>
other way find function is useful with is visible option you can check.
if($("#w1:visible")){
write you show action code here
}
I have a side-menu on my bootstrap webpage which is open by default.
If the screen is too small there is a button placed behind it to open the menu again.
When a user clicks on a link I would like the menu to close automatically.
The button I already have opens the menu perfectly, but I have no way of closing it?
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand"><img src="/content/img/AAA.png" width="27px" />Menu</li>
<li data-ng-hide="!authentication.isAuth">Welcome {{authentication.userName}}</li>
<li data-ng-hide="!authentication.isAuth">Page1</li>
<li data-ng-hide="!authentication.isAuth">Logout</li>
<li data-ng-hide="authentication.isAuth"><span class="glyphicon glyphicon-user"></span> Login</li>
<li data-ng-hide="authentication.isAuth"><span class="glyphicon glyphicon-log-in"></span> Sign Up</li>
</ul>
</div>
</div>
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">
Menu
</a>
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
You could add in another event handler for the a elements.
$(".sidebar-nav li a").click(function() {
$("#wrapper").removeClass("toggled");
});
Here are a few things that you could do:
You could use hide/show with jQuery(I can see you are already using it).
Instead of makeing a "toggled" class, Bootstrap has a built in "hidden" class that you could use.
You could also toggle it's css "display" value.
You could use the "animate" class to slide the menu on and off the screen.
You could have a variable to store the state of the menu("true" for out, "false" for in), and change it when the toggle button is clicked.
I had a similar issue, and I placed a close button on the menu, and added a seperate click handler that would close the menu. The close button would then hide with the menu, leaving just the button to open the menu again.
How do you prevent the dropdown menu class in Bootstrap from closing whenever a link inside is clicked?
I want users to select one of the class "type-of-visitors" and also be able to select one of the options in the select field without closing the dropdown menu.
& the "Go" button will be the one closing the menu.
<ul class="dropdown-menu">
<li>Total visitors</li>
<li>Paid visitors</li>
<li>Social media</li>
<li>Compare data
<select>
<option>Last month</option>
<option>Last week</option>
<option>Last 3 months</option>
</select>
</li>
<li>
Go
</li>
</ul>
Here's the jsfiddle to it: http://jsfiddle.net/stan255/cU6Y5/
There was a similiar question posted about this and the answer should suffice
"The issue is that the boostrap dropdown jQuery plugin closes the dropped-menu when you click anywhere else. You can disable that behavior by capturing the click events on your dropdown-menu element and keeping it from reaching the click event listeners on the body element."
Just add
$('.dropdown-menu').click(function(event){
event.stopPropagation();
});
i need to shift tabs on clicking the NEXT green button at the end of each tab.
here it is http://www.cmsonlinehelp.com/ann/events
currently whats happening is that i am able to move to tabs by clicking on them.
but i need to move to next tabs on clicking the NEXT button.
Here is my script code :
<script type="text/javascript">
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
I am using this in my navigation:
<ul id="countrytabs" class="shadetabs">
<li>Photography Coverage</li>
<li>Video Coverage</li>
<li>Dj Coverage</li>
<li>Event Details</li>
</ul>
Giving id's to the single tabs div like:
<div id="country1" class="tabcontent">
<div id="country2" class="tabcontent">
<div id="country3" class="tabcontent">
<div id="country4" class="tabcontent">
Just call the click event of the tab link. So for the first "Next" button your javascript would call document.getElementById('videocoverage').click()
Using Bootstrap modal that contains tabs. The modal is called from a php generated table of gallery names.
Table Data
<td>
<a href="#" class="galName" data-target="#myModal" data-toggle="modal" id="update_<?php echo $gal['id']; ?>" >
<?php echo $gal['name']; ?>
</a>
</td>
The modal opens and the first tab is selected on initial fire. If I navigate to another tab close the modal and select a different gallery the modal opens to the last tab that was open.
How do I make sure that when the modal is opened, it always opens to the first tab?
Modal Tabs
<ul id="myTab" class="nav nav-tabs">
<li class="active">
Home
</li>
<li class="">
<a id="uploadRevision" href="#upload" data-toggle="tab">Upload Revision</a>
</li>
<li class="">
Edit Revision
</li>
</ul>
.galName fires an initUpdate function in effort to set first tab as default. It sets the tab but tab content is not show.
function initUpdate()
{
$('#myModal a:first').tab('show');
}
Thanks for the help.
Found the solution. Must remove the class="active" from both tab and tabContent. Thanks to #merv - https://stackoverflow.com/a/11762931/1214858
Simple; use class "active" to show particular tab on load.
Like below:
<!-- Nav tabs -->
<!-- content tabs -->
Remove class="tab-pane active" in li of above on nav of tab and content which you want to make it in active.