I have content editable below and an onbeforeinput event listener and function. Using lit.js I want to get the paragraph or h1 element before it hits the dom. So I can get its height and width to see if it has exceeded the divs bounds. When I get the e.target in the before input event all it shows is the div editor as the target.
<div class="editor" contenteditable="true" #beforeinput='${this._beforeInput}' placeholder="TR"></div>
_beforeInput(e) {
console.log('before input ',e);
}
I would like to get the height and width of the incoming h1 or p elements.
Related
I have parent div - .parent - that has 300px height and 200 px width(doesn't matter).
I have a .child1,.child2, .child3 elements inside .parent div, each of them has content and height/width (this is just for simplicity, there are much more nesting in each of the child). All 3 children elements together occupy entire parent's container height. (e.g. every child has 100px height).
I have a click listener on .parent div:
$('.parent').click(function (){
console.log("Parent div clicked");
});
I noticed that my .parent click handler is triggered only if I clicked on .child3 element. When I am clicking on child1 or child2 - the event is not triggered.
What can be possible reasons why the parent click handler works only when clicking on .child3 and doesn't work when clicking on .child1,.child2?
I cannot share entire javascript/css of this issue, as there are a lot of it associated with every child and parent elements. I just wanted to get a hint where should I look?
My initial though was that there is some preventDefault/stopPropagation associated with .child1,.child2, which prevents click to be triggered on parent element, however, I didn't find any preventDefault associated with .child1 or .child2. Also, checked pointer-events too.
What else can impact that? Z-index? position:absolute?
UPDATE:
I also added click handler on document to see, what is a target when I click on .child1 or .child2. However, even this event is not triggered when I click on .child1 or .child2. It's triggered only if I click on .child3 (same as for .parent).
$(document).click(function(event) {
console.log("Document click: " + event);
});
Right now I have a large div with multiple sub elements inside of it. I have attached an onclick event to the large div tag. However, the onclick event only works when you click on empty space inside of the large div. It does not work when you click on child elements such as text inside of the large div. I am wondering if there is an easy way to capture any clicks inside of the large div, so I do not need to attach the onclick event to every child element.
EDIT: Add code snippet
Try to change text from blue to red. When you click on the empty space of the larger div, the text changes color. When you click on the child elements(the text), the color does not change. Is there an easy fix to be able to click anywhere inside of the large div to change the text color.
function changeToRed() {
event.target.querySelector('.change').style.color = "red";
}
.change {
color: blue;
}
<div onclick="changeToRed()">
<p class="change">Change text color</p>
<p> Another Paragraph</p>
</div>
You could use an overlay element on your existing element and make it transparent with css and add the eventlistener on this overlay element!
Using angular and typescript I need to be able to close the tag of a paragraph <p> when the text exceeds a container height.
Let's say I have a <div> with a height of 200px. When adding an object inside the div <div style="height: 200px"><p>{{text}}</p></div> I need to be able to determine when the text becomes larger than the 200px of text that the container can hold.
Is there any event from javascript that I haven't found?
This is an example DIV where when selected and paste (CTRL+V) it will paste a text or image on the div:
<div contenteditable="true" id="capture" style="height: 100px; width: 100px; "
onpaste='handlepaste(this, event)'></div
The problem here is my application will hide this div and essentially user cannot find where it is located. So is there a way that paste event is triggered and that the text or image gets pasted on this div even not selected in the page?
Update:
What I mean, I will make the div hidden for a reason that I don't need my app to display the image or text being captured. It just need it to get the captured image or text later.
If your div doesn't contain anything initially then its will not appear. so you can do either of the following :
Set the width and hight of the div to be appear on screen and give some differnt background and add the text as default text
you can set the onpaste='handlepaste(this, event)' on outer div and insted of this you can pass the target div id or you can handle the target inside the handlepaste method.
like
function handlepaste(event){ var target = $('#capture'); ...... }
I have an DIV element on my page with some text inside it which is less the size of the DIV element.
I also have a javascript function that uses setTimeout to animate the change of width property of the element.
However when the width becomes less than the width of the text inside it the text breaks on new line and so on. I tried using white-space:nowrap which makes the text stay on the same line but when the width of the element becomes less than the text width the text stays outside of it.
How to make the text stay on the same line AND hides along the div container?
Add ( overflow:hidden ) to the div element. (demo)
You want to add one more bit of CSS (demo):
overflow:hidden;
Try with
white-space: pre-wrap