twitter-bootstrap-wizard active tab not working on load - javascript

I am relatively new to javascript and I am using a 'plugin' you can find here:
https://github.com/VinceG/twitter-bootstrap-wizard
when I implement this code everything works fine except when the page starts no tabs are selected.
I wish the first tab to be selected. Reading through the code it would seem the following code is meant to do this
this.fixNavigationButtons = function() {
// Get the current active tab
if(!$activeTab.length) {
// Select first one
$navigation.find('a:first').tab('show');
$activeTab = $navigation.find(baseItemSelector + ':first');
}
Anyone familiar with this plugin?
the code I am using is exactly the one on this page
http://vadimg.com/twitter-bootstrap-wizard-example/examples/basic-pills.html
UPDATE:
here is my markup code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Web Form Prototype</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="rootwizard">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Forth</li>
<li>Fifth</li>
<li>Sixth</li>
<li>Seventh</li>
</ul>
<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>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js" type="text/javascript"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!--Form Wizard-->
<script src="js/jquery.bootstrap.wizard.js" type="text/javascript"></script>
<!--Interaction script-->
<script type="text/javascript" src="js/test.js"></script>
</body>
</html>
and test.js
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({'tabClass': 'nav nav-pills'});
});

Related

add separator listview jquery mobile

i have jquery mobile list view.
can anybody help me please, to customize this listview.
i want to customize the separator between list, so its will look like this
here is my code
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://demos.jquerymobile.com/1.2.1/docs/_assets/js/jqm-docs.js"></script>
<script src="http://demos.jquerymobile.com/1.2.1/js/jquery.mobile-1.2.1.js"></script>
<link rel="stylesheet" href="http://demos.jquerymobile.com/1.2.1/css/themes/default/jquery.mobile-1.2.1.css" />
<link rel="stylesheet" href="http://demos.jquerymobile.com/1.2.1/docs/_assets/css/jqm-docs.css"/>
<div data-role="page" id="mainn">
<div data-role="header" data-tap-toggle="false" data-theme='b'>
</div>
<div data-role="content">
<ul id="promoList" data-role="listview" >
<li>
<img src="airasia.jpg" >
<span class="ui-li-count">test 123</span>
</li>
<li>
<img src="d1380513326.jpg">
<span class="ui-li-count">test 124</span>
</li>
</ul>
</div>
</div>

show next tab-pane on click of button (latest Bootstrap 3.3.6)?

It feels like i have checked all related questions but am still not able to solve the following issue:
within a bootstrap tabs wizard each tab-pane has content and a next button that should show the next tab-pane on click.
See my short JavaScript section which should simply show the second tab and its content (id="step2") on click of the next button with íd="a1".
I just cant get it to work; Thanks for your help!
$( document ).ready(function(){
$("#a1").click(function(){
$(".nav-tabs a[href='#step2']").tab("show")
});
});
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="container" id="myWizard">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav nav-tabs" role="tablist" id="mytabs">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="step1">content1
<a class="btn next" id="a1">Continue</a>
</div>
<div role="tabpanel" class="tab-pane" id="step2">content2
<a class="btn next" id="a2">Continue</a>
</div>
<div role="tabpanel" class="tab-pane" id="step3">content3
<a class="btn next" id="a3">Continue</a>
</div>
<div role="tabpanel" class="tab-pane" id="step4">content4
<a class="btn next" id="a4">Continue</a>
</div>
<div role="tabpanel" class="tab-pane" id="step5">content5
<a class="btn first" id="a5">Done</a>
</div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
</html>

Have a look at this it works ok
All I did was change line to this but it's not really needed to add the li
$(".nav-tabs li a[href='#step2']").tab("show")
As was said below, you must get jQuery first, then bootstrap javascript

Please change your script initialization like this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
and try. it is working for me.
first you have write your jquery initailization file.
thanks.

Setting up Master page with a template in MVC-4 using aspx engine

