Extract Elements While Excluding Other Elements 1

[JBorges]

Hi.

Is it possible to extract only the text of a tag element while excluding the tags that are children of the parent tag? Like, how can I get the text without getting the links that are named 'M'?

Right now I can get the text of the tag named 'vs' using this code:

document.getElementsByTagName('vs')[0].innerText

But that includes the links, the M's, when I extract it into a textfield.

 <vs>Lorim ipsum Lorim ipsum Lorim ipsum Lorim ipsum Lorim ipsum,<a onclick="showCrossRef('PopUp1');" id="CR">M</a>
            <div id="PopUp1" class="PopUp">
                <a href="PseudoLink1.html">Link 1</a>; 
                <a href="PseudoLink2.html">Link2</a>; 
            </div>
        
       Lorim ipsum Lorim ipsum Lorim ipsum Lorim ipsum Lorim ipsum<a onclick="showCrossRef('PopUp2');" id="CR" >M</a>
        <div id="PopUp2" class="PopUp">
                  <a href="PseudoLink3.html">Link 3</a>; 

        </div>
        
       Lorim ipsum Lorim ipsum Lorim ipsum Lorim ipsum Lorim ipsum,<a onclick="showCrossRef('PopUp3');" id="CR" >M</a>
        <div id="PopUp3" class="PopUp">
                 <a href="PseudoLink4.html">Link 4</a>; 
                 <a href="PseudoLink5.html">Link5</a>; 
                <a href="PseudoLink6.html">Link 6</a>; 

        </div>
   
        </vs>

 

[feherke]

Hi

Nope. You will have to code it yourself. In standard compliant browsers this function will work ( if you pass the node reference as parameter ):

[b]function[/b] [COLOR=darkgoldenrod]getonlytext[/color][teal]([/teal]what[teal])[/teal]
[teal]{[/teal]
  [b]var[/b] result[teal]=[/teal][green][i]'[/i][/green]

  [b]for[/b] [teal]([/teal][b]var[/b] i[teal]=[/teal][purple]0[/purple][teal],[/teal]l[teal]=[/teal]what[teal].[/teal]childNodes[teal].[/teal]length[teal];[/teal]i[teal]<[/teal]l[teal];[/teal]i[teal]++)[/teal]
    [b]if[/b] [teal]([/teal]what[teal].[/teal]childNodes[teal][[/teal]i[teal]].[/teal]nodeType[teal]==[/teal]Node[teal].[/teal]TEXT_NODE[teal])[/teal]
     result[teal]+=[/teal]what[teal].[/teal]childNodes[teal][[/teal]i[teal]].[/teal]textContent

  [b]return[/b] result
[teal]}[/teal]

For Explorer, you will have to modify it. ( Explorer uses innerText instead of [tt]textContent[/tt] and has no idea that [tt]Node.TEXT_NODE[/tt] is 3. )


Feherke.

 

[JBorges]

Thanks Feherke for your reply.

However, it didn't extract the text. Actually nothing happens when I implement it using onclick="getonlytext(this);". I thought var result=' was a typo and changed it to the code below.
What could I be doing wrong?

function getonlytext(what)
{
  var result;

  for (var i=0,l=what.childNodes.length;i<l;i++)
    if (what.childNodes[i].nodeType==Node.TEXT_NODE)
     result+=what.childNodes[i].textContent

  alert(result);
}

 

[feherke]

Hi

However, it didn't extract the text.

It does for me in Gecko, Presto and WebKit.

Actually nothing happens when I implement it using onclick="getonlytext(this);".

How ? It works for me. See it on

http://jsfiddle.net/YrDVx/

.

( Note that I just put there a guess based on your previous half sentences. Presto not likes the [tt]onclick[/tt] on unknown tags, but if you change vs to [tt]div[/tt] will work in Presto too. In Gecko and WebKit will work even with vs. )

I thought var result=' was a typo and changed it to the code below.

