I am trying to get a date picker working and I am really struggling with my limited javascript knowledge. I have been basing this on this tutorial.
I have the following code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/date.js"></script>
<script type="text/javascript" src="scripts/jquery.datePicker.js"></script>
<script type="text/javascript" charset="utf-8">
$(function()
{
$('.date-pick').datePicker().val(new Date().asString()).trigger('change');
});
</script>
...
<input name="oDate" id="oDate" class="date-pick" />
Any suggestions would be very much appreciated.
i would suggest you take a look at the regular jquery ui datepicker to get a standard out of the box datepicker working. Start by simply using the exact code you see here and then tweak (step by step) as necessary. There are tons of example for all different use cases and good documentation
I have tried below configuration and it's working fine on my local host -
Browser Tested - Mozilla Firefox version 3.6.10
I have xampp package installed.
I am including the html file that i have used for testing -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="date.js"></script>
<script type="text/javascript" src="jquery.datePicker.js"></script>
<LINK REL=StyleSheet HREF="datePicker.css" TYPE="text/css" MEDIA=screen>
<script type="text/javascript" charset="utf-8">
$(function()
{
$('.date-pick').datePicker().val(new Date().asString()).trigger('change');
//$('.date-pick').dpSetEndDate('01/01/2010');
});
</script>
</head>
<body>
<input name="oDate" id="oDate" class="date-pick" />
</body>
</html>
I hope you have an input tag like so in your HTML body:
<input name="date" id="date" class="date-pick" />
Please check if browser java script is turned off
Related
Just a quick question. I'm using Samsung Smart TV SDK 5.1 and there are few JavaScript app templates. Cannot figure out why the template that uses scenes has this in index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Title</title>
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/af/2.0.0/loader.js"></script>
</head>
<body>
</body>
</html>
And the other one (without scenes) has this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Title</title>
<!-- TODO : Common API -->
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/Widget.js"></script>
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"></script>
<!-- TODO : Javascript code -->
<script language="javascript" type="text/javascript" src="app/javascript/Main.js"></script>
<!-- TODO : Style sheets code -->
<link rel="stylesheet" href="app/stylesheets/Main.css" type="text/css">
<!-- TODO: Plugins -->
</head>
Thanks.
Scenes template includes Samsung's Framework loader.
Other template don't, and instead include couple platform API scripts.
You should really read developer guide http://www.samsungdforum.com/Guide/?FolderName=art00114&FileName=index.html
I am trying to build my personal website using express and want to put a datepicker on one of the page.
I tried to change the ejs file of this page, however, nothing works.
I am wondering if it is because that the layout.ejs file exists, and wondering how can I just load jquery-ui in only of the ejs.file? Because I cannot find any related npm to install . Many thanks for answering！XD
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" media="all">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
</head>
<body>
<script>
$(function() {
$( "#datepick" ).datepicker();
});
</script>
<aside class="widget">
<p>Date: <input type="text" id="datepick"></p>
</aside>
</body>
</html>
There is another similar question, but I think the answer does not works for me.
node.js - DatePicker jquery UI not workinng
When I just use Express and change the index.ejs like the following, it works , but when there are many pages, it seems that it cannot be loaded...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" media="all">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script>
$(function() {
$('#datepick').datepicker();
});
</script>
</head>
<body>
<aside class="widget">
<p>Date: <input type="text" id="datepick"></p>
</aside>
</body>
</html>
node.js - DatePicker jquery UI not workinng
For whom run into the same problem, this is the reference.
I finally found the answer by checking the code.I was unable to load JQuery for in the layout.ejs, I retyped the following in order to load the bootstrap, but actually by using https://npmjs.org/package/twitter-bootstrap-node twitter-bootstrap-node, there is no-need to load the javascripts again. This may be a common problems for beginners in Node.JS like me.Hope this answer can be helpful to people who run into the same problem and the code is in the answer of the related problem.
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/bootstrap.js"></script>
<script src="/vendor/twitter/less/bootstrap.less"></script>
Hi look at this jsfiddle link http://jsfiddle.net/w7PHj/
you need to use like this....
$('#datepick').datepicker();
It seems Webkit moves all my head tags to the body, and adds a lot of whitespace before the body. When I look at the source, the tags are in the right place. When I inspect the elements using the Chrome browser, the tags have been moved. I suspect it's Webkit because the same happened in Safari, but not in Opera or Firefox. I use the latest of all browsers.
Here is my source code start, as appears when I press "Show Source":
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="(Snip)" />
<title>(Snip)</title>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="style/qtip.css" />
<link rel="stylesheet" type="text/css" href="style/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="style/new.css" />
<script type="text/javascript" src="javascript/ckfinder/ckfinder.js"></script>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/jquery_easing.js"></script>
<script type="text/javascript" src="javascript/jquery_custom.js"></script>
<script type="text/javascript" src="javascript/typewatch.js"></script>
<script type="text/javascript" src="javascript/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="javascript/ckeditor/adapters/jquery.js"></script>
<script type="text/javascript" src="javascript/slider.js"></script>
<script type="text/javascript" src="javascript/script.js"></script>
<script type="text/javascript" src="javascript/qtip.js"></script>
<script type="text/javascript" src="javascript/swfobject.js"></script>
</head>
<body>
<div id="wrapper_ext">
<a id="wallpaper_toggle"></a>
...
And here is a screenshot of the DOM analyser:
I suspected Javascript at first, but I disabled all Javascript and the same thing occurs. Yet, this only occurs on some of my pages, so I don't know the actual cause. I'm looking for possible causes of such a problem.
I removed the Byte-Order Mask (BOM) from my file, and it worked.
Should I report this as a bug to webkit?
I am trying to use a tooltip jQuery plugin. This is what I have in <head> of index.html:
<head>
<title>Index</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/simpletip-1.3.1.min.js" type="text/javascript"></script>
<script src="js/homepage.js" type="text/javascript"></script>
</head>
And this is in js/homepage.js:
$(document).ready(function() {
// meaningless functions
$('.supported_hosts').simpletip({
fixed: true,
position: 'right',
content: 'test content.'
});
});
But for some reason, the tooltip doesn't show. But it does show if I include the tooltip function on the index page. Is there any way to get this working without having the tooltip function on the index page, but in an external file? Thanks.
I have never use the simplest plug in but i copy and pasted your header and your js code and everything seemed to work just fine.
I linked to the latest version of jquery and downloaded a fresh copy of simpletip.js and it worked with on the first try.
The only differences are/maybe:
- I don't know what your code looks like where you call 'supported_hosts' class in the html.
- The name of the simpletip.js file I didn't change it upon download, so I would check your file names and relative location.
Sorry there wasn't something more but what you have worked for me, here is the code I used in full incase this helps you:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Index</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.simpletip-1.3.1.min.js" type="text/javascript"></script>
<script src="homepage.js" type="text/javascript"></script>
</head>
<body>
<span class="supported_hosts">Tool Tips here</span>
</body>
</html>
Javascript you gave:
$(document).ready(function() {
// meaningless functions
$('.supported_hosts').simpletip({
fixed: true,
position: 'right',
content: 'test content.'
});
});
I downloaded the simpletip.js here:
http://code.google.com/p/jquery-simpletip/downloads/detail?name=jquery.simpletip-1.3.1.min.js&can=2&q=
I would just double check your relative paths and class naming. Your code looks good.
Moving
<script src="homepage.js" type="text/javascript"></script>
to the end of the body seemed to solve the problem:
<body>
[code...]
<script src="homepage.js" type="text/javascript"></script>
</body>
I'm trying to implement a jQuery slider with increments. I've gone from, the actual project page, to a test page of the project with just the slider, to just the slider. In all cases I've been unable to get the handle to move. It also seems to have a width of 1px or similar.
My code is as follows,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jQuery slider</title>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.custom.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$("#slider").slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
I'm sure there is something very simple at fault here, but I really cannot see it for the life of me. The custom part of my download, was just clicking the 'select all components'.
i don't think the slider will show if there is no content and no fixed height ... dry this:
<div id="slider" style="width: 300px; height: 200px">
// Put a huge lorem ipsum text here ;)
</div>
I tried your exact code in a .html file...only replacing your includes with:
<link rel="stylesheet" type="text/css" media="screen" href="/css/ui-lightness/jquery-ui-1.7.2.bluetie.css" />
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.7.2.custom.min.js"></script>
...and it worked...slider across the entire screen...easily movable...
non of my files were modified from what I got off the jquery site....
If you are not getting a javascript error,...my guess is that your .css file isn't being included.
Hope this helps,
Andrew