Since, I'm new in MVC, I've a question on how to set up a master page in MVC-4 using a template that I already have in aspx engine (not razor). After a ton of research, somehow I could able to run a sample index page using the master page which is placed inside shared folder.
But the problem is that the CSS files and .js files for the master page are not being triggered. So, what I see after running page is not as it expected to be.
I tried putting the js and CSS files inside content folder and tried putting in shared folder as well, but still the style is not showing up.
Master page code is as follows:
<!DOCTYPE html>
<html lang="en">
<head id="Head1" runat="server">
<meta charset="utf-8" />
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic" rel="stylesheet" type="text/css">
<!-- js -->
<script src="js/jquery.min.js"></script>
<!-- //js -->
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="Princi_Gym Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //for-mobile-apps -->
<!-- hover-effects -->
<!-- //hover-effects -->
<!-- start-smoth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$(".scroll").click(function (event) {
event.preventDefault();
$('html,body').animate({ scrollTop: $(this.hash).offset().top }, 1000);
});
});
</script>
<!-- start-smoth-scrolling -->
<!--start-top-nav-script-->
<!--End-top-nav-script-->
</head>
<body>
<body style="">
<!-- header -->
<div class="header">
<div class="container">
<div class="header-top-left" id="home">
<ul>
<li class="activ">LAST NOTICE</li>
<li>Aliquam sit amet gravida ipsum,vitae scelerisque mi.Maecenas ullamcorper in
metus a ullamcorper.Sed dictum neque </li>
</ul>
</div>
<div class="header-top-right">
<p>Phone Number:<span> 043-234-3453</span></p>
</div>
<div class="clearfix"> </div>
<div class="head-logo">
<span> </span>
</div>
<div class="header-top">
<div class="navigation">
<span class="menu"></span>
<ul class="navig">
<li>Home</li>
<li class="plan active">CLASSES
<ul class="sub-nav sub">
<li>DROP ITEM1</li>
<li>DROP ITEM2</li>
</ul>
</li>
<li>PAGES</li>
<li>NEWS</li>
<li>GALLERY</li>
<li>TRAINERS</li>
<li>CONTACT</li>
<li>CONTACT</li>
<div class="clearfix"> </div>
</ul>
</div>
<div class="search">
<form>
<input type="text" placeholder="Type and search..." required=" ">
</form>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!-- script-for-menu -->
<script>
$("span.menu").click(function () {
$(" ul.navig").slideToggle("slow", function () {
});
});
</script>
<!-- script-for-menu -->
<!-- //header -->
<!-- banner -->
<!-- //banner -->
<!-- banner-bottom -->
<div class="banner-bottom">
<asp:ContentPlaceHolder ID="FeaturedContent" runat="server" />
<section class="content-wrapper main-content clear-fix">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© <%: DateTime.Now.Year %> - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
<%: Scripts.Render("~/bundles/jquery") %>
<asp:ContentPlaceHolder ID="ScriptsSection" runat="server" />
</div>
<!-- //banner-bottom -->
<!-- footer -->
<div class="footer">
<div class="container">
<div class="footer-icon footer-icon-top">
<img src="images/row.png" alt=" ">
</div>
<div class="footer-social">
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<div class="footer-nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>NEWS</li>
<li>ARCHIVES</li>
<li>CONTACT</li>
</ul>
</div>
<p>Template by w3layouts</p>
</div>
</div>
<!-- //footer -->
<!-- here stars scrolling icon -->
<script type="text/javascript">
$(document).ready(function () {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<!-- //here ends scrolling icon -->
<span id="toTopHover"></span>To Top</body>
<div id="body">
</body>
</html>
And the sample page code is as follows:
<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
Home Page - My ASP.NET MVC Application
</asp:Content>
<asp:Content ID="indexFeatured" ContentPlaceHolderID="FeaturedContent" runat="server">
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>Home Page.</h1>
<h2><%: ViewBag.Message %></h2>
</hgroup>
<p>
To learn more about ASP.NET MVC visit
http://asp.net/mvc.
The page features <mark>videos, tutorials, and samples</mark> to help you get the most from ASP.NET MVC.
If you have any questions about ASP.NET MVC visit
our forums.
</p>
</div>
</section>
</asp:Content>
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<h3>We suggest the following:</h3>
<ol class="round">
<li class="one">
<h5>Getting Started</h5>
ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
enables a clean separation of concerns and that gives you full control over markup
for enjoyable, agile development. ASP.NET MVC includes many features that enable
fast, TDD-friendly development for creating sophisticated applications that use
the latest web standards.
Learn more…
</li>
<li class="two">
<h5>Add NuGet packages and jump-start your coding</h5>
NuGet makes it easy to install and update free libraries and tools.
Learn more…
</li>
<li class="three">
<h5>Find Web Hosting</h5>
You can easily find a web hosting company that offers the right mix of features
and price for your applications.
Learn more…
</li>
</ol>
</asp:Content>
Any help will be greatly appreciated...

Jquery mobile tab not working when link to other page

Hi I am new for jquery mobile.I gt two page in my application. Please c the code below
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Smart Realtor</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/smartrealtor-theme.css" />
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/themes/default/jquery.mobile.structure-1.4.2.css">
<link rel="stylesheet" href="css/themes/default/jquery.mobile.icons-1.4.2.css">
<link rel="stylesheet" href="css/jqm-icon-pack-fa.css">
<!-- <script src="js/jquery.js"></script>-->
<!-- <script src="js/globalsetting.js"></script>-->
<!-- <script src="js/jquery.mobile-1.4.2.min.js"></script>-->
<!-- <script src="js/cordova.js"></script>
<script src="js/Calendar.js"></script>
<script src="js/Message.js"></script>-->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" data-title="Panel fixed positioning" class=" signupBG" id="landingPage">
<div data-role="content">
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<div id="logoCenter">
<img src="images/smartrealtor_logo_large#x2.png" alt="" width="300" height="310" class="scale-with-grid" />
</div>
<div class="ui-grid-a">
<!-- Click here to register page -->
<a href="register.html" class="ui-btn ui-corner-all ui-shadow" >Register</a>
</div>
<div class="ui-grid-a">
Sign in
</div>
</div>
<!-- /login/register -->
</div>
</div>
<!-- Login Screen -->
<!-- /login screen -->
<!-- Forget Password Screen -->
<!-- /forget pass screen -->
<!-- Register Screen -->
<!-- /register screen -->
<!-- Team Leader Register Screen -->
<!-- /register screen -->
</body>
</html>
Register.html
<div data-role="page" data-title="Panel fixed positioning" class=" signupBG" id="loginPage">
<div data-role="content">
<div data-role="tabs" id="tabs" class="transparentBg">
<div data-role="navbar" data-grid="a" class="topNav topfilter">
<ul id="navfilter">
<li>Agent</li>
<li>Team Leader</li>
</ul>
</div>
<div id="nAgent" class="ui-body-d ui-content">
<h1>First tab contents</h1>
</div>
<div id="nTeamleader">
<ul data-role="listview" data-inset="true">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ul>
</div>
</div>
</div>
</div>
My tabpanel in inside the register.html . But it not working nw. The tab panel doesn't refresh the content. anyone gt solution?

jQuery Mobile Pop Up Widget not hidden on page init

I'm working with jQuery Mobile pop ups and for some reason when I load the page one or more of the pop ups is not hidden. I have tried closing the pop ups on page init but this does not seem to work. Can anyone explain what is causing this.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pop Up</title>
<link rel="stylesheet" href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css"
/>
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/_assets/css/jqm-docs.css"
/>
<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css"
rel="stylesheet" />
<link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css"
rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0/docs/_assets/js/jqm-docs.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0/js/jquery.mobile-1.2.0.js"></script>
</head>
<script>
$(document).bind("pageinit", function () {
$('#popup1').popup('close');
$('#popup2').popup('close');
});
</script>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f" data-position="fixed">
<div class="ui-grid-a" style="margin:15px 0px">
<div class="ui-block-a">
Pop 1
</div>
<div class="ui-block-b">
Pop 2
</div>
</div>
<!--grid-->
</div>
<!-- /header -->
<div data-role="content">
<div data-role="popup" id="popup1" data-theme="a">
<ul data-role="listview" id="cityList" data-inset="true" style="min-width:210px;"
data-theme="b">
<li name='test value' value="us">11</li>
<li name='test value' value="us">12</li>
<li name='test value' value="us">13</li>
<li name='test value' value="us">14</li>
</ul>
</div>
<div data-role="popup" id="popup2" data-theme="a">
<ul data-role="listview" id="genreList" data-inset="true" style="min-width:210px;"
data-theme="b">
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
</ul>
</div>
<div class="content-primary"></div>
<!--content-primary-->
</div>
<!--content-->
<div data-role="footer" class="footer-docs" data-theme="c" data-position="fixed"></div>
<!--footer-->
</div>
<!-- /page -->
</body>

The Inclusion of the following external libraries fixed the problem:
<link rel="stylesheet" href="http://jquerymobile.com/demos/1.2.0-alpha.1/css/themes/default/jquery.mobile-1.2.0-alpha.1.css" />
<link rel="stylesheet" href="http://jquerymobile.com/demos/1.2.0-alpha.1/docs/_assets/css/jqm-docs.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0-alpha.1/docs/_assets/js/jqm-docs.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0-alpha.1/js/jquery.mobile-1.2.0-alpha.1.js"></script>

I had similar issue and got it solved by initiating the popup after document ready.
$(document).ready(function(){
$( "#popupDialog" ).popup();
});

Categories

Resources