Im trying to show a span upon clicking a button. Hiding the button itself works perfectly but now im trying to show the phonenumber by selecting the span from the curentTarget. I tried it like this but its not working.
<li class="phonenumber">
<em class="fa fa-clock-o text-blue"></em>
<button type="button">Telefonnummer anzeigen</button>
<span class="phonenumberspan" style="display:none">phone</span>
</li>
As mentioned, the hiding of the button works but somehome the selection from the currentTarget to the span is wrong. Thanks for any help.
private _showPhoneNr(e: Event) {
var target = $(e.currentTarget);
target.hide();
var parent = target.parent("phonenumber");
var number = parent.find("phonenumberspan");
number.show();
}
to select a parent element you can use this in your code
var number = document.getElementsByClassName('phonenumberspan')[0].parentElement.nodeName;
Related
The onclick event only works with the button. If I click on the icon in the button the function does not work.
enter code here
<div class="dropdown">
<button onclick="myFunction()" class="elementor-button-link elementor-button elementor-size-md elementor-animation-grow" id="dropbtn">
<i onclick="myFunction() "class="far fa-arrow-alt-circle-down">
<script>/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('#dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
enter code here
Short answer: Try using element.closest() instead of element.matches().
I suspect it's the condition in your if statement. By the looks of it, element.matches() will match exactly the ID provided - I.e., it'll match if the element clicked on has that ID, but not if you click on a child element that does not explicitly have the ID, even if the parent does.
According to Mozilla web docs, element.closest() should also match any elements whose parents match the condition provided, even if the element itself doesn't.
Bear in mind this will change the type of the returned value - matches() returns a boolean, while closest() returns the 'closest' element matching the condition.
I need to display the current time when I click the button each time, I've achieved the DOM of creating new divs when clicked on button, but I'm not getting the time inside span.
HTML
<button onClick="createDiv()">Record Time</button>
<div id="getText" style="display: none;">
<span id="showTime"></span>
</div>
Script
function createDiv()
{
let div = document.createElement('div');
document.body.appendChild(div);
var now = moment().format("h:mm:ss A");
$('#showTime').append(now);
}
As the code above, current time should be displayed on each new div.
I believe you are using jquery in your script, if so simply replace the
line: $('#showTime').append(now);
with: $('#showTime').text(now);
with vanilla JS you can also do this:
function createDiv(){
let div = document.createElement('div');
document.body.appendChild(div);
var now = moment().format("h:mm:ss A");
let timeNow = document.createTextNode(now);
$('#showTime').append(timeNow);
}
I am appending several buttons into an html span tag every time I type on different inputs.
<span id="pill_filters>
<button id="filterCreated">Filter name here</button>
<button id="filterCreated2">Filter name here</button>
</span>
I also wanna show a label whenever there are buttons inside of this span tag and if they aren't, I wanna hide said label.
<label id="label_sc">Search Criteria:</label>
So far my jquery is
function showSCLabel(){
if ($("#pill_filters").html.is(':empty')){
$("#label_sc").addClass("d-none");
}else{
$("#label_sc").removeClass("d-none");
}
}
But it doesnt seem to work. The label already has "d-none" class since the beginning and even with that, it is still showing. What am I doing wrong? is this not how the :empty state works? what can I use instead? I'll appreciate a lot your help!
if statement is missing ()
.html.is is invalid jQuery
Use:
if ( $("#pill_filters").is(':empty') ) {
Answer without jQuery:
//span
const span=document.getElementById("pill_filters");
//label
const label=document.getElementById("label-sc");
span.addEventListener('DOMSubtreeModified',function(){
//if innerHTML is not ""
if(span.innerHTML){
//show label
label.style.display="block";
}else{
//hide label
label.style.display="none";
};
};
I am currently trying to get a height of an element which I click on in a sidebar I am working on in order to show sub menus. I have currently got this code...
<li (click)="newsExpanded = !newsExpanded; getMargin($event)" style="margin-bottom: 50px;">
<a>
<i class="fa fa-newspaper"></i>
<span>News</span>
<i class="fa fa-angle-left sidebar__sub_menu_icon"></i>
<ul class="sidebar__sub_menu" [class.expanded]="newsExpanded">
<li>
<a>Create New Post</a>
</li>
<li>
<a>View All Posts</a>
</li>
</ul>
</a>
</li>
So when the news is expanded it adds the class of expanded which just displays block on the sub menu, that is working fine but I want to add a margin bottom to the inner ul on the click of the outer li. This would have to be the height of the inner ul. You can see that I've done a class of getMargin however, this doesn't do anything currently and it's what I'm trying to figure out.
Any help would be appreciated and if their is a better way to this then please tell me, I am new to Angular so any feedback I am grateful for.
To get the height of the clicked element using the $event you should do the following:
onClick($event): void {
let clientHeight = $event.target.clientHeight; //Height + padding without borders
let offsetHeight = $event.target.offsetHeight; //Height + padding with borders
//if you need the element plus margin-top/bottom
let compStyle = window.getComputedStyle($event.target)
clientHeight += parseInt(compStyle.getPropertyValue('margin-top'));
clientHeight += parseInt(compStyle.getPropertyValue('margin-bottom'));
}
DEMO: https://stackblitz.com/edit/angular-1apnhb
Here you are MDN docs of clientHeight and offsetHeight. Also you can take a look of scrollHeight.
I've got a contenteditable span placed inside an <a> tag. I'd like to be able to edit the text inside the span so it is important to:
place the cursor on mouseclick somewhere inside the span
select part of the text inside the span using the mouse
Both does not work in Firefox as soon as there is a href attribute in the hyperlink (which is also needed in my case). There is no problem without this attribute and there are no problems in Chrome.
Please try my example on JSFiddle.
<ul>
<li>
<a href="#">
<span contenteditable="true">PlacingCursorOrTextSelectionInFirefoxImpossible</span>
</a>
</li>
<li>
<a>
<span contenteditable="true">noProblemsHereSoFar</span>
</a>
</li>
</ul>
What you can do to improve the click behaviour is to prevent its propagation like this:
<a href="#">
<span contenteditable="true" onclick="event.stopPropagation();">
PlacingCursorOrTextSelectionInFirefoxImpossible
</span>
</a>
Unfortunately, this only allows to put the cursor inside the span, but it is somewhy put to its beginning, not where one have clicked.
To enable selecting, you need to prevent the dragging behaviour, but it is to be changed for the a element:
<a href="#" draggable="false">
<span contenteditable="true" onclick="event.stopPropagation();">
PlacingCursorOrTextSelectionInFirefoxImpossible
</span>
</a>
But wow, draggable="false" actually fixed the "cursor to beginning" bug! Here's the working example (tested in FF 47): https://jsfiddle.net/8v1ebkfd/4/
This works for me:
prevent click-default inside contenteditables
and for firefox, remove and add href-attribute to prevent placing the cursor at the start of the contenteditable-element
http://jsfiddle.net/uy4q0zcm/1/
// if contenteditable inside a link
document.addEventListener('click', e=>{
if (e.button !== 0) return;
if (e.target.isContentEditable) {
e.preventDefault();
}
if (e.explicitOriginalTarget && e.explicitOriginalTarget.isContentEditable) { // keyboard click firefox
e.preventDefault();
}
});
// prevent (Firefox) placing cursor incorrectly
document.addEventListener('mousedown', e=>{
if (!e.target.isContentEditable) return;
var link = e.target.closest('a');
if (link) {
const href = link.getAttribute('href')
link.removeAttribute('href');
setTimeout(()=>link.setAttribute('href', href))
}
});