Please advise me why I can't create this example in my home html file?
Here is an example from the site and my html file:
<head>
<script src="http://dygraphs.com/dygraph-dev.js"></script>
<script>
g = new Dygraph(document.getElementById("graph"),
"X,Y,Z\n" +
"1,0,3\n" +
"2,2,6\n" +
"8,14,3\n",
{
legend: 'always',
animatedZooms: true,
title: 'dygraphs chart template'
});
</script>
<style>
.dygraph-title {
color: gray;
}
</style>
</head>
<body>
<div id="graph"></div>
</body>
what am I doing wrong?
javascript script must be after div or you need to use document ready to load body first and then script
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://dygraphs.com/dygraph-dev.js"></script>
<style>
.dygraph-title {
color: gray;
}
</style>
</head>
<body>
<div id="graph"></div>
<script>
g = new Dygraph(document.getElementById("graph"),
"X,Y,Z\n" +
"1,0,3\n" +
"2,2,6\n" +
"8,14,3\n",
{
legend: 'always',
animatedZooms: true,
title: 'dygraphs chart template'
});
</script>
</body>
</html>
Because your getElementById call will return null because the element doesn't exist yet when you run the Javascript code.
Put the code in the load event so that it runs after the page has been parsed:
window.onload = function(){
g = new Dygraph(document.getElementById("graph"),
...
};
One main issue is that your code is running too early. You are trying to operate on DOM elements before they have even been loaded. Code running in the <head> section cannot yet access elements in the DOM because it has not yet been loaded.
You can move your second <script> tag to right before the </body> tag and that problem should go away.
Related
I try to find a way to execute script after load dynamic script,
but I don't know How can I do that, and I hope to find help to solve this issue
my example:
index.html
<!DOCTYPE html>
<html>
<head>
<script src="./script/dynamic.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember
to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
dynamic.js
let myScript = document.createElement("script");
myScript.setAttribute("src", "./jquery/jquery-3.6.0.min.js");
document.head.appendChild(myScript);
I am attempting to connect szimek's signature pad to my simple html document. I am testing out the program but cannot get it working in my atom text editor:
html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
"https://cdn.jsdelivr.net/npm/signature_pad#3.0.0-beta.3/dist/signature_pad.min.js"
</script>
</head>
<h1>
Please Sign
</h1>
<div class="wrapper">
<canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
</div>
<div>
<button id="save">Save</button>
<button id="clear">Clear</button>
</div>
<script src="script.js"></script>
</body>
</html>
script.js
var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
backgroundColor: 'rgba(255, 255, 255, 0)',
penColor: 'rgb(0, 0, 0)'
});
var saveButton = document.getElementById('save');
var cancelButton = document.getElementById('clear');
saveButton.addEventListener('click', function (event) {
var data = signaturePad.toDataURL('image/png');
// Send data to server instead...
window.open(data);
});
cancelButton.addEventListener('click', function (event) {
signaturePad.clear();
});
I have put the same code into js fiddle, and the project works fine. I am connecting through a CDN, and the error I am getting in my own project's inspection is:
script.js:1 Uncaught ReferenceError: SignaturePad is not defined
at script.js:1
<script type="text/javascript">
"https://cdn.jsdelivr.net/npm/signature_pad#3.0.0-beta.3/dist/signature_pad.min.js"
</script>
Does not load the script https://cdn.jsdelivr.net/npm/signature_pad#3.0.0-beta.3/dist/signature_pad.min.js it is a script containing the string "https://cdn.jsdelivr.net/npm/signature_pad#3.0.0-beta.3/dist/signature_pad.min.js"
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/signature_pad#3.0.0-beta.3/dist/signature_pad.min.js"></script>
Your script tag is wrong.
<script type="text/javascript">
JS CODE
</script>
This tag is used to include JS code in your page. The line JS CODE is intended to be the code. If you want to pull in an external script, the above code is not the right way to do that.
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/signature_pad#3.0.0-beta.3/dist/signature_pad.min.js">
</script>
The key here is your script tag needs to specify the location where your browser can find the script. It does this using the src attribute on the script tag. As you currently have it, you have some code containing a single string, which doesn't do much.
Instead of:
<script type="text/javascript">
"https://cdn.jsdelivr.net/npm/signature_pad#3.0.0-beta.3/dist/signature_pad.min.js"
</script>
Use:
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/signature_pad#3.0.0-beta.3/dist/signature_pad.min.js"></script>
The amount of time I have been spending on this is crazy. I have an element on the page with the id invited-count. This is definitely getting called after the element is in the dom. Can someone put me out of my misery?
$("#invited-count").tooltip({
items: "#invited-count",
content: "Hello World",
track: true
}).tooltip("open");
Thanks in advance.
add to your div a title attribute <div id="invited-count" title="Hello World">Ok bb</div> and with js just do this $("#invited-count").tooltip();
working here :
<html lang="en">
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div id="invited-count" title="Hello World">Hello Tooltip</div>
</body>
<script>
$(function() {
$( "#invited-count" ).tooltip({track: true});
});
</script>
</html>
Ok, so thanks John for you answer. I wasn't able to use it exactly because I need to set the tooltip content dynamically. That said I used a very similar approach:
$("#invited-count").attr("title", firstRowData.TOOLTIP_INVITED).tooltip();
and what is funny is that the following statement:
$("#invited-count").attr("title", firstRowData.TOOLTIP_INVITED).tooltip({
items: "#invited-count", content: "Hello World", track: true
});
produces a tooltip with the value of firstRowData.TOOLTIP_INVITED not "Hello World"...
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</head>
<body>
<h1 id="popup">dfdfs</h1>
</body>
</html>
i have a simple javascript which shows alert when the h1 id exits ,but i am not getting the alert message.code in jquery also can help.
Put your <script> tag at the end of the body:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="popup">dfdfs</h1>
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
Write your script after the element so that it runs after element is present. See the code:
<!DOCTYPE html>
<html>
<body>
<h1 id="popup">dfdfs</h1>
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
Plunkr for the same is: "http://plnkr.co/edit/0fznytLHtKNuZNqFjd5G?p=preview"
Because, you're executing the script before document is completely loaded, the element #popup is not found.
Use DOMContentLoaded
Use DOMContentLoaded to check if the DOM is completely loaded.
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
if (document.getElementById("popup")) {
window.alert("hi");
}
});
</script>
Using jQuery ready
Using jQuery, you can use ready method to check if DOM is ready.
$(document).ready(function() {
if ($("#popup").length) {
window.alert("hi");
}
});
Moving script to the end of body
You can move your script to the end of body.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="popup">dfdfs</h1>
// Move it here
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
Your script is above the h1 element that you're trying to retrieve. Because of this, it is being run before the element actually exists.
Either move the script to the bottom of the page, or wrap it in a jQuery ready block. And consider moving it to an external file.
$(function() {
if(document.getElementById("popup")) {
window.alert("hi");
}
});
try this easy way. no need of jquery.
<html>
<head>
</head>
<body>
<h1 id="popup">dfdfs</h1>
<script type="text/javascript">
if(document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
It is good practice to use the <script> tags in <body> because it improves the performance by loading it quicker.
And then use
<body>
<script>
$(function() {
if(document.getElementById("popup")) {
window.alert("hi");
}
});
</script>
</body>
Below code gives you solution
$(document).ready(function() {
if (document.getElementById("popup")) {
window.alert("hi");
}
});
My code used to work until I dunno what i changed, I started everything from scratch yet it still doesn't show the tooltip, can someone tell me what's wrong with the code?
or even better, is there any other (easier) way to implement a tooltip ?
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/jquery.qtip.css" />
<title>My site</title>
</head>
<body>
ZA
<div id="jj" style="display: none;">HHHHHHH</div>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.qtip.js"></script>
<script type="text/javascript">
$('a').qtip({
content: {
text: $('#jj') // Add .clone() if you don't want the matched elements to be removed, but simply copied
}
})
</script>
</body>
</html>
Aren't you missing the onload?
<script type="text/javascript">
$(function() {
$('a').qtip({
content: {
text: $('#jj')
}
});
});
</script>
Edit: the code above most definitely works, see jsfiddle
Make sure your qtip.js and qtip.css are loaded and recent
Try this instead:
$('a').qtip({
content: $('#jj').text()
});
Or do what the comment said and clone the element -- you'll probably have to show it explicitly:
$('a').qtip({
content: {
text: $('#jj').clone().show()
}
});
you need to put your qtip javascript inside a document ready.
$(function() {
$('a').qtip({
content: {
text: $('#jj').clone()
}
});
});
two things that you can try
move the scripts to your head section
wrap the javascript/jquery code inside the ready handler
$(document).ready(function(){
$('a').qtip({
content: {
text: $('#jj') // Add .clone() if you don't want the matched elements to be removed, but simply copied
}
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="Scripts/qTip/jquery.qtip.css" />
<title>My site</title>
</head>
<body>
ZA
<div id="jj" style="display: none;">HHHHHHH</div>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/qTip/jquery.qtip.js"></script>
<script type="text/javascript">
$(function () {
$('a').qtip({
content: {
text: $('#jj')
}
});
});
</script>
</body>
</html>