add days to current date in jquery mobile - javascript

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

Bootstrap popper won't function for the life of me

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>

ReferenceError: logInModule is not defined at HTMLElement.onclick

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

Add Glyphicons in Bootstrap project MVC 5

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>

HTML loading page spinner doesn't fade way

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.

Bootstrap - 404 File not found

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>

Categories

Resources