clipper/clipper.html at master · jangid/clipper · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<html>
    <head>
        <title>Clippy HTML</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    </head>
    <body>
        <div id="main">
            Hello <span id="clipper-placeholder"><img src="assets/button_up.png" alt="placeholder image"></img></span> World
        </div>
        <div id="clipper-wrapper" style="position: absolute; z-index: 9998; width: 14px; height: 14px; left: -9999px; top: -9999px; ">
            <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
                width="100%"
                height="100%"
                id="clipper" title="copy">
                <param name="movie" value="build/clipper.swf"/>
                <param name="allowScriptAccess" value="always" />
                <param name="quality" value="high" />
                <param name="scale" value="noscale" />
                <param NAME="FlashVars" value="text=Hello Zindagi">
                <param name="bgcolor" value="#ffffff">
                <embed src="build/clipper.swf"
                    width="100%"
                    height="100%"
                    name="clipper"
                    quality="high"
                    allowScriptAccess="always"
                    type="application/x-shockwave-flash"
                    pluginspage="http://www.macromedia.com/go/getflashplayer"
                    FlashVars="text=Hello Zindagi"
                    bgcolor="#ffffff" title="copy"/>
            </object>
        </div>
        <div id="clipper-tooltip" style="position: absolute; z-index: 9998; width: 100px; height: 60px; left: -9999px; top: -9999px; ">
            Copy To Clipboard
        </div>
        <script type="text/javascript">
            jQuery(document).ready(function () {
                var position = jQuery('#clipper-placeholder').position();
                jQuery('#clipper-wrapper').css('left', position.left);
                jQuery('#clipper-wrapper').css('top', position.top);
                jQuery('#clipper-wrapper').hover(
                    function() {
                        jQuery('#clipper-tooltip').css('left',
                            position.left + 7);
                        jQuery('#clipper-tooltip').css('top',
                            position.top + 14);
                    },
                    function() {
                        jQuery('#clipper-tooltip').css('left', '-9999px');
                        jQuery('#clipper-tooltip').css('top', '-9999px');
                    }
                );
            });
        </script>
    </body>
</html>