When I debug my site, google chrome says this:
GET http://localhost/index.php/js/vendor/bootstrap.min.js 404 (Not Found) localhost:247
GET http://localhost/index.php/js/main.js 404 (Not Found)
As I understand, it can't find these two files. But I never asked it to find them. Here are the headers of my html file:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link href="/jquery_ui/development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet">
<link href="/jquery_ui/development-bundle/themes/smoothnes-edit/jquery.ui.all.css" rel="stylesheet">
<!--<link href="/jquery_ui/css/smoothness/jquery-ui-1.9.2.custom.css" rel="stylesheet">-->
<script src="/jquery_ui/js/jquery-1.8.3.js"></script>
<script src="/jquery_ui/js/jquery-ui-1.9.2.custom.js"></script>
<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
<style>
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link rel="stylesheet" href="/bootstrap/css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="/bootstrap/css/main.css">
<script src="/bootstrap/js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<!-- LOADING CUSTOMS -->
<?php require('application/views/wqWidgets.php'); ?>
<link href="/Styles/buttons.css" rel="stylesheet" />
<link href="/Styles/colorbox.css" rel="stylesheet" />
<script type="text/javascript" src="/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="/jquery.colorbox.js"></script>
<script type="text/javascript" src="/result.js"></script>
<script src="/jquery.colorbox.js"></script>
I do have some other frameworks as jqwidgets and jquery-ui, and these won't work until this error is fixed. Yes, I have checked if all the links work, and they do.
What is going on, could it be the order?
EDIT:
Full code:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link href="/jquery_ui/development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet">
<link href="/jquery_ui/development-bundle/themes/smoothnes-edit/jquery.ui.all.css" rel="stylesheet">
<!--<link href="/jquery_ui/css/smoothness/jquery-ui-1.9.2.custom.css" rel="stylesheet">-->
<script src="/jquery_ui/js/jquery-1.8.3.js"></script>
<script src="/jquery_ui/js/jquery-ui-1.9.2.custom.js"></script>
<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
<style>
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link rel="stylesheet" href="/bootstrap/css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="/bootstrap/css/main.css">
<script src="/bootstrap/js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<!-- LOADING CUSTOMS -->
<link rel="stylesheet" href="/JQWidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="/JQWidgets/jqwidgets/styles/jqx.fresh.css" type="text/css" />
<script type="text/javascript" src="/JQWidgets/scripts/gettheme.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxtooltip.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/globalization/jquery.global.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxradiobutton.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxprogressbar.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxcombobox.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxlistmenu.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxchart.js"></script>
<script type="text/javascript" src="/JQWidgets/scripts/json2.js"></script>
<script type="text/javascript" src="/JQWidgets/scripts/knockout-2.1.0.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxknockout.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxdata.export.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxgrid.export.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxtree.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxsplitter.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="/JQWidgets/jqwidgets/jqxgrid.selection.js"></script>
<link href="/Styles/buttons.css" rel="stylesheet" />
<link href="/Styles/colorbox.css" rel="stylesheet" />
<script type="text/javascript" src="/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="/jquery.colorbox.js"></script>
<script type="text/javascript" src="/result.js"></script>
<script src="/jquery.colorbox.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.</p>
<![endif]-->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Utoping</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active" >Home</li>
<li >About</li>
<li >Contact</li>
</ul>
<form class="navbar-form pull-right">
<input class="span2" type="text" placeholder="Email">
<input class="span2" type="password" placeholder="Password">
<button type="submit" class="btn">Sign in</button>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container"><!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">
<h1>Utoping</h1>
<p>Virtual Connection. Achieving Perfection!</p>
<p><a class="btn btn-primary btn-large" href="/index.php/about/">Learn more »</a></p>
</div>
<!-- Example row of columns -->
<div class="row">
<div class="span4">
<h2>Diversity</h2>
<p>Blablabla...</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span4">
<h2>Integrity</h2>
<p>Blablabla...</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span4">
<h2>Creativity</h2>
<p>Blablabla...</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
</div>
<div id="register-unit" class="hero-unit-register">
<h1><a id="clickme">Register</a></h1>
<p>Virtual Connection. Achieving Perfection!</p>
<label for="_Email">Email</label>
<input style='margin-left: 10px; margin-top: 10px;' type="email" name="_Email" id="_Email" class="text ui-widget-content ui-corner-all" />
</br>
<label for="_Nickname">Company Name</label>
<input style='margin-left: 10px; margin-top: 10px;' type="text" name="_Nickname" id="_Nickname" value="" class="text ui-widget-content ui-corner-all" />
</br>
<select style='visibility: hidden' id='select'>
<option>Primary</option>
<option>Secundary</option>
<option>Tertiary</option>
</select>
<label for="jqxIndustry">Industry</label>
<div style='margin-left: 10px; margin-top: 10px;' id='jqxIndustry'></div>
<input type="hidden" id="Industry" name="Industry">
</br>
<label for="jqxDateTimeInput" title="NOTE: Please change this date, or else the chosen date will be invalid!">Date of creation</label>
<div style='margin-left: 10px; margin-top: 10px;' id='jqxDateTimeInput'></div>
<input type="hidden" id="date" name="date">
</br>
<label for="_Password">Password</label>
<input type="password" id="_Password" name="_Password" class="text ui-widget-content ui-corner-all">
</br>
<label for="pr" title="For your security, we ask you to repeat your password">Repeat:</label>
<input type="password" id="pr" name="pr" class="text ui-widget-content ui-corner-all">
</br>
<p><a class="btn btn-primary btn-large">Register Now »</a></p>
</div>
<script>
var toggle_ = [];
$(document).ready(function () {
toggle_.toggled = false;
$('#clickme').click(function() {
if (toggle_.toggled)
{
$('#register-unit').animate({
bottom: '-=200',
}, 2000, function() {
// Animation complete.
});
}
else
{
$('#register-unit').animate({
bottom: '+=200',
}, 2000, function() {
// Animation complete.
});
}
{if (toggle_.toggled){toggle_.toggled = false;}else{toggle_.toggled = true;}}
});
$( document ).tooltip();
// JQ WIDGETS
var theme = getTheme();
//JQX
$("#jqxDateTimeInput").jqxDateTimeInput({ animationType: 'fade', height: '25px', theme: theme });
$("#jqxIndustry").jqxDropDownList({ animationType: 'fade', width: "510px", height: '25px', theme: theme });
// Load the data from the Select html element.
$("#jqxIndustry").jqxDropDownList('loadFromSelect', 'select');
$("#jqxDateTimeInput").bind('valuechanged', function (event) {
var date = event.args.date;
var hiddenField = document.getElementById('date');
hiddenField.value = date;
});
$('#jqxIndustry').bind('select', function (event) {
var args = event.args;
var item = $('#jqxIndustry').jqxDropDownList('getItem', args.index);
if (item != null) {
var hiddenField = document.getElementById('Industry');
hiddenField.value = item.label;
}
});
$('#jqxIndustry').bind('unselect', function (event) {
var args = event.args;
var item = $('#jqxIndustry').jqxDropDownList('getItem', args.index);
});
});
</script>
<div class="container"> <hr>
<footer>
<p>© Vinci Enterprise 2012</p>
</footer>
</div> <!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.3.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
At the very bottom bootstrap is requesting these files (just above the Google analytics code):
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
Related
I need to add popover/tooltip functionality to my page and I can't get it to work. I don't get any console errors, the popup just does not show up. I've tried reordering my scripts and putting them every part of my code. I tried basically every form of the activation script I could find as you will see here. Any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="au theme template">
<meta name="author" content="Hau Nguyen">
<meta name="keywords" content="au theme template">
<!-- Title Page-->
<title>Company</title>
<!-- New Tab Favicon -->
<link rel="icon" href="images/favicon_tranparent.png">
<script src="/jquery-3.4.1.min.js" language="JavaScript" type="text/javascript"></script>
<!-- <script src="/bootstrap-4.1/popper.min.js" language="JavaScript" type="text/javascript"></script> -->
<script>
$(function(){
$("#generatedTable").load("<%= table %>");
});
</script>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
<script>
$(function () {
$('#popover').popover({
container: 'body'
})
})
</script>
<script>
$(function () {
$('.popover').popover({
container: 'body'
})
$('.popover-dismiss').popover({
trigger: 'focus'
})
})
</script>
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
<script>
jQuery(document).ready(function () {
jQuery('[data-toggle="tooltip"]').tooltip();
});
</script>
<p id="noSpaceName" hidden><%= noSpaceName %><p>
<p id="CSV" hidden><%= CSV %><p>
<script>
function dynamic_file() {
var folder = document.getElementById("noSpaceName").innerHTML
var file = document.getElementById("CSV").innerHTML
console.log("data/" + folder + "/" + file)
return "data/" + folder + "/" + file;
}
function download_file(name) {
var dlink = document.createElement('a');
var currentTime = new Date();
dlink.download = document.getElementById("noSpaceName").innerHTML.concat("-" + currentTime.toDateString().split(' ').join('-'));
dlink.href = name;
dlink.onclick = function(e) {
// revokeObjectURL needs a delay to work properly
var that = this;
setTimeout(function() {
window.URL.revokeObjectURL(that.href);
}, 1500);
};
dlink.click();
dlink.remove();
}
</script>
<!-- Fontfaces CSS-->
<link href="/font-face.css" rel="stylesheet" media="all">
<link href="/font-awesome-4.7/css/font-awesome.min.css" rel="stylesheet" media="all">
<link href="/font-awesome-5/css/fontawesome-all.min.css" rel="stylesheet" media="all">
<link href="/mdi-font/css/material-design-iconic-font.min.css" rel="stylesheet" media="all">
<!-- Bootstrap CSS-->
<link href="/bootstrap-4.1/bootstrap.min.css" rel="stylesheet" media="all">
<!-- Vendor CSS-->
<link href="/animsition/animsition.min.css" rel="stylesheet" media="all">
<link href="/bootstrap-progressbar/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet" media="all">
<link href="/wow/animate.css" rel="stylesheet" media="all">
<link href="/css-hamburgers/hamburgers.min.css" rel="stylesheet" media="all">
<link href="/slick/slick.css" rel="stylesheet" media="all">
<link href="/select2/select2.min.css" rel="stylesheet" media="all">
<link href="/perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" media="all">
<!-- Main CSS-->
<link href="/theme.css" rel="stylesheet" media="all">
<link href="/custom.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="#" />
<script src="/jquery-3.2.1.min.js"></script>
<script src="/bootstrap-4.1/popper.min.js" language="JavaScript" type="text/javascript"></script>
<script src="/bootstrap-4.1/bootstrap.min.js"></script>
</head>
<body class="animsition">
<div class="page-wrapper">
<!-- MENU SIDEBAR-->
<aside class="menu-sidebar d-none d-lg-block">
<div class="logo">
<a href="">
<img src="temp_logo.png" alt="Company Name" />
</a>
</div>
<div class="menu-sidebar__content js-scrollbar1">
<nav class="navbar-sidebar">
<ul class="list-unstyled navbar__list">
<li>
<a class="js-arrow" href="/">
<i class="fas fa-table"></i>Arrest Records</a>
</li>
<li>
<a href="/analytics">
<i class="fas fa-chart-bar"></i>Analytics
</a>
</li>
</ul>
</nav>
</div>
</aside>
<!-- END MENU SIDEBAR-->
<!-- PAGE CONTAINER-->
<div class="page-container">
<!-- HEADER DESKTOP-->
<header class="header-desktop">
<div class="section__content section__content--p30">
<div class="container-fluid">
<div class="header-wrap">
<div></div>
<div class="custom_title">
<h2><font color="#666666"><%= fullName %></font></h2>
</div>
<div class="flex-box">
<!-- <a id="csv" href="" download=""> -->
<a id="popover" data-trigger="hover" data-toggle="popover">Popover</a>
<button onclick='download_file(dynamic_file())' class="btn btn-download"><i class="fa fa-download"></i> Download</button>
<script> $('[data-toggle="tooltip"]').tooltip()</script>
<!-- </a> -->
<!-- Log Out User -->
<form class="form-header" action="/logout?_method=DELETE" method="POST">
<button type="submit" class="btn btn-lightish"><i class="zmdi zmdi-power"></i> Log Out</button>
</form>
</div>
</div>
</div>
</div>
</header>
<!-- END HEADER DESKTOP-->
<!-- MAIN CONTENT-->
<div class="main-content">
<div class="section__content section__content--p30">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="table-responsive table--no-card m-b-30">
<div id="generatedTable"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="copyright">
<p>Copyright © 2020 Company. All rights reserved.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Jquery JS-->
<!-- <script src="/jquery-3.2.1.min.js"></script> -->
<!-- Bootstrap JS-->
<!-- <script src="/bootstrap-4.1/popper.min.js"></script> -->
<script src="/bootstrap-4.1/bootstrap.min.js"></script>
<script src="/bootstrap-4.1/popper.min.js" language="JavaScript" type="text/javascript"></script>
<!-- Vendor JS -->
<script src="/slick/slick.min.js">
</script>
<script src="/wow/wow.min.js"></script>
<script src="/animsition/animsition.min.js"></script>
<script src="/bootstrap-progressbar/bootstrap-progressbar.min.js">
</script>
<script src="/counter-up/jquery.waypoints.min.js"></script>
<script src="/counter-up/jquery.counterup.min.js">
</script>
<script src="/circle-progress/circle-progress.min.js"></script>
<script src="/perfect-scrollbar/perfect-scrollbar.js"></script>
<script src="/chartjs/Chart.bundle.min.js"></script>
<script src="/select2/select2.min.js">
</script>
<!-- Main JS-->
<script src="/main.js"></script>
</body>
</html>
<!-- end document-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
I stuck into this problem. My separate header and footer only show after the data in js file is completely fetched. When the data is loading, I can see the input (search image) and another text input but I can't see the header and footer. Any suggestion for getting the header and footer first before executing js file?
Thanks.
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script>
$(function(){
$("#header").load("../header/index.html");
$("#footer").load("../footer/index.html");
});
</script>
<link rel="stylesheet" href="../header/style.css">
<link rel="stylesheet" href="../footer/style.css">
</head>
<body>
<div id="header"></div>
<section>
<div>
<input type="image" src="search.png" id="submitKeywordButton" onclick="submitKeyword();" />
<div style="overflow: hidden;">
<input type="text" name="subscribe" placeholder="keyword" id="keyword"/>
</div>
</div>
</section>
<div id="footer"></div>
<script src="./main.js"></script>
</body>
</html>
Header file
<link rel="stylesheet" href="./style.css">
<header>
<div class="container">
<div id="branding">
<img src="../img/icon.png" height="40" width="160"/>
</div>
<nav>
<img src="../img/firstFlag.png" height="20" width="30"/>
<img src="../img/secondFlag.png" height="20" width="30"/>
</nav>
</div>
</header>
Give this a try:
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../header/style.css">
<link rel="stylesheet" href="../footer/style.css">
</head>
<body style="display: none">
<div id="header"></div>
<section>
<div>
<input type="image" src="search.png" id="submitKeywordButton" onclick="submitKeyword();" />
<div style="overflow: hidden;">
<input type="text" name="subscribe" placeholder="keyword" id="keyword"/>
</div>
</div>
</section>
<div id="footer"></div>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="./main.js"></script>
<script>
$(function(){
$("#header").load("../header/index.html", function (){
$("#footer").load("../footer/index.html", function() {
$("body").fadeIn(1000);
});
});
});
</script>
</body>
if load method is sync, then try change your html structure like this :
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../header/style.css">
<link rel="stylesheet" href="../footer/style.css">
<script src="../node_modules/jquery/dist/jquery.js"></script>
</head>
<body style="display: none">
<div id="header"></div>
<div id="footer"></div>
<script>
$("#header").load("../header/index.html");
$("#footer").load("../footer/index.html");
</script>
<section>
<div>
<input type="image" src="search.png" id="submitKeywordButton" onclick="submitKeyword();" />
<div style="overflow: hidden;">
<input type="text" name="subscribe" placeholder="keyword" id="keyword"/>
</div>
</div>
</section>
<script src="./main.js"></script>
</body>
have a problem and I hope somebody helps me.
Have website 3gtrans.sk in bootstrap. It works fine but mobile navigation doesn't work on 2 pages
https://www.3gtrans.sk/nase-trasy
https://www.3gtrans.sk/galeria
As you can see on that pages are some photos (prettyPhoto). Can anybody show me what is bad please? Thank you so much.
i.e. galeria.php
<?php include "xxx.php"; ?>
<!DOCTYPE html>
<html lang="sk">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Galéria | 3G Trans Slovakia" />
<meta name="author" content="RoyalWEB.sk" />
<link rel="icon" href="favicon.png">
<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="assets/css/style.css?<?php echo date('h:i:s'); ?>">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato%7CRaleway">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="assets/css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet"/>
<script src="assets/js/jquery.prettyPhoto.js" type="text/javascript"></script>
<title>Galéria | 3G Trans Slovakia</title>
<script type="text/javascript">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
show_title: false,
social_tools: false
});
});
</script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse mynavbar" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav ">
<li>o nás</li>
<li>naše trasy</li>
<li>referencie</li>
<li>objednať prepravu</li>
<li><a class="active" href="galeria">galéria</a></li>
<li>kontakt</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container wrapper">
<div class="row">
<div class="col-md-12">
<h1>Galéria</h1>
<p>
<img class="img-responsive" src="images/gallery/thumb_peugeot01.jpg" alt="Peugeot Travel" /> <a href="images/gallery/peugeot02.jpg" rel="prettyPhoto[pp_gal]"><img class="img-responsive" src="images/gallery/thumb_peugeot02.jpg" alt="Peugeot Travel" />
</p>
</div>
</div>
</div>
<footer>
<div class="container copyright">
<div class="row">
<div class="col-md-12">
Copyright © <?php echo date("Y"); ?> | 3G Trans Slovakia<br />Vytvorila firma RoyalWEB.sk
</div>
</div>
</div>
</footer>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-101095120-1', 'auto');
ga('send', 'pageview');
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/1.0.9/cookieconsent.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.cookieconsent_options = {"message":"Táto stránka využíva súbory cookies, ktoré pomáhajú k jeho správnemu fungovaniu. Využívaním našich služieb s ich používaním súhlasíte.","dismiss":"Rozumiem","learnMore":"Viac informácií","link":"https://sk.wikipedia.org/wiki/HTTP_cookie","theme":"light-bottom"};
</script>
</body>
</html>
fixed with replacing prettyphoto for another plugin.
I have the following html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Datepicker - jQuery Mobile Demos</title>
<link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<link rel="stylesheet" href="http://cdn.rawgit.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.css">
<script src="../js/jquery.js"></script>
<script src="../_assets/js/index.js"></script>
<script src="../js/jquery.mobile-1.4.5.min.js"></script>
<script src="http://cdn.rawgit.com/jquery/jquery-ui/1.10.4/ui/jquery.ui.datepicker.js"></script>
<script id="mobile-datepicker" src="http://cdn.rawgit.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.js"></script>
<script>
$("#resultDate").datepicker( "setDate" , "7/11/2011" );
</script>
</head>
<body>
<div data-role="page" class="jqm-demos" data-quicklinks="false">
<!-- /header -->
<div role="main" class="ui-content jqm-content">
<h2>Inline Datepicker</h2>
<div data-demo-html="true">
<input type="text" data-role="date" data-inline="true" disabled id="inputDate">
<input type="number" value="40" id="days">
<input type="text" data-role="date" data-inline="true" disabled id="resultDate" >
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
which is a demo from jquery mobile
I need to create a java script function that add a number of days to first textfield and displays the result in the last one.
It would be great if it will update the second picker value also.
I'm using the Bootstrap 3 Date/Time Picker.
But it's not working. Can someone please assist me in fixing this?
I have searched stack overflow but nothing useful found yet..
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>BootStrap Practice </title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/datepicker.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<script src="js/vendor/moment.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Owes Shubho</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
</div><!--/.navbar-collapse -->
</div>
</nav>
<div class="container">
<div class="container">
<div class="col-md-10">
<div class='well'>
<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>
</div>
</div>
<script>$(function() {
$( document ).ajaxStop( function() {
$('#datetimepicker1').datetimepicker();
});
});</script>
<footer>
<p class="text-center">© Owes Shubho 2015</p>
</footer>
</div> <!-- /container --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
<script src="js/vendor/moment.js"></script>
<script src="js/vendor/bootstrap-datepicker.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>