I am creating a web app in angularjs with mvc,
I used of the datepicker of bootstrap,
code
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
but i am getting this error while run the application
Uncaught TypeError: $(...).datetimepicker is not a function
at HTMLDocument. (SelfAssignTask:325)
at l (jquery2.0.3.min.js:4)
at Object.fireWith [as resolveWith] (jquery2.0.3.min.js:4)
at Function.ready (jquery2.0.3.min.js:4)
at HTMLDocument.S (jquery2.0.3.min.js:4)
these are the script on my layout page
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.11/ngStorage.min.js"></script> <!-- bootstrap-css -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- //bootstrap-css -->
<!-- Custom CSS -->
<link href="~/css/style.css" rel='stylesheet' type='text/css' />
<!-- font CSS -->
#*<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>*#
<!-- font-awesome icons -->
<link rel="stylesheet" href="~/css/font.css" type="text/css" />
<link href="~/css/font-awesome.css" rel="stylesheet">
<!-- //font-awesome icons -->
<script src="~/js/jquery2.0.3.min.js"></script>
<script src="~/js/modernizr.js"></script>
<script src="~/js/jquery.cookie.js"></script>
<script src="~/js/screenfull.js"></script> <!-- charts -->
<script src="~/js/raphael-min.js"></script>
<script src="~/js/morris.js"></script>
<link rel="stylesheet" href="~/css/morris.css">
<!-- //charts -->
<!--skycons-icons-->
<script src="~/js/skycons.js"></script>
<!--//skycons-icons-->
the error is coming because i used many scripts, or what else?
First you need to include bootstrap-datetimepicker.js(read docs) but it requires moment.js.
But if you already plan to using angularjs consider to initialize your widgets by using directives, because that how you should do that in angular way. Check out that plnkr for explanation.
So here we go:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.11/ngStorage.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js" integrity="sha256-Gn7MUQono8LUxTfRA0WZzJgTua52Udm1Ifrk5421zkA=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/js/bootstrap-datetimepicker.min.js" integrity="sha256-SS5UPPXAM4HWVoFCt0tsx90VWhRf7cStU5kabObE8cw=" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
var initDatePicker = function () {
$('#datetimepicker1').datetimepicker();
};
window.onload = initDatePicker;
</script>
</div>
</div>
Related
So i've been trying to use slick slider for my website. I have all the files in the correct folder, there is no error in my console. My images are cards are showing but these are in line vertically, and i don't know what I'm doing wrong. here is my HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Palvisha Shoaib</title>
<link rel="stylesheet" type="text/css"href = "style.css">
<link rel="stylesheet" type="text/css"href = "slick.css">
<link rel="stylesheet" type="text/css"href = "slicktheme.css">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght#600&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
</head>
<body>
<div class="box6">
<section class="variable slider">
<div>
<div class="row">
<div class="col s12 m7">
<div class="card" style="width: 250px;">
<div class="card-content">
<p>content</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m7">
<div class="card" style="width: 250px;">
<div class="card-content">
<p>content</p>
</div></div>
</div>
</div>
</section>
</div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="slick.min.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</body>
</html>
I recommend looking on this website, it has an in-depth tutorial on the slick slider. https://kenwheeler.github.io/slick/
I can see that you don't have this function in your code
<script type="text/javascript">
$(document).ready(function(){
$('.your-class').slick({
setting-name: setting-value
});
});
</script>
Solved, but it still won't change the datatime format from MM-DD-YY to DD-MM-YY
I'm searching for the reason of my datepicker error, but nothing seems to work. Also, I've tried to make it DD-MM-YY hh:mm but it keeps making it MM-DD-YY.
The event:
<div class="form-group">
<label>Fecha del evento:</label>
<div class="input-group date" id="reservationdate" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#reservationdate"/>
<div class="input-group-append" data-target="#reservationdate" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
The header:
<!-- Font Awesome -->
<link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- overlayScrollbars -->
<link rel="stylesheet" href="css/adminlte.min.css">
<link rel="stylesheet" href="css/sweetalert2.min.css">
<link rel="stylesheet" href="css/admin.css">
<link rel="stylesheet" href="plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
<!-- daterange picker -->
<link rel="stylesheet" href="plugins/daterangepicker/daterangepicker.css">
<!-- Select2 -->
<link rel="stylesheet" href="plugins/select2/css/select2.min.css">
<link rel="stylesheet" href="plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
The footer:
<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- DataTables -->
<script src="plugins/datatables/jquery.dataTables.min.js"></script>
<script src="plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<!-- AdminLTE App -->
<script src="js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="js/demo.js"></script>
<script src="js/sweetalert2.all.min.js"></script>
<script src="js/admin-ajax.js"></script>
<script src="js/app.js"></script>
<script src="js/login-ajax.js"></script>
<!-- Categoria Evento -->
<!-- Select2 -->
<script src="plugins/select2/js/select2.full.min.js"></script>
<!-- Fecha Evento -->
<!-- InputMask -->
<script src="plugins/moment/moment.min.js"></script>
<script src="plugins/inputmask/min/jquery.inputmask.bundle.min.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- date-range-picker -->
<script src="plugins/daterangepicker/daterangepicker.js"></script>
The app.js (it says the error is here, in the datetimepicker):
$('#reservationdate').datetimepicker({
format: 'DD/MM/YYYY hh:mm A'
});
---------------------------------------------
Edit: It was fixed with a script in the footer and a link rel to the header, but the problem with the time format is still running.
Changes:
Header:
<!-- Font Awesome -->
<link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- overlayScrollbars -->
<link rel="stylesheet" href="css/adminlte.min.css">
<link rel="stylesheet" href="css/sweetalert2.min.css">
<link rel="stylesheet" href="css/admin.css">
<link rel="stylesheet" href="plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<!-- daterange picker -->
<link rel="stylesheet" href="plugins/daterangepicker/daterangepicker.css">
<!-- Select2 -->
<link rel="stylesheet" href="plugins/select2/css/select2.min.css">
<link rel="stylesheet" href="plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
Footer:
<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- DataTables -->
<script src="plugins/datatables/jquery.dataTables.min.js"></script>
<script src="plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<!-- AdminLTE App -->
<script src="js/adminlte.min.js"></script>
<!-- Categoria Evento -->
<!-- Select2 -->
<script src="plugins/select2/js/select2.full.min.js"></script>
<!-- Fecha Evento -->
<!-- InputMask -->
<script src="plugins/moment/moment.min.js"></script>
<script src="plugins/inputmask/min/jquery.inputmask.bundle.min.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<!-- date-range-picker -->
<script src="plugins/daterangepicker/daterangepicker.js"></script>
You will need to include the script to Bootstrap datetimepicker. Try it like this:
<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- DataTables -->
<script src="plugins/datatables/jquery.dataTables.min.js"></script>
<script src="plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<!-- AdminLTE App -->
<script src="js/adminlte.min.js"></script>
<!-- Categoria Evento -->
<!-- Select2 -->
<script src="plugins/select2/js/select2.full.min.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<!-- Fecha Evento -->
<!-- InputMask -->
<script src="plugins/moment/moment.min.js"></script>
<script src="plugins/inputmask/min/jquery.inputmask.bundle.min.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- date-range-picker -->
<script src="plugins/daterangepicker/daterangepicker.js"></script>
I'm trying to use tempusdominus to show a date picker with the locales in fr but I have an error : "datetimepicker is not a function" and the icons dosen't show up and also the language in french
does somebody know why please ?
here's a screenshot https://ibb.co/fGsjyDC
my code :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://momentjs.com/downloads/moment.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/css/tempusdominus-bootstrap-4.min.css" />
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker2" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker2"/>
<div class="input-group-append" data-target="#datetimepicker2" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker2').datetimepicker({
locale: 'fr'
});
});
</script>
</div>
</div>
Include files in HEAD in the following order will remove this error
<!--Bootstrap CSS CDN-->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!--Bootstrap JS CDN-->
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<!--Moment JS CDN-->
<script src="https://momentjs.com/downloads/moment.js"></script>
<!--Tempusdominus JS CDN-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min.js"></script>
<!--Tempusdominus CSS CDN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/css/tempusdominus-bootstrap-4.min.css" />
I am working in one task in that I want to create online visiting card in html. Now, at load times it looks like this in which I have draw the different shaped.
As per you see the first image I have draw the different shaped
In this second image when I am selecting a picture at that time shaped toolkit was hide and so from that I unable to create a shaped over an image.
So as per I research in my code I realized that jquery "initialize: function()" is not load after the selecting picture. So it can be said that at load time jquery is not excuting.
Here is my code,
<script type='text/javascript' src='js/jquery.min.js'></script>
<script src="js/kinetic-v3.9.3.js"></script>
<script type="text/javascript" src="js/version1.js"></script>
<link href="css/layout.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="css/menu.css" type="text/css" media="screen" />
<!-- Menu -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie/ie.css" />
<![endif]-->
<link rel="stylesheet" href="styles/global.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/mobile.js"></script>
<script type="text/javascript" src="js/form.js"></script>
<script type="text/javascript" src="./lib/jquery.1.10.2.min.js"></script>
<!-- jquery -->
<script type="text/javascript" src="./Pixanova_files/jquery.min.1.9.0.js"></script>
<!-- backbone -->
<script type="text/javascript" src="./Pixanova_files/underscore.min.1.4.4.js"></script>
<script type="text/javascript" src="./Pixanova_files/backbone.min.0.9.10.js"></script>
<!-- wColorPicker -->
<link rel="stylesheet" type="text/css" href="./Pixanova_files/wColorPicker.css">
<script type="text/javascript" src="./Pixanova_files/wColorPicker.js"></script>
<!-- wPaint -->
<script type="text/javascript" src="./Pixanova_files/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="./Pixanova_files/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="./Pixanova_files/jquery.ui.mouse.min.js"></script>
<script type="text/javascript" src="./Pixanova_files/jquery.ui.draggable.min.js"></script>
<link rel="stylesheet" type="text/css" href="./Pixanova_files/wPaint.css">
<script type="text/javascript" src="./Pixanova_files/wPaint.js"></script>
<!-- pixanova -->
<script type="text/javascript" src="./Pixanova_files/pixanova.js"></script>
<link rel="stylesheet" type="text/css" href="./Pixanova_files/pixanova.css">
<div id="wrapper">
<!--header-->
<div id="content">
<!-- container is the div id from where the image is display -->
<div id="container" style="width:600px; height:600px; float:right"> </div>
<script type="text/javascript">
var pixanova = new PixanovaView321();
</script>
<div id="editor">
<ul id="text" style="float: left; margin-right:10px;">
<!--<div id="spinner" class="spinner" style="display:none;margin-left:80px;margin-bottom:20px;"> Image Uploading<img src="images/ajax.png" alt="loading">
</div>-->
<div id="container2" style="width:140px;"> </div>
<li>
<label> </label>
<input type="submit" id="textsubmit" value="Add Text"/>
<select name="Choice" onchange="setImage(this);">
<option value="images/blue.jpg">Photo 1</option>
<option value="images/black.jpg">Photo 2</option>
<option value="images/red.jpg">Photo 3</option>
<option value="images/redplan.jpg">Photo 4</option>
</select>
<input type='file' />
</li>
</ul>
<p class="clearing" /></p>
</div>
</div>
</div>
<!--container-->
</body>
here the external pixanova.js code from where the toolkit has calling
//This variable is calling the PixanovaView321 function in pixanova.html
var PixanovaView321 = Backbone.View.extend(
{
initialize: function()
{
alert();
//Menu option
$('#container').wPaint({
menuOffsetX: 50,
menuOffsetY: 50,
menuOrientation: 'horizontal',
strokeStyle: "yellow"
});
},
});
I'm using JQuery UI to render a tabbed layout. My markup is as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/jquery-ui.min.css"/>
<link rel="stylesheet" href="css/style.css"/>
<script src="js/jquery-ui.js" type="text/javascript">
</script>
<script src="js/jquery-ui.min.js" type="text/javascript">
</script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-
theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<script src="js/jquery-ui.min.js"></script>
<script src="jquery-ui-1.11.2.custom/external/jquery/jquery.js"></script></head>
<body>
<img src="images/logo_big.gif" alt="Logo"/><br/>
<div id="tabs">
<ul>
<li>Introduction</li>
<li>Family</li>
<li>Wills</li>
</ul>
</div>
<div id="#tabs-1">
<h1>Introduction</h1>
</div><!-- Tabs1 -->
<div id="#tabs-2">
<h2>Family Status</h2>
</div><!-- Tabs2 -->
</body>
</html>
How does the above markup need to be modified so that the Jquery UI tabs are properly rendered?
It looks like you were loading jquery twice, also I think you need to move your init function below the links to jquery, like this:
<!doctype html> <html>
<head>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-
theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<script src="js/jquery-ui.min.js"></script>
<script src="jquery-ui-1.11.2.custom/external/jquery/jquery.js"></script>
<script>
$(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>
<img src="images/logo_big.gif" alt="Logo" />
<br/>
<div id="tabs">
<ul>
<li>Introduction
</li>
<li>Family
</li>
<li>Wills
</li>
</ul>
</div>
<div id="#tabs-1">
<h1>Introduction</h1>
</div>
<!-- Tabs1 -->
<div id="#tabs-2">
<h2>Family Status</h2>
</div>
<!-- Tabs2 -->
</body> </html>