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>
Related
I'm new to html, so sorry if the syntax or something is wrong.
I have a some html code. When I hover over 1, I want the sentence "This is the first match" to change e.g. color later in the document
I can achieve that with this CSS code:
#number1:hover ~ #match1{
color: yellow;
}
#number2:hover ~ #match2{
color: yellow;
}
Please hover over this number to see the respective match
<a id="number1">1</a>
<br>
Or hover over this number to see the respective match
<a id="number2">2</a>
<br>
<a id="match1">This is the first match</a>
<br>
<a id="match2">This is the second match</a>
However, I have multiple connections where I want the same pattern and not just these two. Is there any way I can apply this pattern easy globally in the document?
I don't know if <a> is the right to use, but I though that href might be a solution, but I'm not sure.
Thanks in advance!
You can approach this problem using Javascript with the onmouseover (hover) event. However, to give the same attribute to all of our desired tags, we need to give them all a common class name.
<body>
<a class = "colorchange" id="match1">This is the first match</a>
<br>
<a class = "colorchange" id="match2">This is the second match</a>
<br>
<a class = "colorchange" id="match3">This is the third match</a>
<br>
<a class = "colorchange" id="match4">This is the fourth match</a>
<script>
elements = document.getElementsByClassName("colorchange");
for(var i = 0, length = elements.length; i < length; i++) {
colorChange(elements[i])
}
function colorChange(btn){
btn.onmouseover = function(){
btn.style.color = "yellow"
}
}
</script>
</body>
I am making a Story Map (ArcGIS/Esri product that allows you to make various types of georeferenced presentations) that allows you to use embedded HTML and CSS (within <style> tags). The problem I am running into is that I want to have a show/hide for additional information on different topics, but I have been unable to successfully implement this functionality.
I tried the collapse Bootstrap method, which works initially but after a few hours it no longer works (with the button method the button stops working, with the href method it just opens the Story Map again in a new page). Here is the code for that:
<p>
<button aria-controls="collapseFlowers" aria-expanded="false"
class="btn btn-primary" data-target="#collapseFlowers"
data-toggle="collapse"
type="button">
More information on Wildflower
</button>
</p>
<div class="collapse">
<div class="card card-body">
<img alt="" src="https://i.imgur.com/Bidb7cR.png" />
</div>
</div>
From what I've gathered, this issue is because the Story Map lacks the Bootstrap dependencies, but I have no idea why it would work initially if that were the case.
I've also tried all of the solutions here, none of which have worked. When I save and exit the HTML editor, it seems to "compile" the code, removing parts of it that are required for it to function. This is probably an inadequate explanation but I can include examples if needed.
Story Maps do support JavaScript and other, deeper HTML work, but you have to download the source and rehost it, which is not an option for this project. I am experienced in Java, C, and some other languages but know very little about HTML and how it is implemented, so this is driving me crazy. Any help is appreciated!
Listen for click events on button,
Using only JavaScript,
const btn = document.querySelector('.btn');
const collapse = document.querySelector('.collapse');
// initially hide the image
collapse.style.display = "none";
var hidden = true;
// click event listener
btn.addEventListener('click', handleClick);
// click event handler
function handleClick (e) {
if (hidden) {
hidden = false;
collapse.style.display = "block";
}
else {
hidden = true;
collapse.style.display = "none";
}
}
<p><button aria-controls="collapseFlowers" aria-expanded="false" class="btn btn-primary" data-target="#collapseFlowers" data-toggle="collapse" type="button">More information on Wildflowers</button></p>
<div class="collapse">
<div class="card card-body"><img alt="" src="https://i.imgur.com/Bidb7cR.png" /></div>
</div>
Using only CSS,
label {
cursor: pointer;
}
div.collapse {
display: none;
}
#btn-checkbox {
width: 0;
height: 0;
opacity: 0;
}
#btn-checkbox:checked + div.collapse {
display: block;
}
<button><label for="btn-checkbox">More information on Wildflower</label></button>
<input id="btn-checkbox" type="checkbox"/>
<div class="collapse">
<div class="card card-body"><img alt="" src="https://i.imgur.com/Bidb7cR.png" /></div>
</div>
I've done some changes to the above code, so that it can work comfortably.
Link relevant to this post,CSS-tricks
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 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))
}
});