Hierarchy of span outer background controlling - javascript

I have a hierarchy of spans to define different layers of annotations:
<span class="eventRel" id="e12-e32">
<span class="event">
<span class="hl" id="moh">
soluzione
<span style="width:500px;">
tokenid: 11
</span>
</span>
</span>
</span>
Then I have different controllers, to highlight the token with the background property (in this case: soluzione) with different colour.
So, my code is working, just when i have one span layer above the class="hl".
There are the cases that more than 3 spans above the class="hl".
What i do to highlight is:
document.getElementById('e12-e32').style.backgroundColor='white';
this is working just in case:
<span class="event">
<span class="hl" id="moh">
soluzione
<span style="width:500px;">
tokenid: 11
</span>
</span>
</span>
And help in this regards!, thanks in advance.
So my need is to apply this style to have the word soluzione highlighted:
<span class="eventRel" id="e12-e32" style="background-color:yellow;">
<span class="event">
<span class="hl" id="moh">
soluzione
<span style="width:500px;">
tokenid: 11
</span>
</span>
</span>
</span>

I don't know if I correctly understood your issue but to select all descendents you can use:
document.querySelectorAll(".e12-e32")

i applied inline styles,
i think the following code may be helpful ..
<span class="event">
<span class="hl" style="background-color:yellow;">
soluzione
<span style="width:500px;background-color:red;">
tokenid: 11
</span>
</span>
</span>

Here i write what happened, i was trying to highlight the word soluzione if that word is participated to an (annotation layer is a span), so the solution is, to give each (annotation layer=span) a class name, and apply the style on the class name, so my wrong implementation was that i used the id to identify the span, then i had duplications on the id.
So always first when you found that some style doesn't work properly, while changing it, check if there are duplication on the id's.
Because there would be any notification of error, and the changes will just apply on the first element have that id!

Related

User selects first word on line, but Safari selects something different (on website on iOS)

When the user wants to select the first word on the line, Safari selects something different:
User tries to select "practical", but "very practi" is selected
It doesn't make any sense. I have tried this so many times, it's not possible to be just "misclick". It happens in every first word each line.
I have special markup, when every word is one <span> element:
.question {
font-size: 2rem;
width: 230px;
}
<div class="question">
<span data-id="8897">The</span>
<span data-id="12072">coffee</span>
<span data-id="12072">table</span>
<span data-id="651">is</span>
<span data-id="5232">made</span>
<span data-id="5910">of</span>
<span class="test-fill">________</span>.
<span data-id="4357">I</span>
<span data-id="20645">do</span><span data-id="5744">n't</span>
<span data-id="8886">think</span>
<span data-id="4358">it</span><span data-id="651">'s</span>
<span data-id="9580">very</span>
<span data-id="6273">practical</span>.
</div>
I tried other values of user-select, but it doesn't change anything.
Without <span>s it works just fine. But <span>s are important because data-id attribute...

Getting start and end id of highlighted/selected <span> over multiple <span> and <div> elements

Apologies if this has been answered before. I'm trying to get the user's highlighted elements with window.getSelection(), but my text is constructed from a list of in a like this:
<div id="div1">
<span id="span1">Word1</span>
<span id="span2">Word2</span>
<span id="span3">Word3</span>
</div>
<div id="div2">
<span id="span4">Word1</span>
<span id="span5">Word2</span>
<span id="span6">Word3</span>
</div>
Currently, though, window.getSelection only returns the first span object when I test it in the Chrome console.
I want to be able to identify the beginning span id and the end span id of the selection - so if I highlighted the entire block, I would expect some tuple ("span1","span6"). Would really appreciate any help! Thanks so much.

How can I add an event handler to a text node in DOM tree without affecting its style?

I am trying to add event handlers to words in text nodes in DOM tree without modifying how they look.
Currently I just split the words in a text node and wrap them in separate <span> tags.
It basically turn:
<div className='parent-of-text'>
Have a good day
</div>
into:
<div className='parent-of-text'>
<span onClick={doSomething}>
Have
</span>
<span onClick={doSomething}>
a
</span>
<span onClick={doSomething}>
good
</span>
<span onClick={doSomething}>
day
</span>
</div>
However, in some cases, there may be some CSS rules that dictate the style of <span> that are direct descendants of parent-of-text class:
Say:
.parent-of-text > span {
color: red;
}
In cases like this, what can I do to avoid the effects of such CSS rules?
When you generate your span with JS (you didn't show us relevant code) apply inline style on those spans, this will overwrite presented CSS style for that element.
Also this has nothing to do with DOM, JS and event handlers, this is only CSS applying styles issue.
.parent-of-text>span {
color: red;
}
<div class='parent-of-text'>
Have a good day
</div>
<div class='parent-of-text'>
<span onClick={doSomething} style="color: black">
Have
</span>
<span onClick={doSomething}>
a
</span>
<span onClick={doSomething} style="color: black">
good
</span>
<span onClick={doSomething}>
day
</span>
</div>

Angular document.getElementById not working with interpolation dynamically

I have a list of dynamic images that I want to display opacity only when the user hovers over the particular image. My issue is I assign each image an id dynamically but cannot get the property of the element dynamically.
I get and error of Got interpolation ({{}}) where expression was expected
<span *ngFor="let image of imagess">
<img attr.id="Image{{image.id}}"
[src]="sanitizer.bypassSecurityTrustUrl('data:'+image.mimeType+';base64, '+image.frontImage)"
onmouseover="style.opacity=.16;"
onmouseout="style.opacity=1;"
/>
<span onmouseover="document.getElementById('Image'{{image.id}}).style.opacity=.16;"> <----Right here is what I need
//Icons and other things here
</span>
</span>
I would rewrite it to Angular way:
<span *ngFor="let image of images">
<img
...
#img
(mouseover)="img.style.opacity= '.16'"
(mouseout)="img.style.opacity= '1'"
/>
<span
(mouseover)="img.style.opacity= '.16'"
(mouseout)="img.style.opacity= '1'"
>Hover over me</span>
</span>
Ng-run Example

override no-display with jquery

I have the following div in my cshtml (Razor) file, which by default does not display. I want to override the no-display and make it visible using jquery in the associated javascript file, but it does not work. I am calling $(uiElements.divConfirmationMessage).show(), but noting happens. Any advice or help is appreciated.
<p id="divConfirmationMessage" class="success-message message no-display">
<span style="width:50px;" class="fl">
<span class="icon successGreen"></span>
<span> #Session["message"]</span>
#*<span> Hello From Hugh</span>*#
</span>
#*<span class="icon close" style="padding-left:20px" id="spnReserveAcctCloseIcon"></span>*#
</p>
Your question is not clear, but as of my understanding, 'no-display' class has style to hide the element. You can removeClass 'no-display' to show the element as follows.
$('#divConfirmationMessage').removeClass('no-display');
Let me know if I understood wrong

Categories