Google closure library: stopPropagation on components - javascript

I am trying to figure out why stopPropagation does not work when used with google closure components. It works fine for browserEvents but not for Events on components. Please see example code below that demonstrates on your browser the phenomenon:
<html>
<head>
<script type="text/javascript" src="closure/goog/base.js"></script>
</head>
<body>
<div id="div1" style="border: 1px solid black; width: 500px; height: 300px; padding: 10px">
<div id="div2"></div>
</div>
<script>
goog.require('goog.dom');
goog.require('goog.ui.CustomButton');
goog.require('goog.ui.Component');
goog.require('goog.ui.Control');
goog.require('goog.style');
</script>
<script>
var outerBtn = new goog.ui.Control();
outerBtn.decorate(goog.dom.$('div1'));
var innerBtn = new goog.ui.CustomButton('Inner Button');
outerBtn.addChild(innerBtn, true);
outerBtn.setSupportedState(goog.ui.Component.State.FOCUSED, false);
innerBtn.setSupportedState(goog.ui.Component.State.FOCUSED, false)
goog.style.setStyle(innerBtn.getElement(), {
border : '1px solid red',
height : '100px'
});
goog.events.listen(outerBtn, goog.ui.Component.EventType.ACTION, function() {
console.info('outer');
});
goog.events.listen(innerBtn, goog.ui.Component.EventType.ACTION, function(e) {
console.info('inner');
e.stopPropagation();
});
</script>
</body>
</html>

Your example outputs:
inner
outer
In this case, e.stopPropagation works correctly.
The console output "outer" is due to outerBtn's own event handler. Not bubbled up from innerBtn.
Furthermore, comment out e.stopPropagation, the output will change as below:
innner
outer
outer

Related

Scroll automatically inside of a div

Hello i have a problem with my website.
I want to make a JavaScript function which scrolls down to an object with the id #important. Usually i just modify the link to page.html#important. but because the object is at the bottom of a div which has a scrollbar itself that won't work.
Code:
<script language="javascript" type="text/javascript">
var timeout = setInterval(reloadChat, 10);
function reloadChat() {
$("#chat").load("chat.php");
}
reloadChat();
</script>
and in chat.php i fetch rows from my database in which the last row is being displayed in a <div id="lastmessage"></div> which i want to scroll down to
Thanks in advance
Is .scrollIntoView() something like you want?
https://www.w3schools.com/jsref/met_element_scrollintoview.asp
Or maybe this can help?
https://stackoverflow.com/a/270628/4335288
var objDiv = document.getElementById("important");
objDiv.scrollTop = objDiv.scrollHeight;
I would use Element.scrollIntoView() with behavior set to smooth.
Source: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
window.onload = function(e){
var element = document.getElementById('second');
element.scrollIntoView({ behavior: 'smooth' });
}
#first {
height: 2000px;
background-color: lightgreen;
}
#second {
height: 2000px;
background-color: lightpink;
}
#third {
height: 2000px;
background-color: lightblue;
}
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
</body>
</html>
behavior: 'smooth' will quickly provide good UX.
You can choose when to call element.scrollIntoView({ behavior: 'smooth' });. It will scroll to that DOM element when called.

jQuery mouseup event on click and drag

