I have to figure out how to display paragraphs that each word in the paragraph has its own hover function(comment).
Here is how the page looks like right now. I want to display the left text in paragraphs as I have in the right text. the first one is the translation and the second one is the original text.
The thing is that I need to have a hover function on the first text for every word. It is already done this is how it looks and it's working for each word:
so to explain it better we have paragraphs and every word in paragraphs has to have the hover function with some comments.
The main task is to display the words in paragraphs and not like it is the first picture, but like this:
This is my code right now which displays text like it's in the first picture, so not in paragraphs but every word on a new line with hover function:
declare function letter:text_orig($node as node(), $model as map())
{
let $resource := collection('/db/apps/Tobi-oshki/data')
let $xml_id := letter:text_people('/db/apps/Tobi-oshki/data')
for $rs in $resource//tei:rs
for $id in $xml_id
return
if (data($rs/#key) eq $id)
then
<html>
<div data-toggle="tooltip" data-placement="top"
title="{letter:text_lem(data($rs/#key))}"> {$rs}</div>
</html>
else
"" };
the XML file looks like this:
<div type="original" xml:lang="ka">
<pb f="1r" n="1" xml:id="pb-orig-1r-1" facs="#zone-pb-1r-1"/>
<lb n="2" xml:id="l-1"/>
<ab>[7125.5]<rs type="pers" key="320">ენემ<supplied reason="lost">ეს</supplied>[7125.1]არისთა</rs>,
<rs type="pers" key="1643">მეფისა </rs>
<rs type="pers" key="251">თეზბეთ</rs>,
<rs type="pers" key="243">ზემო-კერძო</rs>
<rs type="pers" key="245">ასერსა</rs>.
</ab>
so ab tag is a paragraph and rs tag is a word.
Do you have any idea how can I display paragraphs with each word having its hover function?
It sounds to me as if you want e.g.
for $ab in $resource//tei:ab
return
<p>
{
for $rs in $ab/tei:rs
return <span data-toggle="tooltip" data-placement="top"
title="{letter:text_lem(data($rs/#key))}">{$rs/data()}</span>
}
</p>
I haven't figured out what the id check is doing so you might need to adjust the above, but it "maps" an ab to a p element.
Related
I am creating an Oxygen framework to display XML data in Oxygen XML Author's author mode. This is part of the XML I have with two nodes <ab> in it:
<TEI>
<text>
<body>
<div n="A">
<ab xml:id="n_d2e23" type="person">
<seg type="name">
<persName>
<surname>Aarberg</surname>,
<forename>Peter von</forename>
</persName>
<roleName>König</roleName>
(<date from="ca. 1300" to="vor 1372">ca. 1300–vor 1372</date>)
</seg>
<seg type="affiliations">
<list>
<item>
<affiliation role="CEO" hkg:orgKey="#n_123_456">Best CEO they ever had</affiliation>
</item>
</list>
</seg>
</ab>
<ab xml:id="n_123_456" source="SW_EB" type="organization">
<seg type="name">
<orgName>Altenburger Hofdruckerei</orgName>
</seg>
</ab>
</div>
</body>
</text>
</TEI>
The first <ab> node has an attribute hkg:orgKey="#n_123_456" which is referring to the second <ab> node's attribute xml:id="n_123_456". I use the following CSS to display the value of <orgName> of the second <ab> node in the visual representation of the first <ab> node in Oxygen XML Author:
affiliation:after {
content: " role: " oxy_textfield(
edit, "#role")
" Organization ID: " oxy_textfield(
edit, "#hkg:orgKey")
"Organization name: " oxy_xpath(
"/TEI/text/body/div/ab[#xml:id='n_123_456']/seg[#type='name']/orgName/text()"
)
" " oxy_url("gfx/link_register.png");
link: attr("hkg:orgKey")
}
This works fine and the value of <orgName> of the 2nd <ab> node, in fact "Altenburger Hofdruckerei", is displayed within the first <ab> node - as long as I use the concrete value hkg:orgKey="#n_123_456". But now I need to create the line
/TEI/text/body/div/ab[#xml:id='n_123_456']/seg[#type='name']/orgName/text()
dynamically which means: Instead of the specific value xml:id=n_123_456 it should use whatever the value of the attribute #hkg:orgKey of the node <ab> of the 1st element <ab> is. I tried this:
/TEI/text/body/div/ab[#xml:id=#hkg:orgKey]/seg[#type='name']/orgName/text()
but it doesn't work. I also tried other variations like ab[#xml:id='#hkg:orgKey'] or ab[#xml:id=attr('hkg:orgKey')] and many more but none of them gave me the expected result.
Maybe it is a syntax problem. I really hope there will be a solution to this and I would be very thankful for assistance. Any help is appreciated.
I tried to send as much code as needed but of course shortened some parts not relevant in this context. If something is missing (or too much) please let me know.
Thanks in advance.
I will assume you have already declared in the CSS a mapping for the "hkg" prefix like:
#namespace hkg "someNamespace";
I would replace:
link: attr("hkg:orgKey")
with:
link: attr(hkg|orgKey);
because in CSS you refer to namespaced elements with "prefix|elementName" instead of "prefix:elementName".
As for the main question, this line:
oxy_xpath("/TEI/text/body/div/ab[#xml:id='n_123_456']/seg[#type='name']/orgName/text()")
with:
oxy_xpath(oxy_concat("/TEI/text/body/div/ab[#xml:id='", oxy_substring(attr(hkg|orgKey), 1), "']/seg[#type='name']/orgName/text()"))
I'm using oxy_concat to step outside of the string literal, evaluate the attribute value and use its value in the larger XPath expression. I used "oxy_substring" to remove the "#" from the attribute reference.
I'm scraping an HTML page but I'm trying to get one section of the page. There are no classes, id's or anything super useful I can plug into Cheerio I feel like (I'm new to this, so I know my ignorance plays a part).
The code looks like this.
<b> Here's some text I don't want</b>
<b> More text I don't want</b>
<hr style="width:90%; padding: 0>
<b> text I want </b>
<b> text I want </b>
<b> text I want </b>
<b> text I want </b>
<hr style="width:90%; padding: 0>
<b> Here's some text I don't want</b>
<b> More text I don't want</b>
Is there a way to grab the HTML between the two <hr> elements with Cheerio? Both elements are exactly the same.
You can start at the first hr and iterate next() until you get to the second one:
let el = $('hr').first()
while(el = el.next()){
if(el.length === 0 || el.prop('tagName') === 'HR') break
text += el.text() + "\n"
}
If you can ascertain which nth to use you could try nth-of-type selector e.g.
hr:nth-of-type(1)
You might also be able to use nth-child
Using chrome to inspect I see some code like this:
<div class="entry-content">
<p>We .... </p>
</div>
<footer class="entry-footer">
</footer>
Sometimes this footer is empty, and at other's it isn't.
When it is empty I try to hide it with:
footer.entry-footer:empty {
display:none;
}
but it doesn't work.
So I am either doing something wrong (or I guess it isn't really empty!)
:empty requires the element to be empty of whitespace too.
Here is an example, .test.blue and .test.red have white space and don't display: none; (without the JS below, where .test.red becomes hidden)...
if you want to remove the white space post load, here is some JS to do that:
var empties = document.querySelectorAll( '[selector_here]' );
for ( key in empties ) {
if ( typeof empties[key].innerHTML != "undefined" ) empties[key].innerHTML = empties[key].innerHTML.trim()
}
The JS above trims the the whitespace from any element matching the given selector, in my example I used the class empty (you can see it working on .test.red)
But i would recommend removing it from the HTML
I did a quick test for you and it would seem that white space counts as content. Beginning your closing tag on a new line will quietly insert a newline character, so which is why your selector for :empty fails.
As a solution, your html should be look like the following:
<footer class="entry-footer"></footer>
Because there's literally nothing between the start and end tags, the element passes as being :empty
i want to find all timecodes in my content area and build a simple link around it, so i can jump to a specific timecode on my Wordpress Mediaelement.
How can I do this so it finally looks like:
<div class="timecodes">
<li>
**<a class="go-to-time">**15:30**</a>** "Title"
</li>
</div>
I figured it out by myself, here is my solution:
var str=document.getElementById("timecodes").innerHTML;
var n=str.replace(/[0-9][0-9][:][0-9][0-9]/gi,function myFunction(x){return "<a class='go-to-time'>" + x + "</a>";});
document.getElementById("timecodes").innerHTML=n;
I am using a Wordpress 3rd party theme and it limits me because for customization i need to (guess what) pay even more... even for small things like this...
I have this class which shows me the "€" currency sign after the price "1000 €"
But i have a price range like this: 1000 - 2000 €
How can I put the currency sign after the 1000, so it will look like this (1000 € - 2000 €) ??
HTML code :
<span class="post-rice"><span class="text">Prices:</span>6000 - 7000</span>
At this moment i use this CSS code:
.post-rice:after{content:"€";}
.post-rice:before{content:"€";}
But with those CSS codes I have the price like this:( € 1000 - 2000 € ) ... The :before method is not correct. Can you please give me an advice ?
Something like this is probably what you are looking for. Right now the HTML interprets your span as one block of text, so the :before selector will put content in front of the whole text block.
HTML
<span class="post-rice">
<span class="text">Prices:</span>
<span class="price">6000</span> - <span class="price">7000</span>
</span>
CSS
.price::after {
content: "€" // alternatively use "content: €"
}