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.
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>
hi can someone help me with my code? it says the loginModule is not defined. can someone explain this to me. why can't define the function when i already call out on my html file?
and nothing reflects to the console but error.
pardon me because i'm a new learner of JavaScript. hope you help me thanks!
<!DOCTYPE html>
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<title>Support Admin</title>
<!-- BOOTSTRAP CORE STYLE CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- FONT AWESOME CSS -->
<link href="assets/css/font-awesome.min.css" rel="stylesheet" />
<!-- CUSTOM STYLE CSS -->
<link href="assets/css/style.css" rel="stylesheet" />
<!-- Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Nova+Flat' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css' />
<!-- <link rel="stylesheet" href="bootstrap.css" type="text/css"> -->
<script scr="support-admin\assets\data\admin-data.js"></script>
<script src="support-admin\assets\js\index-admin.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="head">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<a href="index.html">
<img src="assets/img/corelogo.png" class="header-mid" />
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 text-center" >
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<h4><span>Call:</span> +639351957952</h4>
<h4><span>E-mail:</span> michaelpelagio9830#gmail.com</h4>
</div>
</div>
</div>
</div>
<section >
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<h3>Admin Login </h3>
<form>
<div class="form-group">
<input id="userName" type="text" class="form-control" required="required" placeholder="Username / Email" />
</div>
<div class="form-group">
<input id="passWord" type="text" class="form-control" required="required" placeholder="Your Password" />
</div>
<div class="form-group">
<i class="btn btn-success" onClick="logInModule()">Click To Login</button>
</div>
Forgot Password ?
</form>
</div>
</div>
</div>
</section>
<!-- Jquery Core Script -->
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- Core Bootstrap Script -->
<script src="assets/js/bootstrap.js"></script>
</body>
</html>
then this is my javascript index-admin.js
const logInModule = ()=>{
var username = document.getElementById('userName');
var password = document.getElementById('passWord');
console.log(username);
console.log(password);
}
whenever i click the button there's an error in console of my browser it says.
index-admin.html:80 Uncaught ReferenceError: logInModule is not defined
at HTMLElement.onclick (index-admin.html:80)
onclick # index-admin.html:80
This takes me days without sleep ... I can not visualize my glyphicons icons I am working under MVC 5 and Bootstrap 3 .... any help for me?
My View:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<div class="col-md-6">
<div style="text-align:justify">
<h4><span class="glyphicon-tags"></span>ID Orden Compra: #TempData["IdOrden"]</h4>
<h4><span class="glyphicon-eye-open"></span>Proveedor: #TempData["NombreProveedor"]</h4>
<h4><span class="glyphicon-user"></span>Usuario: #TempData["NombreUsuario"] #TempData["ApellidoUsuario"]</h4>
<hr />
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type = "submit" value="Guardar Recepcion" class="btn btn-info">
</div>
</div>
</div>
}
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
You need to have glyphicon as the base css class and then you add the css classes for the specific one (glyphicon-tags) as the second css class
This should work
<span class="glyphicon glyphicon-tags"></span>
I was following this and more articles:
How to display a loading html page while site content loads?
and this here: my favourite:
`https://codepen.io/mimoYmima/pen/fisgL`
My problem is that if I copy and paste it 1:1 my loading page doesn't fade away but if the site is already in cache it doesn't show it.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="Dexter" content="">
<title>Code-Unknown</title>
<!-- ============ GOOGLE FONTS ============ -->
<link href='font-awesome/fonts/Raleway.css' rel='stylesheet' type='text/css'>
<link href='font-awesome/fonts/Open+Sans.css' rel='stylesheet' type='text/css'>
<link href='font-awesome/fonts/Iceberg.css' rel='stylesheet' type='text/css'>
<!-- CSS -->
<!-- Animate css -->
<link rel="stylesheet" type="text/css" href="css/animate.css">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
<!-- Custom styles CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Bootstrap v3.3.1 -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Favicons -->
<link rel="shortcut icon" href="images/Code-Unknown.ico">
<!-- Css 2.0 -->
<link rel="stylesheet" href="client-login/assets/css/form-elements.css">
<link rel="stylesheet" href="client-login/assets/css/style.css">
<link rel="stylesheet" type="text/css" href="client-login/assets/css/sweetalert.css">
<link href="assets/css/please-wait.css" rel="stylesheet">
<!-- Favicon and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="client-login/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="client-login/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="client-login/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="client-login/assets/ico/apple-touch-icon-57-precomposed.png">
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preloader"></div>
<!-- HEADER -->
<header id="top">
<canvas id="constellation"></canvas>
<div class="welcome">
<div class="logo"><img src="images/logo.png" width="190" height="190" alt=""> </div>
<h1>WELCOME</h1>
<div class="row">
<div class="col-sm-6 col-sm-offset-3 social-login">
<div class="social-login-buttons">
<a class="btn btn-link-2" href="">
<i class="fa fa-steam"></i> Steam
</a>
<a class="btn btn-link-2" href="">
<i class="fa fa-server"></i>
</a>
<a class="btn btn-link-2" href="">
<i class="fa fa-list-alt"></i>
</a>
<a class="btn btn-link-2" href="">
<i class="fa fa-list-alt"></i>
</a>
</div>
</div>
</div>
<p> </p>
</div>
</header>
<!-- END HEADER -->
<!-- END FOOTER -->
<!-- Javascript files -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Backstretch -->
<script src="js/jquery.backstretch.min.js"></script>
<!-- CountDown -->
<script src="js/jquery.countdown.js"></script>
<!-- Validate form -->
<script src="js/jquery.validate.js"></script>
<!-- Scroll Reveal -->
<script src="js/scrollReveal.js"></script>
<!-- Youtube Player -->
<!-- Smooth-scroll -->
<script src="js/smooth-scroll.js"></script>
<!-- Ajax chimp -->
<script src="js/jquery.ajaxchimp.js"></script>
<!-- TweenLite -->
<script src="js/TweenLite.min.js"></script>
<!-- EasePack -->
<script src="js/EasePack.min.js"></script>
<!-- rAF -->
<script src="js/rAF.js"></script>
<!-- Constellation -->
<script src="js/constellation.js"></script>
<!-- Custom -->
<script src="js/main.js"></script>
<!-- right click off -->
<script src="js/rightclickoff.js"></script>
<!-- loading -->
<script src="js/loading.js"></script>
</body>
</div>
</html>
Try this one
$(function() { // waiting for the page to bo be fully loaded
$('#preloader').fadeOut('slow', function() { // fading out preloader
$(this).remove(); // removing it from the DOM
});
});
#preloader {
width: 100vw; /* viewport width */
height: 100vh; /* viewport height. You can use percents, though. It requires your html and body to be 100% x 100% too */
position: fixed;
background: #333 url(http://files.mimoymima.com/images/loading.gif) center no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preloader"></div>
We also need your markup to narrow down your issue.
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>