Nope. That is the Tek-Tips engine's temporary defect : it eats on single quote ( ' ) out of two or more.


Feherke.

 

[JBorges]

Thanks Feherke! I got it to work. The first variable missed the second apostrophe. I have an additional inquiry:

1) How can I remove the line breaks created by the tags and line up the text in one flow?

2) How would you expand the loop to go 2 more levels down?
<firstTag>Lorum ipsum....</firstTag>
<secondTag>Lorum ipsum....</secondTag>
<thirdTag>Lorum ipsum....</thirdTag>
<fourthTag>Lorum ipsum, Lorum ipsum, Lorum ipsum, Lorum ipsum, Lorum ipsum, Lorum ipsum, Lorum ipsum, Lorum ipsum.</fourthTag> <-- Extract the text of the 4th tag

 

[feherke]

Hi

1) How can I remove the line breaks created by the tags and line up the text in one flow?

The easiest is to alter it at the end, when [tt]return[/tt]ing it :

[b]return[/b] result[highlight][teal].[/teal][COLOR=darkgoldenrod]replace[/color][teal]([/teal][fuchsia]/\s+/g[/fuchsia][teal],[/teal][green][i]' '[/i][/green][teal])[/teal][/highlight]

2) How would you expand the loop to go 2 more levels down?

Huh ? That sounds strange. Why not just call the function again passing a reference to the other element you want to process ? Or show some exact samples. I mean,
[ul]
[li]both the HTML to process and the related desired result,[/li]
[li]valid HTML,[/li]
[li]specify where the function will be called and what parameter should receive.[/li]
[/ul]


Feherke.

 

[JBorges]

Thanks Feherke. It extracts the text in one text flow

Okay, here's a full sample of what I'm working with. I'm interested in getting only the text marked in red nested in the 'vs' tag while excluding the links.

<bs href="1:1" onClick="getVerse='('+document.title+this.id+') '+ getonlytext(this); + getCR();">

    <b id="uncial">1</b>
</bs>

 
        <vs id="1:1" onClick="getVerse='('+document.title+this.id+') '+ getonlytext(this); + getCR();">[red]I kong Dari'us’ andet år,[/red]<a onclick="showCrossRef('PopUp1');" id="CR">M</a>
            <div id="PopUp1" class="PopUp">
                <a href="ezr.html#4:24">Ezra 4:24</a>; 
                <a href="zec.html#1:1">Zakarias 1:1</a>
            </div>
        
        [red]i den sjette måned, på den første dag i måneden, kom Jehovas ord ved profeten Hag'gaj[/red]<a onclick="showCrossRef('PopUp2');" id="CR" >M</a>
        <div id="PopUp2" class="PopUp">
            <a href="ezr.html#5:1">Ezra 5:1</a>; 
            <a href="ezr.html#6:14">Ezra 6:14</a>; 
        </div>
        
       [red] til Zerubba'bel,[/red]<a onclick="showCrossRef('PopUp3');" id="CR" >M</a>
        <div id="PopUp3" class="PopUp">
            <a href="1ch.html#3:19">1 Krøn. 3:19</a>; 
            <a href="ezr.html#3:2">Ezra 3:2</a>;
            <a href="ezr.html#5:2">Ezra 5:2</a>;
            <a href="mt.html#1:12">Mattæus 1:12</a>
        </div>
        
        </vs>

 

[feherke]

Hi

Again, it works to me. At least if your goal is what I suppose to be. ( Still not clear what are you doing with those ( occasionally missing ) [tt]id[/tt]s. )
[ul]
[li]When clicking on the bold 1, sets the getVerse variable's value to [tt]"() "[/tt].[/li]
[li]When clicking on the long text, sets the getVerse variable's value to [tt]"(1:1) I kong Dari'us' andet år, i den sjette måned, på den første dag i måneden, kom Jehovas ord ved profeten Hag'gaj til Zerubba'bel, "[/tt].[/li]
[/ul]
By the way, are you sure that + getCR() will do what you expect ? As is there, the [tt]+[/tt] sign is quite useless.


