I am trying to use the twitter bootstrap wizard (http://vinceg.github.io/twitter-bootstrap-wizard/) and for some reason when the first tab/pill the next button is showing that it is disabled. The button does work when I click on it, but it doesn't appear to be fully active.
Here is video of the functionality I am seeing. You will notice that when the tab first opens tab 1 is selected. The progress bar is a 0% and the next button is showing disabled. When I click next it does move to the next tab. When I go back to the first tab, the progress bar has the correct width for tab 1 and now the next button for tab 1 is no longer disabled. Ideally I would like this functionality to work from the beginning.
YouTube Video:
https://youtu.be/zq9yCCUJQ68
HTML:
<div class="row">
<div class="col-md-12">
<ul class="nav nav-pills">
<li><a id="mywebsitesLink" data-toggle="tab" href="#mywebsites">My Websites</a></li>
<li><a data-toggle="tab" href="#billing">Billing</a></li>
<li><a data-toggle="tab" href="#suppport">Support</a></li>
<li><a data-toggle="tab" href="#newWebsite">Add a new website</a></li>
</ul>
<div class="tab-content">
<div id="mywebsites" class="tab-pane fade">
<!-- <div class="col-md-4 website-container">
<strong>Website URL: </strong><p>https://powerfastwebsites.com</p>
<strong>Website Admin Login: </strong><p>https://powerfastwebsites.com/wp-admin</p>
<strong>Plan: </strong><p>Basic</p>
<button type="button" class="btn btn-primary">Upgrade Plan</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div>
<div class="col-md-4 website-container">
<strong>Website URL: </strong><p>https://powerfastwebsites.com</p>
<strong>Website Admin Login: </strong><p>https://powerfastwebsites.com/wp-admin</p>
<strong>Plan: </strong><p>Basic</p>
<button type="button" class="btn btn-primary">Upgrade Plan</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div>
<div class="col-md-4 website-container">
<strong>Website URL: </strong><p>https://powerfastwebsites.com</p>
<strong>Website Admin Login: </strong><p>https://powerfastwebsites.com/wp-admin</p>
<strong>Plan: </strong><p>Basic</p>
<button type="button" class="btn btn-primary">Upgrade Plan</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div>
<div class="col-md-4 website-container">
<strong>Website URL: </strong><p>https://powerfastwebsites.com</p>
<strong>Website Admin Login: </strong><p>https://powerfastwebsites.com/wp-admin</p>
<strong>Plan: </strong><p>Basic</p>
<button type="button" class="btn btn-primary">Upgrade Plan</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div>-->
</div>
<div id="billing" class="tab-pane fade">
<h3>Billing</h3>
<p>Some content in menu 2.</p>
</div>
<div id="suppport" class="tab-pane fade">
<h3>Support</h3>
<p>Some content in menu 2.</p>
</div>
<div id="newWebsite" class="tab-pane fade">
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav nav-pills" id="myTab">
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Forth</li>
<li>Fifth</li>
<li>Sixth</li>
<li>Seventh</li>
</ul>
</div>
</div>
</div>
<div id="bar" class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
</div>
<div class="tab-content">
<div class="tab-pane" id="tab1">
1
</div>
<div class="tab-pane" id="tab2">
2
</div>
<div class="tab-pane" id="tab3">
3
</div>
<div class="tab-pane" id="tab4">
4
</div>
<div class="tab-pane" id="tab5">
5
</div>
<div class="tab-pane" id="tab6">
6
</div>
<div class="tab-pane" id="tab7">
7
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;">First</li>
<li class="previous">Previous</li>
<li class="next last" style="display:none;">Last</li>
<li class="next">Next</li>
</ul>
</div>
</div>
</div>
</div>
</div>
JS
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({
'onTabShow': function(tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index+1;
var $percent = ($current/$total) * 100;
$('#rootwizard .progress-bar').css({width:$percent+'%'});
},
'tabClass': 'nav nav-pills',
'onNext': function(){alert("You hit next");}
});
});
I think the issue is happening because it is within another tab pane. I tried to append the HTML using JQuery using this and it seems to have resolved the issue.
Related
What I'm trying to do?
Below is my script for using Twitter Bootstrap wizard, I want to disable certain tab(s) on button click
What is the problem?
When I click the button I get the below error
Index:2138 Uncaught TypeError: $(...).bootstrapWizard is not a
function
at HTMLInputElement. (Index:2138)
at HTMLInputElement.dispatch (VM292 jquery-1.10.2.js:5109)
at HTMLInputElement.elemData.handle (VM292 jquery-1.10.2.js:4780)
Note: The line numbers are not valid
What's strange is that the error occurs only on the line where I'm disabling the tab $('#rootwizard').bootstrapWizard("disable", 4);But there is one more line where I have used the function bootstrapWizard, but that works just fine $('#rootwizard').bootstrapWizard({
I thought it was due to the sequence in which I have included the .js scripts, so I tried changing the sequence, but that did not help.
Any help is appreciated! Thanks for your time.
#model Models.***
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav nav-tabs pager nav-tabs-justified" role="tablist" id="myTab">
<li class="active nav-item">0</li>
<li class="nav-item">1</li>
<li class="nav-item">2</li>
<li class="nav-item">3</li>
<li class="nav-item">4</li>
<li class="nav-item">5</li>
<li class="nav-item">6</li>
<li class="nav-item">7</li>
<li class="nav-item">8</li>
<li class="nav-item">9</li>
</ul>
</div>
</div>
<div id="bar" class="progress progress-striped">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
</div>
#*Previous and Next buttons*#
<ul class="pager wizard">
#*<li class="previous first" style="display:none;">First</li>*#
<li class="previous">Previous</li>
#*<li class="next last" style="display:none;">Last</li>*#
<li class="next">Next</li>
</ul>
<hr />
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<input type='button' class='btn' id='disable-step' value='Disable' />
</div>
<div class="tab-pane fade" id="tab2">
</div>
<div class="tab-pane fade" id="tab3">
</div>
<div class="tab-pane fade" id="tab4">
</div>
<div class="tab-pane fade" id="tab5">
</div>
<div class="tab-pane fade" id="tab6">
</div>
<div class="tab-pane fade" id="tab7">
</div>
<div class="tab-pane fade" id="tab8">
</div>
<div class="tab-pane fade" id="tab9">
</div>
<div class="tab-pane fade" id="tab10">
</div>
</div>
</div>
</div>
}
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.bootstrap.wizard.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script type="text/javascript">
// This works fine
$('#rootwizard').bootstrapWizard({
// disable the clicking on individual tabs so that users are forced to advance only using navigational buttons
onTabClick: function (tab, navigation, index) {
return false;
},
// adjust the progress-bar
onTabShow: function (tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index + 1;
var $percent = ($current / $total) * 100;
$('#rootwizard .progress-bar').css({ width: $percent + '%' });
},
onNext: function (tab, navigation, index) {
// validate input
return true;
}
});
</script>
<script type="text/javascript">
// Disable step
$('#disable-step').on('click', function () {
$('#rootwizard').bootstrapWizard("disable", 4); // gives error
});
</script>
I have a web page that uses Bootstrap. In this page, I am using the Collapse component to toggle visibility of some elements. In each collapse component, I have some links and buttons. If a user clicks one of these links or buttons, I do NOT want the related content to expand collapse.
I have a Fiddle here, which contains the following:
<div class="container">
<div class="row" data-toggle="collapse" data-target="#parent1">
<div class="col-xs-8">
<h2>Parent 1</h2>
</div>
<div class="col-xs-4">
<ul class="list-inline">
<li>details</li>
<li><button onclick="return onRunClick()">Run</button></li>
</ul>
</div>
</div>
<div class="row" id="parent1" class="collapse">
<div class="col-xs-12">
<h3><small>Children</small></h3>
</div>
</div>
<div class="row" data-toggle="collapse" data-target="#parent2">
<div class="col-xs-8">
<h2>Parent 2</h2>
</div>
<div class="col-xs-4">
<ul class="list-inline">
<li>details</li>
<li><button onclick="return onRunClick()">Run</button></li>
</ul>
</div>
</div>
<div class="row" id="parent2" class="collapse">
<div class="col-xs-12">
<h3><small>Children</small></h3>
</div>
</div>
<div class="row" data-toggle="collapse" data-target="#parent3">
<div class="col-xs-8">
<h2>Parent 3</h2>
</div>
<div class="col-xs-4">
<ul class="list-inline">
<li>details</li>
<li><button onclick="return onRunClick()">Run</button></li>
</ul>
</div>
</div>
<div class="row" id="parent3" class="collapse">
<div class="col-xs-12">
<h3><small>Children</small></h3>
</div>
</div>
</div>
Somehow the event seems to be going up the chain even though I'm returning false in the event handlers. I'm not sure how to remedy this. Any help is appreciated it.
You just need to move "collapsing attributs" to the h2 rather than the div container that include you links, like that:
<div class="container">
<div class="row">
<div class="col-xs-8">
<h2 data-toggle="collapse" data-target="#parent1">Parent 1</h2>
</div>
<div class="col-xs-8">
<ul class="list-inline">
<li>details</li>
<li><button onclick="return onRunClick()">Run</button></li>
</ul>
</div>
</div>
</div>
You must remove the toggle attributes of each row and start the effect manually with JavaScript, then prevent the <button> and <a> elements from taking any action.
All your code would look like this
HTML
<div class="container">
<div class="row row1">
<div class="col-xs-8">
<h2>Parent 1</h2>
</div>
<div class="col-xs-4">
<ul class="list-inline">
<li>details</li>
<li><button>Run</button></li>
</ul>
</div>
</div>
<div class="row" id="parent1">
<div class="col-xs-12">
<h3><small>Children</small></h3>
</div>
</div>
<div class="row row2">
<div class="col-xs-8">
<h2>Parent 2</h2>
</div>
<div class="col-xs-4">
<ul class="list-inline">
<li>details</li>
<li><button>Run</button></li>
</ul>
</div>
</div>
<div class="row" id="parent2">
<div class="col-xs-12">
<h3><small>Children</small></h3>
</div>
</div>
<div class="row row3">
<div class="col-xs-8">
<h2>Parent 3</h2>
</div>
<div class="col-xs-4">
<ul class="list-inline">
<li>details</li>
<li><button>Run</button></li>
</ul>
</div>
</div>
<div class="row" id="parent3">
<div class="col-xs-12">
<h3><small>Children</small></h3>
</div>
</div>
JavaScript
$(document).ready(function(e) {
//on click in row1 class init toggle effect
$(".row1").on("click", function(){
//collapse content
$("#parent1").collapse('toggle');
});
$("div.row2").click(function(){
$("#parent2").collapse('toggle');
});
$("div.row3").click(function(){
$("#parent3").collapse('toggle');
});
//on click in button or a return false
$("button, a").on("click", function(){
return false;
});
});
I've made a profile page on which user's posts are displayed, user can perform function delete or edit post.But,
when i click on edit post on any of my post ,only content of first post is fetched in the modal.
my js code:
$('.dropdown-menu').find('.edit').on('click', function(e) {
e.preventDefault();
var postbody = $('#fetch').find('p').text();
$('#post-body').val(postbody);
$('#edit-modal').modal();
});
my view code:
#foreach($posts as $post) #if(Auth::user()== $post->user)
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<section class="col-md-2 col-xs-2">
<img id="imagesize2" src="images/g.jpg" class="img-circle" data- action="zoom" />
</section>
<section class="col-md-5 col-xs-offset-1 col-xs-5">
<a id="alink13" href=""><h5 id="alink14">{{$post->user->firstname}}</h5> </a>
<p>on {{$post->created_at}}</p>
</section>
<section class="col-md-offset-3 col-md-2 col-xs-4 col-lg-offset-1">
<div class="btn-group">
<button id="btnclr4" type="button" class="btn btn-default dropdown- toggle" data-toggle="dropdown" aria-expanded="false"><span class="glyphicon glyphicon-chevron-down"></span>
</button>
#if(Auth::user()==$post->user)
<ul id="remove" class="dropdown-menu" role="menu">
<a id="remove2" href="{{route('post.delete',['post_id' => $post->id])}}">
<li role="presentation">Remove This Post</li>
</a>
<a href="" class="edit">
<li role="presentation">Edit This Post</li>
</a>
</ul>
#endif
</section>
</div>
</div>
<div class="panel-content">
<div class="row" id="fetch">
<section class="col-md-12">
<p>{{$post->body}}</p>
</section>
</div>
</div>
I am experimenting with bootstrap, angularjs. So I pushed nav-tabs inside modal-window and open this modal by a link's click. But I want to open appropriate tab straight on click. If i click on travel, I want to get to the travel tab etc. What I should use to solve this problem? Maybe I need to simulate click or something like this?
http://jsfiddle.net/3kgbG/1056/
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
<div class="hobbies">
hobbies & interests
</div>
<div class="row padding-top group-icons">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<a href="#" data-toggle="modal" data-target="#myModal">
football
</a>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<a href="#" data-toggle="modal" data-target="#myModal">
travel
</a>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<a href="#" data-toggle="modal" data-target="#myModal">
history
</a>
</div>
</div>
</div> <!--popUp container-->
<!-- Modal -->
<div id="myModal" class="modal fade popUp" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h2 class="h2-style">My Hobbies</h2>
<hr class="hr_line"/>
</div>
<div class="modal-body">
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#bartending" aria-controls="bartending" role="tab"
data-toggle="tab">bartending</a></li>
<li role="presentation"><a href="#football" aria-controls="football" role="tab"
data-toggle="tab">football</a>
</li>
<li role="presentation"><a href="#travel" aria-controls="travel" role="tab"
data-toggle="tab">travel</a>
</li>
<li role="presentation"><a href="#history" aria-controls="history" role="tab"
data-toggle="tab">history</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content" ng-controller="HobbiesCrtl">
<div role="tabpanel" class="tab-pane fade" id="{{hobby.id}}" ng-repeat="hobby in hobbies">
<div class="container padding-top">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<img src="{{hobby.img}}" alt=""
style="width: 70%; margin: 0 auto; display: block">
</div>
<div class="col-xs-12 col-sm-6 col-md-9 col-lg-9">
{{hobby.description}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--popUp container-->
<!--angular Ctrl-->
myApp.controller('HobbiesCrtl', function($scope, $http){
$scope.title = "my hobbies";
$http.get(window.location + 'js/hobbies.json').success(function(data) {
$scope.hobbies = data;
})
} );
this is my json file:
{
"id": "football",
"img": "http://images.fastcompany.com/upload/adidas-jabulani-ball.jpg",
"description": " ball with the foot to score a goal. Unqualified, the word football is understood to refer to whichever form of is the most popular in the"
},
{
"id": "travel",
"img": "http://thumbs.dreamstime.com/z/travelling-world-21448211.jpg",
"description": " ball with the foot to score a goal. Unqualified, the word football is understood to refer to whichever form of is the most popular in the"
},
As soon as you are using the same controller for the view and modal window, so they are sharing the same $scope.
You can create scope variable like activeTab, and set in on click:
<a href="#" data-toggle="modal" ng-click="activeTab == 'football'" data-target="#myModal">
football
</a>
In your modal window just toggle active class if scope variable activeTab has neccessary value:
<li role="presentation" ng-class="{active: activeTab == 'football'}"><a href="#football" aria-controls="football" role="tab"
data-toggle="tab">football</a>
I have taken dump of bootstrap3 for menubar.
Its working fine, onclick of main-menu it is displaying sub menu-items.
But what i want is, on hover of main-menu sub menu-items should be displayed.
Following is code of onclick working menu bar:
<div class="jumbotron">
<div class="container">
<p class="lead">Grid Example</p>
<!-- Grid demo navbar -->
<div class="navbar navbar-default yamm">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar-collapse-grid" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>Yamm Megamenu
</div>
<div id="navbar-collapse-grid" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!-- Grid 12 Menu -->
<li class="dropdown yamm-fw">Grid<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-12">.col-sm-12</div>
</div>
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
<div class="row">
<div class="col-sm-2">.col-sm-2</div>
<div class="col-sm-2">.col-sm-2</div>
<div class="col-sm-2">.col-sm-2</div>
<div class="col-sm-2">.col-sm-2</div>
<div class="col-sm-2">.col-sm-2</div>
<div class="col-sm-2">.col-sm-2</div>
</div>
<div class="row">
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
</div>
</li>
</ul>
</li>
<!--
<With>Offsets </With>
-->
<li class="dropdown yamm-fw">Offset<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-4">4</div>
<div class="col-sm-4 col-sm-offset-4">4 offset 4</div>
</div>
<div class="row">
<div class="col-sm-3 col-sm-offset-3">3 offset 3</div>
<div class="col-sm-3 col-sm-offset-3">3 offset 3</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">6 offset 6</div>
</div>
</li>
</ul>
</li>
<!--
<Aside>Menu </Aside>
-->
<li class="dropdown yamm-fw">Aside<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-3"><br>
<h3>3</h3><br>
</div>
<div class="col-sm-9"><br>
<h3>9</h3><br>
</div>
</div>
</li>
</ul>
</li>
<!--
<Nesting>Menu </Nesting>
-->
<li class="dropdown yamm-fw">Nesting<b class="caret"></b>
<ul class="dropdown-menu">
<li class="grid-demo">
<div class="row">
<div class="col-sm-12">12</div>
</div>
<div class="row">
<div class="col-sm-12">12
<div class="row">
<div class="col-sm-4">4</div>
<div class="col-sm-4">4</div>
<div class="col-sm-4">4</div>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
Javascript is as following:
<script>
$(function() {
window.prettyPrint && prettyPrint()
$(document).on('click', '.yamm .dropdown-menu', function(e) {
e.stopPropagation()
})
})
</script>
can any one help me out to resolve this.
Thanks in advance.
Try This one:
<script>
$("#nav li").hover(
function(){
$(this).children('ul').hide();
$(this).children('ul').slideDown('slow');
},
function () {
$('ul', this).slideUp('slow');
});
</script>
and make your as like this
<ul id="nav">