Until my brain get bleeding, still I can't solve this problem. I have to use jQuery timepicker on my textbox in mvc3-View.
Inside my Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/titoms.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/jquery-ui-1.8.16.custom.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Script/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Script/jquery-ui-1.8.16.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Script/jquery-ui-timepicker-addon.js")" type="text/javascript"></script>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="main">
<div id="tabs">
<ul id="menu">
<li id="menu-first-item">
#Html.ActionLink("Home", "Index", "Home")</li>
</ul>
</div>
<div id="render">
#RenderBody()
</div>
</div>
</div>
</body>
</html>
Inside the Create View:
<script type="text/javascript">
$(document).ready(function () {
$('#WorkDuration').timepicker({});
});
</script>
<div id="page-title" class="text-indent">
<h2>
Create new shift</h2>
<div id="Optiontab">
#Html.ActionLink("Browse", "Index")
</div>
</div>
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<div class="fieldset">
<div class="editor-label">
#Html.LabelFor(model => model.WorkDuration)
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.WorkDuration)
#Html.ValidationMessageFor(model => model.WorkDuration)
</div>
</div>
}
The id of the textbos is "WorkDuration". The timepicker doesn't show.
Now, what I've missed? Hope someone could help. Thanks!
**
EDIT
**
I've found the answer, this should work now:
Inside layout.cshtml
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/titoms.css")" rel="stylesheet" type="text/css" />
<link type="text/css" href="#Url.Content("~/Content/jquery-ui-titoms.css")" rel="stylesheet" />
<style type="text/css">
#ui-datepicker-div, .ui-datepicker{ font-size: 80%; }
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
</style>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-ui-1.8.16.custom.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-ui-timepicker-addon.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-ui-sliderAccess.js")"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#WorkDuration, #AbsentTrigger, #LateTrigger, #StartTime, #EndTime").timepicker({
addSliderAccess: true,
sliderAccessArgs: { touchonly: false },
showSecond: true,
timeFormat: 'hh:mm:ss'
});
});
</script>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
Reference:
Timepicker theme not working
Thanks for all responses!!
There must be some issue with the naming of your WorkDuration text box.
But if the text box name definitely contains WorkDuration then the jquery attribute contains selector will apply the time picker.
From your comment below it seems that you may not have referenced your scripts correctly, Asp.Net MVC names the folder that holds the javascript files as Scripts while your code is referencing a folder named Script.
You can ensure you have the correct folder name by dragging any files you wish to reference from their folder onto your layout page.
I could get the timepicker to work by using the code below.
Scripts and CSS:
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css" />
<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css" />
<script src="http://jqueryui.com/jquery-1.7.1.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.datepicker.js"></script>
<script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-1.8.16.custom.min.js"></script>
<script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-timepicker-addon.js"></script>
HTML:
<input type="text" id="WorkDuration" name="example_WorkDuration" />
JQuery:
<script type="text/javascript">
$(document).ready(function () {
$('input[name*="WorkDuration"]').timepicker({});
});
</script>
Have you tried without, the timepicker addon, and used just simply datepicker?
like this:
$( "#WorkDuration" ).datepicker();
Instead of:
<script type="text/javascript">
$(document).ready(function () {
$('#WorkDuration').timepicker({});
});
</script>
Use:
<script type="text/javascript">
$(document).ready(function () {
$('#WorkDuration').datepicker();
});
</script>
This should work
use this jquery:
jquery.ptTimeSelect.js
Time:
$(document).ready(function () {
var uId = 'ptTimeSelect_' + jQuery.ptTimeSelect._counter;
$("#incidenttime").ptTimeSelect();
$("#incidenttime").click(function () { $.ptTimeSelect.openCntr('' + uId + ''); });
$("#incidenttime").focus(function () { jQuery.ptTimeSelect.openCntr('' + uId + ''); });
$("#incidenttime").keypress(function (event) {
if (event.keyCode == 13) {
jQuery.ptTimeSelect.setTime();
return false;
}
});
});
It is a best way i think so.
Related
I am trying to load an xml file but getting the following error.
DTD must be defined before the document root element.
the xml file is generated by others, i found that there are html elements in the xml file. How do i delete the html in the xml file using c#?
Updated:
Hi, I sorry that i cannot show to full xml file due to company p&c. But below are the html part that i mention.
<?xml version="1.0" encoding="UTF-8"?>
<loanreservation>
<loanid></loanid>
<status>WEB_REQUEST</status>
<requesterid>abc</requesterid>
<borrowerid>abc</borrowerid>
<borrowerorgid>abc</borrowerorgid>
<borrowerlocid>abcborrowerlocid>
<authcontactid></authcontactid>
<escalationcontactid></escalationcontactid>
<specialinstructions>specialinstructions>
<internalnotes></internalnotes>
<usestartdate>2018-09-03</usestartdate>
<useenddate>2018-09-17</useenddate>
<mustshipdate>2018-08-30</mustshipdate>
<mustreceivedate>2018-10-01</mustreceivedate>
<checkoutdate></checkoutdate>
<checkindate></checkindate>
<intendeduse></intendeduse>
<reason></reason>
<shiptolocid>abc</shiptolocid>
<shipaddress1></shipaddress1>
<shipaddress2></shipaddress2>
<shipaddress3></shipaddress3>
<shipaddress4></shipaddress4>
<shippostalcode></shippostalcode>
<shipcity></shipcity>
<shipstate></shipstate>
<shipprovince></shipprovince>
<shipcountry></shipcountry>
<shiptocontactid></shiptocontactid>
<shiptocontactphone></shiptocontactphone>
<shiptocontactfax></shiptocontactfax>
<shiptocontactemail></shiptocontactemail>
<returnpickuplocid></returnpickuplocid>
<returnpickupcontactid></returnpickupcontactid>
<returnpickupcontactphone></returnpickupcontactphone>
<returnpickupcontactfx></returnpickupcontactfx>
<returnpickupcontactemail></returnpickupcontactemail>
<returnpickuplocation></returnpickuplocation>
<returnpickupaddress1></returnpickupaddress1>
<returnpickupaddress2></returnpickupaddress2>
<returnpickupaddress3></returnpickupaddress3>
<returnpickupaddress4></returnpickupaddress4>
<returnpickuppostalcode></returnpickuppostalcode>
<returnpickupcity></returnpickupcity>
<returnpickupstate></returnpickupstate>
<returnpickupprovince></returnpickupprovince>
<returnpickupcountry></returnpickupcountry>
<loanorgpoolid></loanorgpoolid>
<contactloginid></contactloginid>
<lastupdate></lastupdate>
<createdate></createdate>
<approvalcontactid></approvalcontactid>
<approveddate></approveddate>
<shippingwaybill></shippingwaybill>
<shippingcarrier></shippingcarrier>
<shippingnoofboxes></shippingnoofboxes>
<shippingtotalweight></shippingtotalweight>
<returnwaybill></returnwaybill>
<returncarrier></returncarrier>
<returnnoofboxes></returnnoofboxes>
<returntotalweight></returntotalweight>
<reservationitems>
<item>
<loanid></loanid>
<equipno></equipno>
<assetno></assetno>
<manufacturer></manufacturer>
<manufmodelno></manufmodelno>
<serialno></serialno>
<options></options>
<chassisno></chassisno>
<slotno></slotno>
<configid></configid>
</item>
</reservationitems>
<accessories>
<item></item>
</accessories>
</loanreservation>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="height: 100%">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<link rel="stylesheet" type="text/css" href="../css/base-font.css">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<link rel="stylesheet" type="text/css" href="../css/template.css">
<link rel="stylesheet" type="text/css" href="../css/dashboard.css">
<link rel="stylesheet" type="text/css" href="../css/tabs.css">
<link rel="stylesheet" type="text/css" href="../css/webforms.css">
<link rel="stylesheet" type="text/css" href="../css/im.css">
<link rel="stylesheet" type="text/css" href="../css/ice_infoline.css">
<link rel="stylesheet" type="text/css" href="../css/internal_portal.css">
<script language="JavaScript" src="../scripts/dhtml-base.js"></script>
<script language="JavaScript" src="../scripts/common.js"></script>
<script language="JavaScript" src="../scripts/jquery-min.js"></script>
<script language="JavaScript" src="../public/locale-script.aspx"></script>
<script language="JavaScript" src="../scripts/template.js"></script>
<script language="JavaScript" src="../scripts/dhtml-menus.js"></script>
<script language="JavaScript" src="../scripts/report-definition.js"></script>
<script language="JavaScript" src="../webfx/scripts/webforms-ui.js"></script>
<script src="../webfx/scripts/webforms.js"></script>
</head>
<body style="height: 100%;">
<div style="position: fixed; top: 0px; width:60px; height: 100%; background-color: #555555;"></div>
<div style="margin-left:0px; height: 100%">
<div style="display: table; height: 100%; width: 100%">
<div style="display: table-row; width=100%">
<div style="border-bottom:6px #e90029 solid; margin-bottom: 10px; ">
<div class="bodycontainer">
<a style="display: inline-block;" href="http://www.keysight.com"><img src="../acom-lf/keysight-logo.png"></a>
<span style="display: inline-block; color: #555555; font-size: 20pt; font-weight: bold; vertical-align: top; padding-top: 20px; margin-left: 30px" >Infoline</span>
</div>
</div>
</div>
<div style="display: table-row; width=100%; height: 100%">
<div class="bodycontainer" style=" ">
<h1>System maintenance</h1>
</div>
</div>
<div style="display: table-row; width=100%">
<div style="color: #909090; background-color: black; padding: 8px; padding-left:50px; margin-top: 20px; font-size: 9pt;" class="bodycontainerhf">
</script></strong>
</div>
</div>
</div>
</div>
</body>
</html>
For the coding part, i'm just doing as below:
xmlDoc.Load(Server.MapPath("./Request/") + FileUpload1.FileName);
What I'm doing is just loading the xml file.
I am building an application in .net core 2.0 Razor pages and cannot get the site.css file to render what I want it to. I am string to customize the _layout.cshtml file by changing the nav bar. When I run the project the CSS does not apply going so far as to when I inspect the page the css that is being rendered is not even the file that I have changed.
The CSS code is:
body {
padding: 0;
margin: 0;
border: 0;
}
.navigation {
background-color: blue;
color: white;
float: left;
width: 20vw;
height: 100vh;
}
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
div.table {
display: table;
}
div.table > div.thead {
display: table-header-group;
}
div.table > div.tbody {
display: table-row-group;
}
div.table > div.thead > div.table-row,
div.table > div.tbody > div.table-row {
display: table-row;
}
div.table > div.thead > div.table-row > div.table-heading {
display: table-cell;
font-weight: bold;
}
div.table > div.tbody > div.table-row > div.table-cell {
display: table-cell;
}
/* Hide/rearrange for smaller screens */
#media screen and (max-width: 767px) {
/* Hide captions */
.carousel-caption {
display: none;
}
}
and the _layout.cshtml is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - AdeptFrontEnd</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" runat="server"/>
<link rel="stylesheet" href="~/css/site.css" runat="server" type="text/css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
</environment>
</head>
<body>
<nav class="nav flex-column navigation">
<ul class="nav flex-column">
<li><a asp-page="/Network/Index" class="navbar-brand">Adept</a></li>
<li><a asp-page="/Network/Index">Network</a></li>
<li><a asp-page="/Network/Index">Network</a></li>
</ul>
</nav>
<div class="container body-content">
#RenderBody()
</div>
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment exclude="Development">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
#RenderSection("Scripts", required: false)
</body>
</html>
When I run the solution I get page that looks like:
How do I get the CSS to render properly?
You put the site.css in the environment exclude. Comment that out and see if it works.
I have a css that fires when I click a button to indicate an error if a field on the form is empty .
However this only works when the page is not within a masterpage.
When the page is within a masterpage and I click the button I get this error:
this is the code on the css:
[ Alert validate ]*/
.validate-input {
position: relative;
}
.alert-validate::before {
content: attr(data-validate);
position: absolute;
max-width: 70%;
background-color: #fff;
border: 1px solid #c80000;
border-radius: 3px;
padding: 4px 25px 5px 10px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
right: 12px;
pointer-events: none;
font-family: Ubuntu-Regular;
color: #c80000;
font-size: 14px;
line-height: 1.4;
text-align: left;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.alert-validate::after {
content: "\f12a";
font-family: FontAwesome;
display: block;
position: absolute;
color: #c80000;
font-size: 18px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
right: 18px;
}
.alert-validate:hover:before {
visibility: visible;
opacity: 1;
}
#media (max-width: 992px) {
.alert-validate::before {
visibility: visible;
opacity: 1;
}
}
and this is the code in my page:
<%# Page Title="" Language="C#" MasterPageFile="~/Principal.Master" AutoEventWireup="true" CodeBehind="Usuario.aspx.cs" Inherits="Web.Usuario" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<!DOCTYPE html>
<html lang="zxx" class="no-js">
<head>
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Favicon-->
<link rel="shortcut icon" href="img/fav.png">
<!-- Author Meta -->
<meta name="author" content="Colorlib">
<!-- Meta Description -->
<meta name="description" content="">
<!-- Meta Keyword -->
<meta name="keywords" content="">
<!-- meta character set -->
<meta charset="UTF-8">
<!-- Site Title -->
<title>Destinos Naturales S.A</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
<link rel="icon" type="image/png" href="images2/icons/favicon.ico"/>
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor2/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts2/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts2/Linearicons-Free-v1.0.0/icon-font.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor2/animate/animate.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor2/css-hamburgers/hamburgers.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor2/animsition/css/animsition.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor2/select2/select2.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor2/daterangepicker/daterangepicker.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="css2/util.css">
<link rel="stylesheet" type="text/css" href="css2/main.css">
<!--===============================================================================================-->
<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,400,300,500,600,700" rel="stylesheet">
<!--
CSS
============================================= -->
<link rel="stylesheet" href="css/linearicons.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- Start Contact Area -->
<section class="contact-area" id="contact">
<div class="container-fluid">
<div class="row align-items-center d-flex justify-content-start">
<div class="col-lg-6 col-md-12 contact-left no-padding">
<div style=" width:100%;
height: 545px;" id="map"></div>
</div>
<div class="col-lg-4 col-md-12 pt-100 pb-100">
<form class="login100-form validate-form flex-sb flex-w">
<span class="login100-form-title p-b-51">
Usuario
</span>
<div>
<asp:TextBox ID="txtid" class="input100" type="numeric" readonly="true" runat="server"></asp:TextBox>
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input m-b-16" data-validate = "La cédula es requerida">
<asp:TextBox ID="txtCedula" placeholder="Ingrese la Cédula" class="input100" type="numeric" runat="server"></asp:TextBox>
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input m-b-16" data-validate = "El nombre es requerido">
<asp:TextBox ID="txtNombre" placeholder="Ingrese el Nombre" class="input100" type="text" runat="server"></asp:TextBox>
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input m-b-16" data-validate = "los Apellidos son requeridos">
<asp:TextBox ID="txtApellidos" placeholder="Ingrese los Apellidos" class="input100" type="text" runat="server"></asp:TextBox>
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input m-b-16" data-validate = "El usuario es requerido">
<asp:TextBox ID="txtUsuario" placeholder="Ingrese el Usuario" class="input100" type="text" runat="server"></asp:TextBox>
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input m-b-16" data-validate = "La contraseña es requerida">
<asp:TextBox ID="txtContrasena" placeholder="Ingrese la Contraseña" class="input100" type="password" runat="server"></asp:TextBox>
<span class="focus-input100"></span>
</div>
<div class="flex-sb-m w-full p-t-3 p-b-24">
<div class="contact100-form-checkbox">
</div>
<div>
</div>
</div>
<div class="container-login100-form-btn m-t-17">
<asp:Button ID="btnGuardar" class="login100-form-btn" runat="server" Text="Guardar" OnClick="btnGuardar_Click" />
</div>
</form>
</div>
</div>
</div>
</section>
<!-- End Contact Area -->
<div id="dropDownSelect1"></div>
<!--===============================================================================================-->
<script src="vendor2/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
<script src="vendor2/animsition/js/animsition.min.js"></script>
<!--===============================================================================================-->
<script src="vendor2/bootstrap/js/popper.js"></script>
<script src="vendor2/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
<script src="vendor2/select2/select2.min.js"></script>
<!--===============================================================================================-->
<script src="vendor2/daterangepicker/moment.min.js"></script>
<script src="vendor2/daterangepicker/daterangepicker.js"></script>
<!--===============================================================================================-->
<script src="vendor2/countdowntime/countdowntime.js"></script>
<!--===============================================================================================-->
<script src="js2/main.js"></script>
<script src="js/vendor/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.ajaxchimp.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/parallax.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhOdIF3Y9382fqJYt5I_sswSrEw5eihAA"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
</asp:Content>
the master page should look like this:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs"
Inherits="MasterPage" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<%--all meta tags--%>
<%--all scripts put here will be available to every page that uses this master.--%>
<asp:ContentPlaceHolder id="head" runat="server">
<%--note this content placeholder in the head. don't put anything in it yet.
it will be available to pages that use this master.--%>
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<%--add script tags and links-to-js before the closing body tag.
they will be available to every page that uses this master page.--%>
</body>
</html>
a form that uses the master page will look like this:
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<%--this is the content placeholder from the head of the master.
add styles and links-to-css for use on just this page.--%>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
content for this page.
<%--add scripts for just this page.--%>
</asp:Content>
I spent > 8 hours today just to make my slide works but unfortunately it didn't work.It only display the 4 static images.. Why it doesn't work? Can anybody tell me? Here is my code.
asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<style type="text/css" media="screen">
.slides_container {
width:570px;
height:270px;
}
.slides_container div {
width:570px;
height:270px;
display:block;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="slides.js"></script>
<script>
$(function() {
$("#slides").slides({
preload: true
});
});
</script>
.........................
<div id="slides">
<div class="slides_container">
<div> <img src= "folder/6.jpg" /></div>
<div><img src="folder/7.jpg" /></div>
<div><img src="folder/extreme.jpg" /></div>
<div><img src="folder/alza.jpg" /></div>
</div>
</div>
Someone who knows my problem, please help me. Appreciate that. Have a nice Tuesday :)
I assume you make use of SlideJS? If I am correct - have a look at this demo code - which worked for me
<style type="text/css" media="screen">
.slides_container
{
width: 570px;
height: 270px;
}
.slides_container div
{
width: 570px;
height: 270px;
display: block;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- downloaded from SlideJS and put it in a js folder -->
<script src="js/slides.min.jquery.js"></script>
<script>
$(function () {
$("#slides").slides({
preload: true
});
});
</script>
<div id="slides">
<div class="slides_container">
<div>
<img src="pic/1.jpg" /></div>
<div>
<img src="pic/2.jpg" /></div>
<div>
<img src="pic/3.jpg" /></div>
<div>
<img src="pic/4.jpg" /></div>
</div>
</div>
I want a datepicker to show when i click my textbox, but it does not, I have done some searching and nothing helped me.
submittime.aspx
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<form action="/Item/Submit" method="post">
<fieldset>
<legend>Set time</legend>
<div class ="editor-label"><label for="expire"><b>End date</b></label></div>
<div class ="editor-field"><input id="expire" name="expire" type="text" style="width: 500px; height: 20px"/></div>
<script type="text/javascript">
$(function() {
$('#expire').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy'
});
});
</script>
<input type="submit" value="Submit" style="width: 72px" />
</fieldset>
</form>
</asp:Content>
I have added following code to Site.Master
<link type="text/css" href="css/themename/jquery-ui-1.8.18.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
It shows my textbox but no datepicker shows when i click it, any help would be nice.
You're missing the $(document).ready()
so your code should look something like this:
$(document).ready(function(){
$('#expire').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy'
});
});
jsFiddle example : http://jsfiddle.net/hcBL2/