open pdf and draw c# : Adding links to pdf document application SDK utility html .net winforms visual studio %5BO%60Reilly%5D%20-%20JavaScript.%20The%20Definitive%20Guide,%206th%20ed.%20-%20%5BFlanagan%5D40-part1571

15.6.2  Inserting Nodes
Once you have a new node, you can insert it into the document with the Node methods
appendChild()
or 
insertBefore()
appendChild()
is invoked on the Element node that
you want to insert into, and it inserts the specified node so that it becomes the 
last
Child
of that node.
insertBefore()
is like 
appendChild()
, but it takes two arguments. The first argument
is the node to be inserted. The second argument is the node before which that node is
to be inserted. This method is invoked on the node that will be the parent of the new
node, and the second argument must be a child of that parent node. If you pass 
null
as that second argument, the 
insertBefore()
behaves like 
appendChild()
and inserts at
the end.
Here is a simple function for inserting a node at a numerical index. It demonstrates
both 
appendChild()
and 
insertBefore()
:
// Insert the child node into parent so that it becomes child node n
function insertAt(parent, child, n) {
if (n < 0 || n > parent.childNodes.length) throw new Error("invalid index");
else if (n == parent.childNodes.length) parent.appendChild(child);
else parent.insertBefore(child, parent.childNodes[n]);
}
If you call 
appendChild()
or 
insertBefore()
to insert a node that is already in the docu-
ment, that node will automatically be removed from its current position and reinserted
at its new position: there is no need to explicitly remove the node. Example 15-4 shows
a function for sorting the rows of a table based on the values of cells in a specified
column. It doesn’t create any new nodes but uses 
appendChild()
to change the order
of existing nodes.
Example 15-4. Sorting the rows of a table
// Sort the rows in first <tbody> of the specified table according to
// the value of nth cell within each row. Use the comparator function
// if one is specified. Otherwise, compare the values alphabetically.
function sortrows(table, n, comparator) {
var tbody = table.tBodies[0]; // First <tbody>; may be implicitly created
var rows = tbody.getElementsByTagName("tr"); // All rows in the tbody
rows = Array.prototype.slice.call(rows,0);   // Snapshot in a true array
// Now sort the rows based on the text in the nth <td> element
rows.sort(function(row1,row2) {
var cell1 = row1.getElementsByTagName("td")[n];  // Get nth cell
var cell2 = row2.getElementsByTagName("td")[n];  // of both rows
var val1 = cell1.textContent || cell1.innerText; // Get text content
var val2 = cell2.textContent || cell2.innerText; // of the two cells
if (comparator) return comparator(val1, val2);   // Compare them!
if (val1 < val2) return -1;
else if (val1 > val2) return 1;
else return 0;
});
15.6  Creating, Inserting, and Deleting Nodes | 383
Client-Side
JavaScript
Adding links to pdf document - insert, remove PDF links in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Free C# example code is offered for users to edit PDF document hyperlink (url), like inserting and deleting
adding hyperlinks to pdf files; check links in pdf
Adding links to pdf document - VB.NET PDF url edit library: insert, remove PDF links in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Help to Insert a Hyperlink to Specified PDF Document Page
pdf reader link; add links to pdf file
// Now append the rows into the tbody in their sorted order.
// This automatically moves them from their current location, so there
// is no need to remove them first. If the <tbody> contains any
// nodes other than <tr> elements, those nodes will float to the top.
for(var i = 0; i < rows.length; i++) tbody.appendChild(rows[i]);
}
// Find the <th> elements of the table (assuming there is only one row of them)
// and make them clickable so that clicking on a column header sorts
// by that column.
function makeSortable(table) {
var headers = table.getElementsByTagName("th");
for(var i = 0; i < headers.length; i++) {
(function(n) {  // Nested funtion to create a local scope
headers[i].onclick = function() { sortrows(table, n); };
}(i));          // Assign value of i to the local variable n
}
}
15.6.3  Removing and Replacing Nodes
The 
removeChild()
method removes a node from the document tree. Be careful, how-
ever: this method isn’t invoked on the node to be removed but (as the “child” part of
its name implies) on the parent of that node. Invoke the method on the parent node
and pass the child node that is to be removed as the method argument. To remove the
node 
n
from the document, you’d write:
n.parentNode.removeChild(n);
replaceChild()
removes one child node and replaces it with a new one. Invoke this
method on the parent node, passing the new node as the first argument and the node
to be replaced as the second argument. To replace the node 
n
with a string of text, for
example, you could write:
n.parentNode.replaceChild(document.createTextNode("[ REDACTED ]"), n);
The following function demonstrates another use of 
replaceChild()
:
// Replace the node n with a new <b> element and make n a child of that element.
function embolden(n) {
// If we're passed a string instead of a node, treat it as an element id
if (typeof n == "string") n = document.getElementById(n);
var parent = n.parentNode;           // Get the parent of n
var b = document.createElement("b"); // Create a <b> element
parent.replaceChild(b, n);           // Replace n with the <b> element
b.appendChild(n);                    // Make n a child of the <b> element
}
§15.5.1 introduced the 
outerHTML
property of an element and explained that it was not
implemented in current versions of Firefox. Example 15-5 shows how to implement
this property in Firefox (and any other browser that supports 
innerHTML
, has an exten-
sible 
Element.prototype
object, and has methods for defining property getters and set-
ters). The  code also  demonstrates a  practical  use  for the 
removeChild()
and 
clone
Node()
methods.
384 | Chapter 15: Scripting Documents
C# Create PDF Library SDK to convert PDF from other file formats
Create and save editable PDF with a blank page, bookmarks, links, signatures, etc. Besides, using this PDF document metadata adding control, you can
active links in pdf; add links to pdf document
VB.NET PowerPoint: Add Image to PowerPoint Document Slide/Page
detail guides on these functions through left menu links. on C#.NET PPT image adding library. powerful & profession imaging controls, PDF document, tiff files
add links to pdf in preview; pdf hyperlink
Example 15-5. Implementing the outerHTML property using innerHTML
// Implement the outerHTML property for browsers that don't support it.
// Assumes that the browser does support innerHTML, has an extensible 
// Element.prototype, and allows getters and setters to be defined.
(function() {
// If we already have outerHTML return without doing anything
if (document.createElement("div").outerHTML) return;
// Return the outer HTML of the element referred to by this
function outerHTMLGetter() {
var container = document.createElement("div"); // Dummy element
container.appendChild(this.cloneNode(true));   // Copy this to dummy
return container.innerHTML;                    // Return dummy content
}
// Set the outer HTML of the this element to the specified value
function outerHTMLSetter(value) {
// Create a dummy element and set its content to the specified value
var container = document.createElement("div");
container.innerHTML = value;
// Move each of the nodes from the dummy into the document
while(container.firstChild)  // Loop until container has no more kids
this.parentNode.insertBefore(container.firstChild, this);
// And remove the node that has been replaced
this.parentNode.removeChild(this);
}
// Now use these two functions as getters and setters for the 
// outerHTML property of all Element objects. Use ES5 Object.defineProperty
// if it exists and otherwise fall back on __defineGetter__ and Setter__.
if (Object.defineProperty) {
Object.defineProperty(Element.prototype, "outerHTML", {
get: outerHTMLGetter,
set: outerHTMLSetter,
enumerable: false, configurable: true
});
}
else {
Element.prototype.__defineGetter__("outerHTML", outerHTMLGetter);
Element.prototype.__defineSetter__("outerHTML", outerHTMLSetter);
}
}());
15.6.4  Using DocumentFragments
A DocumentFragment is a special kind of Node that serves as a temporary container
for other nodes. Create a DocumentFragment like this:
var frag = document.createDocumentFragment();
Like a Document node, a DocumentFragment stands alone and is not part of any other
document.  Its 
parentNode
is  always 
null
 Like  an  Element,  however,  a  Docu-
