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.
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 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();
});
I did a very simple setup for bootstrap tabs navigation according to http://getbootstrap.com/javascript/#tabs and http://getbootstrap.com/components/#nav-tabs.
<ul class="nav nav-tabs" id="test_tab">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab1">
<span>Hello 1!</span>
</div>
<div class="tab-pane" id="tab2">
<span>Hello 2!</span>
</div>
</div>
$(function () {
$('#test_tab a').click(function (e) {
console.info("clicked!");
e.preventDefault()
$(this).tab('show');
});
});
However, it's not working correctly. When I click on a tab (e.g. tab2), it gets activated as desired, however I can't click it again. When I click on tab 1, tab 1 get's activated, but tab 2 stays activated aswell.
For clarification:
Start
Tab 1 | Tab 2
-----------------
Click on Tab 2
Tab 1 | Tab 2
-----------------
Hello 2!
Click on Tab 1
Tab 1 | Tab 2
-----------------
Hello 2!
Hello 1!
Using bootstrap's data-* syntax, you don't have to write any JS unless you want to manually show a tab (say you want to show a tab when a button is clicked or a function is ran, rather than clicking on it in the nav).
I couldn't reproduce your issue in jsFiddle, but what I suspect is going on is the click binding is manually showing tab 1, and preventing bootstrap from hiding the others.
Try removing the click handler, and relying only on bootstrap's data-toggle="tab"
Met exactly the same problem, actually need to add the 'active' class to the tab-pane as well.
<div class="tab-pane active" id="tab1">
<span>Hello 1!</span>
</div>
Found the reference here: http://getbootstrap.com/javascript/#fade-effect
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/