Adding jQuery to wordpress page to display Time/Date Picker - javascript

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/

Related

How to import HTML into HTML without duplicate head & body tags? (no frameworks if possible)

I'm playing around with HTML (, JavaScript & CSS) & decided to try to import one HTML from one file into another, the goal is that I can make several modules and just import them into an empty HTML page, so they together create a fully working & content filled HTML page.
I would prefer to use something similar to how scripts or style-sheets are imported:
(ignore the $ signs)
$<script src="file.js"></script>
OR
$<link rel="stylesheet" type="text/css" href="style.css">
The problem is that the $<html>, <head> & <body> tags are inserted again, is there any good way to fix this?
I have tried some methods: $<object> & <embed> &
$<link rel="import" href="file.html">
I don't want to use $<iframe> because I have heard that it's a security problem (yes, it's not relevant right now, but if I'm going to use this method later for real, then it will be important).
I am aware of other similar questions, like this:
Include another HTML file in a HTML file but most of the answers use external frameworks like JQuery or Angular which I don't want to use, I would prefer to use a pure HTML or/and JavaScript solution if possible.
Example code:
File to import:
<p>"The import is working"</p>
Base file to import into:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- Import code here (or in head if it for some reason is required) -->
</body>
</html>
Desired outcome:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>"The import is working"</p>
</body>
</html>
Actual outcome (with $<object> or $<embed>), (at least as the Firefox inspect-element tool shows it):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<embed src="file.html">
#Document <!-- I don't know what this means/function is, can someone explain? -->
<html> <!-- Notice the double: html, head, meta & body -tags -->
<head>
<meta charset="UTF-8">
</head>
<body>
<p>"The import is working"</p>
</body>
</html>
</embed>
</body>
</html>
You can use PHP, by making your file names with a .php extension and use PHP include:
<?php include 'header.php';?>
Read more about it here.
I've been trying to do the same thing for some time and the only solution I've come up with involves some JavaScript. When you import HTML the #document tag means it lives in the shadow DOM which is different than the one rendered (I think, I don't really understand this stuff). In any case, after importing, I ended up having to render the element and append it to the DOM.
<!-- Original HTML file -->
<html>
<head>
<title>Title</title>
</head>
<body>
<p>
Hello from original HTML.
</p>
<link id="importLink" rel="import" href="/path/to/import.html">
</body>
<script src="/path/to/renderImport.js"></script>
</html>
I had the following code in my renderImport.js file:
// renderImport.js
function renderImport() {
let importLink = document.getElementById("importLink");
let importedElement = importLink.import.querySelector('#import');
document.body.appendChild(document.importNode(importedElement, true));
}
renderImport();
And finally, import.html:
<!-- import.html -->
<p id="import">Hello from the imported file</p>
Here it is in Chrome. Though you might have to disable CORS.
Use Angular CDN in Head tag then import html using this code
<body ng-app="">
<ng-include src="'header.html'"></ng-include>
</body>
OR
<body ng-app="">
<header ng-include="'header.html'"></header>
</body>
Use you can change header to footer or content

how can I add boostrap dropdown without using rel="stylesheet"

Hello I am creating a website and I want to add some extra features. I have found this template, and I want to add some comboboxes(one full row for gender, three in one row for birthday).
I have found this bootstrap code for comboboxes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
</select>
</div>
</form>
</div>
</body>
</html>
As you can see the this code is using rel="stylesheet", it is possible to change it? because the template from codepen.io uses another style.css file.
Now if it can be possible to change it, can you suggest something else for having comboboxes that match with the style of codepen.io template?
It is not a good idea to get rid of the bootstrap stylesheet because many tags with bootstrap classes will look out of place. You can add other stylesheets to your webpage, as long as you put them after the bootstrap stylesheet. This will make it so that the other stylesheet(s) will display everything they are supposed to, but the bootstrap stylesheet will style everything that the other stylesheet(s) do not specify.
According to W3Schools
The required rel attribute specifies the relationship between the current document and the linked document/resource.
It cannot negatively impact your code, you have just trouble with CSS.
Also you should read The Bootstrap's docs.

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!

Zebra datepicker icon not showing up

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.

How to load AngularJS in a div

I have a main page with this structure.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>..:: Test Application ::..</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="../css/main.css" />
<script src="../js/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script>
function loadOption(idopt){
if(idopt==1){
var curl = '../view/otherpage.php'
}
$("#mainContainer").load(curl);
}
</script>
<body onLoad=loadOption(<?php echo idopt;?>)>
<div id="mainContainer"></div>
</body>
</html>
otherpage.php
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/angular.min.js"></script>
</head>
<body>
{{1+1}}
</body>
</html>
But, when i load the main page... the AngularJS doesn't run. What could be wrong?
That's because you're loading otherpage.php after the DOMContentLoaded event has finished.
In other words, you're filling in the space inside the mainContainer div with otherpage.php content after the event DOMContentLoaded. And that is where Angular's Automatic Initialization takes place.
So in order to get it to work, you'll have to manually bootstrap Angular.
Here's Angular's documentation about it:
http://docs.angularjs.org/guide/bootstrap
Other options are available and are much better, such as referencing your Angular related files (angular, your controllers, services, directives and what not) at the main page.
Depending on the browser, pulling the script element in otherpage.php out of the head element and into the body element, should correct this.
We can't see all your code, but it may be better to just load Angular.js in the head of the main page. You could do this using your own a script package manager control flow to avoid this type of failure for other dependencies. That would be good style...
make a common includes page and add angular.js file to it and include it in the header so that it is available through out the site or use it in the main page

Categories