I'm trying to replicate this visualization here http://redotheweb.com/CodeFlower/ using my own json data. However the visualization is not showing up and I suspect it's because I have misplaced this block of code
var myFlower = new CodeFlower("#visualization", 300, 200);
myflower.update(jsonData);
which updates the visualization based on the content in the jsonData file. The full code is as follows:
<html>
<head> </head>
<body>
<div class = "content">
<div class = "container">
<p class = "lead"> </p>
<div id = "visualization">
<svg width = "270" height = "270">
var myFlower = new CodeFlower("#visualization", 300, 200);
myflower.update(jsonData);
</svg>
</div>
</div>
</div>
<script type = "text/java
<script type="text/javascript" src="javascripts/d3/d3.js"></script>
<script type="text/javascript" src="javascripts/d3/d3.geom.js"></script>
<script type="text/javascript" src="javascripts/d3/d3.layout.js"></script>
<script type="text/javascript" src="javascripts/CodeFlower.js"></script>
<script type="text/javascript" src="javascripts/dataConverter.js"></script>
<script type="text/javascript"> </script>
</body>
Please help. Thank you.
Your code is not quite correct. I think you can dispense with the SVG element, and move your CodeFlower initialization code to the empty script tag. Try this instead:
<html>
<head> </head>
<body>
<div class = "content">
<div class = "container">
<p class = "lead"> </p>
<div id = "visualization">
<!-- this empty div is what gets used by CodeFlower -->
</div>
</div>
</div>
<script type="text/javascript" src="d3.js"></script>
<script type="text/javascript" src="d3.geom.js"></script>
<script type="text/javascript" src="d3.layout.js"></script>
<script type="text/javascript" src="CodeFlower.js"></script>
<script type="text/javascript" src="dataConverter.js"></script>
<script type="text/javascript">
var myFlower = new CodeFlower("#visualization", 300, 200);
myFlower.update(jsonData);
</script>
</body>
</html>
According to the documentation:
Usage
To create a CodeFlower, include the CodeFlower.js file together
with d3.js, just like in this page. Create a new CodeFlower instance
using a CSS selector (of the div where the flower should be inserted),
and the width and height of the desired visualization. Then, bind JSON
data to the flower using CodeFlower.update(), and you're done.
CodeFlower creates the SVG element itself, inside the DIV that you provide. From the CodeFlower source code:
this.svg = d3.select(selector).append("svg:svg")
.attr('width', w)
.attr('height', h);
So adding your own SVG tag for CodeFlower is superfluous.
EDIT:
Make sure you have a valid jsonData variable: var jsonData = { /* json data here */ };
Here is a working fiddle: http://jsfiddle.net/2DUy9/1/
The block of code you're talking about is javascript, so it needs to be within script tags -- you've got a nice empty one at the end of your code. As is, your "code" is just being read as plain text. If it was inside a regular HTML element, the code would be displayed as text on the webpage, but text inside an SVG tag isn't even understood as plain text, since SVG is supposed to contain graphics.
Within the script you have to then indicate which SVG element you want to add the graph to. Just putting some code in the middle of your HTML doesn't make the results of the code go there -- even if it was put inside a script tag. However, the code you are borrowing is looking for the <div id="visualization"></div> tags, and should draw it there once you get your script formatted as #Colin recommended -- but only if your little bit of script comes after the script tag that imports the CodeFlower script. Otherwise, you'll just get an error in the console and nothing on the screen.
I'm afraid you're going to have to take some time to figure out what all the different parts of the program do before you can effectively adapt them to your needs.
The Mozilla Development Network has some good intro guides:
On HTML markup
On Javascript
For D3, the best intro for beginners without coding experience is the work of Scott Murray:
http://alignedleft.com/tutorials/d3/
Related
On my index page I have a number of includes.
<section><?php include('content/content1.php') ?></section>
<section><?php include('content/content2.php') ?></section>
<section><?php include('content/content3.php') ?></section>
In each of them I have a unique script (and some other things which is not shown here).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Content1</title>
<link rel="stylesheet" href="content/sketch.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.10/p5.js"></script>
</head>
<body>
<div class="frame">
<canvas></canvas>
</div>
<script src="content/content1.js"></script>
</body>
The <canvas> tag is what the querySelector in the javascript calls to.
var canvas = document.querySelector('canvas');
This works, but only for the first content file. It seems the querySelector looks at the whole loaded page, instead of just inside the body of the document where the script is placed. Google console says: "Indentifier 'canvas' has already been declared".
I have tried setting an id on the canvas-element:
<canvas id="canvas1"></canvas>
var canvas = document.querySelector('#canvas1');
But it's not working. How do I get around this?
You can use document.currentScript to get the tag of the currently running script tag. From there, you can navigate to its containing section, and from there, get to the canvas descendant.
You should also put everything into an IIFE to avoid global variable collisions.
(() => {
const canvas = document.currentScript.closest('section').querySelector('canvas');
// ...
})();
I have two separate files one with my html code and with my javaScript. What I am trying to do is create a function in javascript then call that function in the html. Both files are in the same folder along with the image. I'm new to both languages and to this site so please go easy;
I would really appreciate it if someone could help me please.`
JavaScript to load image below:
var menu = new image();
menu.src = "Fitness App Entry Scrren.jpg"
function menuScreen(){
document.getElementById("menu").getAttribute("src");
}
Html code to call function:
<!DOCTYPE html>
<html>
<head>
<body src="Functions.js">
<script onload="menuScreen()"></script>
</body>
<head>
</html>
What you are doing is against the rules of HTML. First of all, <body></body> should be outside of <head></head>. You should have <script></script> in either <head></head> or <body></body>. The <body> tag should have the onload attribute set to menuScreen(), and the <script> tag's src attribute should be set to Functions.js (as John Hascall said). By the way, John Hascall is right, there is no element with the ID of "menu" so it won't work unless you create a <div> or <iframe> with the specific ID and append the image to it in your Functions.js file.
So, your JavaScript code should look like this:
var menu = new Image(); // note that the constructor is capitalized
menu.src = "Fitness App Entry Screen.jpg";
// Create a <div> with the image within it.
var division = document.createElement("div");
division.setAttribute("id", "menu");
division.appendChild(menu);
document.body.appendChild(division);
function menuScreen() {
division.getAttribute("src"); // you can use division because it has the id of menu
}
And here is your HTML code to run the page (according to the HTML5 specifications, note that):
<!DOCTYPE html>
<html>
<head>
<script src="Functions.js"></script>
</head>
<body onload="menuScreen()">
<!-- Left intentionally blank -->
</body>
</html>
Hopefully this will help you!
Edited to explain page loading
My HTML page has a div inside another div, both referenced by id, and both unique throughout the document.
<head>
<script type="text/javascript" src="myscript.js"></script>
</head>
...
<body onload=display()>
<div id="rightwork">
<div id="mychart" > </div>
</div>
...
My JavaScript is meant to write something within the 'mychart' div, but I can't manage to reference it :(
The question is related to this one except this one is a class inside an id.
This is my javascript:
function display() {
var code = "<a onclick=\"second(); return false;\" href=\"#\">Hello</a>";
document.getElementById('rightwork').innerHTML = code;
}
function second() {
console.log(document.getElementById('rightwork'));
console.log(document.getElementById('mychart'));
}
The line
document.getElementById("mychart");
returns null...
Whereas, this one works fine!
document.getElementById("rightwork");
This returns the expected div.
I attempted this
document.getElementById("rightwork").getElementById("mychart");
which of course does not work as getElementById("rightwork") returns a single element.
So, what's the solution to reference the inner div?
Just use
window.onload = function(){
var myChart = document.getElementById("mychart");
// ... code that loads chart
}
Or move
<script type="text/javascript" src="myscript.js"></script>
to the page footer to insure the dom is loaded before running the script
Could you please post whole myscript.js content. If document is loaded correctly why document.getElementById("mychart"); would not work?
The thing might be that <div id="mychart" > </div> is not loaded while javascript is executed and <div id="rightwork"> was loaded in that time.
To ensure the document is fully loaded put your <script type="text/javascript" src="myscript.js"></script> at the end of html.
I want to replace the current script tag with the HTML contents generated by the same script.
That is, my Page is
<html>
<body>
<div>
<script src="myfile1.js"></script>
</div>
<div>
<script src="myfile1.js"></script>
</div>
</body>
</html>
Inside each .js file corresponding html contents are generated. I want to put the contents as the innerHTML of the parent div. But can't set id for the parent div because the page is not static. So the current script tag must be replaced with the HTML content. How can I do this?
For each script tag src is the same. So can't identify with src. These scripts displays
some images with text randomly. Scripts are the same but displays different contents in divs on loading
Please help me
try inside of myfile1.js:
var scripts = document.getElementsByTagName( "script" );
for ( var i = 0; i < scripts.length; ++ i )
{
if ( scripts[i].src == "myfile1.js" )
{
scripts[i].parentNode.innerHTML = "new content";
}
}
This is a great question for those trying to implement a JSONP widget. The objective is to give the user the shortest possible amount of code.
The user prefers:
<script type="text/javscript" src="widget.js"></script>
Over:
<script type="text/javscript" src="widget.js"></script>
<div id="widget"></div>
Here's an example of how to achieve the first snippet:
TOP OF DOCUMENT<br />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
// inside of widget.js
document.write('<div id="widget"></div>');
$(document).ready(function() {
$.getJSON('http://test.com?remote_call=1', function(data) {
$('#widget').html(data);
});
});
<br />BOTTOM OF DOCUMENT
Have a look at: http://alexmarandon.com/articles/web_widget_jquery/ for the correct way to include a library inside of a script.
document.currentScript has been available since 2011 on Firefox and 2013 on Chrome.
document.currentScript documentation at MDN
<!DOCTYPE html>
<meta charset="UTF-8">
<title>currentScript test</title>
<h1>Test Begin</h1>
<script>
document.currentScript.outerHTML = "blah blah";
</script>
<h1>Test End</h1>
Unfortunately a running JavaScript file is not aware of where it is running. If you use document.write() in the script, the write function will take place wherever the script runs, which would be one way to accomplish what you want, but without replacing the contents or being able to perform any actions on the enclosing DIV.
I can't really envisage a situation where you'd have such stringent restrictions on building a page - surely if the page is dynamic you could generate identifiers for your DIV elements, or load content in a more traditional manner?
Why not use Smarty?
http://www.smarty.net/
You can use javascript in Smarty templates, or just use built-in functions.
Just take a look at http://www.smarty.net/crash_course
poof -- old answer gone.
Based on your last edit, here's what you want to do:
<html>
<head>
<!-- I recommend getting this from Google Ajax Libraries
You don't need this, but it makes my answer way shorter -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function getRandomContent(){
// I expect this is the contents of your current script file.
// just package it into a function.
var rnd = Math.random();
return "[SomeHtml]";
}
$('.random').each(idx, el){
$(this).html(getRandomHtmlContent());
});
});
</script>
</head>
<body>
<div class="random">
</div>
<div class="random">
</div>
</body>
</html>
If you don't mind the script tag remaining in place you can use something as simple as document.write().
myfile1.js:
document.write("<p>some html generated inline by script</p>");
It will do exactly what you need.
I want to add the Digg button on my webpage but don't want to add the script tag directly on the page.
<div class="digg">
<script type="text/javascript">
digg_url = '';
digg_bgcolor = '#99ccff';
digg_skin = 'compact';
digg_window = 'new';
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
</div>
What are the some of the unobstrusive ways of adding the JavaScript for the Digg button?
The diggthis.js script either places the button where the script tag lies or looks for an anchor tag with a class name of "DiggThisButton". However, it tries to run before all the DOM elements are created. So, instead of having script included in the head of the HTML document, you need to place it at the bottom of the page.
Here's another way of doing this ( the .... represents any additional content):
<html>
<head>
<script type="text/javascript">
digg_url = '';
digg_bgcolor = '#99ccff';
digg_skin = 'compact';
digg_window = 'new';
</script>
.....
<body>
....
<div class="digg">
<a class="DiggThisButton"></a>
</div>
....
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
</html>
Other than setting those "digg_" variables in a separate file, there's not much you can do.
Including an external Javascript from digg.com isn't really "intrusive" anyway.