mentFragment  can  have any number  of  children, which you can manipulate  with
appendChild()
insertBefore()
, and so on.
15.6  Creating, Inserting, and Deleting Nodes | 385
Client-Side
JavaScript
View Images & Documents in Web Image Viewer | Online Tutorials
document or image file, like Word, PDF or TIFF other mature image viewing features, like adding or deleting page And you can find the links to these professional
clickable links in pdf files; chrome pdf from link
The special thing about DocumentFragment is that it allows a set of nodes to be treated
as a single node: if you pass a DocumentFragment to 
appendChild()
insertBefore()
,
or 
replaceChild()
, it is the children of the fragment that are inserted into the document,
not the fragment itself. (The children are moved from the fragment into the document,
and the fragment becomes empty and ready for reuse.) The following function uses a
DocumentFragment to reverse the order of the children of a node:
// Reverse the order of the children of Node n
function reverse(n) {
// Create an empty DocumentFragment as a temporary container
var f = document.createDocumentFragment();
// Now loop backward through the children, moving each one to the fragment.
// The last child of n becomes the first child of f, and vice-versa.
// Note that appending a child to f automatically removes it from n.
while(n.lastChild) f.appendChild(n.lastChild);
// Finally, move the children of f all at once back to n, all at once.
n.appendChild(f);
}
Example 15-6 implements the 
insertAdjacentHTML()
method (see §15.5.1) using the
innerHTML
property and a DocumentFragment. It also defines logically named HTML
insertion functions as an alternative to the confusing 
insertAdjacentHTML()
API. The
internal utility function 
fragment()
is possibly the most useful part of this code: it re-
turns a DocumentFragment that contains the parsed representation of a specified string
of HTML text.
Example 15-6. Implementing insertAdjacentHTML() using innerHTML
// This module defines Element.insertAdjacentHTML for browsers that don't 
// support it, and also defines portable HTML insertion functions that have
// more logical names than insertAdjacentHTML:
//     Insert.before(), Insert.after(), Insert.atStart(), Insert.atEnd()
var Insert = (function() {
// If elements have a native insertAdjacentHTML, use it in four HTML
// insertion functions with more sensible names.
if (document.createElement("div").insertAdjacentHTML) {
return {
before: function(e,h) {e.insertAdjacentHTML("beforebegin",h);},
after: function(e,h) {e.insertAdjacentHTML("afterend",h);},
atStart: function(e,h) {e.insertAdjacentHTML("afterbegin",h);},
atEnd: function(e,h) {e.insertAdjacentHTML("beforeend",h);}
};
}
// Otherwise, we have no native insertAdjacentHTML. Implement the same
// four insertion functions and then use them to define insertAdjacentHTML.
// First, define a utility method that takes a string of HTML and returns
// a DocumentFragment containing the parsed representation of that HTML.
function fragment(html) {
var elt = document.createElement("div");      // Create empty element
var frag = document.createDocumentFragment(); // Create empty fragment
elt.innerHTML = html;                         // Set element content
386 | Chapter 15: Scripting Documents
while(elt.firstChild)                         // Move all nodes
frag.appendChild(elt.firstChild);         //    from elt to frag
return frag;                                  // And return the frag
}
var Insert = {
before: function(elt, html) {
elt.parentNode.insertBefore(fragment(html), elt);
},
after: function(elt, html) {
elt.parentNode.insertBefore(fragment(html),elt.nextSibling);
},
atStart: function(elt, html) {
elt.insertBefore(fragment(html), elt.firstChild);
},
atEnd: function(elt, html) { elt.appendChild(fragment(html)); }
};
// Now implement insertAdjacentHTML based on the functions above
Element.prototype.insertAdjacentHTML = function(pos, html) {
switch(pos.toLowerCase()) {
case "beforebegin": return Insert.before(this, html);
case "afterend": return Insert.after(this, html);
case "afterbegin": return Insert.atStart(this, html);
case "beforeend": return Insert.atEnd(this, html);
}
};
return Insert;  // Finally return the four insertion function
}());
15.7  Example: Generating a Table of Contents
Example 15-7 shows how to dynamically create a table of contents for a document. It
demonstrates many of the document scripting concepts described in the sections above:
element  selection,  document  traversal,  setting  element  attributes,  setting  the
innerHTML
property, and creating new nodes and inserting them into the document.
The example is well-commented and you should have no trouble following the code.
Example 15-7. An automatically generated table of contents
/**
* TOC.js: create a table of contents for a document.
* This module registers an anonymous function that runs automatically
* when the document finishes loading. When it runs, the function first
* looks for a document element with an id of "TOC". If there is no
* such element it creates one at the start of the document.
* Next, the function finds all <h1> through <h6> tags, treats them as
* section titles, and creates a table of contents within the TOC
* element. The function adds section numbers to each section heading
* and wraps the headings in named anchors so that the TOC can link to
* them. The generated anchors have names that begin with "TOC", so
* you should avoid this prefix in your own HTML.
15.7  Example: Generating a Table of Contents | 387
Client-Side
JavaScript
* The entries in the generated TOC can be styled with CSS. All entries have
* a class "TOCEntry". Entries also have a class that corresponds to the level
* of the section heading. <h1> tags generate entries of class "TOCLevel1", 
* <h2> tags generate entries of class "TOCLevel2", and so on. Section numbers
* inserted into headings have class "TOCSectNum".
*
* You might use this module with a stylesheet like this:
*
*   #TOC { border: solid black 1px; margin: 10px; padding: 10px; }
*   .TOCEntry { font-family: sans-serif; }
*   .TOCEntry a { text-decoration: none; }
*   .TOCLevel1 { font-size: 16pt; font-weight: bold; }
*   .TOCLevel2 { font-size: 12pt; margin-left: .5in; }
*   .TOCSectNum:after { content: ": "; }
* That final line generates a colon and space after section numbers. To hide
* the section numbers, use this:
*   
*   .TOCSectNum { display: none }
*
* This module requires the onLoad() utility function.
**/
onLoad(function() { // Anonymous function defines a local scope
// Find the TOC container element.
// If there isn't one, create one at the start of the document.
var toc = document.getElementById("TOC");
if (!toc) {
toc = document.createElement("div");
toc.id = "TOC";
document.body.insertBefore(toc, document.body.firstChild);
}
// Find all section heading elements
var headings;
if (document.querySelectorAll) // Can we do it the easy way?
headings = document.querySelectorAll("h1,h2,h3,h4,h5,h6");
else   // Otherwise, find the headings the hard way
headings = findHeadings(document.body, []);
// Recursively traverse the document body looking for headings
function findHeadings(root, sects) {
for(var c = root.firstChild; c != null; c = c.nextSibling) {
if (c.nodeType !== 1) continue;
if (c.tagName.length == 2 && c.tagName.charAt(0) == "H")
sects.push(c);
else 
findHeadings(c, sects);
}
return sects;
}
// Initialize an array that keeps track of section numbers.
var sectionNumbers = [0,0,0,0,0,0];
// Now loop through the section header elements we found.
388 | Chapter 15: Scripting Documents
for(var h = 0; h < headings.length; h++) {
var heading = headings[h];
// Skip the section heading if it is inside the TOC container.
if (heading.parentNode == toc) continue;
// Figure out what level heading it is.
var level = parseInt(heading.tagName.charAt(1));
if (isNaN(level) || level < 1 || level > 6) continue;
// Increment the section number for this heading level
// and reset all lower heading level numbers to zero.
sectionNumbers[level-1]++;
for(var i = level; i < 6; i++) sectionNumbers[i] = 0;
// Now combine section numbers for all heading levels
// to produce a section number like 2.3.1.
var sectionNumber = sectionNumbers.slice(0,level).join(".")
// Add the section number to the section header title.
// We place the number in a <span> to make it styleable.
var span = document.createElement("span");
span.className = "TOCSectNum";            
span.innerHTML = sectionNumber;                
heading.insertBefore(span, heading.firstChild);
// Wrap the heading in a named anchor so we can link to it.
var anchor = document.createElement("a");
anchor.name = "TOC"+sectionNumber; 
heading.parentNode.insertBefore(anchor, heading);
anchor.appendChild(heading);
// Now create a link to this section.
var link = document.createElement("a");
link.href = "#TOC" + sectionNumber; // Link destination
link.innerHTML = heading.innerHTML; // Link text is same as heading
// Place the link in a div that is styleable based on the level.
var entry = document.createElement("div");
entry.className = "TOCEntry TOCLevel" + level; 
entry.appendChild(link);
// And add the div to the TOC container.
toc.appendChild(entry);
}
});
15.8  Document and Element Geometry and Scrolling
In this chapter so far we have thought about documents as abstract trees of elements
and text nodes. But when a browser renders a document within a window, it creates a
visual representation of the document in which each element has a position and a size.
Often, web applications can treat documents as trees of elements and never have to
15.8  Document and Element Geometry and Scrolling | 389
Client-Side
JavaScript
think about how those elements are rendered onscreen. Sometimes, however, it is nec-
essary to determine the precise geometry of an element. We’ll see in Chapter 16, for
example, that the CSS can be used to specify the position of an element. If you want to
use CSS to dynamically position an element (such as a tooltip or callout) next to some
ordinary browser-positioned element, you need to be able to determine the location of
that element.
This section explains how you can go back and forth between the abstract, tree-based
model of a document and the geometrical, coordinate-based view of the document as
it is laid out in a browser window. The properties and methods described in this section
have been implemented in browsers for a long time (though some were, until recently,
IE-specific and some were not implemented by IE until IE9). At the time of this writing,
they are going through the W3C standardization process as the CSSOM-View Module
(see http://www.w3.org/TR/cssom-view/).
15.8.1  Document Coordinates and Viewport Coordinates
The position of an element is measured in pixels, with the X coordinate increasing to
the right and the Y coordinate increasing as we go down. There are two different points
we can use as the coordinate system origin, however: the X and Y coordinates of an
element can be relative to the top-left corner of the document or relative to the top-left
corner of the viewport in which the document is displayed. In top-level windows and
tabs, the “viewport” is the portion of the browser that actually displays document
content: it excludes browser “chrome” such as menus, toolbars, and tabs. For docu-
ments displayed in frames, the viewport is the 
<iframe>
element that defines the frame.
In either case, when we talk about the position of an element, we must be clear whether
we are using document coordinates or viewport coordinates. (Note that viewport co-
ordinates are sometimes called window coordinates.)
If the document is smaller than the viewport, or if it has not been scrolled, the upper-
left corner of the document is in the upper-left corner of the viewport and the document
and viewport coordinate systems are the same. In general, however, to convert between
the two coordinate systems, we must add or subtract the scroll offsets. If an element
has a Y coordinate of 200 pixels in document coordinates, for example, and if the user
has scrolled the browser down by 75 pixels, then that element has a Y coordinate of
125 pixels in viewport coordinates. Similarly, if an element has an X coordinate of 400
in viewport coordinates and the user has scrolled the viewport 200 pixels horizontally,
the element’s X coordinate in document coordinates is 600.
Document coordinates are more fundamental than viewport coordinates, and they do
not change when the user scrolls. Nevertheless, it is quite common to use viewport
coordinates in client-side programming. We use document coordinates when we spec-
ify an element position using CSS (see Chapter 16). But the simplest way of querying
the position of an element (see §15.8.2) returns the position in viewport coordinates.
Similarly, when we register handler functions for mouse events, the coordinates of the
mouse pointer are reported in viewport coordinates.
390 | Chapter 15: Scripting Documents
In order to convert between coordinate systems, we need to be able to determine the
scrollbar positions for the browser window. The 
pageXOffset
and 
pageYOffset
proper-
ties of the Window object provide these values in all browsers except IE versions 8 and
before. IE (and all modern browsers) also make the scrollbar positions available through
scrollLeft
and 
scrollTop
properties. The confusing thing is that you normally query
these properties on the root element of the document (
document.documentElement
), but
in  quirks  mode  (see §13.4.4)  you  must  query  them  on  the 
<body>
element
(
document.body
) of the document instead. Example 15-8 shows how to portably query
the scrollbar positions.
Example 15-8. Querying the scrollbar positions of a window
// Return the current scrollbar offsets as the x and y properties of an object
function getScrollOffsets(w) {
// Use the specified window or the current window if no argument
w = w || window;
// This works for all browsers except IE versions 8 and before
if (w.pageXOffset != null) return {x: w.pageXOffset, y:w.pageYOffset};
// For IE (or any browser) in Standards mode
var d = w.document;
if (document.compatMode == "CSS1Compat")
return {x:d.documentElement.scrollLeft, y:d.documentElement.scrollTop};
// For browsers in Quirks mode
return { x: d.body.scrollLeft, y: d.body.scrollTop };
}
It is sometimes useful to be able to determine the viewport size—to find what portions
of the document are currently visible, for example. As with the scroll offsets, the easy
way to query viewport size does not work in IE8 and before and the technique that
works in IE depends on whether the browser is in quirks mode or standards mode.
Example 15-9 shows how to portably query the viewport size. Note how similar the
code is to Example 15-8.
Example 15-9. Querying the viewport size of a window
// Return the viewport size as w and h properties of an object
function getViewportSize(w) {
// Use the specified window or the current window if no argument
w = w || window;  
// This works for all browsers except IE8 and before
if (w.innerWidth != null) return {w: w.innerWidth, h:w.innerHeight};
// For IE (or any browser) in Standards mode
var d = w.document;
if (document.compatMode == "CSS1Compat")
15.8  Document and Element Geometry and Scrolling | 391
Client-Side
JavaScript
return { w: d.documentElement.clientWidth,
h: d.documentElement.clientHeight };
// For browsers in Quirks mode
return { w: d.body.clientWidth, h: d.body.clientWidth };
}
The  two  examples  above  have  used  the 
scrollLeft
scrollTop
clientWidth
 and
clientHeight
properties. We’ll encounter these properties again in §15.8.5.
15.8.2  Querying the Geometry of an Element
The  easiest  way  to  determine  the  size  and  position  of  an  element  is  to  call  its
getBoundingClientRect()
method. This method was introduced in IE5 and is now im-
plemented by all current browsers. It expects no arguments and returns an object with
properties 
left
right
top
, and 
bottom
. The 
left
and 
top
properties give the X and Y
coordinates of the upper-left corner of the element and the 
right
and 
bottom
properties
give the coordinates of the lower-right corner.
This method returns element positions in viewport coordinates. (The word “client” in
the method name 
getBoundingClientRect()
is an oblique reference to the web browser
client—specifically to the window and the viewport it defines.) To convert to document
coordinates that remain valid even if the user scrolls the browser window, add the scroll
offsets:
var box = e.getBoundingClientRect();  // Get position in viewport coordinates
var offsets = getScrollOffsets();     // Utility function defined above
var x = box.left + offsets.x;         // Convert to document coordinates
var y = box.top + offsets.y;
In many browsers (and in the W3C standard), the  object returned by 
getBounding
ClientRect()
also has 
width
and 
height
properties, but the original IE implementation
does not  do this.  For  portability, you  can compute the element  width  and  height
like this:
var box = e.getBoundingClientRect();
var w = box.width || (box.right - box.left);
var h = box.height || (box.bottom - box.top);
You’ll learn in Chapter 16 that the content of an element is surrounded by an optional
blank area known as padding. The padding is surrounded by an optional border, and
the  border  is  surrounded  by  optional  margins.  The  coordinates  returned  by
getBoundingClientRect()
include the border and the padding of the element but do not
include the element margins.
If the word “Client” in the method 
getBoundingClientRect()
specifies the coordinate
system of the returned rectangle, what explains the word “Bounding” in the method
name? Block elements, such as images, paragraphs, and 
<div>
elements are always
rectangular when laid out by the browser. Inline elements, such as 
<span>
<code>
, and
<b>
elements, however, may span multiple lines and may therefore consist of multiple
rectangles. Imagine, for example, some italicized text (marked up with 
<i>
and 
</i>
392 | Chapter 15: Scripting Documents
Documents you may be interested
Documents you may be interested