so I feel(and hope) this is pretty simple. I am new to javascript and am trying to get this working. When I link to my external .js file from my html it does not function. H
You dont have jquery in your <head>
section. Add it before you add scripts.js
. Only then will your code work.
<head>
<title>slidepanel test</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
If you're testing this in your local machine, add a http
to the src or download your own copy of jQuery.
And just as a sidenote, its always better to add stylesheets
before your js
files.
Your script contains jQuery.In order to use it, you have 2 options:
<head></head>
section add: <script src="jquery-1.11.3.min.js"></script>
<head></head>
section: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
You are using jQuery, but it doesn't seem like you have included it. Add this to your HEAD element
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
Actually, i had a problem like this and i tried the code below.
<head>
<meta charset="ISO-8859-1">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
Looks like you're missing jQuery. Include it before you include your own JavaScript code.
I have similar problem. Below is a code in two files which generates only white empty page, no errors are reported executing code, what is the problem?
index.html file:
<!DOCTYPE html>
<html>
<head>
<title>Three.js</title>
<style type = "text/css">
html, body {margin: 0; padding: 0; overflow: hidden}
</style>
</head>
<body>
<div id = "webgl"></div>
<script src = "/lib/three.js"></script>
<script src="./main.js"></script>
</html>
main.js file:
function init() {
var scene = new THREE.Scene();
var box = getBox(1, 1, 1);
var plane = getPlane(4);
box.position.y = box.geometry.parameters.height/2;
plane.rotation.x = Math.PI/2;
scene.add(box);
scene.add(plane);
var camera = new THREE.PerspectiveCamera(
45,
window.innerWidth/window.innerHeight,
1,
1000
);
camera.position.x = 1;
camera.position.y = 2;
camera.position.z = 5;
camera.lookAt(new THREE.Vector3(0, 0, 0));
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('webgl').appendChild(renderer.domElement);
renderer.render(
scene,
camera
);
}
function getBox(w, h, d) {
var geometry = new THREE.BoxGeometry(w, h, d);
var material = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
var mesh = new THREE.Mesh(
geometry,
material
);
return mesh;
}
function getPlane(size) {
var geometry = new THREE.PlaneGeometry(size, size);
var material = new THREE.MeshBasicMaterial({
color: 0xff0000,
side: THREE.DoubleSide
});
var mesh = new THREE.Mesh(
geometry,
material
);
return mesh;
}
init();