I'm trying to bind to the total (scrolling) height of the body element inside of a Svelte component such that I can calculate the scroll position in an interval between zero and one. This allows for some cool scroll-triggered CSS animations. The value I'm looking for is stored in the body.offsetHeight property.
My first impluse was to bind the property directly using the <svelte:body> element.
<script>
let h;
</script>
<svelte:body bind:offsetHeight={h}></svelte:body>
<span class="debug">{h}</span>
In this example h will remain undefined even if the window is resized.
The documentation mentions that the <svelte:...> elements are primariliy intended to bind event listeners to them. With this in mind, I tried to bind the resize event and getting the sizes from there, together with the initial value of body.offsetHeight in the onMount callback.
<script>
const handleResize = () => { console.log("yay"); };
</script>
<svelte:body on:resize={handleResize}></svelte:body>
Once again, the handleResize function is not called when the body is resized.
Is there a way to idiomatically solve this problem in Svelte?
Is it safe to just bind to the body's resize event manually in on-mount and updating values from there?
Thanks for taking the time to read this question!
You can set on:resize on the window element itself instead
<svelte:window on:resize={handleResize}></svelte:window>
Alternatively, you might be able to get the same information of from the window as well? There the bindings work smoothly.
Related
I've the following html structure
<body data-page="first">
<div class="start">Test</div>
</body>
and the following js
$('body[data-page="first"] .start').on('click',function (){
body.attr('data-page','second');
});
$('body[data-page="second"] .start').on('click',function (){
console.log('Test');
});
I would expect, that after the second click on .start, the console would show "Test", but it doesn't...
Can you tell me what I'm doing wrong?
Thanks in advance!
While you have your answer, I don't think the essential point has been made in any of the answers so far, and that is that the binding of an event handler must happen after the target element exists.
When you try to bind an event handler to a particular element in the DOM, the element must exist at the time. If it does not exist, the handler has nothing to bind to, and so the binding fails. If you later create the element, it's too late, unless you re-run the binding statement.
It will soon become second nature to call appropriate event handler binding statements after you create a new element (by modifying the HTML using javascript) that needs a handler.
For instance, in my current project I regularly make AJAX calls to a server to replace blocks of HTML as things happen on the page. Even if some of the new elements are exactly the same as the ones being replaced, they will not inherit any bindings from the replaced elements. Whenever I update the HTML I call a function that contains necessary statements to bind my event handlers to the new copy of the active elements.
Your code would work if you made the following change:
$('body[data-page="first"] .start').on('click',function ()
{
body.attr('data-page','second');
$('body[data-page="second"] .start').on('click',function (){
console.log('Test');
});
})
A couple of other (off-topic, but related) points:
It's possible to bind a handler to an element multiple times. The trick to avoiding this is to include the .off() method in the chain before binding (noting though that .off("click") will unbind all click handlers bound to that element, not just yours) e.g.
$("#mybutton").off("click").click(function(){myHandler()});
"the arrow function doesn’t have its own 'this' value" () so don't use arrow functions in event handlers if you plan to reference any of the element's properties via 'this'. e.g.
$("#mybutton").off("click").click(() => {console.log(${this.id})}); // >> "undefined"
The issue is that the page is rendered with the data-page set to first, and when you click again on it, that part of javascript still see "first", since is not rerendered, so you need a dynamic function, the read all the intereaction with that button, and than check wich value that attribute has. Like this you can make infinite cases, and still go on.
$('body .start').on('click',function (){
const attr = $('body').attr('data-page');
if(attr === 'first') {
$('body').attr('data-page','second');
} else {
console.log('second');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body data-page="first">
<div class="start">Test</div>
</body>
And if you don't like the fact that is targetting all the "body" wich is weird, becouse you should have only 1 body, you can use an ID to target the right one
PS: is never a good idea to duplicate your function, if you can set everything in a dynamic function, that reads everything, is easier to debug in the feature, and is lighter and more clean to work on
$('body[data-page="first"] .start').click(function (){
var body = $('body[data-page="first"] .start');
body.attr('data-page','second');
});
This method can help :
var timesClicked = 0;
$('.start').on('click',function (){
timesClicked++;
if (timesClicked>1) {
console.log('Test');
}
});
I wanted to add the resize event to an element (I know you can't add resize to a specific element, but it would be fine if the JS-function would be triggered on a resize of any kind - not the specific element).
I was thinking about this:
<div onresize="wrapperResize();"></div>
This somehow doesn't work (Safari user here). This however works:
<div onclick="wrapperResize();"></div>
Currently wrapperResize() only holds a simple console.log(). What could I do about this?
PS: This works great (traditional checked), what do I even do different?
EXTRA: The div has a fixed height and 33% of the body element wide. Even though the event should fire, when the window is resized I thought this may be the cause.
I think you should set onresize handler on window and do it in javascript, not inline html.. Like so
window.onresize = yourFunction
You cannot attach a onresize event on a <div> container. It is only available for window for most of the browsers.
I have a tree that expands and collapses, whenever the container div changes sizes i want to do some other stuff, however the .resize() doesn't seem to be working as i wish.
I have the code posted on jsfiddle below:
http://jsfiddle.net/2nXtu/
Thanks
resize() is an event for the resizing of the browser window.
Just put the status updater inside the duplication click event:
$('.dup').live('click', function(){
var clone = $(this).clone();
$(this).parent().append( clone );
$('.height').html( $('.content-body').height() );
$('.status').html('Resizing');
});
Here it is in action.
One way I did this is using a dirty-checking technique.
Basically you check the size of the div you want to monitor the first time, then register a function that runs on a specified interval (say 500ms) and checks for the div size again. If the size has changed from the one you had before you trig some event or run some function and store the new size. It works well if you create efficient closures around your variables.
I've been trying to create a game in strictly HTML5 and JavaScript and have run into an issue that I can't seem to wrap my head around. In an attempt to try and avoid using third party classes/libraries, I'm creating my own class for handling custom buttons within the HTML5 canvas element. I almost got them to work and then had to re-write most of the script after realizing that my event listeners kept adding on top of each other every time the canvas redrew (I was using an anonymous function in the mouseDown event listener before, but have since switched to a different method).
First of all, my event listeners now use a function which holds a reference to whichever button I'm trying to use. My prototype's mouseDownFunc is then called, it checks the boundary of the button instance's dimensions, and then finally calls a referenced onPress() (which is actually an overridden method that every button uses, so each button has a custom set of instructions when pressed).
So, if you're still following along (I know, it's a bit confusing without seeing the full script), the problem is that because my event listeners are using the same function, they're overwriting the previous event listener, so only the last button added functions correctly. To sum this all up, how can I add multiple event listeners to the canvas element, which all use the same function without erasing the previous event listeners. Note that I'm trying to do this without the use of jQuery or other third-party extensions.
If more information is needed in regards to my code so that it's easier to understand, let me know. Thanks in advance for any type of feedback.
Edit: Perhaps this might help. Note that this isn't the complete code, but contains the main points:
Adding a button:
this.test_button = new CreateButton(this, 'test_button');
this.test_button.onPress = function() {
alert('Blue button works!');
};
this.test_button.create(200, 50, 30, 200, 'text');
When using create() on a button, variables are checked and stored, as well as an array that holds onto all current buttons (so they can be referenced at any point). Then this is run: this.that.custom_canvas.addEventListener('mousedown', this.create.prototype.mouseDownFunc, false);
When mouseDownFunc is called, this takes place:
CreateButton.prototype.create.prototype.mouseDownFunc = function(e) {
var mouse_x = e.clientX-this.offsetLeft;
var mouse_y = e.clientY-this.offsetTop;
// Check if the mini-button button was actually clicked
if(mouse_x >= test2.x && mouse_y >= test2.y && mouse_x <= (test2.x + test2.width) && mouse_y <= (test2.y + test2.height)){
alert('clicked and working!');
test2.onPress(); // A reference to the saved function
}
};
Currently, my test2 is a reference to any given object -- it's a global var, but after I get these other issues fixed, I'll deal with getting rid of the global var (I know, I know - it was just a temporary quick-fix).
Maybe instead of an event listener for each and every possible button, and checking box size within the function, you could create a single event that calls a routing function to check where on the element the event occurred, and then delegate to another function
You need to design something to handle the event dispatch in your program. You seem to have components that have their listeners all disorganized. You could build a tree data structure (https://en.wikipedia.org/wiki/Tree_%28data_structure%29) that is a hierarchy for the event dispatch in your components ( such as buttons, text areas etc.). The idea is that when the tree is traversed the events will be handled in an ordered fashion. The tree would be reorganized based on how the user interacts with your program. For a simple example, to start this tree could perhaps prioritize the most recently drawn component (out of some structure that holds a list of everything to be drawn) as the event listener to receive event handling first. Then, if a component is blocked by another component the blocked component (like a button covering the button) it's event handling could either be disabled or scheduled to happen later depending on your implementation. Of course your implementation may be more complex, but you need to keep track the event handling. Java uses a component heirarchy data structure to handle a wide variety of GUI events that you can learn more about here http://docs.oracle.com/javase/tutorial/uiswing/concurrency/index.html
How can I get the id of a html control just by specifying the coordinates of a triggered event (like onmousedown, onmouseup, onclick, etc..). the coordinates can be got by:
e.clientX , e.clientY where e is the event object.
The idea is to get the id of control on which a click event is done without having any onClick event in that control's definition.
This will dispense the need of specifying the onClick event for multiple controls.
I do not believe that this is possible, but fortunately (if I understand your requirements correctly) you do not need to:
If you want to get the HTML element where a user clicked, without specifying a click event handler on each element, simply specify a click handler on a top level element (one that contains all the other interesting elements - maybe even "document"), and then look at the MouseEvent's target property - it will specify the HTML element that received the click initially and not the element where you specified the onclick event handler (this can be gotten to simply by using the "this" keyword).
If you have firebug, try this out in your firebug console right here on StackOverflow:
document.getElementById('question').onclick = function(e) {
var target = window.event?window.event.srcElement:e.target;
alert("Got click: " + target);
}
Then click anywhere on your question text to get an alert with the correct HTML element :-) .
This is a very good question, lets suppose the function we are looking for is something like this:
document.elementFromPoint = function(x,y) { return element; };
This obscure function is actually implemented in Firefox 3.0 using the gecko layout engine.
https://developer.mozilla.org/en/DOM/document.elementFromPoint
It doesn't work anywhere else though. You could build this function yourself though:
document.elementFromPoint = function(x,y) {
// Scan through every single HTML element
var allElements = document.getElementsByTagName("*");
for( var i = 0, l = allElements.length; i < l; i++ ) {
// If the element contains the coordinate then we found an element:
if( getShape(allElements[i]).containsCoord(x,y) ) {
return allElements[i];
}
}
return document.body;
};
That would be very slow, however, it could potentially work! If you were looking for something like this to make your HTML code faster then find something else instead...
Basically what that does is it goes through every single HTML element there is in the document and tries to find one which contains the coordinate. We can get the shape of an HTML element by using element.offsetTop and element.offsetWidth.
I might find myself using something like this someday. This could be useful if you want to make something universal across the entire document. Like a tooltip system that works anywhere, or a system that launches context menus at any left click. It would be preferable to find some way to cache the results of getShape on the HTML element...
this will dispense the need of specifying the onClick event for multiple controls.
If this is your only goal, I suggest using jQuery to elegantly specify event handlers on multiple elements.
This one of examples from jQuery tutorial that does exactly this:
$(document).ready(function() {
$("a[href*=/content/gallery]").click(function() {
// do something with all links that point somewhere to /content/gallery
});
})
When your HTML page renders positions of various elements will be derived dynamically by the rendering engine of your browser. The only elements which can reliably be tested for their resulting layout properties are images.
To do what you want, therefore, you would need to use absolute positioning for all your elements and have a page map stored elsewhere to tie up controls to locations. This would be way too complicated I think!
Although it contradicts your question somewhat, you should, via javascript or server side, attach onclick events to your controls. Sorry!
You don't actually need the position. What you need is the target property of the event object. I don't know how this is handled in jQuery but here's a quick example inspired from the above resource:
JavaScript
<script type="text/javascript">
window.onload = function() {
document.body.onclick = function(event) {
alert(event.target.id);
}
}
</script>
CSS
div {
width: 200px;
height: 200px;
margin: 30px;
background: red;
}
HTML
<div id="first-div"></div>
<div id="second-div"></div>