Highlight Duplicate word on hover using javascript - javascript

I have the following html
<div class="my-div">
<p>
Hello from the moon
</p>
</div>
<div class="my-div">
<p>
Hello World
</p>
</div>
Is it possible using javascript that when I hover on the word 'Hello' in the first div, I highlight or even bold just the 'Hello' word in the second div..
Any help appreciated

To highlight a specific word you need to place it in <span> tag. For example:
<div class="my-div">
<p>
<span class="first-hello">Hello</span> from the moon
</p>
</div>
<div class="my-div">
<p>
<span class="second-hello">Hello</span> World
</p>
</div>
In JavaScript file, you can select your elements by using document.querySelector() function. And then add appropriate event listeners, in this case, mousemove that is fired when a mouse is moved while the cursor is inside the element, and mouseout that is fired when the cursor is moved outside of the element
const firstHello = document.querySelector(".first-hello");
const secondHello = document.querySelector(".second-hello");
firstHello.addEventListener("mousemove", () => {
secondHello.style.fontWeight = "bold";
});
firstHello.addEventListener("mouseout", () => {
secondHello.style.fontWeight = "normal";
});

I am using Lettering.js and Jquery to achieve this.
<script src="jquery-3.5.1.js"</script>
<script src="lettering.js"></script>
<script>
function btnClicked(){
//The words are now put into individual spans. See lettering js documentation
$(".lettr").lettering('words');
$("span").hover(function(e){
// set default background color to white
$("span").css("background-color", "white");
//Get the word at the current mouse hover
let word = e.target.innerHTML.trim();
//Keep a list of all spans in the html document
let listSpans = $("html").find("span");
//Loop through all the individual spans and see if the innerHTML matches the word. If so , highlight it.
for(let i=0;i<listSpans.length;i++){
let spanword= listSpans[i].innerHTML.trim();
if(spanword== word){
$(listSpans[i]).css("background-color", "yellow");
}
}
}, function (e) {
});
}
</script>
Here is my body
<body>
<div>
<p class="lettr"> Heloo i am </p>
<p class="lettr">Heloo me too</p>
</div>
<button onClick="btnClicked();">Click me</button>
</body>

Related

How to exclude element through its id using queryselector

I am using the w3school's Tryit Editor to select a <p> element inside a <div>. Trying to blur contents of the <div> excluding the <p> does not work. This is what I mean:
function myFunction() {
document.querySelector("#blurred:not(#text)").style.webkitFilter = "blur(10px)";
}
<br>
<h2 class="example">A heading with class="example"</h2>
<div id="blurred">
<p id="text">A paragraph with class="example".</p>
<p>Click the button to add a background color to the first element in the document with class="example".</p>
</div>
<button onclick="myFunction()">Try it</button>
How can I exclude the <p> with id #text from the blur?
You need to select all the child elements using *. and then use the :not selector to exclude #text
function myFunction() {
document.querySelector("#blurred *:not(#text)").style.webkitFilter =
"blur(10px)";
}
OR you can directly target all the p elements within #blurred like
#blurred p:not(#text)
Target the p with that id you want to exclude:
#blurred p:not(#text)
function myFunction() {
const div = document.querySelector("#blurred p:not(#text)")
div.style.webkitFilter = "blur(10px)";
}
<h2 class="example">A heading with class="example"</h2>
<div id="blurred">
<p id="text">A paragraph with class="example".</p>
<p>Click the button to add a background color to the first element in the document with class="example".</p>
</div>
<button onclick="myFunction()">Try it</button>
You can use the backdrop-filter property to blur only the area behind the contents of your div only. I did it using jQuery.
function myFunction() {
const div = document.querySelector("#blurred p:not(#text)")
$(div).css("backdrop-filter", "blur(10px)");
}
or a cleaner version:
function myFunction() {
$("#blurred p:not(#text)").css("backdrop-filter", "blur(10px)");
}

How can I change the text of an element without affecting its child element?

