I'm trying to learn Kendo and want to a basic DateTimePicker using Kendo UI Core. I've added the following links to the head and code from the example but it only returns a basic input box with no datepicker or anything else. It seems like I'm missing a script or something. Anyone have any ideas on some help?
<head runat="server">
<script src="Kendo/js/jquery.min.js"></script>
<script src="Kendo/js/kendo.core.min.js"></script>
<script src="Kendo/js/kendo.core.min.js"></script>
<script src="Kendo/js/kendo.datepicker.min.js"></script>
<script src="Kendo/js/kendo.datetimepicker.min.js"></script>
<script src="Kendo/js/kendo.popup.min.js"></script>
<script src="Kendo/js/kendo.timepicker.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="example">
<div id="to-do">
<input id="datetimepicker" />
</div>
<script>
$(document).ready(function () {
// create DateTimePicker from input HTML element
$("#datetimepicker").kendoDateTimePicker({
value: new Date()
});
});
</script>
<style>
#to-do {
height: 52px;
width: 221px;
margin: 30px auto;
padding: 91px 0 0 188px;
}
#to-do .k-datetimepicker {
width: 200px;
}
html.k-material #to-do {
height: 55px;
width: 260px;
padding: 87px 0 0 150px;
}
html.k-material #to-do .k-datetimepicker {
width: 240px;
}
</style>
</div>
</form>
</body>
You need to include kendo.calendar.min.js and kendo.popup.min.js before kendo.datepicker.min.js. The full list of JavaScript files requirements is available here.
Related
New to Javascript and have spent hours on this problem :/
I want to implement a smooth scrolling effect to move to different sections of a webpage. I am using this piece of javascript.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('a').on('click', function(e) {
if (this.hash !== '') {
e.preventDefault();
const hash = this.hash;
$('html, body, .main')
.animate({
scrollTop: $(hash).offset().top
}, 800);
}
});
This is the basic structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="margin-left: 30%; margin-right: 30%">
<main>
<div class="contactme-button">Contact me</div>
<div class="section-1" style="width: 100%; height: 1000px; background-color: grey; display: block;"> </div>
<div class="contactme-button-2">Contact me</div>
<div class="section-1" style="width: 100%; height: 1000px; background-color: blue; display: block;"> </div>
<div class="contactme-section" id="contactme" style="width: 100%; height: 100px; background-color: grey;">CONTACT ME</div>
<div class="section-1" style="width: 100%; height: 1000px; background-color: black; display: block;"> </div>
</main>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('a').on('click', function(e) {
if (this.hash !== '') {
e.preventDefault();
const hash = this.hash;
$('html, body, .main').animate({
scrollTop: $(hash).offset().top
}, 800);
}
});
</script>
</html>
(there is more content in there but that is the basic structure that is giving me grief)
I discovered that in
.main{
overflow-x: hidden;
}
is stopping the normal operation of the scrolling and cause the second link to scroll to a random spot
There's a CSS declaration that may help here:
.your-anchor-element-class {
scroll-margin-top: 36px; // <-- your value here
}
Browser support: Works natively in Chrome, FF, Edge, Opera. Supported in Safari with scroll-snap-margin-top.
MDN docs.
Credit to Josh Comeau for pointing this out.
I have a page with list of 18 links in sidebar, and on clicking a link main section image must change. By default first images is visible. I know it can be done. please help me.
Thanks
kristtee
This should be enough to get you moving in the right direction. This particular example uses jQuery and is only one of many ways to implement something like this.
<!DOCTYPE html>
<html>
<head>
<style>
.main img {
width: 500px;
height: 500px;
}
.thumbs img {
width: 50px;
height: 50px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="main">
<img src="https://static.pexels.com/photos/20787/pexels-photo.jpg" alt="cat">
</div>
<div class="thumbs">
<img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" alt="cat">
<img src="https://newevolutiondesigns.com/images/freebies/cat-wallpaper-24.jpg" alt="cat">
<img src="https://newevolutiondesigns.com/images/freebies/cat-wallpaper-7.jpg" alt="cat">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.thumbs img').on('click', function(){
var src = $(this).attr('src');
$('.main img').attr('src', src);
})
})
</script>
</body>
</html>
I am using JS plumb 1.5.5, the basic case is working fine on chrome, IE 10 and mozilla. But i am getting the ERROR : 'jsPlumb.Endpoints[...]' is null or not an object , when running the same on IE version 8.0.7600.16385. I tried debugging the javascript and found that the error is happening because _jsPlumb.getRenderMode() is undefined. I tried setting the renderMode to VML and SVG but still i get the same error. I have to support this on IE8 as well. The sample code thats throwing the error is shown below:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<meta http-equiv="Cache-Control" Content="no-cache">
<!-- library scripts -->
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.jsPlumb-1.5.5.js"></script>
<script type="text/javascript" src="js/jquery.contextMenu.js"></script>
<script type="text/javascript" src="js/wfeditor.js"></script>
<style>
.item {
border: 1px solid black;
background-color: #ddddff;
width: 100px;
height: 100px;
}
#state1 {
left: 100px;
top: 100px;
}
#state2 {
left: 250px;
top: 100px;
}
#state3 {
left: 100px;
top: 250px;
}
</style>
</head>
<body>
<div id="state1" class="item"></div>
<div id="state2" class="item"></div>
<div id="state3" class="item"></div>
</body>
<script type="text/javascript">
jsPlumb.ready(function() {
jsPlumb.makeSource($('.item'), {
connector: 'StateMachine'
});
jsPlumb.makeTarget($('.item'), {
anchor: 'Continuous'
});
});
</script>
</html>
I have the code corect for jquery to make rounded corners.. I have tested it with just a background color, and it works fine.
However, I want to apply the corners to images. It just won't work for me!
I have created an example page where I have the image with the class, right next to a div with the same class but only has a background color.. The image won't work, but the colored 'box' will.
I have tried coding it three different ways, and it still wont work. (I don't need all three ways of coding to work.. just one will do! ;'D )
Here is my Fiddle link: http://jsfiddle.net/SunnyOz/g46Gx/
Here is the test page online: http://www.webau.net/TC/example/corner_test.htm
Here is the CSS:
* {
border: 0 none;
}
.content {
width: 900px;
background-color: #fff;
margin: 0 auto;
}
.innertube {
padding: 20px;
}
.imgBox, .imgBox img { width:493px; height:257px; margin:0; padding:0 }
.divToHaveCorners, .divToHaveCorners img { width:493px; height:257px; margin:0; padding:0; display: block; }
Here is the HTML:
<div class="content">
<div class="innertube">
<br clear="all" />
<br clear="all" />
<img class="roundimg" src="http://webau.net/TC/example/images/motorcycle1.jpg" />
<div class="roundimg" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div>
<br clear="all" />
<br clear="all" />
<div class="imgBox"><img src="http://webau.net/TC/example/images/motorcycle1.jpg" /></div>
<div class="imgBox" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div>
<br clear="all" />
<br clear="all" />
<img class="divToHaveCorners" src="http://webau.net/TC/example/images/motorcycle1.jpg" />
<div class="divToHaveCorners" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div>
<br clear="all" />
<br clear="all" />
</div>
</div>
Here is the internal Javascript code:
$(document).ready(function(){
$(".roundimg").corner("tl 50px").corner("br 50px");
$(".imgBox").corner("15px");
$('.divToHaveCorners').corner();
});
My external JS references are:
<script type="text/javascript" src="http://webau.net/TC/example/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://webau.net/TC/example/jquery.corner.js"></script>
.
I am assuming that I have left out something really simple.. but I just can't see it.
Any help will be greatly appreciated.
Thanks,
SunnyOz
This does it, but there are also a TON of plugins that make these kinds of things a lot easier to use like imgr. Also- using this as a reference may be very helpful to you. Cheers!
<!DOCTYPE html>
<html>
<head>
<style>
#imgBox, #imgBoxPlain, #imgBox img { background-color: #701080; width:493px; height:257px; margin:0;padding:0;}
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript">
$.fn.corner.defaults.useNative = false;
$(document).ready(function(){
$("#imgBox").corner("15px");
$("#imgBoxPlain").corner("15px");
});
</script>
</head>
<body>
<div class="content">
<div class="innertube">
<div id="imgBox"><img src="images/motorcycle1.jpg" /></div>
<div id="imgBoxPlain" style="width: 200px; height: 100px;">Hello World!</div>
</div>
</div>
</body>
</html>
Im fairly new to this so please bear with...
I'm using the tutorial # http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/index.html
to allow the user to select dates from a calendar
however I can't seem to get it working could someone please advise if I am going about this the wrong way...
'jquery.datePicker.js & datePicker.css' can be downloaded at near the top of the page on...
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/index.html
Copy the code in the '•jquery.datePicker.js ' inside my tags in my view
Copy the datePicker.css code into my css file
Paste the following into the top of my view page:
<!-- jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- required plugins -->
<script type="text/javascript" src="scripts/date.js"></script>
<!--[if IE]><script type="text/javascript" src="scripts/jquery.bgiframe.js"></script><![endif]-->
<!-- jquery.datePicker.js -->
<script type="text/javascript" src="scripts/jquery.datePicker.js"></script>
This does not work...iv tried doing the first demo and replacting the .js data inside my<script> tags with
$(function()
{
$('.date-pick').datePicker();
});
and then adding the following to .css
/* located in demo.css and creates a little calendar icon
* instead of a text link for "Choose date"
*/
a.dp-choose-date {
float: left;
width: 16px;
height: 16px;
padding: 0;
margin: 5px 3px 0;
display: block;
text-indent: -2000px;
overflow: hidden;
background: url(calendar.png) no-repeat;
}
a.dp-choose-date.dp-disabled {
background-position: 0 -20px;
cursor: default;
}
/* makes the input field shorter once the date picker code
* has run (to allow space for the calendar icon
*/
input.dp-applied {
width: 140px;
float: left;
}
could someone please tell me what I am doing wrong?
Resources to add
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/scripts/date.js
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/scripts/jquery.datePicker.js
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/styles/datePicker.css
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/styles/demo.css
<form name="chooseDateForm" id="chooseDateForm" action="#">
<fieldset>
<legend>Test date picker form</legend>
<ol>
<li>
<label for="date1">Date 1:</label>
<input name="date1" id="date1" class="date-pick" /></li>
<li>
<label for="date2">Date 2:</label>
<input name="date2" id="date2" class="date-pick" />
</li>
<li>
<label for="test-select">Test select:</label>
<select name="test-select" id="test-select" style="width: 170px">
<option value="1">Test SELECT </option>
<option value="2">Doesn't shine through</option>
<option value="3">Even in IE</option>
<option value="4">Yay!</option>
</select>
</li>
</ol>
</fieldset>
</form>
Javascript
$('.date-pick').datePicker();
CSS
a.dp-choose-date {
float: left;
width: 16px;
height: 16px;
padding: 0;
margin: 5px 3px 0;
display: block;
text-indent: -2000px;
overflow: hidden;
background: url(http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/images/calendar.png)
no-repeat; }4 a.dp-choose-date.dp-disabled {
background-position: 0 -20px;
cursor: default; } /* makes the input field shorter once the date picker code * has run (to allow space for the calendar icon */
input.dp-applied {
width: 140px;
float: left; }
Check the fiddler i have setup the demo there also remember to check the resources i have added
http://jsfiddle.net/imranpk/DNFuB/4/
Thanks for the reply, i got it going
had to...add the following to my layout page
<script src="#Url.Content("http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/scripts/date.js")" type="text/javascript"></script>
<script src="#Url.Content("http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/scripts/jquery.datePicker.js")" type="text/javascript"></script>
<link href="#Url.Content("http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/styles/datePicker.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/styles/demo.css")" rel="stylesheet" type="text/css" />
then in my .cshtml file I added (below) after the editor for ref.
<script>
$("#HolidayDate").addClass('date-pick');
$('.date-pick').datePicker();
</script>