I'm trying to test dojo Calendar. I was having problems so I made a test page and copied the example code from the dojo site. It manifested the same problem: the text is displayed with very large vertical gaps in it and little other formatting. I can't get the test on their page to work either so I don't know what it's supposed to look like.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css" />
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"></script>
<script>
require(["dojo/parser", "dojo/ready", "dojox/calendar/Calendar"],
function(parser, ready, Calendar){
ready(function(){
calendar = new Calendar({
dateInterval: "day",
style: "position:relative;width:600px;height:600px"
}, "someId");
}
)}
);
</script>
</head>
<body class="claro">
<style type="text/css">
.dojoxCalendar{ font-size: 12px; font-family:Myriad,Helvetica,Tahoma,Arial,clean,sans-serif; }
</style>
<div id="someId" >
</div>
</body>
</html>
The only change I made was to use the libraries at ajax.googleapis.com. Should I also include dojox? I thought it came with dojo.js.
You missed including style file, add this into the head and it will be OK:
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojox/calendar/themes/claro/Calendar.css" />
or see this jsfiddle
Related
using HTML5+CSS3+jQuery.
Since I am changing my CSS file frequently, I would like to force users' browsers always to fetch the CSS file and never use the cached version.
I found that I should write something like this:
<link rel="stylesheet" type="text/css" href="index.css?t=[...some unique id...]"/>
How can I automatically generate such unique Id? ( maybe current time?)
Thanks
You can use a server timestamp
<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />
A better Idea is to use a version of your css:
<link rel="stylesheet" type="text/css" href="style.css?version=<?php echo $CSS_VERSION; ?>" />
If your CSS is small and dynamic, your best solution would be to inject it inline in the <head> using <style> tags: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style
This way your styles will be updated on every page refresh and you will not need to wait for an additional http request.
For example, if your stylesheet looks like this:
/* This stuff hardly ever changes */
html {
background-color: white;
font-size: 16px;
}
/* This stuff changes all the time */
body {
background-image: url('todays-image.png');
}
And your html looks something like this:
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<h1>My Page</h1>
</body>
</html>
Change the css to look like this:
/* This stuff hardly ever changes */
html {
background-color: white;
font-size: 16px;
}
And the html to look like this:
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="index.css" />
<style>
/* This stuff changes all the time */
body {
background-image: url('todays-image.png');
}
</style>
</head>
<body>
<h1>My Page</h1>
</body>
</html>
If all of the contents of index.css change frequently, you can remove the file entirely and remove the link tag.
For your particular issue, you could inject the link via javascript using ticks. In this example the code would insert the css as the last styleset processed. I would recommend doing this on the back-end though.
<html>
<head>
<title>Test</title>
<script type="text/javascript">
var sourceName = 'test.css?v=' + ((new Date().getTime() * 10000) + 621355968000000000); // using ticks
var linkElement = document.createElement('link');
linkElement.setAttribute('type', 'text/css');
linkElement.setAttribute('rel', 'stylesheet');
linkElement.setAttribute('href', sourceName);
document.getElementsByTagName('head')[0].appendChild(linkElement);
</script>
</head>
<body>
<h1>Test</h1>
</body>
</html>
I tested it before publishing it and went through various methods. Many did not execute the href change. It only seemed to execute if it was injected into the DOM.
Still a bit new with jQuery so I may be making a basic error.
I just completed the jQuery introductory course and now am trying to do some of my own basic work, but have hit a slight road block.
Essentially it seems the jQuery file script.js isn't getting called properly.
When I ran it inserting it into stackoverflow it seems to work fine. However,
when I pull the html file in the browser it only displays the html elements in the file and not any of the jQuery code.
Any help would be appreciated!
$(document).ready(function() {
$("body").append("<p>I\'m a paragraph!</p>");
/* write 'Hello World! to the first div' */
$("#first").append('<h1> Hello World!</h1>');
//a clickable 'Hello World!' example
$("#link").click(function() {
$('#greeting').append("<h1>Hello Again!</h1>");
});
});
<!DOCTYPE html>
<html>
<head>
<title>Hello World - jQuery Style</title>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
</head>
<body>
<div id="first"></div>
<div id="second">
Click Me! <br /> <span id="greeting"></span>
</div>
</body>
</html>
You should declare your current javascript file after you get the jquery.min.js
If you look in your console ( right click and inspect ) You will notice that it cannot understand $ jquery sign.
Solution should be just swap these two lines in your html :
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
Try switching the order of the tags for script.js and jquery.min.js so that jquery is initialised first
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!
I have this piece of code:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>My first HTML document</TITLE>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script>
$(document).ready(function(){
$(".has-tooltip").each(function(){
$(this).tooltip({content: "test", items: "button"});
});
});
</script>
</HEAD>
<BODY>
<BUTTON class="has-tooltip" style="margin-left: 100px;">First</BUTTON>
<BUTTON class="has-tooltip" style="margin-left: 200px;">Second</BUTTON>
</BODY>
</HTML>
And something is completely wrong with tooltip - it should appear with styles from jQuery UI but it doesn't, and is wrong placed - it appears, even for button with bigger margin, on the left side of screen (and as I said without any styling, it looks like plain text), even with ,,track" property set to ,,true" it doesn't follow cursor exactly, but still appears on the left side of page and move a little when I move cursor.
I think this is pretty simple example (that code is simplified problem that occurred at my work) and I can't see what am I doing wrong. I will be happy if anybody helps me - thank you in advance.
P.S. Snippet, this is exactly the same behavior as I got in my browser:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>My first HTML document</TITLE>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script>
$(document).ready(function(){
$(".has-tooltip").each(function(){
$(this).tooltip({content: "test", items: "button"});
});
});
</script>
</HEAD>
<BODY>
<BUTTON class="has-tooltip" style="margin-left: 100px;">First</BUTTON>
<BUTTON class="has-tooltip" style="margin-left: 200px;">Second</BUTTON>
</BODY>
</HTML>
You aren't linking to the css file correctly.
Replace:
<link rel="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
With:
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
Hi all I'm trying to use dijit from the dojo library and trying to use the Calendar component. I followed the code as it is in the online documentation but it just doesn't seem to work. Below is the code that I'm using:
<html>
<head>
<link rel="stylesheet" type="text/css" href="dijit/themes/claro/claro.css"
/>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<style type="text/css">
.claro table.dijitCalendarContainer { margin: 25px auto; } #formatted
{ text-align: center; }
</style>
</head>
<body class=" claro ">
<div dojoType="dijit._Calendar" onChange="dojo.byId('formatted').innerHTML=dojo.date.locale.format(arguments[0], {formatLength: 'full', selector:'date'})">
</div>
<p id="formatted">
</p>
</body>
<script type="text/javascript" src="js/dojo.js" djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.dijit"); // loads the optimized dijit layer
dojo.require("dijit._Calendar");
</script>
</html>
Using firebug it shows the following error:
Could not load 'dijit._Calendar'; last
tried '../dijit/_Calendar.js'
Please can anyone help me on this. I really want to make this work.
Thanks in advance.
Your tree appears to have been changed, or at least you relocated the copy of dojo.js from the standard distribution. You should include dojo as "dojo/dojo.js" It will then use that reference to find relative urls in the tree, like ../dijit/_Calendar.js