<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 320px;
height: 400px;
border: 1px solid red;
}
#top {
width: 320px;
height: 80px;
border: 1px solid blue;
}
</style>
<script>
var type;
function one(){
type = One.js
}
function two(){
type = Two.js
}
</script>
</head>
<body>
<div id="top">
<button onclick="one()">One</button>
<button onclick="two()">Two</button>
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
<button onclick="pause()">Pause</button>
</div>
<div style="position: relative;" id="container">
<canvas id="myCanvas" width="320" height="400"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="trail" width="320" height="400"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="plane" width="320" height="400"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="buildings" width="320" height="400"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="cloud" width="320" height="400"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="buildings2" width="320" height="400"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="canvas2" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>
<script type="text/javascript" src=type> </script>
</body>
</html>
Is it possible to have a button before a script is activated to define which script is being played. So a drop down box to edit which script is being activated. I do not know how to do this what so ever.
Thank you :)
you can pass a value to your function to select which one you want to use. For example:
function select(which){
switch(which)
{
case 1:
// execute One.js
break;
case 2:
// execute Two.js
break;
default:
//
}
}
I thing this is what you're looking for something like this:
<body onload="load(0);">
<button onclick="load(0);">One</button>
<button onclick="load(1);">Two</button>
<script>
var myScripts = [
"./js/scriptOne.js", "./js/scriptTwo.js"
];
function load(i){
var fileref=document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", myScripts[i]);
document.getElementsByTagName("head")[0].appendChild( fileref );
}
</script>
This way you're dynamically load your scripts.
Related
I'm designing an avatar module. The point is that when clicking on the hair or the eyes, they have to move at the top of the head. Instead of getting that, they do not move at all but the code also does not alert from an error.
Here's the HTMLcode:
<style>
#cabeza{
position: absolute;
z-index: auto;
left:225px;
top:125px;
}
#ojos {
position: absolute;
z-index: 1;
left: 8px;
top: 300px;
}
#pelo {
position: absolute;
z-index: 2;
left: 0;
top: 125px;
}
</style>
<body>
<div id="container">
<div id="sidebar"></div>
<div id="content">
<div id="cabeza"><img src="assets/img/cabeza.png"/></div>
<div id="pelo"><img src="assets/img/pelo.png" /></div>
<div id="ojos"><img src="assets/img/ojos.png" /></div>
</div>
</div>
<script>
alert('NOSeSiFunciona');
document.getElementById("pelo").onclick = function() {document.getElementById("pelo").style.left = "225px";};
document.getElementById("ojos").onclick = function() {document.getElementById("ojos").style.left = "235px"; document.getElementById("ojos").style.top = "200px";};
</script>
</body>
I have a html file like:
<!DOCTYPE html>
<html>
<head>
<title>Drag-Drop</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript" src="myJavascript.js"></script>
</head>
<body height="10000" width="10000" style="position: relative; left: 0px; top: 0px">
<svg id="svgBackground" height="10000" width="10000" style="position: absolute; left: 0px; top: 0px">
</svg>
<svg id="svgTempArrows" height="10000" width="10000" style="position: absolute; left: 0px; top: 0px">
</svg>
<svg id="svgForwardArrows" height="10000" width="10000" style="position: absolute; left: 0px; top: 0px">
</svg>
<svg id="svgBackwardArrows" height="10000" width="10000" style="position: absolute; left: 0px; top: 0px">
</svg>
<svg id="svgArrowHeads" height="10000" width="10000" style="position: absolute; left: 0px; top: 0px">
</svg>
</body>
</html>
And in myJavascript.js I have:
window.onload = function background()
{
...
var elements = Array.from(document.getElementsByTagNameNS(svgNS, 'svg'));
elements.forEach(function(el){
el.addEventListener("mousedown", startDraw);
el.addEventListener("mousemove", draw);
el.addEventListener("mouseup", endDraw);
});
function startDraw(ev)
{
...
}
function draw(ev)
{
...
}
function endDraw(ev)
{
...
}
It has worked, but It only works in one area in a web page (The mouse envents seem only effect in upper area of web page).
I don't know why is it. Can you help me? Thanks
Is there a problem here?
document.getElementsByTagNameNS(svgNS, 'svg')
and your position all the same
i have done some changes to your code and now it is working fine with me
i used jquery
var elements = $('svg');
for(var i=0;i<elements.length;i++){
elements[i].addEventListener("mousedown", startDraw);
elements[i].addEventListener("mousemove", draw);
elements[i].addEventListener("mouseup", endDraw);
}
My purpose is show a original canvas with 400x400 (canvas1), and use a small canvas 50x50 (canvas2) to select a region, then show amplified result to canvas 200x200 (canvas3). I wish canvas2 will move with mouse but canvas3 keep at right side of canvas1.
<!DOCTYPE HTML>
<html>
<head>
<style>
.container {
position: relative;
border: 1px solid black;
}
.inner {
border:1px solid red;
pointer-events: none;
position: absolute;
}
</style>
</head>
<body>
<canvas id="canvas1" width="400" height="400" style="border:1px solid red;" onmousemove="onMouseMove(event,this);"></canvas>
<div id="glass" class="inner">
<canvas class="inner" id="canvas2" width=50 height=50 ></canvas>
<div class="inner" style="top: 25px; left: 0px; width: 50px;"/>
<div class="inner" style="top: -25px; left: 25px; height: 50px;"/>
</div>
<div id="zoomer" class="container">
<canvas id="canvas3" class="inner" width=200 height=200 ></canvas>
<div class="inner" style="top: 100px; left: 0px; width: 200px;"/>
<div class="inner" style="top: -100px; left: 100px; height: 200px;"/>
</div>
<div class="container">
<input id="browser" type='file' ></input>
</div>
<script>
var glass = document.getElementById('glass');
var canvas2 = document.getElementById('canvas2');
var w = canvas2.width;
var h = canvas2.height;
function onMouseMove(event,thiz) {
var x = event.offsetX;
var y = event.offsetY;
glass.style.left = (x - w/2) + 'px';
glass.style.top = (y - h/2) + 'px';
}
</script>
</body>
</html>
But current result is:
canvas2 and canvas3 will move together if mouse move.
The choose file button overlapped with canvas 3.
I wish only canvas2 (and the crosshair lines) move with mouse but keep canvas1,canvas3 and chosse file button statically side by side.
The div statement is not correct.
Use inline-block display mode.
With below html file:
<!DOCTYPE HTML>
<html>
<head>
<style>
.container {
display: inline-block;
vertical-align: top;
position: relative;
border: 1px solid black;
}
.inner {
border:1px solid red;
pointer-events: none;
position: absolute;
}
</style>
</head>
<body>
<canvas id="canvas1" width="400" height="400" style="border:1px solid red;" onmousemove="onMouseMove(event,this);"></canvas>
<div id="glass" class="inner">
<canvas class="inner" id="canvas2" width=50 height=50 ></canvas>
<div class="inner" style="top: 25px; left: 0px; width: 50px;"></div>
<div class="inner" style="top: 0px; left: 25px; height: 50px;"></div>
</div>
<div id="zoomer" class="container">
<canvas id="canvas3" class="inner" width=200 height=200 ></canvas>
<div class="inner" style="top: 100px; left: 0px; width: 200px;"></div>
<div class="inner" style="top: 0px; left: 100px; height: 200px;"></div>
</div>
<input id="browser" type='file' ></input>
<script>
var glass = document.getElementById('glass');
var canvas2 = document.getElementById('canvas2');
var w = canvas2.width;
var h = canvas2.height;
function onMouseMove(event,thiz) {
var x = event.offsetX;
var y = event.offsetY;
glass.style.left = (x - w/2) + 'px';
glass.style.top = (y - h/2) + 'px';
}
</script>
</body>
</html>
The result is below:
I have a HTML Canvas in which I want to append couple of html canvas.
<div>
<canvas id="BackGroundImage" width="800" height="300"
style="position: absolute; z-index: 0;"></canvas>
<canvas id="canvas" width="800" height="300"
style="position: absolute; z-index: 1;"></canvas>
</div> '
Like this.
append(''<div>\
<canvas id="BackGroundImage" width="800" height="300"\
style="position: absolute; z-index: 0;"></canvas>\
<canvas id="canvas" width="800" height="300"\
style="position: absolute; z-index: 1;"></canvas\>
</div>'');
But this doesnt work the sapces after canvas give me error saying unterminated statements.
Try this.
issue 1: append(' ' // string is not properly created.
issue 2 : </canvas\>
$("body").append('<div> I am added, inspect me in dev console and found the desired html\
<canvas id="BackGroundImage" width="800" height="300"\
style="position: absolute; z-index: 0;"></canvas>\
<canvas id="canvas" width="800" height="300"\
style="position: absolute; z-index: 1;"></canvas>\
</div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Use like this
append('<div>'+
'<canvas id="BackGroundImage" width="800" height="300"'+
'style="position: absolute; z-index: 0;"></canvas>'+
'<canvas id="canvas" width="800" height="300"'+
'style="position: absolute; z-index: 1;"></canvas\>'+
'</div>');
try this
append('<div>'+
'<canvas id="BackGroundImage" width="800" height="300"'+
' style="position: absolute; z-index: 0;"></canvas>'+
'<canvas id="canvas" width="800" height="300"'
+' style="position: absolute; z-index: 1;"></canvas\> </div>');
You are almost right, but the problem is you used / instead of +, some other people make problems by adding ' inside '' or " inside ""
$('.here').append('<div>' +
'<canvas id="BackGroundImage" width="800" height="300"' +
'style="position: absolute; z-index: 0;"></canvas>' +
'<canvas id="canvas" width="800" height="300"' +
'style="position: absolute; z-index: 1;"></canvas\>' +
'</div>'+
'<h1>Added</h1>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="here">
</div>
I want to set the image src by using a text returned by a JavaScript function. What is the correct way to assign JavaScript return value to src? Code below:
What I am trying to achieve here is adding a dummy random number to the end of the url in order to get rid of browser image caching.
<body><div class="slideshow" style="position: absolute;">
<img src="eval(getMyLink())" width="1024" height="768" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 1024px; height: 768px;" title="">
<img src="eval(getMyLink())" width="1024" height="768" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 1024px; height: 768px;" title="">
</div>
<script language="javascript"><!--
bmi_SafeAddOnload(bmi_load, "bmi_orig_img", 0);//-->
function getMyLink() {
var a = "./Files/1.jpg?a=" + Math.floor(Math.random() * 11);
return a;
}
</script></body>
use jQuery. You will need to add an id attribute to your img tag but this should do it.
<img id="imgLink1" width="1024" height="768" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 1024px; height: 768px;" title="">
$().ready(function(){ $('#imgLink1').att('src', getMyLink()); });
My advices : avoid inline JS, use CSS, and use JQuery.
I would do like this :
<body>
<div class="slideshow" style="position: absolute;">
<img id="img1" src="" class="myImages" title="image">
<img id="img2" src="" class="myImages" title="image">
</div>
<script>
bmi_SafeAddOnload(bmi_load, "bmi_orig_img", 0);
function getMyLink() {
var a = "./Files/1.jpg?a=" + Math.floor(Math.random() * 11);
return a;
}
//Assign image source and display it (you have defined display:none attribute)
$('#img1').attr('src', getMyLink()).fadeIn(300);
$('#img2').attr('src', getMyLink()).fadeIn(300);
</script>
<style>
.myImages {
width : 1024px;
height : 768px;
position: absolute;
top: 0px;
left: 0px;
display: none;
z-index: 5;
opacity: 0;
}
</style>
</body>