Feherke.

 

[JBorges]

Perhaps I wasn't too clear in the last post. I'd like the text to be extracted when I press the bold 1 number, not the long text. That's why I asked how to extend the loop function to deeper levels.

The getCR() method is a way to call objective-c from JS and yes the + sign is superfluous. (I'm working on an iPhone app. Perhaps I should have mentioned that earlier. Sorry for that). The 'M' is superscripted and when tapped it opens a popup window where you can select verses related to the verse in question.

If I call the getonlytext() method in the 'bs' tag it doesn't extract the text of the 'vs' tag. It only extracts the text if I call the method from the 'vs' tag.

<bs href="1:1" onClick="getVerse='('+document.title+this.id+') '+ getonlytext(this); getCR();">

    <b id="uncial">1</b>
</bs>

 
        <vs>[red]I kong Dari'us' andet år,[/red]<a onclick="showCrossRef('PopUp1');" id="CR">M</a>
            <div id="PopUp1" class="PopUp">
                <a href="ezr.html#4:24">Ezra 4:24</a>; 
                <a href="zec.html#1:1">Zakarias 1:1</a>
            </div>
        
        [red]i den sjette måned, på den første dag i måneden, kom Jehovas ord ved profeten Hag'gaj[/red]<a onclick="showCrossRef('PopUp2');" id="CR" >M</a>
        <div id="PopUp2" class="PopUp">
            <a href="ezr.html#5:1">Ezra 5:1</a>; 
            <a href="ezr.html#6:14">Ezra 6:14</a>; 
        </div>
        
        [red]til Zerubba'bel,[/red]<a onclick="showCrossRef('PopUp3');" id="CR" >M</a>
        <div id="PopUp3" class="PopUp">
            <a href="1ch.html#3:19">1 Krøn. 3:19</a>; 
            <a href="ezr.html#3:2">Ezra 3:2</a>;
            <a href="ezr.html#5:2">Ezra 5:2</a>;
            <a href="mt.html#1:12">Mattæus 1:12</a>
        </div>
        
        </vs>

 

[feherke]

Hi

If I call the getonlytext() method in the 'bs' tag it doesn't extract the text of the 'vs' tag.

It does, if you pass a reference to the vs tag as parameter. ( In your previous code it had one... )

[b]<bs[/b] [maroon]href[/maroon][teal]=[/teal][green][i]"1:1"[/i][/green] [maroon]onClick[/maroon][teal]=[/teal][green][i]"getVerse='('+document.title+this.id+') '+ getonlytext([highlight]document.getElementById('identifier_of_vs_tag')[/highlight]); getCR();"[/i][/green][b]>[/b]

    [b]<b[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"uncial"[/i][/green][b]>[/b]1[b]</b>[/b]
[b]</bs>[/b]

        [b]<vs[/b] [highlight][maroon]id[/maroon][teal]=[/teal][green][i]"identifier_of_vs_tag"[/i][/green][/highlight][b]>[/b]I kong Dari'us' andet år,[b]<a[/b] [maroon]onclick[/maroon][teal]=[/teal][green][i]"showCrossRef('PopUp1');"[/i][/green] [maroon]id[/maroon][teal]=[/teal][green][i]"CR"[/i][/green][b]>[/b]M[b]</a>[/b]
            [b]<div[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"PopUp1"[/i][/green] [maroon]class[/maroon][teal]=[/teal][green][i]"PopUp"[/i][/green][b]>[/b]
                [b]<a[/b] [maroon]href[/maroon][teal]=[/teal][green][i]"ezr.html#4:24"[/i][/green][b]>[/b]Ezra 4:24[b]</a>[/b];
[gray]<!-- ... -->[/gray]

This sets the getVerse variable to [tt]"() I kong Dari'us' andet år, i den sjette måned, på den første dag i måneden, kom Jehovas ord ved profeten Hag'gaj til Zerubba'bel, "[/tt].

Note that it the vs tag to extract from always follows the bs tag to click, then is could be referred without [tt]id[/tt], using the [tt]nextSibling[/tt] DOM property.


Feherke.

 

[JBorges]

Finally, it works. Thanks Feherke for your patience and great help. I have to read up on the DOM tree structure to better understand it.

I was thinking whether there is a better way to write this function, or is it acceptable JS code?

onClick="getVerse='('+document.title+this.id+')

The code gets the title of the HTML document and the id of the currently selected tag. Would it be better to write a loop to get the currently tapped tag?

 

[feherke]

Hi

I was thinking whether there is a better way to write this function, or is it acceptable JS code?

onClick="getVerse='('+document.title+this.id+')

Your bs tag has no [tt]id[/tt], so [tt]this.id[/tt]'s value in its event handler will be empty.

( Unrelated thinking aloud...

I suppose all [tt]div[/tt].PopUp's will be hidden by default and showCrossRef() will show only the one for which the user tapped the "M" link. Honestly, I find that abit convoluted. I would keep the references as data and transform them into HTML links only on demand. Something like this :

[b]<vs>[/b]
I kong Dari'us' andet år,[b]<a[/b] [maroon]onclick[/maroon][teal]=[/teal][green][i]"showCrossRef(['ezr 4:24','zec 1:1'])"[/i][/green] [maroon]class[/maroon][teal]=[/teal][green][i]"CR"[/i][/green][b]>[/b]M[b]</a>[/b]

i den sjette måned, på den første dag i måneden, kom Jehovas ord ved profeten Hag'gaj[b]<a[/b] [maroon]onclick[/maroon][teal]=[/teal][green][i]"showCrossRef(['ezr 5:1','ezr 6:14'])"[/i][/green] [maroon]class[/maroon][teal]=[/teal][green][i]"CR"[/i][/green][b]>[/b]M[b]</a>[/b]

til Zerubba'bel,[b]<a[/b] [maroon]onclick[/maroon][teal]=[/teal][green][i]"showCrossRef(['1ch 3:19','ezr 3:2','ezr 5:2','mt 1:12'])"[/i][/green] [maroon]class[/maroon][teal]=[/teal][green][i]"CR"[/i][/green][b]>[/b]M[b]</a>[/b]
[b]</vs>[/b]

Note that [tt]id[/tt]s should be unique, otherwise they may lead to strange errors. )


Feherke.

 

[JBorges]

You suppose correctly concerning the popups. The idea of creating the links on demand sounds logical and easier to write as you add more cross references. Yet, how do you create links on demands?

 

[feherke]

Hi

Yet, how do you create links on demands?

Well, that may depend on how showCrossRef() displayed the links.

The easiest way is to just compose the HTML string. This returns as string with HTML source, use it by assigning it to an element's [tt]innerHTML[/tt] :

[b]var[/b] book[teal]=[/teal][teal]{[/teal]
  [green][i]'1ch'[/i][/green][teal]:[/teal][green][i]'1 Krøn.'[/i][/green][teal],[/teal]
  [green][i]'ezr'[/i][/green][teal]:[/teal][green][i]'Ezra'[/i][/green][teal],[/teal]
  [green][i]'mt'[/i][/green][teal]:[/teal][green][i]'Mattæus'[/i][/green][teal],[/teal]
  [green][i]'zec'[/i][/green][teal]:[/teal][green][i]'Zakarias'[/i][/green][teal],[/teal]
[teal]}[/teal]

[b]function[/b] [COLOR=darkgoldenrod]showCrossRef[/color][teal]([/teal]what[teal])[/teal]
[teal]{[/teal]
  [b]var[/b] html[teal]=[/teal][green][i]''[/i][/green]

  [b]for[/b] [teal]([/teal][b]var[/b] i[teal]=[/teal][purple]0[/purple][teal],[/teal]l[teal]=[/teal]what[teal].[/teal]length[teal];[/teal]i[teal]<[/teal]l[teal];[/teal]i[teal]++)[/teal]
    html[teal]+=[/teal]what[teal][[/teal]i[teal]].[/teal][COLOR=darkgoldenrod]replace[/color][teal]([/teal][fuchsia]/(\w+) (.+)/[/fuchsia][teal],[/teal][b]function[/b] [teal]([/teal]p0[teal],[/teal]p1[teal],[/teal]p2[teal])[/teal] [teal]{[/teal]
      [b]return[/b] [green][i]'<a href="'[/i][/green][teal]+[/teal]p1[teal]+[/teal][green][i]'.html#'[/i][/green][teal]+[/teal]p2[teal]+[/teal][green][i]'">'[/i][/green][teal]+[/teal]book[teal][[/teal]p1[teal]]+[/teal][green][i]' '[/i][/green][teal]+[/teal]p2[teal]+[/teal][green][i]'</a>;[/i][/green][lime][i]\n[/i][/lime][green][i]'[/i][/green]
    [teal]}[/teal][teal])[/teal]

  [b]return[/b] [green][i]'<div id="PopUp">[/i][/green][lime][i]\n[/i][/lime][green][i]'[/i][/green][teal]+[/teal]html[teal]+[/teal][green][i]'</div>'[/i][/green]
[teal]}[/teal]

The somehow complicated way is to instantiate DOM nodes. This returns a HTML fragment, use it by adding it to and element with [tt]insertBefore()[/tt] or [tt]appendChild()[/tt] ( or the HTML5 [tt]insertAdjacentHTML()[/tt] ) :

[b]function[/b] [COLOR=darkgoldenrod]showCrossRef[/color][teal]([/teal]what[teal])[/teal]
[teal]{[/teal]
  [b]var[/b] div[teal]=[/teal]document[teal].[/teal][COLOR=darkgoldenrod]createElement[/color][teal]([/teal][green][i]'div'[/i][/green][teal])[/teal]

  [b]for[/b] [teal]([/teal][b]var[/b] i[teal]=[/teal][purple]0[/purple][teal],[/teal]l[teal]=[/teal]what[teal].[/teal]length[teal];[/teal]i[teal]<[/teal]l[teal];[/teal]i[teal]++)[/teal] [teal]{[/teal]
    [b]var[/b] a[teal]=[/teal]document[teal].[/teal][COLOR=darkgoldenrod]createElement[/color][teal]([/teal][green][i]'a'[/i][/green][teal])[/teal]
    [b]var[/b] part[teal]=[/teal]what[teal][[/teal]i[teal]].[/teal][COLOR=darkgoldenrod]split[/color][teal]([/teal][green][i]' '[/i][/green][teal])[/teal]
    a[teal].[/teal]href[teal]=[/teal]part[teal][[/teal][purple]0[/purple][teal]]+[/teal][green][i]'.html#'[/i][/green][teal]+[/teal]part[teal][[/teal][purple]1[/purple][teal]][/teal]
    a[teal].[/teal]innerHTML[teal]=[/teal]book[teal][[/teal]part[teal][[/teal][purple]0[/purple][teal]]]+[/teal][green][i]' '[/i][/green][teal]+[/teal]part[teal][[/teal][purple]1[/purple][teal]][/teal]
    div[teal].[/teal][COLOR=darkgoldenrod]appendChild[/color][teal]([/teal]a[teal])[/teal]
  [teal]}[/teal]

  [b]return[/b] div
}

The tricky way is to use a template library, like mustache.js. But that would impose some structuring on the data, not really comfortable in this case.


Feherke.

 

[JBorges]

Thanks Feherke. I really appreciate your help. I've been fiddling with it for a while and can't seem to get it to pop up the divs with the created links when 'M' is tapped. This is what I have:

<style type="text/css">
#PopUp {
    display: none; 
    position: absolute; 
    left: auto; 
    top: auto; 
    width: auto;  
    border: solid black 0px; 
    padding: 4px; 
    background-color: #BDE5F8; /*#DFF2BF = green, #FEEFB3 = yellow, #BDE5F8 = blue ; */
    text-align: left; 
    color: black;
    font: normal 13px Helvetica;
    z-index: 1;
    border-radius: 4px; /* round box corners */
    -webkit-box-shadow: 0px 1px 2px 2px gray; /* x, y, blur, spread, color */

}

a#CR {
    font-family: Helvetica;
    font-size: 10px;
    color: black;
    font-weight: bold;
    vertical-align: text-top;
}
</style>

<script type="text/javascript">
var book={
  '1ch':'1 Krøn.',
  'ezr':'Ezra',
  'mt':'Mattæus',
  'zec':'Zakarias',
}

function showCrossRef(what)
{
  var html='

  for (var i=0,l=what.length;i<l;i++)
    html+=what[i].replace(/(\w+) (.+)/,function (p0,p1,p2) {
      return '<a href="'+p1+'.html#'+p2+'">'+book[p1]+' '+p2+'</a>;\n'
    })

  return '<div id="PopUp">\n'+html+'</div>'
}
</script>

<body>
<vs>
I kong Dari'us' andet år,<a onclick="showCrossRef(['ezr 4:24','zec 1:1'])"  id="PopUp1" class="CR">M</a>

i den sjette måned, på den første dag i måneden, kom Jehovas ord ved profeten Hag'gaj<a onclick="showCrossRef(['ezr 5:1','ezr 6:14'])"  id="PopUp2" class="CR">M</a>

til Zerubba'bel,<a onclick="showCrossRef(['1ch 3:19','ezr 3:2','ezr 5:2','mt 1:12'])"  id="PopUp3" class="CR">M</a>
</vs>
</body>

 

[feherke]

Hi

Ah, I see. Sorry, I got mislead by those PopUp [tt]id[/tt]s. So they are not related to popup windows. Then abit more code is needed.

Even more, this raises some newer functionality questions :
[ul]
[li]How many [tt]div[/tt]s with cross references can be displayed simultaneously ? ( In the below code I assumed 1. )[/li]
[li]How can the [tt]div[/tt]s with cross references be hide ? ( In the blow code I hide it [tt]onclick[/tt] on an empty area of the [tt]div[/tt]. Just for the example, not really practical. )[/li]
[/ul]
I would use a voyager [tt]div[/tt] ( dumb term coined by me ) : a single [tt]div[/tt] for all cases, moved where it is just needed.

[highlight][b]var[/b] popup[/highlight]

[b]function[/b] [COLOR=darkgoldenrod]showCrossRef[/color][teal]([/teal][highlight]where[teal],[/teal][/highlight]what[teal])[/teal]
[teal]{[/teal]
  [b]var[/b] html[teal]=[/teal][green][i]'[/i][/green]
  [highlight][b]if[/b] [teal](![/teal]popup[teal])[/teal] popup[teal]=[/teal]document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'PopUp'[/i][/green][teal])[/teal][/highlight]

  [b]for[/b] [teal]([/teal][b]var[/b] i[teal]=[/teal][purple]0[/purple][teal],[/teal]l[teal]=[/teal]what[teal].[/teal]length[teal];[/teal]i[teal]<[/teal]l[teal];[/teal]i[teal]++)[/teal]
    html[teal]+=[/teal]what[teal][[/teal]i[teal]].[/teal][COLOR=darkgoldenrod]replace[/color][teal]([/teal][fuchsia]/(\w+) (.+)/[/fuchsia][teal],[/teal][b]function[/b] [teal]([/teal]p0[teal],[/teal]p1[teal],[/teal]p2[teal])[/teal] [teal]{[/teal]
      [b]return[/b] [green][i]'<a href="'[/i][/green][teal]+[/teal]p1[teal]+[/teal][green][i]'.html#'[/i][/green][teal]+[/teal]p2[teal]+[/teal][green][i]'">'[/i][/green][teal]+[/teal]book[teal][[/teal]p1[teal]]+[/teal][green][i]' '[/i][/green][teal]+[/teal]p2[teal]+[/teal][green][i]'</a>;[/i][/green][lime][i]\n[/i][/lime][green][i]'[/i][/green]
    [teal]}[/teal][teal])[/teal]

  [highlight]popup[teal].[/teal]innerHTML[teal]=[/teal]html[/highlight]
  [highlight]where[teal].[/teal]parentNode[teal].[/teal][COLOR=darkgoldenrod]insertBefore[/color][teal]([/teal]popup[teal],[/teal]where[teal].[/teal]nextSibling[teal])[/teal][/highlight]
  [highlight]popup[teal].[/teal]style[teal].[/teal]display[teal]=[/teal][green][i]'inline-block'[/i][/green][/highlight]
[teal]}[/teal]

