I am looking for a way to separately process the lines in a <div> that are wrapped due to a narrow width. That is, if my text is "Lorem ipsum dolor sit amet lorem \n ipsum dolor sit amet" and it is seen as below:
Lorem ipsum dolor
sit amet lorem
ipsum dolor sit
amet
Then I should be able to encapsulate each 'line' in a, say, <span> tag, such as:
<span id="line0">Lorem ipsum dolor<span>
<span id="line1">sit amet lorem</span>
... etc.
Edit: We can assume that the width and height of the div is fixed and known.
I couldn't find a proposed solution, if any exists; although there is a good suggestion for counting the lines for a fixed line-height: How to check for # of lines using jQuery
Starting with this:
<div class="narrow">Lorem ipsum dolor sit amet lorem ipsum dolor sit amet</div>
css:
.narrow {
width:60px;
}
Insert some placeholders where there are spaces:
$('.narrow').html($('.narrow').html().replace(/ /g,"<span class='count'> </span>"))
Determine the y-position of each placeholder:
$('.narrow .count') .each(function() {
var myPos = $(this).position()
alert(myPos.top)
})
From there you should be able to figure out where the start/end points of each line based on its y-position.
Related
I have been using materialize CSS for buttons on some cards in my application and wanted to create a button that when clicked it adds the user's favorite item to another page that I have in HTML called Favorites.html. I have the index.html file which serves as the homepage, where the cards are placed. The user can pick a card and favorite it and have it stored to the Favorites.html page. I was wondering how to do that using Materialize and JS. We are also using Firebase to serve as the backend and relying on JS version- 9 in the FireStore.
Here is an example of the card setup for the on the index.html page with the button being called favorite-btn.
I have tried putting a link into the "a href" to the favorites.html page and it did take me to the favorites.html page but it did not add it to the favorites.html page that I had set up.
index.html
<div class = "recipe-img">
<img src = "coffee.jpg" alt = "a cup of coffee.">
<span class = "category-name">Mine</span>
</div>
<div class = "recipe-content">
<i class="material-icons">delete_outline</i>
<h2>Americano<a href="#" class="right favorite-btn btn-floating red pulse">
<i class="material-icons">favorite</i></a></h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.Lorem, ipsum dolor sit amet consectetur adipisicing elit.Lorem, ip``sum dolor sit amet consectetur adipisicing elit.Lorem, ipsum dolor sit amet consectetur adipisicing elit.
orem, ipsum dolor sit amet consectetur adipisicing elit.orem, ipsum dolor sit amet consectetur adipisicing elit. Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
I want to make my js program read from a txt file whose location is hardcoded. Every time the txt file is update, I want to store the new data as a new variable.
For example, when the txt file changes from blank to the following:
Lorem ipsum dolor sit amet
it will store newInfo = "Lorem ipsum dolor sit amet"
Then if the txt file is updated to the following:
Lorem ipsum dolor sit amet
consectetur adipiscing elit
It will store newInfo = "consectetur adipiscing elit"
I'm trying to replace my footer's text with "Hello World" and I do not want to edit the HTML by adding a class or an id
HTML:
<footer>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</footer>
JavaScript:
document.getElementById(footer).innerHTML="Hello World";
The problem is that, when I do the code above, nothing is changing
footer is not the id of the element you are selecting, its the tag name.
You can use tag selector for selecting footer.
And to change the div content(i am assuming you want to change the text, keeping div as is), you can select div using the tag selector
and can change the text.
document.getElementsByTagName("footer")[0].getElementsByTagName("div")[0].innerHTML = "Hello World";
Above statement is broken down :
document.getElementsByTagName("footer") //select footer
document.getElementsByTagName("footer")[0] //1st matched element
document.getElementsByTagName("footer")[0].getElementsByTagName("div") // select div
document.getElementsByTagName("footer")[0].getElementsByTagName("div")[0] // first div
document.getElementsByTagName("footer")[0].getElementsByTagName("div")[0].innerHTML = "Hello World"; //change content
document.getElementsByTagName("footer")[0].getElementsByTagName("div")[0].innerHTML = "Hello World";
<footer>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</footer>
It's because you are selecting id which doesn't exist, try this instead:
document.querySelector('footer').innerHTML = "Hello world";
#edit
document.querySelector('footer').innerHTML = "Hello world";
<footer>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</footer>
There are a couple of ways by which you can achieve the desired:
1) If you need to change the HTML, you should use the below code for targeting the footer:
document.getElementsByTagName('footer')[0].innerHTML = '<div>Hello World</div>';
document.getElementsByTagName('footer')[0].innerHTML = '<div>Hello World</div>';
<footer>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</footer>
2) If you wish to just modify the text, without changing the HTML, you can also make use of the following:
document.getElementsByTagName('footer')[0].innerText = 'Hello World';
document.getElementsByTagName('footer')[0].innerText = 'Hello World';
<footer>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</footer>
The difference between the two approaches is that the former keeps the text inside the div while the latter keeps inside footer tag itself.
If you look through inspection in the two, it will have an output like the below:
1)
<footer>
<div>
Hello World
</div>
</footer>
2)
<footer>
Hello World
</footer>
What is the best way of looping through a text block to find the index position of every element starting with icon- using javascript or jQuery.
I also want to ignore any <br> tags in the index position calculation.
I have thought about using substring to find the position of the elements.
Here is an example text block
<div class="intro">
Lorem dolor sit<br>
<span class="icon-pin"></span> consectetur<br>
adiposcing elit, sed do <span class="icon-hand"></span> lorem<br>
ipsum dolor sit amet.
</div>
What I want to get out of this is how many characters in (minus white space and tags) each [class^=icon-] is.
For example the first [class^=icon-] is 14 characters in
Thanks
I think this is what your looking for, it will find the index of the spans and ignore br
$(".intro [class^=icon-]").each(function() {
var i = $(".intro *:not(br)").index(this)
console.log(i)
})
Demo
$(".intro [class^=icon-]").each(function() {
var i = $(".intro *:not(br)").index(this)
console.log(i)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="intro">
Lorem dolor sit<br>
<span class="icon-pin"></span> consectetur<br> adiposcing elit, sed do <span class="icon-hand"></span> lorem<br> ipsum dolor sit amet.
</div>
You can achieve it with jquery each like in the example
$('[class^="icon-"]','.intro').each(function(index, element){
console.log(index,element);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="intro">
Lorem dolor sit<br>
<span class="icon-pin"></span> consectetur<br>
adiposcing elit, sed do <span class="icon-hand"></span> lorem<br>
ipsum dolor sit amet.
</div>
You can use more than 1 classes on a element. So, You can keep using your "icon-" classes and add another one to capture them like "grabber" and now you are good to go. Just find the "grabber" classes with a for loop like;
var y = "number of grabbers";
for(x:0;x<y;x++){
$('.grabber')[x].function.....
}
With this regular expression :
/lorem(?=[\s,;\[\]\(\)]*ipsum)/ig
It matches "lorem" that is followed by "ipsum" with/without " ,;][)(" characters.
Example text: Lorem ipsum dolor sit amet, Lorem; ipsum dolor sit amet, Lorem,; (ipsum) dolor sit amet, Lorem dolor sit amet, Lorem amet.
if I use ?: instead of ?= it matches whole text from "lorem" to end of "ipsum" such as "Lorem ipsum", "Lorem; ipsum", "Lorem,; (ipsum" , etc... .
Now I want to Regex match both "lorem" and "ipsum" without matching " ,;][)(" characters. How I modify the expression to do this?
/lorem(?=[\s,;\[\]\(\)]*(ipsum))/gmi
demo here