Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #13163 > unrolled thread

highlight dynamically generated text using javascript

Back to article view | Back to comp.lang.javascript

Contents

  highlight dynamically generated text using javascript hiteshtr <hiteshtr@gmail.com> - 2012-03-30 22:56 -0700
    Re: highlight dynamically generated text using javascript David Mark <dmark.cinsoft@gmail.com> - 2012-03-31 00:24 -0700

#13163 — highlight dynamically generated text using javascript

I am creating a page to show pdf and I used pdf.js project of Mozilla to render pdf.

pdf.js is making multiple dynamic divs of rendered text under canvas tag. I want to highlight some text of my pdf. Following is the code generated dynamically by pdf.js:

<div id="viewer">

<div id="pageContainer1" class="page" style="width: 741.8181818181818px; height: 959.9999999999999px; " data-loaded="true">
<canvas id="page1" width="741" height="959"></canvas>
<div class="textLayer">
<div data-canvas-width="300.69542660606743" data-font-name="Times" style="font-size:12.06334818181817px; left: 173.1905882352941px; top: 8.593899292929294px; -webkit-transform: scale(0.9002857084013994, 1); -webkit-transform-origin-x: 0%; -webkit-transform-origin-y: 0%; " dir="ltr" data-text-length="58">Boston&nbsp;University&nbsp;Computer&nbsp;Science&nbsp;Technical&nbsp;Report&nbsp;No.&nbsp;20</div>
</div>
</div>

<div id="pageContainer2" class="page" style="width: 741.8181818181818px; height: 959.9999999999999px; " data-loaded="true">
<canvas id="page1" width="741" height="959"></canvas>
<div class="textLayer">
<div data-canvas-width="300.69542660606743" data-font-name="Times" style="font-size:12.06334818181817px; left: 173.1905882352941px; top: 8.593899292929294px; -webkit-transform: scale(0.9002857084013994, 1); -webkit-transform-origin-x: 0%; -webkit-transform-origin-y: 0%; " dir="ltr" data-text-length="58">Boston&nbsp;University&nbsp;Computer&nbsp;Science&nbsp;Technical&nbsp;Report&nbsp;No.&nbsp;20</div>
</div>
</div>

</div>

i only want to highlight the text of pageContainer1's text layer

[toc] | [next] | [standalone]

#13164

On Mar 31, 1:56 am, hiteshtr <hites...@gmail.com> wrote:
> I am creating a page to show pdf and I used pdf.js project of Mozilla to render pdf.
>

Interesting. Seeing that it is by "Mozilla", which was co-founded by
the creator of JS, you have to figure...


'use strict';

var globalScope = (typeof window === 'undefined') ? this : window;


Oh no.  The first line indicates that somebody is trying to be really
"strict" about their use of ES5.  No crime there, but mostly useless
(and potentially harmful) for the foreseeable future.  And the second
line...  Uh, well; it indicates that the contributor knows zip about
the language.  That incantation is showing up all over the place and
anyone who would copy it is not to be trusted with any amount of JS
(let alone something like this).

Perhaps this is evidence that two different contributors collaborated
on the first two lines; or, this project is another pasted together
mishmash.  Can't call it as I stopped reading after that.


> pdf.js is making multiple dynamic divs of rendered text under canvas tag. I want to highlight some text of my pdf. Following is the code generated dynamically by pdf.js:

>
> <div id="viewer">
>
> <div id="pageContainer1" class="page" style="width: 741.8181818181818px; height: 959.9999999999999px; " data-loaded="true">
> <canvas id="page1" width="741" height="959"></canvas>
> <div class="textLayer">
> <div data-canvas-width="300.69542660606743" data-font-name="Times" style="font-size:12.06334818181817px; left: 173.1905882352941px; top: 8.593899292929294px; -webkit-transform: scale(0.9002857084013994, 1); -webkit-transform-origin-x: 0%; -webkit-transform-origin-y: 0%; " dir="ltr" data-text-length="58">Boston&nbsp;University&nbsp;Computer&nbsp;Science&nbs p;Technical&nbsp;Report&nbsp;No.&nbsp;20</div>
> </div>
> </div>


Interesting that it used proprietary Webkit styles, possibly as a
result of browser sniffing (would be my guess based on the first two
lines).


>
> <div id="pageContainer2" class="page" style="width: 741.8181818181818px; height: 959.9999999999999px; " data-loaded="true">
> <canvas id="page1" width="741" height="959"></canvas>
> <div class="textLayer">
> <div data-canvas-width="300.69542660606743" data-font-name="Times" style="font-size:12.06334818181817px; left: 173.1905882352941px; top: 8.593899292929294px; -webkit-transform: scale(0.9002857084013994, 1); -webkit-transform-origin-x: 0%; -webkit-transform-origin-y: 0%; " dir="ltr" data-text-length="58">Boston&nbsp;University&nbsp;Computer&nbsp;Science&nbs p;Technical&nbsp;Report&nbsp;No.&nbsp;20</div>
> </div>
> </div>
>
> </div>
>
> i only want to highlight the text of pageContainer1's text layer

Define "highlight".  I'll take a stab and say use gEBI to get a
reference to the DIV and set the background color style:-

var el = document.getElementById('pageContainer1');
el.style.backgroundColor = '#eeeeee';

...Of course, you will have to know what the background colors of the
containing elements will be.  And depending on how all of that plays
out in rendering, you may need to use gEBTN to get a reference to the
first descendant DIV:-

var el =
document.getElementById('pageContainer1').getElementsByTagName('div')
[0];
el.style.backgroundColor = '#eeeeee';

Would have been better to post a link to an example along with the
source.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web