I was wondering how I can close a current tab in Twitter Bootstrap either by clicking on the active tab button or through a 'close' button. In other words, I want to know how to remove the 'active' class from:
Active tab button
Active tab pane
The user flow would be as follows:
All tabs unselected to start with
User clicks on a tab and relevant tab pane opens
User clicks on same tab button to close.
All tabs are closed.
A tab pane would look something like this:
<div class="tab-pane fade active" id="tab01">
Tab content #01
<a>Close Me</a>
</div><!-- /#tab01 -->
Hope this makes sense and appreciate the help!!
JS Fiddle link here: http://jsfiddle.net/dru_rustin/8Bw4z/
Try this. I'm not being able to demonstrate it in jsfiddle because of some post request issues.
Add an id to button close. And append a new HTML element for unfocus button.
your code will be like this.
<div id="configuration-panel" class="tab-content">
<div class="tab-pane fade active" id="tab01">Tab content #01
Close active tab
</div>
<!-- /#tab01 -->
Append css
#blur-hack {
position: absolute;
opacity: 0;
}
Append Javascript
$('#closetab').click(function (e) {
e.preventDefault();
$('#tab1').css("display", "none");
$('#ur-hack').focus();
});
Related
Okay, so I have this weird issue on my website which I might have a hard time explaining. I am working on a website which only has one page(index.html) and no scroll. I have a navbar on the left with some menu items. So when clicked on a menu item a box appears with content. As it is a single page no scroll website, I have used IDs to call those boxes. Please see the code below:
<div class="nav-content">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
when clicked on a menu item this kind of section appears on the screen.
<section class="content show background-overlay" id="about">
<div class="aboutUs">
<h1>About Us</h1>
<div class="overflow-scroll">
Lorem ipsumasfasfasfasfafafsafs
</div>
</div>
</section>
And the browser address bar shows something like this after clicking on the links:
file:///C:/Users/zak/Desktop/web/project1/index.html#home
or
file:///C:/Users/zak/Desktop/web/project1/index.html#gallery
Now I have used a modal box inside the gallery content section and after I close the modal box, the page does not stay at the gallery content section but reloads.
For example:
Modal box is here:
file:///C:/Users/zak/Desktop/web/project1/index.html#gallery
After modal is closed:
file:///C:/Users/zak/Desktop/web/project1/index.html (which is the home content section)
I want the gallery section to stay open even if I close the modal.
For the modal, I have not used any JS or jQuery. It is pure HTML and CSS. To get rid of the issue I have tried a simple jquery code:
$('#modal_close').click(function(e) {
e.preventDefault();
return false;
});
This code just stops everything working.
Can anybody tell me how to stop the page from reloading after the modal box is closed?
You can try to use hide event to make refresh.
$('#modal_close').on('hide', function() {
window.location.reload();
});
I am working on a bootstrap website. I have a button that I click on one pageA to an href tab on pageB. I want to be able to click on the button on pageA and open the tab and the connected panel on pageB.
Here is what I have researched and tried:
jQueryUi tabs to set a specific tab to active
$('#learn2').click(function(){
$('#tactical-tab').tabs('select', 4);
});
jQuery triggers to simulate an event
$('#learn2').click(function(){
$('#tactical-tab').trigger('click');
});
Adding a class via css to set tab to active
$('#learn2').click(function(){
$('#tactical-tab').addClass(".ui-tabs-active");
});
Here is some code for the button.
<h4>Learn More</h4>
Here is some code for the tabs and tab-panels
Tabs
<div id="tabs">
<ul>
Tactical Transparency
</li>
</ul>
Panel
<div id="service-five">
<h4>Tactical Transparency</h4>
<p>Sample paragraph</p>
</div>
Any help or input would be appreciated as I am not sure where the next place to research would be or if I am just missing something.
I have a editable div on my page, and when the users focuses on that div, I have a script that shows a bootstrap modal with a toolbar for advanced editing tools.
The problem is when the user focuses on the div and the modal appears it is disabling the ability to edit the text within the div. When you click on the div to edit it, the modal goes away.
I am needing the modal to stay open so the user can use the toolbar to edit the text in the div on the standard page.
The modal looks like what is below.
<!--Editor Toolbar -->
<div id="editorToolbar" class="modal container hide fade" tabindex="-1" data-backdrop="false">
<div class="modal-body">
<?php include '../core/editorBar.php'; ?>
</div>
</div>
I have made this script to allow the modal to display when the div has focus, Now I just need to make it stay while you type in the div.
<script type="text/javascript">
function showToolbar()
{
$('#editorToolbar').modal('show');
}
</script>
Any help and ideas would be really appreciated!
update
I added: data-backdrop="false" to the modal div, this removed the backdrop (grey overlay) from behind the modal, but when you click the div it still hides the modal again.
According the bootstrap docs, you will want to set the backdrop data option to "static". So either:
<div id="myModal" data-backdrop="static">...</div>
or:
$('#myModal').modal({
backdrop: 'static'
});
I'm using Bootstrap's nav-tabs with the following setup:
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Profile</li>
</ul>
<div id="tabContent" class="tab-content">
<div class="tab-pane active in" id="home">
<form id="tab">
<label>Name:</label>
<input type="text" value="fooBar" class="input-xlarge">
</form>
</div>
<div class="tab-pane fade" id="profile">
<form id="tab2">
Home
</form>
</div>
</div>
As you can see, I have a link in my profile tab, which links to the first tab. Clicking on the anchor does change the URL in the URL bar, however it doesn't jump to the specific tab.
I then noticed that it is generally not possible to link to a tab directly, so I added the following code from Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink:
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
}
// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
window.location.hash = e.target.hash;
})
Now I can link to a specific tab from somewhere else, but not, if I'm on the same page where the nav-bar is. Reloading the page would then jump to the wanted tab, so I thought I could just forcefully reload the page, with the solution from Javascript: How to truly reload a site with an anchor tag?:
window.location.reload(true);
This however ended up in a reload every time I clicked on a tab, in addition it still didn't load the home tab, when clicked on the anchor.
Thus, how would I jump to a given id from another tab?
You might have been put on the the wrong foot by the other answers you mention ... it is fairly trivial to change tabs from within the same page (regardless if you're in another tab or not): you can use the basic bootstrap tab navigation Javascript for this.
First change your html a bit: add an id to your <ul class="nav nav-tabs" id="myTab">.. then add a link to your second tab:
<div class="tab-pane fade" id="profile">
<form id="tab2">
Jump to home tab (this works)
...
and add the following in your document ready:
$('#gotohome').click(function() {
$('#myTab a[href="#home"]').tab('show');
});
Working example at jsFiddle.
The given answer
$('#myTab a[href="#home"]').tab('show');
can also be used to make a JavaScript software jump to a specific tab.
Assume you want to jump to a specific tab on start by using the url:
http://myDomain/myApp#tabSomewhere
You can imagine that will work (you need to make some additional coding).
Suppose your First page is on the tabHome (you make that active with the 'active' class. When you try to go back to that page using javascript you have to remove the active class from the tabHome using:
$('li').removeClass('active');
So I have this menu and when I click on a button I need to create another div under the menu. I have done that. But when I click on another button on the menu that div is still there and I want it to dissapear/collapse. So how should I do it? What I found until now is how to hide a div when clicking on a specific show/hide button, but I need to hide that div when I click any button on my page...
Any help is highly appreciated.
My code is this but I don't think it is relevant (I am interested in the process, how should I do it):
<div id="container">
<ul id="nav">
<li>Despre noi</li>
<li>Projects</li>
<li>Implica-te</li>
<li>Stiri</li>
<li>Contact</li>
</ul>
</div>
So this is my menu and when I click on projects this div shows up
<div id="menu_lava">
</div>
which is a lavalamp submenu. But how can I make it to collapse when I click on other buttons on my main menu?
Hide all info-div's on a click and just show the sepcific one:
Here's a jsfiddle (using jQuery):
http://jsfiddle.net/FKeAF/1/