I'm trying to show a div when the user click a box. I tried to use this code:
$(document).ready(function(){
$(".hold").mousedown(function(){
$(".box").css("height","200px");
});
$(".hold").mouseup(function(){
$(".box").css("height","0px");
});
});
But the second part of the code, the mouseup event doesn't trigger the callback when I click and drag.
How to make it work?
<!DOCTYPE html>
<html>
<head>
<title>click and hold project</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="hold"></div>
<div class="box"></div>
<script src="jquery-2.2.3.min.js"></script>
<script src="app.js"></script>
</body>
</html>
As #wahwahwah pointed it out, the issue is that when you press the mouse key on the .hold element and then move the mouse somewhere else and leave the key, the given handler on mouseup would NOT be called because it is set on the .hold element.
Technically, the target of the event would be different in that case, hence it won't match the .hold element and eventually the callback functions of mouseup event won't be triggered.
A workaround to this could be to add a pointer to the clicked element at the beginning and then add an event listener on the document element and check whether the event.target is the same as the clicked element.
If they are not the same, we will trigger the .hold element's event manually, as follows:
$(document).ready(function(){
var mouseTarget;
$(".hold").on('mousedown', function(){
$(".box").css("height", "200px");
mouseTarget = this;
})
.on('mouseup', function(){
$('.box').css("height", "0px");
});
$(document).on('mouseup', function(e) {
if (e.target !== mouseTarget) {
$(mouseTarget).trigger(e.type);
}
});
});
.hold{
background-color: #000;
width: 20%;
height: 10px;
}
.box{
background-color: #f00;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hold"></div>
<div class="box"></div>
It is worth mentioning that the callback function which is set on the document will be triggered in the bubble phase.
try the following
$(document).ready(function(){
$(".hold").mousedown(function(){
$(".box").css("height","200px");
})
.mouseup(function(){
$(".box").css("height","0px");
});
});
jsfiddle link https://jsfiddle.net/w47anse9/
Your code works as it is. Are you trying to drag or expand the box? I only added styles to it.
.hold {
width: 50px;
height: 50px;
background-color: yellow;
}
.box {
width: 100px;
background-color: black;
}
Here is fiddle with your code: jsfiddle

Can I have a click and keyboard handler for RaphaelJS' canvas events?

I am new to RaphaelJS. I am trying to add click listener and keyboard listener to the canvas with no success. Can someone please explain how to use click listener and keyboard listener on Raphael. A small example will be of great help.
Thank you.
Here is a click and mouseover example, you can use more jQuery in there to simplify it but I just wanted to use the document ready function. Shouldn't be too much to add a keyboard event in there:
<html>
<head>
<script type="text/javascript" src="http://github.com/DmitryBaranovskiy/raphael/blob/master/raphael-min.js?raw=true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var circ = paper.circle(250, 250, 40);
circ.node.onmouseover = function()
{
this.style.cursor = 'pointer';
};
circ.node.onclick = function()
{
circ.animate({opacity: 0}, 2000, function()
{
this.remove();
});
}
});
</script>
<style type="text/css">
#canvas_container
{
width: 500px;
border: 1px solid #aaa;
}
</style>
</head>
<body>
<div id="canvas_container"></div>
</body>
</html>

How can I get a css position change to take effect during a JQuery UI Draggable element's start event handler?

I have an odd situation in which I need to modify the position of a draggable element as soon as the user starts dragging it. So, during the draggable element's start event handler, I'm trying to set the position. It doesn't respond to the position change unless - and this is weird - I do something to cause a javascript error after I change the position. Here's an example:
<html>
<head>
<title>Drag reposition test</title>
<script type="text/javascript" src="js/css_browser_selector.js"></script>
<script type="text/javascript" src="development-bundle/jquery-1.3.2.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery-ui-1.7.1.custom.js"></script> <!-- Includes JQuery UI Draggable. -->
<style type="text/css">
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script type="text/javascript">
$(function() {
$("#initialdragger").draggable({
start: function(e, ui) {
$('#initialdragger').css('top', 400);
x = y; // Javascript error, which weirdly causes a redraw.
}
});
});
</script>
</head>
<body>
<div id="initialdragger" class="ui-widget-content" style="border-width: 1px; border-color: black; background-color: orange; width: 300px">
<p>Drag me around</p>
</div>
</body>
</html>
How can I legitimately cause a redraw to happen in this context? JQuery's hide() and show() don't work and neither do these methods.
I think binding a mousedown event will get you what you want
<script type="text/javascript">
$(function() {
$("#initialdragger").draggable();
$('#initialdragger').bind("mousedown", function(e) {
$(this).css('top', 400);
});
});
</script>

