Zebra datepicker icon not showing up - javascript

Anyone familiar with Zebra Datepicker?
I can't seem to get the calendar icon to show up.
http://jsfiddle.net/abalter/gzbqrxpL/
I'm also trying:
<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="zebra_datepicker.js"></script>
<link rel="stylesheet" href="default.css" type="text/css">
<script>
$(document).ready(function() {
// assuming the controls you want to attach the plugin to
// have the "datepicker" class set
$('datepickertest').Zebra_DatePicker();
});
</script>
</head>
<body>
<form>
<input type="text" id="datepickertest" class="datepicker" />
</form>
</body>
</html>
With all those files local in the same directory, including calendar.png, the icon image.
In both cases the calendar icon doesn't show up.
Incidentally, I tried looking at the source of the demo page, and I don't see the scripts referred to anywhere, so that doesn't provide much guidance.

Here is a working example, based on your code: http://jsfiddle.net/gzbqrxpL/1/
You should follow their tutorial.
First, add <!doctype html> at the beginning of you html file.
Second, download the script with ALL files, including the /css folder with themes.png, calendar.png, and the folder metallic if you want to use that theme.
Third, add jquery BEFORE adding the zebra datepicker.
It should then work. Your JSFiddle was not working because you were refering the external sources to github, and github is not a CDN, so the browser was not loading.
That's it.

First of all, make sure you are correctly selecting the datepickertest. Include a "#" or "." beforehand to select id or class respectively. I think not including those selects tag elements.
Without looking specifically at Zebra-Datepicker, I know, at least, for the regular datepicker that you have to initialize some values.
$("#id").datepicker({
showOn: "button",
buttonImage: "../images/myImage.png",
buttonImageOnly: true,
...
});
Check which values you need to initialize.

Related

Adding jQuery to wordpress page to display Time/Date Picker

I found a Time picker here:
Time Picker.
It is the second one on the list with the grey square and 4 arrows. I need to know how to add this time picker to a WordPress page. When I downloaded all the JS files and the CSS files it included an HTML page. But, if I use the HTML code (below) the arrows are missing so selecting the time doesn't work like the original page. The download provides me with the js and css files needed I just don't know how to use them.
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Time Entry</title>
<link href="jquery.timeentry.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.plugin.js"></script>
<script src="jquery.timeentry.js"></script>
<script>
$(function () {
$('#defaultEntry').timeEntry();
});
</script>
</head>
<body>
<h1>jQuery Time Entry Basics</h1>
<p>This page demonstrates the very basics of the
jQuery Time Entry plugin.
It contains the minimum requirements for using the plugin and
can be used as the basis for your own experimentation.</p>
<p>For more detail see the documentation reference page.</p>
<p>Enter your time: <input type="text" id="defaultEntry" size="10"></p>
</body>
</html>
These are the first two steps needed in the USAGE: section of the source page.
Include the jQuery library (1.7+) in the head section of your page.
Download and include the jQuery Time Entry CSS and JavaScript in the
head section of your page.
I tried to add this code to my wordpress page on the text tab but I don't get the results I need:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Time Entry</title>
<link href="/wp-content/jquery.timeentry.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="/wp-content/jquery.plugin.js"></script>
<script type="text/javascript" src="/wp-content/jquery.timeentry.js"></script>
<script type="text/javascript">
<!--
$('#spinnerOrange').timeEntry({spinnerImage: 'wp-content/spinnerOrange.png'});
//--></script>
</head>
<body>
<h1>jQuery Time Entry Basics</h1>
<p>This page demonstrates the very basics of the
jQuery Time Entry plugin.
It contains the minimum requirements for using the plugin and
can be used as the basis for your own experimentation.</p>
<p>For more detail see the documentation reference page.</p>
<p>Enter your time: <input type="text" id="spinnerOrange" size="10"></p>
</body>
</html>
I am not sure if I referenced the script right or the stylesheet. Any help would be greatly appreciated.
Thanks,
Matt
jQuery is already included in Wordpress by default.
In order to add scripts, the right way to do it in Wordpress is using wp_enqueue_script
Here the doc: https://developer.wordpress.org/reference/functions/wp_enqueue_script/
Here a sample:
https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/

Jquery plugin Flexslider isn't working

I'm trying to use the Jquery plugin Flexslider on a website that I'm developing. I have my stylesheets and scripts in order like so:
<head>
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="jquery.js"></script>
<script src="jquery.flexslider.js"></script>'
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
</head>
I checked to make sure that Jquery is working by writing just a simple script by putting a red box around all of my divs, and that worked.
I'm not sure what I'm doing wrong...I'm using the code (the HTML as well, but for some reason the ctrl+K isn't working for the code) exactly how the website tells me to use it
Any thoughts?

jquery-ui datepicker : widget displays but no days of the month, no value created

