Basically I'm trying to create a "wizard" via bootstrap where the active tab changes when the "continue" button is clicked. I've managed to come up with the following code:
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav nav-pills">
<li class="active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="step1">
<a class="btn" href="#step2" data-toggle="tab">Continue</a>
</div>
<div class="tab-pane" id="step2">
Step 2
<a class="btn" href="#step3" data-toggle="tab">Continue</a>
</div>
<div class="tab-pane" id="step3">
Step 3
</div>
</div>
</div>
Right now it works fine when I click the nav pills themselves (the content changes and the active pill changes too).
However when I click the individual continue button the content changes but the active nav pill does not change.
Why doesn't the active class change like when I click the pill itself?
Here's a jsFiddle with the code:
http://jsfiddle.net/MvY4x/5/
Just found this much more elegant solution...
$('ul.nav.nav-pills li a').click(function() {
$(this).parent().addClass('active').siblings().removeClass('active');
});
from: http://info.michael-simons.eu/2012/07/30/twitter-bootstrap-make-the-default-pills-more-usable/
You could use jQuery to activate the next tab and it's content. Give all of your continue buttons a class like 'continue' and then you can do something like this..
$('.continue').click(function(){
var nextId = $(this).parents('.tab-pane').next().attr("id");
$('[href=#'+nextId+']').tab('show');
})
Demo on Bootply: http://bootply.com/112163
you could add Ids to the pills (step1tab, etc) and then make a function a function like this:
function switchPill(a,b){
$("#step"+a+"tab").removeClass("active");
$("#step"+b+"tab").addClass("active");
}
and add this to the anchor tag of the text:
onClick="switchPill(2,3)"
I hacked this fiddle: http://jsfiddle.net/MvY4x/7/
$('div.tab-content a[data-toggle]').on('click', function ()
{
var that = $(this),
link = that.attr('href');
$('a[href="' + link + '"]').not(that).trigger('click');
});
Really a bad ass hack, needs improvement but may give an idea...
Related
I want the menu to automatically animate closed after an item within the menu has been clicked on. And I want the user to still have the option to toggle the menu again. I managed to get the item to disappear after an item is clicked using $('#overlay').toggleClass(); but now the user no longer has the option to click on the menu again. I've tried googling around but can't find a clear answer. I'm new to JavaScript can someone please point me in the right direction.
Link to example http://codepen.io/anon/pen/KpRmgE
HTML
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li >Home</li>
<li>Port</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</div>
<section id="home">
<p>First</p>
</section>
<section id="portfolio">
<p>Second</p>
</section>
<section id="about">
<p>Third</p>
</section>
<section id="contact">
<p>Fourth</p>
</section>
JavaScript
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
$("nav li").click(function () {
$('#overlay').toggleClass();
});
});
You weren't far off... just a few wrongly placed calls inside the click handler.
Try this:
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
});
$("nav li").click(function() {
$('#overlay').toggleClass('open');
$('#toggle').toggleClass('active');
});
Forked codepen
You can also do it this way to make your event handler more clear:
$('#toggle').click(function() {
// Adding classes, waiting for a click
$(this).addClass('active');
$('#overlay').addClass('open');
$("nav li").click(function () {
// Clicked! Removing classes
$('#overlay').removeClass('open');
$('#toggle').removeClass('active');
});
});
I personally usually use the addClass and removeClass functions when you are doing that kind of specific action. That helps you avoid small errors that could take long to be seen. :)
I have a sidebar on my website that contains link's to individual divs, but when I try and click on any of them they just highlight without jumping to the div.
The website in question is http://www.ico.mmu.ac.uk/13143651/dip/pages/football.html
the top nav works fine, it's just the side nav that seems to have problems.
Sidebar nav
<div class="row-offcanvas row-offcanvas-left">
<div id="sidebar" class="sidebar-offcanvas">
<div class="col-md-12">
<a class="navbar-brand" href="#intro">Football</a>
<ul class="nav nav-pills nav-stacked text-center">
<li>Men's Training</li>
<li>Women's Training</li>
<li>Section</li>
<li>Section</li>
<li>Section</li>
</div>
</div>
example div
<div class="col-md-9" id="intro">
<div class="text-center">
<p>some text </p>
</div>
</div>
Any help will be greatly appreciated. Thanks
open your smoothscroll.js in path styling/js delete all and paste this to JUMP directly
jQuery(document).ready(function(){
jQuery('a[href^="#"]').click(function(e) {
var hashtag=$(this).attr("href");
window.location=hashtag;
});
});
EDIT:
try to put this on smoothscroll.js
jQuery(document).ready(function(){
jQuery('a[href^="#"]').click(function(e) {
jQuery('#main').animate({ scrollTop: jQuery(this.hash).offset().top}, 1000);
return false;
e.preventDefault();
});
});
this is the problem: ('html,body') you want to scroll the main div
I am attempting to figure out how to change the content of two different, non-contiguous divs, when a link is clicked. I have some draft HTML and Javascript, and I suspect missing CSS might be the key to make this work.
Here is the HTML:
<ul id="tabs">
<li>Link 1
</li>
<li>Link 2
</li>
</ul>
<div id="tabs-container">
<div id="content1">Content for link 1. Should display only when Link 1 is clicked.</div>
<div id="content2">Content for link 2. Should display only when Link 2 is clicked.</div>
</div>
<p>Unrelated text is here. Text in this area is static and should display at all times.</p>
<div id="tabs-container-2">
<div id="content1-2">Additional content for link 1. Should display only when Link 1 is clicked.</div>
<div id="content2-2">Additional content for link 2. Should display only when Link 2 is clicked.</div>
</div>
Here is the Javascript:
$(function () {
$('#tabs-container .tabs').hide().eq(0).show();
$('#tabs-container-2 .tabs').hide().eq(0).show();
$('#tabs li').click(function () {
num = $('#tabs li').index(this);
$('#tabs-container .tabs').hide().eq(num).show();
$('#tabs-container-2 .tabs').hide().eq(num).show();
});
});
I am a novice at CSS and Javascript. In fact, I deleted my attempt at CSS because it was so poor. Here is the partial jsfiddle:
http://jsfiddle.net/Fbx_Steve/GbaMx/14/
Hope someone can help. Am I even on the right track?
Try,
$(function () {
$('#tabs-container div').hide().eq(0).show();
$('#tabs-container-2 div').hide().eq(0).show();
$('#tabs li').click(function () {
$('#tabs-container div').hide()
$('#tabs-container-2 div').hide()
num = $('#tabs li').index(this);
$('#tabs-container div').hide().eq(num).show();
$('#tabs-container-2 div').hide().eq(num).show();
});
});
DEMO
Is this what you're after?
http://jsfiddle.net/GbaMx/16/
I added an id to each link, and when the link is clicked the repective content is toggled.
I grouped them into 2 classes for .c1 .c2 for content 1 and content 2
Updates JSFiddle: http://jsfiddle.net/GbaMx/18/
Your Javascript was totally fine. However, you were trying to reference the tabs class, when there were no such classes defined. Thus, I had to update the HTML with ids of content-x to have a class of tabs.
Try this
JQUERY CODE:
$(function () {
$('#tabs-container div').hide();
$('#tabs-container-2 div').hide();
$('#tabs li a').on('click', function (event) {
event.preventDefault();
num = $(this).parent().index();
$('#tabs-container div').eq(num).slideToggle();
$('#tabs-container-2 div').eq(num).slideToggle();
});
});
LIVE DEMO:
http://jsfiddle.net/dreamweiver/GbaMx/22/
There were few things missing in your code, so i have just tuned it a bit.
Happy Coding :)
Try this:
html
<ul id="tabs">
<li><a id="link1" href="#">Link 1</a>
</li>
<li><a id="link2" href="#">Link 2</a>
</li>
</ul>
<div id="tabs-container">
<div id="content1" class="contents">Content for link 1. Should display only when Link 1 is clicked.</div>
<div id="content2" class="contents">Content for link 2. Should display only when Link 2 is clicked.</div>
</div>
<p>Unrelated text is here. Text in this area is static and should display at all times.</p>
<div id="tabs-container-2">
<div id="content1-2" class="contents">Additional content for link 1. Should display only when Link 1 is clicked.</div>
<div id="content2-2" class="contents">Additional content for link 2. Should display only when Link 2 is clicked.</div>
</div>
javascript
$( document ).ready(function() {
// hide tabs
$('.contents').hide();
$('#link1').click( function() {
$('#content1,#content1-2').show();
return false;
});
$('#link2').click( function() {
$('#content2,#content2-2').show();
return false;
});
});
see demo: http://jsfiddle.net/Magicianred/BV2kS/1/
Enjoy your code
It works you're only missing a class "tabs" in the content divs:
<ul id="tabs">
<li>Link 1
</li>
<li>Link 2
</li>
</ul>
<div id="tabs-container">
<div id="content1" class="tabs">Content for link 1. Should display only when Link 1 is clicked.</div>
<div id="content2" class="tabs">Content for link 2. Should display only when Link 2 is clicked.</div>
</div>
<p>Unrelated text is here. Text in this area is static and should display at all times.</p>
<div id="tabs-container-2">
<div id="content1-2" class="tabs">Additional content for link 1. Should display only when Link 1 is clicked.</div>
<div id="content2-2" class="tabs">Additional content for link 2. Should display only when Link 2 is clicked.</div>
</div>
DEMO
I am trying to use bootstrap to create a dropdown toggle that allows the user to hide/unhide certain div sections. The code is seen below:
<div class="tabbable">
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn dropdown-toggle input-large" data-toggle="dropdown" href="#">
Select an Area by:
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="active"><a data-toggle="tab" href="#Parish">Parish</a></li>
<li><a data-toggle="tab" href="#Area">MLS Area</a></li>
<li><a data-toggle="tab" href="#City">City</a></li>
<li><a data-toggle="tab" href="#Zip">Zip</a></li>
</ul>
</div> <!-- /btn-group -->
</div> <!-- /btn-toolbar -->
<div class="tab-content">
<div class="tab-pane active" id="Parish">
Parish
</div>
<div class="tab-pane" id="Area">
Area
</div>
<div class="tab-pane" id="City">
City
</div>
<div class="tab-pane" id="Zip">
Zip
</div>
</div>
It works (kind of), except for the fact that after selecting an option the first time, it never toggles off after selecting a new item. It also does not allow me to go back to an item that has already been selected. I have searched everywhere and used the web console in Firefox to debug, but do not see what the problem is. This happens in Chrome and IE too.
I have created a Bootstrap snippet that demonstrates the behavior here: http://bootply.com/102355
I would appreciate any help. Am I trying to do something with bootstrap that just can't be done yet?
I don't know if you've solved this, but here it is how I would do it using jQuery (I don't know bootstrap):
$('.dropdown-menu li a').click(function(){
DeselectCurrent();
});
var DeselectCurrent = function() {
jQuery('.dropdown-menu li').each(function(){
var attr = jQuery(this).attr('class');
if (typeof attr !== 'undefined' && attr !== false) {
jQuery(this).removeClass("active");
}
});
};
Here it's a working example: http://bootply.com/102465
By the way, in my example I named my function DeselectCurrent... It would make more sense if you named it DeselectPrevious.
Just a side note, I don't see in your markup an id with a value of myTab (like you are referencing it here $('#myTab a').click(function (e)) but I am assuming that's how you target your tabs in twitter-bootstrap...
Hope this helps.
I'm trying to figure out one thing, I have a one page website and want hide sub-menus under portfolio when other menu links cliked http://jsfiddle.net/kuuwj/15/
HTML
<ul id="navbar">
<li>Home</li>
<li>Portfolio
<div class="portfolio-apps">
<section id="website">
<span class="button">AAAAAAAAAAAAAAAAAAAAAA</span>
</section>
<section id="gterminal">
<span class="button">BBBBBBBBBBBBBBBBBBBBBB</span>
</section>
<section>
<span class="button">CCCCCCCCCCCCCCCCCCCCCC</span>
</section>
</div>
</li>
<li>About Me</li>
<li>Contact</li>
</ul>
JS
$(document).ready(function () {
var portf_apps = $('.portfolio-apps');
portf_apps.hide();
$('#nav-portfolio').click(function() {
portf_apps.show();
});
});
Change your Javascript to this:
$('#navbar > li > a').click(function(){
portf_apps.hide();
});
$('#nav-portfolio').unbind('click').click(function() {
portf_apps.show();
});
Bind another click event to the other navbar elements before the portfolio showing one:
$("#navbar a").on('click', function () {
$(".portfolio-apps").hide();
});
var portf_apps = $('.portfolio-apps');
...
This will cause the portf_apps method to trigger afterwards which will show its children even if it's clicked. I suggest updating this to work with parent-child relationships generally, though.
http://jsfiddle.net/jWujm/