Javascript: Event does not fire unless element appended to document.body

I dynamically create an element (div) in javascript, on which i register an event listener:
var tooltip = document.createElement('div');
tooltip.onclick = function() { alert('hello'); }
Now, if I attach this element to the document body:
document.body.appendChild(tooltip);
all is well and the event is captured. However (for positioning purposes) i want to attach this element to a (static) sub-element within my page, e.g:
document.getElementById('id').appendChild(tooltip);
and the element is generated and positioned correctly - but the onclick event now is no longer captured. Any thoughts? This is x-browser, so i must be missing something.
Thanks, Don.
You're creating not only one but MANY divs.
Try this instead(I hope you don't mind but I fixed the HTML and CSS too):
<html>
<head>
<script type="text/javascript">
function makeDiv() {
if(!document.getElementById('tooltipDiv')){
var tooltip = document.createElement('div');
tooltip.id = "tooltipDiv";
// Give our tooltip a size and colour so we can see it
tooltip.style.height = '200px';
tooltip.style.position = 'absolute';
tooltip.style.width = '200px';
tooltip.style.backgroundColor = '#eee';
// Register onclick listener
tooltip.onclick = function() { alert('hello'); }
//tooltip.addEventListener("click", function(){ alert('hello'); }, false);
// *** Comment one of these out: ***
//document.body.appendChild(tooltip);
document.getElementById('myDiv').appendChild(tooltip);
}
}
</script>
</head>
<body>
<div id="myDiv"
onmouseover="makeDiv();"
style="position: relative; top: 100px; left: 100px; border: 1px solid red; width: 200px;">
<span>my div text</span>
</div>
</body>
</html>
Maybe you need to register the event handler after appending?
Your code works fine for me on firefox 3.0.5 and IE7. Are you sure your example is correct?
Ok all, here is my code, apologies for the delay. A version with a work-around is posted underneath:
<html>
<head>
<script type="text/javascript">
function makeDiv() {
var tooltip = document.createElement('div');
// Give our tooltip a size and colour so we can see it
tooltip.style.height = '200px';
tooltip.style.position = 'absolute';
tooltip.style.width = '200px';
tooltip.style.backgroundColor = '#eee';
// Register onclick listener
tooltip.onclick = function() { alert('hello'); }
// *** Comment one of these out: ***
//document.body.appendChild(tooltip);
document.getElementById('myDiv').appendChild(tooltip);
}
</script>
</head>
<body>
<div id="myDiv"
onmouseover="makeDiv();"
style="position: relative; top: 100px; left; 100px; border: 1px solid red; width: 200px;">
<span>my div text</span>
</div>
</body>
</html>
===================================
OK - so this works:
<html>
<head>
<script type="text/javascript">
function makeDiv() {
var tooltip = document.createElement('div');
// Give our tooltip a size and colour so we can see it
tooltip.style.height = '200px';
tooltip.style.position = 'absolute';
tooltip.style.width = '200px';
tooltip.style.backgroundColor = '#eee';
// Register onclick listener
tooltip.onclick = function() { alert('hello'); }
// *** Comment one of these out: ***
//document.body.appendChild(tooltip);
document.getElementById('container').appendChild(tooltip);
}
</script>
</head>
<body>
<div id="container" style="border: 1px solid blue; float: left; ">
<div id="myDiv"
onmouseover="makeDiv();"
style="position: relative; border: 1px solid red; width: 200px;">
<span>my div text</span>
</div>
</div>
</body>
</html>
Here is some code to remove the tooltip for onmouseout.
Give your toolTip an ID when creating it:
toolTip.setAttribute('id','toolTip');
Then for onmouseout
function removeDiv(container) {
var toolTip = document.getElementById('toolTip');
document.getElementById(container).removeChild(toolTip);
}

Categories

Resources