<vs>
I kong Dari'us' andet år,[b]<a[/b] [maroon]onclick[/maroon][teal]=[/teal][green][i]"showCrossRef([highlight]this,[/highlight]['ezr 4:24','zec 1:1'])"[/i][/green] [maroon]class[/maroon][teal]=[/teal][green][i]"CR"[/i][/green][b]>[/b]M[b]</a>[/b]

i den sjette måned, på den første dag i måneden, kom Jehovas ord ved profeten Hag'gaj[b]<a[/b] [maroon]onclick[/maroon][teal]=[/teal][green][i]"showCrossRef([highlight]this,[/highlight]['ezr 5:1','ezr 6:14'])"[/i][/green] [maroon]class[/maroon][teal]=[/teal][green][i]"CR"[/i][/green][b]>[/b]M[b]</a>[/b]

til Zerubba'bel,[b]<a[/b] [maroon]onclick[/maroon][teal]=[/teal][green][i]"showCrossRef([highlight]this,[/highlight]['1ch 3:19','ezr 3:2','ezr 5:2','mt 1:12'])"[/i][/green] [maroon]class[/maroon][teal]=[/teal][green][i]"CR"[/i][/green][b]>[/b]M[b]</a>[/b]
[b]</vs>[/b]

[highlight][b]<div[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"PopUp"[/i][/green] [maroon]onclick[/maroon][teal]=[/teal][green][i]"this.style.display='none'"[/i][/green][b]></div>[/b][/highlight]

The CSS is the same you posted, I just changed [tt]a#CR[/tt] to [tt]a.CR[/tt] as CR is now [tt]class[/tt] not [tt]id[/tt].

Feherke.

 

[JBorges]

Thanks Feherke! That works really well. I've implanted the JS in my iPhone app and it works splendidly. Now I'll focus on closing the popup div in a more user friendly way.

One more thing, if you could explain the lines of the function showCrossRef(where,what) in layman's terms then I'd be grateful. It would help me understand JS better.

Thanks again. You've made my app a lot more functional. :-D

/Philip

 

[feherke]

Hi

Explaining is not my strength, that is why I prefer to reply with code. Anyway, here is my try :

[gray]// to minimize the use of getElementById(), will store a reference to the #PopUp div[/gray]
[b]var[/b] popup   [gray]// will be initialized as undefined[/gray]

[b]function[/b] [COLOR=darkgoldenrod]showCrossRef[/color][teal]([/teal]
  where[teal],[/teal]   [gray]// reference to the just clicked "M" link[/gray]
  what   [gray]// array of related verses[/gray]
[teal])[/teal]
[teal]{[/teal]
  [b]var[/b] html[teal]=[/teal][green][i]''[/i][/green]   [gray]// will put the HTML source into this[/gray]

[gray]// if no reference to #PopUp was assigned yet, we set it now[/gray]
  [b]if[/b] [teal](![/teal]popup[teal])[/teal] popup[teal]=[/teal]document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'PopUp'[/i][/green][teal])[/teal]

[gray]// iterate over the array of related verses[/gray]
  [b]for[/b] [teal]([/teal][b]var[/b] i[teal]=[/teal][purple]0[/purple][teal],[/teal]l[teal]=[/teal]what[teal].[/teal]length[teal];[/teal]i[teal]<[/teal]l[teal];[/teal]i[teal]++)[/teal] [teal]{[/teal]
[gray]// transform each verse data into HTML a tag[/gray]
[gray]//   original : '[highlight #fcc]ezr[/highlight][highlight #cfc] [/highlight][highlight #ccf]4:24[/highlight]'[/gray]
[gray]//   regexp   : /([highlight #fcc]\w+[/highlight])[highlight #cfc] [/highlight]([highlight #ccf].+[/highlight])/   // (*)[/gray]
[gray]//   function : function([highlight #ccc]p0[/highlight],[highlight #fcc]p1[/highlight],[highlight #ccf]p2[/highlight]) ...[/gray]
[gray]//   result   : '<a href="[highlight #fcc]ezr[/highlight].html#[highlight #ccf]4:24[/highlight]">Ezra [highlight #ccf]4:24[/highlight]</a>;\n'[/gray]
[gray]// and append the result to the generated HTML source[/gray]
    html[teal]+=[/teal]what[teal][[/teal]i[teal]].[/teal][COLOR=darkgoldenrod]replace[/color][teal]([/teal][fuchsia]/(\w+) (.+)/[/fuchsia][teal],[/teal][b]function[/b] [teal]([/teal]p0[teal],[/teal]p1[teal],[/teal]p2[teal])[/teal] [teal]{[/teal]
      [b]return[/b] [green][i]'<a href="'[/i][/green][teal]+[/teal]p1[teal]+[/teal][green][i]'.html#'[/i][/green][teal]+[/teal]p2[teal]+[/teal][green][i]'">'[/i][/green][teal]+[/teal]book[teal][[/teal]p1[teal]]+[/teal][green][i]' '[/i][/green][teal]+[/teal]p2[teal]+[/teal][green][i]'</a>;[/i][/green][lime][i]\n[/i][/lime][green][i]'[/i][/green]
    [teal]}[/teal][teal])[/teal]
  [teal]}[/teal]

[gray]// put the generated HTML source into the #PopUp div to render it[/gray]
  popup[teal].[/teal]innerHTML[teal]=[/teal]html
[gray]// insert the #PopUp div right after the "M" link[/gray]
[gray]// ( if the element was already part of the document, will be moved )[/gray]
  where[teal].[/teal]parentNode[teal].[/teal][COLOR=darkgoldenrod]insertBefore[/color][teal]([/teal]popup[teal],[/teal]where[teal].[/teal]nextSibling[teal])[/teal]
[gray]// make the #PopUp div appear[/gray]
  popup[teal].[/teal]style[teal].[/teal]display[teal]=[/teal][green][i]'inline-block'[/i][/green]
[teal]}[/teal]

[gray]/*[/gray]
[gray](*) the regular expression means :[/gray]
[gray]    ,------------------ [red]word character[/red] ( letter, digit or underscore )[/gray]
[gray]    |    ,------------- [green]any character excluding newline[/green][/gray]
[gray]   /\,---|,------------ [blue]previous entity 1 or more times[/blue][/gray]
[gray] /[highlight #ffa]([red]\w[/red][blue]+[/blue])[/highlight] [highlight #fda]([green].[/green][blue]+[/blue])[/highlight]/[/gray]
[gray]  \_ _/ \__/[/gray]
[gray]    |     `------------ [highlight #fda]capture group 2[/highlight][/gray]
[gray]    `------------------ [highlight #ffa]capture group 1[/highlight][/gray]
[gray]*/[/gray]

Feherke.

 

[JBorges]

That makes it more clear to me, thank you. Once again thanks for all your help here. I really appreciate it.

/Philip