I have the following div and want to change the text that says "Don't have an account?" to something else.
I've tried $('a#createAccount').text'some text) or .html('some text');
Same with $('.create p'), but it removes the <a>.
<div class="create">
<p>
Don't have an account?<a id="createAccount" tabindex="1" href="https://somewebsite.com">Sign up now</a>
</p>
</div>
change only the text leaving the <a> unchanged
You can select the anchor tag, put it in a variable, overwrite the content of your paragraph and then append the anchor tag back to it.
let anchor = $('a#createAccount');
let paragraph = $('.create p')
paragraph.text("New text ");
paragraph.append(anchor);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="create">
<p>
Don't have an account?<a id="createAccount" tabindex="1" href="/b3c3aa0d-d4db-459d-8bf6-ed1538d45256/B2C_1_sign_up_sign_in_persona...">Sign up now</a>
</p>
</div>
Per How do I select text nodes with jQuery?, you can leverage chained functions to filter your matched elements to the text nodes within a parent element, then set their data attribute to the text that you want:
$(document).ready(function() {
$(".create p").contents().filter(function() {
return this.nodeType === 3; //Node.TEXT_NODE
}).each(function() {
if ($(this).text().trim() !== "") this.data = 'some text'; // ensure that stray blank text nodes aren't caught up in this change
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="create">
<p>
Don't have an account?<a id="createAccount" tabindex="1" href="/b3c3aa0d-d4db-459d-8bf6-ed1538d45256/B2C_1_sign_up_sign_in_persona...">Sign up now</a>
</p>
</div>
var link = $("#createAccount");
$(".create p").html("some text ").append(link);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="create">
<p>
Don't have an account?<a id="createAccount" tabindex="1" href="/b3c3aa0d-d4db-459d-8bf6-ed1538d45256/B2C_1_sign_up_sign_in_persona...">Sign up now</a>
</p>
</div>
I will answer my own question. There are ways to achieve this with JavaScript, but that would not be best practice and there is an easier way that does not involve JavaScript.
Given that this is an implementation of Azure B2C using a custom policy, this text is best handled in the policy using localization.
For example:
<LocalizedResources Id="api.signuporsignin.en">
<LocalizedStrings>
<LocalizedString ElementType="UxElement" StringId="createaccount_one_link">Sign up now</LocalizedString>
<LocalizedString ElementType="UxElement" StringId="createaccount_intro">Don't have an account?</LocalizedString>
</LocalizedStrings>
</LocalizedResources>
Try using document.write and update what you need
document.write("<p>
Don't have an account?<a id="createAccount" tabindex="1" href="/b3c3aa0d-d4db-459d-8bf6-ed1538d45256/B2C_1_sign_up_sign_in_persona...">Sign up now</a>
</p>");
Do you have to use jQuery to do this? If not and you can just use plain old javascript, why not try document.getElementById('createAccount').innerHTML = 'some text';
So after understanding what you were asking, I was able to accomplish this with the below:
<p id="MP"> Some text to replace My link </p>
<br><br> <input type="button" value="Change" onclick="Change()"/>
<script type="text/javascript">
function Change() { var Markup = document.getElementById('MP').innerHTML; var POS = Markup.indexOf('<a'); Markup = Markup.substring(POS); Markup = 'Some new text ' + Markup; document.getElementById('MP').innerHTML = Markup; }
</script>

Move closing </a> tag to the end of a containing element

I'm trying to get a link to wrap around all text within a div. I can only find solutions where you move certain DOM elements entirely, or move other elements into an element.
current situation:
<div class="text">
text and more text
</div>
desired situation:
<div class="text">
text and more text
</div>
Unfortunately, I cannot change the markup, so I have to do something with jQuery.
Avoid messing with html directly, it's better not to change it or overwrite. All you need to do is to take next text sibling Node and append to previous a:
$('.text a').each(function() {
$(this).append(this.nextSibling)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text">
text and more text
</div>
If necessary you can check for the next node to be TextNode, if you need to skip element nodes:
if (this.nextSibling.nodeType === 3) {
$(this).append(this.nextSibling)
}
You need to use .append( function ) to insert nextSibling of anchor into it.
$(".text a").append(function(){
return this.nextSibling
});
$(".text a").append(function(){
return this.nextSibling
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text">
text and more text
</div>
Also you can use .html( function ) instead and then remove next sibling using .remove()
$(".text a").html(function(i, h){
return h + this.nextSibling.nodeValue;
})[0].nextSibling.remove();
Or in one line using ES6
$(".text a").html((i,h) => h+this.nextSibling.nodeValue)[0].nextSibling.remove();
$(".text a").html(function(i, h){
return h + this.nextSibling.nodeValue;
})[0].nextSibling.remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text">
text and more text
</div>
Or using pure javascript
var ele = document.querySelector(".text a");
ele.innerHTML += ele.nextSibling.nodeValue;
ele.nextSibling.remove();
var ele = document.querySelector(".text a");
ele.innerHTML += ele.nextSibling.nodeValue;
ele.nextSibling.remove();
<div class="text">
text and more text
</div>
HTML/JavaScript doesn't work in a way that you can "move" a closing tag like that, but what you can do is move the text. Also, you don't need jQuery to do it; it's very easy to do with vanilla JavaScript:
let link = document.querySelector('.text a')
let textAfterLink = link.nextSibling
link.appendChild(textAfterLink)
<div class="text">
text and more text
</div>
You can first get the HTML inside the div with class text and then replace the closing tag </a> with '' then finally append a closing </a> tag to the replaced string so that you get what you expect:
var aHTML = $('.text').html();
aHTML = aHTML.trim().replace(/<\/a>/, '') + '</a>';
$('.text').html(aHTML);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text">
text and more text
</div>
Here you have one approach that will find all unwraped text inside the element with class .text and append all of these texts to the first <a> child. This approach uses the content() method chained with a filter() using the addequated condition for remove the texts children, while at the same time they are appended to the <a> element.
$('.text').each(function()
{
$(this).contents().filter(function()
{
// Filter text type only.
return (this.nodeType === 3);
})
.appendTo($(this).find("a:first-child"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text">
text and more text
</div>
<hr>
<div class="text">
Rise up this morning
Smile with the rising sun
<br>
Three little birds
<br>
Pitched by my doorstep
<br>
<p>DON'T TOUCH THIS ONE!</p>
Singing sweet songs
<br>
Of melodies pure and true
<br>
Sayin': This is my message to you
<br>
Saying, don't worry about a thing
<br>
'Cause every little thing
<br>
Gonna be all right
</div>

Select only the text inside div of sibling with class name, having many families of same class names

I wanted to copy the texts when the copy button is clicked. But, it copies the last(3rd) paragraph text when pressing any of the three buttons. It suppose to find previous sibling and copy that text when that particular button is clicked.
Here's my code. I think, I went wrong in the sibling thing. Let me know what I did wrong here:
//finding text to copy
$(document).ready(function(){
$(document).on('click', '.phc-hashtags-box-button', function () {
$(this).closest('.phc-hashtags-box').find('.phc-hashtags-box-tags');
copy = copy +$(this).text();
});
});
function copyToClipboard(element) {
var $temp = $('<input>');
$('body').append($temp);
$temp.val($(element).text()).select();
document.execCommand('copy');
$temp.remove();
}
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="phc-home-hashtags">
<div class="container">
<div class="phc-hashtags-box">
<h3 class="phc-hashtags-box-title">Dog1</h3>
<p class="phc-hashtags-box-tags">#dog #dogstagram #instadog #dogsofinstagram #worldofdogs #dogslove #cutedog #doggy #igdogs #dogs #pet #dogoftheday #myfriend #doglover #ilovemydog #ilovedog #doglove #doglife #mydog #happydog #1st</p>
<button onclick="copyToClipboard('.phc-hashtags-box-tags')" class="phc-hashtags-box-button">Copy</button>
</div>
<div class="phc-hashtags-box">
<h3 class="phc-hashtags-box-title">Dog2</h3>
<p class="phc-hashtags-box-tags">#dog #dogstagram #instadog #dogsofinstagram #worldofdogs #dogslove #cutedog #doggy #igdogs #dogs #pet #dogoftheday #myfriend #doglover #ilovemydog #ilovedog #doglove #doglife #mydog #happydog #2nd</p>
<button onclick="copyToClipboard('.phc-hashtags-box-tags')" class="phc-hashtags-box-button">Copy</button>
</div>
<div class="phc-hashtags-box">
<h3 class="phc-hashtags-box-title">Dog3</h3>
<p class="phc-hashtags-box-tags">#dog #dogstagram #instadog #dogsofinstagram #worldofdogs #dogslove #cutedog #doggy #igdogs #dogs #pet #dogoftheday #myfriend #doglover #ilovemydog #ilovedog #doglove #doglife #mydog #happydog #3rd</p>
<button onclick="copyToClipboard('.phc-hashtags-box-tags')" class="phc-hashtags-box-button">Copy</button>
</div>
</div>
</div>
</body>
</html>
Instead of picking by class which gets all of the element with that class, limit your find to the parent() div of the button and it will only get the relevant text:
$(document).ready(function(){
$(document).on('click', '.phc-hashtags-box-button', function () {
$(this).parent().find('.phc-hashtags-box-tags'); // notice the change on this line.
copy = copy +$(this).text();
});
});
EDIT:
Working solution:
Now i noticed - you are not passing a single element to copyToClipboard.
<button onclick="copyToClipboard('.phc-hashtags-box-tags')" class="phc-hashtags-box-button">Copy</button>
is sending the saving to copy the last element from 3 found with this. Try instead:
<button onclick="copyToClipboard($(this).parent())" class="phc-hashtags-box-button">Copy</button>
I believe that when you pass '.phc-hashtags-box-tags' to the onclick attr of the button elements, it is matching all of the elements with that class and returning the last match for the value of your function.
Instead, try changing the button onclick handler to:
copyToClipboard($this)
That said, the execCommand function is not working in the provided snippet so verifying is difficult.
Perhaps try passing IDs or try to architect a more elegant solution. So many relative jQuery selectors will inevitably cause bugs as complexity grows.

Javascript onmouseover and onmouseout

You can see in the headline what it is. I've four "div", and therein are each a p tag. When I go with the mouse on the first div, changes the "opacity" of the p tag of the first div. The problem is when I go on with the mouse on the second or third "div" only changes the tag "p" from the first "div". It should changes the their own "p" tags.
And it is important, that i cannot use CSS ":hover".
The problem is clear, it is that all have the same "id".
I need a javascript which does not individually enumerated all the different classes.
I' sorry for my english.
I hope you understand me.
My script:
<div onmouseout="normal();" onmouseover="hover();" >
<p id="something">LOLOL</p>
</div>
<div onmouseout="normal();" onmouseover="hover();" >
<p id="something">LOLOL</p>
</div>
<div onmouseout="normal();" onmouseover="hover();" >
<p id="something">LOLOL</p>
</div>
<div onmouseout="normal();" onmouseover="hover();" >
<p id="something">LOLOL</p>
</div>
Javascript:
function normal() {
var something = document.getElementById('something');
something.style.opacity = "0.5";
}
function hover() {
var something = document.getElementById('something');
something.style.opacity = "1";
CSS:
p {
opacity: 0.5;
color: red;
}
As Paul S. suggests, you need to pass this to the function so that it knows which element it has to work on.
<div onmouseout="normal(this);" onmouseover="hover(this);" >
<p>LOLOL</p>
</div>
<div onmouseout="normal(this);" onmouseover="hover(this);" >
<p>LOLOL</p>
</div>
<div onmouseout="normal(this);" onmouseover="hover(this);" >
<p>LOLOL</p>
</div>
<div onmouseout="normal(this);" onmouseover="hover(this);" >
<p>LOLOL</p>
</div>
And then select the child element <p> for the passed <div>. Here I select the first child p, i.e. the first element in the array of children of this element with tag p, that's why you see [0]. So if in each div you had two paragraph, then you could use e.g. getElementsByTagName("p")[1] to select the second <p>.
function normal(mydiv) {
mydiv.getElementsByTagName("p")[0].style.opacity="0.5";
}
function hover(mydiv) {
mydiv.getElementsByTagName("p")[0].style.opacity="1";
}
See the working example here: http://jsfiddle.net/mastazi/2REe5/
Your html should be something like this:
<div onmouseout="normal(1);" onmouseover="hover(1);">
<p id="something-1">LOLOL</p>
</div>
<div onmouseout="normal(2);" onmouseover="hover(2);">
<p id="something-2">LOLOL</p>
</div>
<div onmouseout="normal(3);" onmouseover="hover(3);">
<p id="something-3">LOLOL</p>
</div>
<div onmouseout="normal(4);" onmouseover="hover(4);">
<p id="something-4">LOLOL</p>
</div>
As you can see, we have different ids for your elements, and we pass the ids through the function that we trigger with onlouseover and onmouseout.
For your javascript, your code could be something like this:
function normal(id) {
var something = document.getElementById('something-'+id);
something.style.opacity = "0.5";
}
function hover(id) {
var something = document.getElementById('something-'+id);
something.style.opacity = "1";
}
For normal() and hover() we receive an id and change the style for the current element that have this id.
Please, check this JSFiddle that I've built for you.

Categories

Resources