Magnify Linked Page Area

Developer
Ken Lane
Size
7,515 Kb
Views
12,144
  1. Magnify Linked Page Area Previews
  2. Magnify Linked Page Area HTML Codes
  3. Magnify Linked Page Area CSS Codes
  4. Magnify Linked Page Area JS Codes

How do I make an magnify linked page area?

What is a magnify linked page area? How do you make a magnify linked page area? This script and codes were developed by Ken Lane on 25 October 2022, Tuesday.

Magnify Linked Page Area Previews
IQ Test

Magnify Linked Page Area - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Magnify Linked Page Area</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<head> <title>TestContract.pdf - RevRecBot Analysis</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="generator" content="SautinSoft PdfFocus"> <style type="text/css"> .cls_0 { font: 20px 'Times New Roman'; color: rgb(0, 0, 0); font-weight: bold; } .cls_1 { font: 16px 'Times New Roman'; color: rgb(0, 0, 0); line-height:18px; display:inline-block; } .cls_2 { font: 16px 'Times New Roman'; color: rgb(0, 0, 0); font-weight: bold; } .cls_3 { font: 16px 'Symbol'; color: rgb(0, 0, 0); } .cls_4 { font: 16px 'Times New Roman'; color: rgb(0, 0, 0); font-style: italic; } .cls_5 { font: 10px 'Times New Roman'; color: rgb(0, 0, 0); font-style: italic; } .cls_6 { font: 10px 'Times New Roman'; color: rgb(0, 0, 0); } .cls_7 { font: 18px 'Times New Roman'; color: rgb(0, 0, 0); font-weight: bold; text-decoration: underline; } .rr_line { position: absolute; white-space: pre; padding:0; margin:0; vertical-align: bottom; } .rr_page { position: relative; margin: 0; padding: 0; border: none; overflow: hidden; } h3 {font-family: Arial, Helvetica, sans-serif;color: #444;background: #ddd;padding: 2px 2px 2px 8px;margin: 3px 0;} </style>
</head>
<body> <h3>Durations:</h3> <a class="maghover cls_4" href="#foo">Testing + Testing</a> <a class="maghover cls_4" style="background:#edd;" href="#boo">WWWWW + WWWWW</a> <div class="rr_page" style="width:816px;height:1056px;"> <div class="" style="height:114px;"></div> <div class="rr_l ine" style="padding-left:350px;height:39px"><span class="cls_0">AGREEMENT</span></div> <div class="rr_l ine" style="padding-left:120px;height:71px;"><span class="cls_1">This Agreement governs the professional relationship between Tanjo Inc. (“Tanjo”) and<br/>Cherry Bekaert, LLP (“Client”) This Agreement is effective as of January ___, 2017.<br/>“Tanjo” and “Client” are referred to collectively as the “Parties.”</span></div> <div class="rr_line" style="left:120px;"><span class="cls_2">ARTICLE 1 - DEFINITIONS</span></div> <div class="rr_line" style="left:120px;top:247px;"><span class="cls_1">Certain terms used in this Agreement are defined to mean the following:</span></div> <div class="rr_line" style="left:144px;top:273px;"><span class="cls_3">•</span></div> <div class="rr_line" style="left:168px;top:275px;"><span class="cls_4">Content </span><span class="cls_1">- information, including any and all text, graphics, artwork, databases,</span></div> <div class="rr_line" style="left:168px;top:293px;"><span class="cls_1">animated and video images, or sounds, encoded in any format, which is displayed for<br/>people to see or hear. Content includes both the displayed (rendered) format of the<br/>information and the coded (unrendered) format of the information.</span></div> <div class="rr_line" style="left:144px;top:355px;"><span class="cls_3">•</span></div> <div class="rr_line" style="left:168px;top:357px;"><span id="foo" style="background:#dee" class="cls_4">Testing + Testing</span><span class="cls_1"> - information, libraries, Software, algorithms, routines, and</span></div> <div class="rr_line" style="left:168px;top:375px;"><span class="cls_1">utilities that are not included in the work product delivered to Client.</span></div> <div class="rr_line" style="left:144px;top:401px;"><span class="cls_3">•</span></div> <div class="rr_line" style="left:168px;top:403px;"><span id="boo" style="background:#edd;" class="cls_4">WWWWW + WWWWW </span><span class="cls_1">- the machine-readable version of Software derived from Source Code</span></div> <div class="rr_line" style="left:168px;top:421px;"><span class="cls_1">by compilation.</span></div> <div class="rr_line" style="left:144px;top:447px;"><span class="cls_3">•</span></div> <div class="rr_line" style="left:168px;top:449px;"><span class="cls_4">Software </span><span class="cls_1">- a set of instructions that causes a computer to perform tasks. Software does</span></div> <div class="rr_line" style="left:168px;top:467px;"><span class="cls_1">not include Content, which is intended for people to see or hear. Software does</span></div> <div class="rr_line" style="left:168px;top:486px;"><span class="cls_1">include text and databases which are not displayed, but which provide the underlying</span></div> <div class="rr_line" style="left:168px;top:504px;"><span class="cls_1">mechanism by which Content is displayed.</span></div> <div class="rr_line" style="left:144px;top:530px;"><span class="cls_3">•</span></div> <div class="rr_line" style="left:168px;top:532px;"><span class="cls_4">Source Code </span><span class="cls_1">- the human-readable version of Software.</span></div> <div class="rr_line" style="left:144px;top:557px;"><span class="cls_3">•</span></div> <div class="rr_line" style="left:168px;top:559px;"><span class="cls_4">Professional Services </span><span class="cls_1">– consulting, writing, designing, programming, and other</span></div> <div class="rr_line" style="left:168px;top:578px;"><span class="cls_1">services.</span></div> <div class="rr_line" style="left:144px;top:604px;"><span class="cls_3">•</span></div> <div class="rr_line" style="left:168px;top:605px;"><span class="cls_4">Custom Product </span><span class="cls_1">– the licensable object code version of the Software and Content that</span></div> <div class="rr_line" style="left:168px;top:624px;"><span class="cls_1">is the end result of the Professional Services as more fully described in any Exhibit to</span></div> <div class="rr_line" style="left:168px;top:642px;"><span class="cls_1">this Agreement.</span></div> <div class="rr_line" style="left:120px;top:676px;"><span class="cls_2">ARTICLE 2 - STATEMENT OF WORK</span></div> <div class="rr_line" style="left:120px;top:699px;"><span class="cls_1" style="background:#eed;">A.</span></div> <div class="rr_line" style="left:144px;top:699px;"><span class="cls_1">TANJO will render Professional Services for Client according to the provisions set out in</span></div> <div class="rr_line" style="left:144px;top:717px;"><span class="cls_1">Exhibit A.</span></div> <div class="rr_line" style="left:120px;top:744px;"><span class="cls_1" style="background:#eed;">B.</span></div> <div class="rr_line" style="left:144px;top:744px;"><span class="cls_1">This Agreement may be modified with the written consent of both Parties.</span></div> <div class="rr_line" style="left:120px;top:796px;"><span class="cls_2">ARTICLE 3 - OWNERSHIP OF INTELLECTUAL PROPERTY AND SOFTWARE</span></div> <div class="rr_line" style="left:120px;top:815px;"><span class="cls_2">LICENSE</span></div> <div class="rr_line" style="left:120px;top:841px;"><span class="cls_1" style="background:#eed;">A.</span></div> <div class="rr_line" style="left:144px;top:841px;"><span class="cls_1">Except as otherwise provided in this Agreement, original Content in TANJO proprietary</span></div> <div class="rr_line" style="left:144px;top:859px;"><span class="cls_1">platform format which TANJO shall develop for Client shall belong to TANJO.</span></div> <div class="rr_line" style="left:663px;top:859px;"><span class="cls_1">Except</span></div> <div class="rr_line" style="left:144px;top:878px;"><span class="cls_1">as otherwise provided in this Agreement, Client shall have no ownership interest or rights</span></div> <div class="rr_line" style="left:144px;top:896px;"><span class="cls_1">to Content licensed to or existing Content libraries owned or created by TANJO.</span></div> <div class="rr_line" style="left:120px;top:923px;"><span class="cls_1" style="background:#eed;">B.</span></div> <div class="rr_line" style="left:144px;top:923px;"><span class="cls_1">Any Software developed pursuant to this Agreement shall not be a “work made for hire.”</span></div> <div class="rr_line" style="left:144px;top:941px;"><span class="cls_1">TANJO shall retain complete title to all Software it develops, including copyright and the</span></div> <div class="rr_line" style="left:666px;top:996px;"><span class="cls_5">Page 1</span></div> </div> <div class="rr_page" style="width:816px;height:1056px;"> <div class="rr_line" style="border:none;left:0px;top:0px;width:816px;height:1056px;z-index:-1;"><img width="816" height="1056" alt="" src="images\image1.png"></div> <div class="rr_line" style="left:144px;top:97px;"><span class="cls_1">right to patent, license, modify, market, and/or assign its rights to the Software, subject to</span></div> <div class="rr_line" style="left:144px;top:115px;"><span class="cls_1">the non-exclusive license granted to Client below.</span></div> <div class="rr_line" style="left:381px;top:142px;"><span class="cls_7">Exhibit A</span></div> <div class="rr_line" style="left:313px;top:203px;"><span class="cls_7">CBH Revenue Recognition</span></div> <div class="rr_line" style="left:276px;top:224px;"><span class="cls_7">Machine Learning Automation Tool</span></div> <div class="rr_line" style="left:120px;top:264px;"><span class="cls_1">Overview</span></div> <div class="rr_line" style="left:120px;top:301px;"><span class="cls_1">Client desires to employ machine learning in order to semi-automate analysis of a firm’s</span></div> <div class="rr_line" style="left:120px;top:319px;"><span class="cls_1">contract</span></div> <div class="rr_line" style="left:181px;top:319px;"><span class="cls_1">agreements</span></div> <div class="rr_line" style="left:263px;top:319px;"><span class="cls_1">by</span></div> <div class="rr_line" style="left:288px;top:319px;"><span class="cls_1">applying</span></div> <div class="rr_line" style="left:353px;top:319px;"><span class="cls_1">the</span></div> <div class="rr_line" style="left:381px;top:319px;"><span class="cls_1">CBH</span></div> <div class="rr_line" style="left:423px;top:319px;"><span class="cls_1">five</span></div> <div class="rr_line" style="left:457px;top:319px;"><span class="cls_1">step</span></div> <div class="rr_line" style="left:492px;top:319px;"><span class="cls_1">process</span></div> <div class="rr_line" style="left:549px;top:319px;"><span class="cls_1">and</span></div> <div class="rr_line" style="left:581px;top:319px;"><span class="cls_1">forthcoming</span></div> <div class="rr_line" style="left:669px;top:319px;"><span class="cls_1">revenue</span></div> <div class="rr_line" style="left:120px;top:338px;"><span class="cls_1">recognition rules from FASBI.</span></div> <div class="rr_line" style="left:120px;top:374px;"><span class="cls_1">Add more detail here:</span></div> <div class="rr_line" style="left:120px;top:411px;"><span class="cls_2">1. Milestones</span></div> <div class="rr_line" style="left:120px;top:448px;"><span class="cls_1">The development of the Custom Product shall be comprised of the following Milestones and</span></div> <div class="rr_line" style="left:168px;top:467px;"><span class="cls_1">is expected to be completed within 20 weeks of kickoff:</span></div> <div class="rr_line" style="left:120px;top:503px;"><span class="cls_1">Anticipated Schedule</span></div> <div class="rr_line" style="left:128px;top:522px;"><span class="cls_2">Milestone</span></div> <div class="rr_line" style="left:385px;top:522px;"><span class="cls_2">Expected Completion</span></div> <div class="rr_line" style="left:565px;top:522px;"><span class="cls_2">Payment</span></div> <div class="rr_line" style="left:128px;top:541px;"><span class="cls_2">Milestone 1 Complete Design and</span></div> <div class="rr_line" style="left:385px;top:541px;"><span class="cls_2">Kickoff plus 4 weeks</span></div> <div class="rr_line" style="left:565px;top:541px;"><span class="cls_2">$20,000</span></div> <div class="rr_line" style="left:128px;top:560px;"><span class="cls_2">WireFrame</span></div> <div class="rr_line" style="left:128px;top:579px;"><span class="cls_2">Milestone</span></div> <div class="rr_line" style="left:209px;top:579px;"><span class="cls_2">2</span></div> <div class="rr_line" style="left:233px;top:579px;"><span class="cls_2">–</span></div> <div class="rr_line" style="left:256px;top:579px;"><span class="cls_2">Alpha</span></div> <div class="rr_line" style="left:312px;top:579px;"><span class="cls_2">software</span></div> <div class="rr_line" style="left:385px;top:579px;"><span class="cls_2">Milestone 1 Acceptance</span></div> <div class="rr_line" style="left:565px;top:579px;"><span class="cls_2">$30,000</span></div> <div class="rr_line" style="left:128px;top:597px;"><span class="cls_2">delivery and approval</span></div> <div class="rr_line" style="left:385px;top:597px;"><span class="cls_2">plus 6 weeks</span></div> <div class="rr_line" style="left:128px;top:635px;"><span class="cls_2">Milestone 3 Beta software delivery</span></div> <div class="rr_line" style="left:385px;top:635px;"><span class="cls_2">Milestone 2 Acceptance</span></div> <div class="rr_line" style="left:565px;top:635px;"><span class="cls_2">$30,000</span></div> <div class="rr_line" style="left:128px;top:653px;"><span class="cls_2">and approval</span></div> <div class="rr_line" style="left:385px;top:653px;"><span class="cls_2">plus 4 weeks</span></div> <div class="rr_line" style="left:128px;top:691px;"><span class="cls_2">Milestone</span></div> <div class="rr_line" style="left:207px;top:691px;"><span class="cls_2">4</span></div> <div class="rr_line" style="left:228px;top:691px;"><span class="cls_2">Final</span></div> <div class="rr_line" style="left:276px;top:691px;"><span class="cls_2">Gold</span></div> <div class="rr_line" style="left:322px;top:691px;"><span class="cls_2">Master</span></div> <div class="rr_line" style="left:385px;top:691px;"><span class="cls_2">Milestone</span></div> <div class="rr_line" style="left:460px;top:691px;"><span class="cls_2">3</span></div> <div class="rr_line" style="left:476px;top:691px;"><span class="cls_2">acceptance</span></div> <div class="rr_line" style="left:565px;top:691px;"><span class="cls_2">$40,000</span></div> <div class="rr_line" style="left:128px;top:710px;"><span class="cls_2">delivery and approval</span></div> <div class="rr_line" style="left:385px;top:710px;"><span class="cls_2">plus 4 weeks</span></div> <div class="rr_line" style="left:120px;top:747px;"><span class="cls_2" style="background:#eed;">2.</span></div> <div class="rr_line" style="left:168px;top:747px;"><span class="cls_2">Customer Acceptance</span></div> <div class="rr_line" style="left:120px;top:784px;"><span class="cls_1">Upon presentation to Client of Milestones 1-3 outlined above in Section 1, Client shall have</span></div> <div class="rr_line" style="left:120px;top:802px;"><span class="cls_1">five (5) business days to consent and accept each Milestone. Client will provide written</span></div> <div class="rr_line" style="left:120px;top:821px;"><span class="cls_1">notification to TANJO of Client’s acceptance or rejection of each Milestone and, in the case</span></div> <div class="rr_line" style="left:120px;top:839px;"><span class="cls_1">of</span></div> <div class="rr_line" style="left:142px;top:839px;"><span class="cls_1">rejection,</span></div> <div class="rr_line" style="left:210px;top:839px;"><span class="cls_1">will</span></div> <div class="rr_line" style="left:243px;top:839px;"><span class="cls_1">provide</span></div> <div class="rr_line" style="left:300px;top:839px;"><span class="cls_1">TANJO</span></div> <div class="rr_line" style="left:358px;top:839px;"><span class="cls_1">with</span></div> <div class="rr_line" style="left:395px;top:839px;"><span class="cls_1">a</span></div> <div class="rr_line" style="left:410px;top:839px;"><span class="cls_1">reasonably</span></div> <div class="rr_line" style="left:488px;top:839px;"><span class="cls_1">detailed</span></div> <div class="rr_line" style="left:546px;top:839px;"><span class="cls_1">list</span></div> <div class="rr_line" style="left:574px;top:839px;"><span class="cls_1">of</span></div> <div class="rr_line" style="left:595px;top:839px;"><span class="cls_1">deficiencies</span></div> <div class="rr_line" style="left:680px;top:839px;"><span class="cls_1">in</span></div> <div class="rr_line" style="left:701px;top:839px;"><span class="cls_1">the</span></div> <div class="rr_line" style="left:120px;top:858px;"><span class="cls_1">Milestone.</span></div> <div class="rr_line" style="left:201px;top:858px;"><span class="cls_1">If Client does not provide written acceptance or rejection within the specified</span></div> <div class="rr_line" style="left:120px;top:876px;"><span class="cls_1">acceptance period, the Milestone will be deemed to be accepted. If Client’s review establishes</span></div> <div class="rr_line" style="left:120px;top:894px;"><span class="cls_1">that any Milestone was not completed according to the terms of this Agreement, TANJO shall,</span></div> <div class="rr_line" style="left:120px;top:913px;"><span class="cls_1">as quickly as possible and at Tanjo’s’s sole expense, (i) correct, modify or improve any</span></div> <div class="rr_line" style="left:120px;top:931px;"><span class="cls_1">deficiencies, and (ii) resubmit the Milestone to Client for approval.</span></div> <div class="rr_line" style="left:563px;top:931px;"><span class="cls_1">The warranties provided</span></div> <div class="rr_line" style="left:666px;top:996px;"><span class="cls_5">Page 2</span></div> </div> <div class="rr_page" style="width:816px;height:1056px;"> <div class="rr_line" style="left:120px;top:97px;"><span class="cls_1">under the Agreement shall survive acceptance of the Custom Product and any termination of</span></div> <div class="rr_line" style="left:120px;top:115px;"><span class="cls_1">this Agreement for any reason.</span></div> <div class="rr_line" style="left:120px;top:152px;"><span class="cls_1">Once each Milestone is accepted by Client, any change to the content included in such</span></div> <div class="rr_line" style="left:120px;top:170px;"><span class="cls_1">Milestone will be subject to a mutually agreeable change.</span></div> <div class="rr_line" style="left:120px;top:207px;"><span class="cls_1" style="background:#eed;">3.</span></div> <div class="rr_line" style="left:168px;top:207px;"><span class="cls_2">Fee and Payment Terms</span></div> <div class="rr_line" style="left:120px;top:244px;"><span class="cls_1">TANJO agrees to charge and Client agrees to pay TANJO a fixed fee in the amount of one</span></div> <div class="rr_line" style="left:120px;top:262px;"><span class="cls_1">hundred twenty thousand dollars($120,000), in consideration for theProfessionalServicesand</span></div> <div class="rr_line" style="left:120px;top:281px;"><span class="cls_1">Custom Product deliverables above.</span></div> <div class="rr_line" style="left:120px;top:299px;"><span class="cls_1">Milestone 1 Acceptance: $20,000</span></div> <div class="rr_line" style="left:120px;top:317px;"><span class="cls_1">Milestone 2 Acceptance: $30,000</span></div> <div class="rr_line" style="left:120px;top:336px;"><span class="cls_1">Milestone 3 Acceptance: $30,000</span></div> <div class="rr_line" style="left:120px;top:354px;"><span class="cls_1">Milestone 4 Acceptance: $40,000</span></div> <div class="rr_line" style="left:120px;top:391px;"><span class="cls_1" style="background:#eed;">6.</span></div> <div class="rr_line" style="left:168px;top:391px;"><span class="cls_2">Schedule for completion of the Professional Services and Custom Product</span></div> <div class="rr_line" style="left:120px;top:428px;"><span class="cls_1">The Professional Services and Custom Product will be properly completed within twenty</span></div> <div class="rr_line" style="left:120px;top:446px;"><span class="cls_1">weeks of signing this Agreement.</span></div> <div class="rr_line" style="left:120px;top:483px;"><span class="cls_1" style="background:#eed;">7.</span></div> <div class="rr_line" style="left:168px;top:483px;"><span class="cls_2">Client’s Project Manager</span></div> <div class="rr_line" style="left:120px;top:520px;"><span class="cls_1">Jonathan Kraftchick (the “Project Manager”) shall have authority to approve and pay TANJO</span></div> <div class="rr_line" style="left:120px;top:538px;"><span class="cls_1">for Professional Services performed and expenses incurred on behalf of Client.</span></div> <div class="rr_line" style="left:670px;top:538px;"><span class="cls_1">Contact</span></div> <div class="rr_line" style="left:120px;top:556px;"><span class="cls_1">information for Client’s Project Manager is as follows:</span></div> <div class="rr_line" style="left:120px;top:593px;"><span class="cls_1">Name:</span></div> <div class="rr_line" style="left:260px;top:593px;"><span class="cls_1">_________ ________________________</span></div> <div class="rr_line" style="left:120px;top:612px;"><span class="cls_1">E-Mail:</span></div> <div class="rr_line" style="left:264px;top:612px;"><span class="cls_1">_________ ________________________</span></div> <div class="rr_line" style="left:120px;top:630px;"><span class="cls_1">Phone:</span></div> <div class="rr_line" style="left:264px;top:630px;"><span class="cls_1">_________ ________________________</span></div> <div class="rr_line" style="left:120px;top:649px;"><span class="cls_1">Postal Address:</span></div> <div class="rr_line" style="left:264px;top:649px;"><span class="cls_1">________________________________________________</span></div> <div class="rr_line" style="left:120px;top:704px;"><span class="cls_1" style="background:#eed;">8.</span></div> <div class="rr_line" style="left:168px;top:704px;"><span class="cls_2">Addresses for Notices:</span></div> <div class="rr_line" style="left:120px;top:740px;"><span class="cls_1">To Tanjo:</span></div> <div class="rr_line" style="left:408px;top:740px;"><span class="cls_1">To Client:</span></div> <div class="rr_line" style="left:120px;top:777px;"><span class="cls_1">Tanjo Inc</span></div> <div class="rr_line" style="left:360px;top:777px;"><span class="cls_1">Client: ________________________________</span></div> <div class="rr_line" style="left:120px;top:796px;"><span class="cls_1">Attn: President</span></div> <div class="rr_line" style="left:360px;top:796px;"><span class="cls_1">Attn: _________________________________</span></div> <div class="rr_line" style="left:120px;top:814px;"><span class="cls_1">400 West Weaver St</span></div> <div class="rr_line" style="left:360px;top:814px;"><span class="cls_1">______________________________________</span></div> <div class="rr_line" style="left:120px;top:833px;"><span class="cls_1">Carrboro, NC 27516</span></div> <div class="rr_line" style="left:360px;top:833px;"><span class="cls_1">______________________________________</span></div> <div class="rr_line" style="left:120px;top:869px;"><span class="cls_1">Approval:</span></div> <div class="rr_line" style="left:120px;top:888px;"><span class="cls_1">Client_________________</span></div> <div class="rr_line" style="left:360px;top:888px;"><span class="cls_1">Date:________</span></div> <div class="rr_line" style="left:120px;top:924px;"><span class="cls_1">TANJO____________________</span></div> <div class="rr_line" style="left:360px;top:924px;"><span class="cls_1">Date:________</span></div> <div class="rr_line" style="left:666px;top:996px;"><span class="cls_5">Page 3</span></div> </div> <div style="text-align:center;">The trial version converts only 3 pages. Evaluation only.<br>Converted by PDF Focus .Net 6.5.5.17.<br>(Licensed version doesn't display this notice and converts the whole PDF document!)<br><br><a href="http://www.sautinsoft.com/products/pdf-focus/order.php">Click to get the license for PDF Focus .Net.</a></div> <p style="text-align:center;"><a href="http://www.sautinsoft.com/products/pdf-focus/tips-about-pdf-to-html-conversion.php">Want to adjust a result of PDF to HTML conversion? See our tips ...</a></p>
</body>
</html> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Magnify Linked Page Area - Script Codes CSS Codes

.mag_vline { position: fixed; width: 2px; border-left: 1px dashed rgba(0,0,0,.3); z-index: 4000;
}
.mag_hline { position: fixed; height: 2px; border-top: 1px dashed rgba(0,0,0,.3); z-index: 4000;
}

Magnify Linked Page Area - Script Codes JS Codes

var magnifier = { init: function() { $(".maghover") .mouseover(function(){ magnifier.mouseOverFunc(this); }).mouseout(function(){ magnifier.mouseOutFunc(); }).mousemove(function(e){ magnifier.mouseMoveFunc(this,e); }); magnifier.addCss(); magnifier.addMagDivs(); magnifier.clonePage(); $(".mag_box").hide(); //magnifier.mouseOverFunc( $(".maghover")[0] ); //magnifier.mouseMoveFunc( $(".maghover")[0], {pageX: 10,pageY: 10} ); }, clonePage: function() { $("body > *:not(.mag_box)").clone().appendTo(".clone"); $(".clone [id]").removeAttr("id"); }, pagePos: {x:0,y:0}, mouseMoveFunc: function(it,e){ magnifier.currHov = it; magnifier.pagePos = {x:e.pageX,y:e.pageY}; magnifier.magPos(it); }, hovered: false, mouseOutFunc: function(e){ magnifier.currHov = null; magnifier.hovered = false; $(".mag_box").hide(); }, mouseOverFunc: function(it){ magnifier.currHov = this; magnifier.hovered = true; $(".mag_box").show(); //console.log(it); var t = $(it).offset().top; var l = $(it).offset().left; var h = $(it).height(); $(".mag").css({top:t+h,left:0}); magnifier.fade = 0.1; }, currHov: null, magPos: function(){ var it = magnifier.currHov; if (!it) return; //console.log(magnifier.fade); var targUri = $(it).attr("href"); var targ = $(targUri); var x = magnifier.pagePos.x - it.offsetLeft; var y = magnifier.pagePos.y - it.offsetTop; var w = $(it).outerWidth(); var h = $(it).outerHeight(); //var abs = AbsoluteCoords(targ); var bw = $(".mag").outerWidth(); var bh = $(".mag").outerHeight(); var tw = targ.width(); var th = targ.height(); var tp = -(targ.offset().top)-3+(bh/2)-(targ.outerHeight()); var lt = -(targ.offset().left)-2+(bw/2)-(targ.outerWidth()/2); lt = 0; tp += ((y/h)-0.5)*bh*magnifier.fade; //lt += ((x/w)-0.5)*bw*magnifier.fade; //console.log("targ{"+tp+","+lt+"} x="+x+" y="+y+" "+x/w+"%") $(".clone").css({'top':tp, 'left':lt}); var mag_pos = $(".mag").offset(); $(".mag_vline").height(bh).css({top: mag_pos.top, left: targ.offset().left + (tw/2)}); $(".mag_hline").width(bw).css({top: mag_pos.top + (bh/2), left: mag_pos.left}); $(".mag").width($('body').width()-10);
}, fade: 0.1, intervalFunc: function() { var delt = 1.0; delt += (magnifier.fade>.7) ? ((1 - magnifier.fade)*.2):((magnifier.fade)*.4); magnifier.fade = magnifier.fade * delt; magnifier.fade = (magnifier.fade<1.0) ? magnifier.fade : 1.0; //magnifier.fade = 0; if(magnifier.hovered) magnifier.magPos(); }, addCss: function() { $("body").append("\ <style id='boogie'>\n\ .mag_box { margin:0;\ padding:0;\
     width: 0;\
     height: 0;\ position:relative;\ }\n\ .mag { position: absolute;\ top:40px;\ left:50px;\ height:250px;\ border: solid 4px #ccc;\ border-radius:15px;\ overflow:hidden;\ background:#fff;\ z-index:100;\ width:400px;\ }\n\ .clone { position:absolute;\ top:-430px;\ left:-400px;\ }\n\ .maghover { font-size:20px;\ background: #dee;\ text-decoration:none;\ padding: 0 10px;\ }\n\ .maghover:hover { text-decoration:underline; }\n\
</style>"); }, addMagDivs: function() { var divs = '\
<div class="mag_box">\ <div class="mag">\ <div class="clone"></div>\ </div>\ <div class="mag_vline"></div>\ <div class="mag_hline"></div>\
</div>'; $("body").prepend(divs); }
};
magnifier.init();
setInterval(function(){ magnifier.intervalFunc();
},100);
Magnify Linked Page Area - Script Codes
Magnify Linked Page Area - Script Codes
Home Page Home
Developer Ken Lane
Username kenlane22
Uploaded October 25, 2022
Rating 3
Size 7,515 Kb
Views 12,144
Do you need developer help for Magnify Linked Page Area?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ken Lane (kenlane22) Script Codes
Name
Links in FirePad
Twinkling Word Cloud
Twinkling Word Cloud React
Comic Talk Bubble
Pin Game
Word Array Into Sentences
Tabs and Filters
CSS Tab UI with SVG diagonal lines
Money Buttons
CSS Box Shadow on Left and Right Only For Tab UI
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!