Delegate events from an object to another - javascript

I want to delegate an event from one element to another. I have this simple test code, and I get an exception:
Error: UNSPECIFIED_EVENT_TYPE_ERR: DOM Events Exception 0 ` at line 12 (the dispatch)
I have read this, but the commented line before it, makes no difference. How can I make this work?
Code:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
function init(){}
function delegator(e){
alert('the first');
var other = document.getElementById('myCanvas2');
//e.trigger = other;
other.dispatchEvent(e);
}
$("#myCanvas").live('dblclick', delegator);
$("#myCanvas2").live('dblclick', function(){alert('the second');});
</script>
</head>
<body>
<canvas id="myCanvas" style="width:1200px; height:600px; border: solid black 1px;"></canvas>
<canvas id="myCanvas2" style="width:1200px; height:600px; border: solid black 1px;"></canvas>
</body>
</html>
It is important to me that all the information is going to the delegated object, since it will be replaced with various other objects like a Google Maps canvas or any other service.

.live was deprecated a while ago.
Since you are using jQuery use .trigger(...)
function delegator(e){
alert('the first');
$('#myCanvas2').trigger(e);
}
$("#myCanvas").on('dblclick', delegator);
$("#myCanvas2").on('dblclick', function(){alert('the second');});
Demo: http://jsfiddle.net/maniator/zbJBd/

Related

Cannot set property 'borderColor' of undefined

Im copying this from a book (..so it "should" work), i cant get this function to work, it might be a duplicate but i searched for an answer and cant get it working.
"Uncaught TypeError: Cannot set property 'borderColor' of undefined"
It might be something simple but the to i believe is the problem i tried setting it to an array and object but i dont really understand, any solution with simple explanation would be much appreciated.
function changeBorder(element, to){
element.style.borderColor = to;
}
var contentDiv = document.getElementById('color');
contentDiv.onmouseover = function(){
changeBorder('red');
};
contentDiv.onmouseout = function(){
changeBorder('black');
};
.box{
border: 1px solid red;
background-color:pink;
padding: 10px;
}
.row {
border: 1px solid #000;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html/js; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="row" id="color">
<div class="element">1</div>
</div>
</body>
</html>
I just want to remove the error message and get the function to do something.
You need to set the this and change your functions like this:
contentDiv.onmouseover = function(){
changeBorder(this, 'red');
};
contentDiv.onmouseout = function(){
changeBorder(this, 'black');
};
Without the keyword this, it's not going to be found. Remember that in your function you are sharing the element:
function changeBorder(element, to){
element.style.borderColor = to;
}
Your changeBorder method expects 2 arguments but you always call it using only one.
Try this:
changeBorder(contentDiv, '[color]');
Also, this may not work if the
var contentDiv = document.getElementById('color');
statement is executed before the DOM is ready.
changeBorder('red') -> the var element inside the method is set with a string ('red'). A string has not style property, so element.style is undefined and you can't use properties( like borderColor ) of undefined objects
You have to modify the code a bit. Please check code below:
<html>
<head>
<style>
.box{
border: 1px solid red;
background-color:pink;
padding: 10px;
}
.row {
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="row" id="color">
<div class="element">1</div>
</div>
<script type="text/javascript">
function changeBorder(element, to){
element.style.borderColor = to;
}
var contentDiv = document.getElementById('color');
alert(contentDiv);
contentDiv.onmouseover = function(){
changeBorder(contentDiv,'red');
};
contentDiv.onmouseout = function(){
changeBorder(contentDiv, 'black');
};
</script>
</body>
</html>

Changing border in Javascript

I have been learning Javascript and I'm a little confused as to why this doesn't work. I'd like it so if you click the div, it creates a red border around it:
JSFiddle link
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Generation X</title>
</head>
<body>
<script src="test.js"></script>
<div id="clickHere" onclick="run()">
<p>Hello</p>
</div>
</body>
</html>
Javascript:
function run() {
document.getElementById("clickHere").style.border = thick solid red;
alert("Changed");
}
make it ..updated fiddle (you need to wrap it in the head tag)
function run(thisObj) {
thisObj.style.border = "1px solid red"; //or "1px solid #ff000"
alert("Changed");
}
also, rather than getting the reference to element again, simply pass the reference during the time of invocation.
So, instead of putting an onClick on div, use a addEventListener should be better.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Event_attributes
https://jsfiddle.net/5jsbhbhu/5/
var run = function() {
document.getElementById("clickHere").style.borderColor = "red";
document.getElementById("clickHere").style.borderWidth = "1px";
document.getElementById("clickHere").style.borderStyle = "solid";
alert("Changed");
};
var node = document.getElementById('clickHere');
node.addEventListener('click', run);

Draw lines between 2 elements in html page

i need to draw lines between 2 element on html page
the results should be like this:
http://img2.timg.co.il/forums/1_173873919.JPG
i wondered what the best way do this
using canvas and html5
using background image.
make by ajax dynamic the image
i would like to know what the best way and if there is a simple demo on the web
thanks
Lots of ways to solve your need:
Here's one solution using an html canvas: http://jsfiddle.net/m1erickson/86f4C/
Example code (could be fully automated with jquery+css-classes):
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<style>
body{ background-color: ivory; margin:0; padding:0; }
#canvas{
position:absolute;
border:1px solid red;
width:100%;height:100%;
}
.draggable{
width:50px;
height:30px;
background:skyblue;
border:1px solid green;
}
.right{
margin-left:100px;
background:salmon;
}
#wrap2{margin-top:-95px;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
ctx.lineWidth=3;
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var $0=$("#0");
var $1=$("#1");
var $2=$("#2");
var $0r=$("#0r");
var $1r=$("#1r");
var $2r=$("#2r");
var connectors=[];
connectors.push({from:$0,to:$0r});
connectors.push({from:$1,to:$0r});
connectors.push({from:$2,to:$2r});
connect();
$(".draggable").draggable({
// event handlers
start: noop,
drag: connect,
stop: noop
});
function noop(){}
function connect(){
ctx.clearRect(0,0,canvas.width,canvas.height);
for(var i=0;i<connectors.length;i++){
var c=connectors[i];
var eFrom=c.from;
var eTo=c.to;
var pos1=eFrom.offset();
var pos2=eTo.offset();
var size1=eFrom.size();
var size2=eTo.size();
ctx.beginPath();
ctx.moveTo(pos1.left+eFrom.width()+3,pos1.top+eFrom.height()/2);
ctx.lineTo(pos2.left+3,pos2.top+eTo.height()/2);
ctx.stroke();
}
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
<div>
<div id="0" class="draggable">0</div>
<div id="1" class="draggable">1</div>
<div id="2" class="draggable">2</div>
</div>
<div id="wrap2">
<div id="0r" class="draggable right">0</div>
<div id="1r" class="draggable right">1</div>
<div id="2r" class="draggable right">2</div>
</div>
</body>
</html>
There is a very simple way of achieving this with some Javascript and the HTML canvas tag.
DEMO HERE showing how to draw the most complicated element on your example which has one field with lines branching to two other fields.
How it (basically) works is as follows.
Start the drawing function with:
context.beginPath();
Pass the desired coordinates to the function with:
context.moveTo(100, 150);
context.lineTo(450, 50);
Then execute the draw with:
context.stroke();
There's some great tutorials HERE
use <canvas> if you want to use simple things like circles and images and stuff - for divs, you would want to look for alternatives like in Jquery or - like you said - javascript. For <canvas> you could try this and this
here's a link to a gist that uses javascript (jquery) to draw a path (and redraw it in case of window resizing) between any 2 html elements.
demo
For GameRefCard I've using leader-line. It worked extremely well for me and is very popular it seems, if you are to trust GitHub statistics. I found out about from this other StackOverflow answer.

Detect mouse speed using jQuery

I want to detect mouse speed, for example the event will be fired only if the detected number is greater than 5
I found one example which I think is something similar: http://www.loganfranken.com/blog/49/capturing-cursor-speed/
but i am not able to make it see the number which is inside div and fire the event based on the resulting number, this is my attempt:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.cursometer.1.0.0.min.js"></script>
<script>
$(function() {
var $speedometer = $('#speedometer');
$('#test-area').cursometer({
onUpdateSpeed: function(speed) {
$speedometer.text(speed);
},
updateSpeedRate: 20
});
$("#test-area").mouseover(function(){
if(this.value > 5) {
console.log("asdasd");
}
else {
console.log("bbb");
}
})
});
</script>
<style>
#test-area
{
background-color: #CCC;
height: 300px;
}
</style>
</head>
<body>
<div id="test-area"></div>
<div id="speedometer"></div>
</body>
</html>
(I'm the author of the plug-in that's causing the trouble here)
The example isn't working because this.value isn't referring to the speed (it's undefined). Here's an updated version of your example:
http://jsfiddle.net/eY6Z9/
It would probably be more efficient to store the speed value in a variable rather than within the text value of an HTML element. Here’s an updated version with that enhancement:
http://jsfiddle.net/eY6Z9/2/
Hope that helps!

Displaying a <div> over a <canvas>

The problem, which exists in both Firefox and Chrome, is that I have a canvas with a solid background, and a div with a solid background color/image. The div is margined up over top of the canvas. The div does not display over the canvas. An interesting note is that if there is text inside the div it will properly get displayed. This would mean it's a browser bug... in both browsers. Here is some code for people that want to try it.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#d{background-color:#111;margin-top:-150px;z-index:999999;}
</style>
<script type="text/javascript">
function load() {
var c = document.getElementById("c").getContext("2d");
c.fillStyle = "rgba(255, 200, 200, 1)";
c.fillRect(0, 0, c.canvas.width, c.canvas.height);
}
</script>
</head>
<body onload="load()">
<canvas id="c" width="500" height="300"></canvas>
<div id="d" style="width:500px;height:300px"></div>
</body>
</html>
So, anybody have any workarounds? Or is there something that I missed in the HTML5 spec that says this is correct?
As a note, please do not ask why I want to use margins instead of fixed/absolute/etc... alternatives. I need margins.
This can only be fixed by applying the style:
#d {position:relative;}
or
#d {position:absolute;}
This occurred to me recently and instead of changing how it's laid out, I switched from div to using a span with display:inline-block.
Works on Firefox/Chrome/Safari.
Have not tested in IE.
Use the following code, hope it helps you:
<head>
<style type="text/css">
#c{background-color:#000;z-index:-1;position: fixed;}
#d{background-color:#aa00aa;margin-top:-50px;z-index:0;}
</style>
<script type="text/javascript">
function load() {
var cntx = document.getElementById("c").getContext("2d");
cntx.fillStyle = "rgba(255, 200, 200, 1)";
cntx.canvas.top = "0";
cntx.canvas.left = "0";
cntx.fillRect(0, 0, cntx.canvas.width, cntx.canvas.height);
var obj = document.getElementById("d");
obj.style.position = "fixed";
obj.style.top = 50;
obj.style.left = 0;
}
</script>
</head>
<body onload="load()">
<canvas id="c" width="500" height="300"></canvas>
<div id="d" style="width:500px;height:300px"></div>
</body>
Adding a position:relative; (or absolute) to #d seems to work in both chrome and firefox. No idea why, if you ask me. Is that good for you?
well i've read your question, and i understand you dont want to use position....whoever you have to use position to get z-index to work. position:relative literally is doing nothing in this case, save what you are requesting. here is a solution, although it relies on position:relative
http://jsfiddle.net/jalbertbowdenii/Ar6Sh/

Categories