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.
Related
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;
I'm looking for a solution to a specific problem:
I am trying to use a w3schools dropdown menu with a search option with a combination of a shortcode for countries flags and I need that the search function will ignore the shortcode and just look for the countries name.
can someone please offer a solution?
Thanks from advance.
I am attaching the link to the basic w3schools html code and some screenshots for a better explanation:
My code
WordPress Shortcodes are parsed at at runtime, so you actually need to worry about what the output of those shortcodes is. Likely something like <img src="/path/to/flags/flag-1.png" />
Since you clearly have control over the HTML markup inside the dropdown, I would just wrap the Country in a span, and target that with the JavaScript instead. Take the following snippet for example:
You'll note that it no longer cares about anything else inside the anchor, and instead only cares about the text inside the anchor's span.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
var label = a[i].querySelector('span');
if (label.innerText.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
.dropbtn{background-color:#4CAF50;color:#fff;padding:16px;font-size:16px;border:none;cursor:pointer}.dropbtn:focus,.dropbtn:hover{background-color:#3e8e41}#myInput{border-box:box-sizing;background-image:url(searchicon.png);background-position:14px 12px;background-repeat:no-repeat;font-size:16px;padding:14px 20px 12px 45px;border:none;border-bottom:1px solid #ddd}#myInput:focus{outline:#ddd solid 3px}.dropdown{position:relative;display:inline-block}.dropdown-content{display:none;position:absolute;background-color:#f6f6f6;min-width:230px;overflow:auto;border:1px solid #ddd;z-index:1}.dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown a:hover{background-color:#ddd}.show{display:block}
<h2>Search/Filter Dropdown</h2>
<p>Click on the button to open the dropdown menu, and use the input field to search for a specific dropdown link.</p>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
<i class="flag a"></i><span>About</span>
<i class="flag b"></i><span>Base</span>
<i class="flag b"></i><span>Blog</span>
<i class="flag c"></i><span>Contact</span>
<i class="flag c"></i><span>Custom</span>
<i class="flag s"></i><span>Support</span>
<i class="flag t"></i><span>Tools</span>
</div>
</div>
I have a requirement where in the user can create new list items inspite of having default list items. So The user will be allowed to attach two icon images for the list items to show on hover of list item and on non hover of list item. So, now I want to change the background image to the given URL's in the property of the object that is iterated in ng-repeat. I have been trying using jquery to get the property and its value but couldn't replace with the hover_image URL from the object on hover.
<ul id="user_events_list" class="listing_categories" ng-repeat="event in privateEventItems">
<li class="eventListItem" style="background-image :url('{{event.eventIconUrl}}'); background-position:10px; background-repeat : no-repeat; padding-left:30px;">{{event.eventName}}
</li>
</ul>
I want to change the {{event.eventIconUrl}} to {{event.eventHoverIconUrl}} on mouse hover on the list item. Can anyone help me out with this?
You may use ng-mouseenter and ng-mouseleave events.
<ul id="user_events_list" class="listing_categories" ng-repeat="event in privateEventItems">
<li class="eventListItem" ng-init="anyChosenVariableNameForUrls=event.eventIconUrl"
style="background-image :url('{{anyChosenVariableNameForUrls}}'); background-position:10px; background-repeat : no-repeat; padding-left:30px;"
ng-mouseenter="anyChosenVariableNameForUrls=event.eventHoverIconUrl"
ng-mouseleave="anyChosenVariableNameForUrls=event.eventIconUrl"
>{{event.eventName}}
</li>
</ul>
Try this:
$('#name img').hover(function() {
$(this).attr('src', 'https://developers.google.com/maps/images/lhimages/api/icon_placesapi.svg');
}, function() {
$(this).attr('src', 'http://icons.iconarchive.com/icons/fasticon/web-2/256/Google-icon.png');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="name">
<img title="Hello" src="http://icons.iconarchive.com/icons/fasticon/web-2/256/Google-icon.png" />
</a>
To do it in angular way see this Fiddle
use ng-mouseover and ng-mouseleave directives to detect mouse hover and leave.
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))
}
});
I've create a link on number 1, which has it's own width and height, so it covers all A,B,D,E letters (all li's are linkable).
Sample image: http://i.imgur.com/anuoGnJ.jpg
What i cannot do is to put a background hover effect on A,B,D,E letters, because the link on number 1 covers with it's height and width all of them.
Is there a way i can achieve this? I must stay limited to use only one link.
Thanks a lot in advance.
My code is:
HTML:
<span class="one">1</span> <span class="two">2</span>
<ul>
<li>
<span class="letter">A</span> <span class="letter">B</span>
</li>
<li>
<span class="letter">D</span> <span class="letter">E</span>
</li>
</ul>
CSS:
.one {float:left;}
.one a {float:left;position:relative;width:100px;height:60px;display:block;}
.letter {float:left;color:#000;}
.letter:hover {background:#ff0000;}
Ok.That's it.
http://jsfiddle.net/HECKM/3/
jQuery will get the .ONE href attribute value and apply to LI inside UL.
$(document).ready(function(){
var url = $('.one a').attr('href');
$('ul.test li').click(function(){
window.location = url;
});
});
Just prepare for your use.
Cya.