Hello everone,
Is it possible to highlight and read the sentence by using html if I touch the sentence instead of using Textbox.
We have done this one to death in the last eight months / 5 years....!
To highlight a line / section of text in html you would need to programmatically / dynamically set tags e.g. id, to each section of text you wish to highlight, then run a javascript function to apply the highlight to that identified section of text. Then you would need to pass the selected text position back to the app in order to play the relevant sound file section.
I have tried a lot since that time in order to know how to highlight a line/ a section of text in html by set tags to each section of text I wish to highlight but unfortunettly I couldn't.
This is my last html code. As you can see there is no code for set that tags
@font-face {
font-family: quran2;
src: url('me_quran_volt_newmet.ttf');
}
body {
text-align: justify;
text-justify: inter-word;
background-color: #D9EAE6;
}
.arab1b {
font-size: 18px;
font-family: quran2;
}
.highlight {
background-color: yellow;
}
.div_style_block {
text-align: center;
border-bottom-style: solid;
border-bottom-color: #C0C0C0;
}
.bg_green {
background-color: #D9EAE6;
}
.bg_grey {
background-color: #F0F0F0;
}
.div_style_inline {
display: inline;
}
</style>
<script>
window.smoothScroll = function (target) {
var scrollContainer = target;
do { //find scroll container
scrollContainer = scrollContainer.parentNode;
if (!scrollContainer) return;
scrollContainer.scrollTop += 1;
} while (scrollContainer.scrollTop == 0);
var targetY = 0;
do { //find the top of target relatively to the container
if (target == scrollContainer) break;
targetY += target.offsetTop;
} while (target = target.offsetParent);
scroll = function (c, a, b, i) {
i++;
if (i > 30) return;
c.scrollTop = a + (b - a) / 30 * i;
setTimeout(function () {
scroll(c, a, b, i);
}, 20);
}
// start scrolling
scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
}
</script>
It can be be done something like this:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<head>
<title>Highlight</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h3>Click a text to highlight it</h3>
<p id="p1" onclick="setMark('p1')">One</p>
<p id="p2" onclick="setMark('p2')">Two</p>
<p id="p3" onclick="setMark('p3')">Three</p>
<br><br>
<div id="result"></div>
<script>
function setMark(id) {
var elems = document.querySelectorAll(".highlight");
for(let elem of elems){
elem.classList.remove('highlight');
}
var inputText = document.getElementById(id);
var innerHTML = inputText.innerHTML;
innerHTML = "<span class='highlight'>" + innerHTML + "</span>";
inputText.innerHTML = innerHTML;
document.getElementById("result").innerHTML = "Selected text has id = " + id;
}
</script>
</body>
</html>
1 Like
Thank you so much Tim for help.
How can I add the blocks to apply this code and highlight the text
Would you please make a small example to apply that code.
One
Two
Three
You have already been shown how to do that many times previously. I suggest you review earlier topics, it is all there (and probably a similar example to the one I have just provided too)
1 Like
I don't remember I have been shown how to do that previously and believe me I have searched for more than two hours about that topic but I could not find it at all. As I remember there was topics about a textbox and readerDisplayDynamic
This is my app which is only I have but it has two buttons to highlight the sentence backward and forward instead of click on the sentence that I want to highlight.
Did you look back to all the Google Groups conversations on using html, or spot wherever the webviewstring was used to exchange data between the app and the webviewer? You could also just seach for webviewstring to get some ideas on what you need to do.
Actually, yes, I have looked to
This is not the topic that I am looking for at all. I want to highlight the sentence by clicking on it by using the webviewer during html code
I am not going to write your app for you again.
You have had a variety of solutions provided over the years, once you have one solution you choose to switch to another, then another, then another, then back to the first one again, you always have "one more thing" to add to any solution provided, which then makes it impossible to deliver. I have in the past assisted with solutions out of a personal interest in figuring out how your requests could be achieved, but having done all of that time and again, I have now reached the end of the road.
In the two links of "searches" I posted above, there-in contains everything everyone has done for you, and they provide methods and approaches that can be applied in most settings, of give an indication of where to look for the answers.
To achieve your objective, what ever it eventually becomes, (good planning involves being able to visualise what it will be like when it is finished), you need to research and develop all the methods and approaches you should have learned along the way. This means a good grounding in App Inventor blocks code, html, javascript, css. Go and apply yourself to learning and understanding how these frameworks operate, by themsleves and with each other, then you can build your app.
1 Like