I am having a problem with the jquery-ui datepicker widget. I have a simple html file where the widget displays and functions properly.
But when I try to incorporate the widget into my project the widget displays, and does function but the days of the month are way at the bottom:
Here is a simple html mockup file that has the same problem:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<script type="text/javascript" src="javascript/jquery-1.11.2.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
<script type="text/javascript" src="javascript/Chart.js"></script>
<script type="text/javascript" src="javascript/jRate.js"></script>
<script type="text/javascript" src="javascript/coffee-ratings.js"></script>
<script type="text/javascript" src="javascript/coffee-form.js"></script>
<script>
$(function(){
$("#datepicker").datepicker();
});
</script>
<!-- <link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.css"/> -->
<link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.structure.min.css"/>
<link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.theme.min.css"/>
<link rel="stylesheet" type="text/css" href="css/coffee.css"/>
<title>Create New Home Green Coffee Blend</title>
</head>
<body>
<table>
<tr><td>date: </td><td><input type="text" id="datepicker" name="date"/></td></tr>
</table>
</body>
</html>
since it works in the simple test file and not in the main project, it's not an OS thing. I've tried
doing a diff on the jquery-ui code in the test area and the main eclipse javascript folder, they are the same
adding and removing some of the different css files to see if that made a difference.
downloading a new copy of jquery-ui, copied to both folders, still got same behavior
The main app uses a new download of jquery, tried using the version that comes with jquery-ui was the same.
has to be some kind of css conflict. I did not see anything that grabbed me in firebug.
UPDATE
as I said in the comments, when I removed my main project css file, the datepicker rendered correctly. In playing around with my main css file, I was able to get the datepicker to display ok by commenting out the height in this block:
html, h1, div{
height: 100%;
padding: 0;
margin: 0;
}
but I need that in order to get the layout of the page to work.
any ideas?
thanks!

trentrichardson datetimepicker and timepicker doesn't work

For the trentrichardson timepicker addon (http://trentrichardson.com/examples/timepicker/) for datetimepicker and timepicker, it seems to work for a limited amount of time (6 hours to a day), THEN, it stops working. TO FIX THIS, I replace the addon CDN (http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js), for the same one, and it works again.
How could this be? I put the CDN's in the correct order as well...
jQuery
jQueryUI (with datepicker and slider wigits)
Timepicker
Then CSS
P.S. I removed my main.css file and corresponding class="" from the inputs.
Once again, it works for 6 hours to a day, then stops working... with nothing changing. And I'm pretty sure the CDN's are not changing either, but they may be, but that should not matter since the file path itself is not changing. Let me know what you think, thanks! ALSO, when it stops working, I checked the file paths and they are still valid.
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>
<link rel="stylesheet" href="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.css">
<script>
$(function() {
$( "#datetimepicker" ).datetimepicker();
});
$(function() {
$( "#timepicker" ).timepicker();
});
</script>
</head>
<body>
</body>
</html>
<?php
echo '<input type="text" id="datetimepicker" size="12px">';
echo '<input type="text" id="timepicker" size="2px">';
?>
Trent Richardson has explicitly started preventing hotlinks to his site as of last year:
http://trentrichardson.com/2012/09/27/no-more-hotlinking/
Your hotlinks may only work sporadically, or may not work at all.
You should use jsdeliver.com (which hosts his timepicker plugin) or find another CDN.

Fancybox troubles

I am trying to implement a fancybox. http://fancybox.net/howto
I want to call this function on an an element. Full JS file. http://fancybox.net/js/fancybox/jquery.fancybox-1.2.1.js
$.fn.fancybox = function(settings) {
I have done this:
$(document).ready(function() {
$("a#inline").fn.fancybox();
});
However, I keep getting this error (through firebug):
$("a#inline").fn is undefined
[Break on this error] $("a#inline").fn.fancybox();
What does this mean? I am basically having instantiating problems.
Please help.
EDIT
The HTML file:
<!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>Technologies</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="fancy/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="fancy/jquery.fancybox-1.2.1.js"></script>
<link rel="stylesheet" href="fancy/fancybox.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("a#inline").fancybox();
});
</script>
</head>
<body>
<?php
include_once ("header.php");
?>
<div id="channel_calc">
How many Channels do I need?
<span id="yellow"><a id="inline" href="#ddm">Channel Calculator</a></span>
</div>
$('#inline').fancybox();
.fn refers to the prototype.
Di you find the error? Had the same problem. Solution was that i had included twice a javascript file, rather i included the jquery.js file twice.
I was also having this problem and found that I had included jquery.js twice. Removing the second reference fixed the error I was getting from the fancybox call
$("a#inline").fn.fancybox(); should be $("a#inline").fancybox();
You have to make sure to load fancybox AFTER jquery, otherwise you will get a "fancybox is not a function" error and your other javascript will break as well:
BROKEN:
<script type="text/javascript" src="/js/fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="/js/jquery-1.6.1.js"></script>
GOOD:
<script type="text/javascript" src="/js/jquery-1.6.1.js"></script>
<script type="text/javascript" src="/js/fancybox/jquery.fancybox-1.3.4.js"></script>
I have copied a fragment of your HTML and JS inside jsfiddle.
When I downgraded to jquery 1.3.2, [see left sidebar under framework in JSFiddle example] your code won't work.
When I upgrade to 1.4.4 or later versions, it worked.
Solution
Try upgrading your jquery to 1.4.4 or later versions and test again.
Also I noticed you are including an external header.php, so make sure there are no other jquery scripts being included in this file or your js codes will break.
See this link for the working example of your own code using jquery version 1.4.4: http://jsfiddle.net/Ca6N5/
I think you forgot to also include jquery itself. Fancybox depends on jquery.
<script type="text/javascript" src="path-to-file/jquery.js"></script>
As Ben said, make sure jQuery is not being included twice by accident.
$("a#inline").fn.fancybox();
use newest jquery & fancybox
$("a#inline").fancybox(); -> this is correct
Here is examples: http://softm.org.ua/google-map-jquery-plugins/

Categories