-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathinstructions.html
99 lines (90 loc) · 3.55 KB
/
instructions.html
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!--
KeyShotXR
(c) Copyright 2012-2017 Luxion ApS - All Rights Reserved.
Instructions for deploying KeyShotXR to a website and sharing via email.
-->
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>KeyShotXR instructions</title>
<style>
*, html, body {
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
color: #666666;
}
.code {
display: inline-block;
padding: 5px;
border: 1px solid #ccc;
color: #B0B0B0;
background-color: #173C47;
border-radius: 3px;
}
.overlay {
position: absolute;
display: inline-block;
width: 1920px; /* same width as iframe below */
height: 1487px; /* same height as iframe below */
pointer-events: none;
}
.c-tag {
color: #B38D36;
}
.c-attribute {
color: #48B093;
}
</style>
</head>
<body>
<h2>Instructions for sharing KeyShotXR</h2>
<p>Below is your KeyShotXR. To view the KeyShotXR by itself open the <i><a href="IE3.9.html">IE3.9.html</a></i> file in the <i>IE3.9</i> folder.</p>
<div style="max-width: 1920px; max-height: 1487px;">
<div class="overlay" id="overlay"> </div>
<div style="left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 77.4479%; overflow: hidden;">
<iframe src="IE3.9.html"
allowfullscreen
style="position: absolute; top: 0px; left: 0px; height: 100%; width: 1px; min-width: 100%; *width: 100%;"
frameborder="0"
scrolling="no">
</iframe>
</div>
</div>
<h2>Uploading to and displaying on your website:</h2>
<p>Upload the 'IE3.9' folder with all of its contents to your webserver. Copy
(Ctrl-C/Cmd-C) and Paste (Ctrl-V/Cmd-V) the code below to your webpage.
<br>
<br>
<b>[Code]:</b>
<pre class="code"><<span class="c-tag">div</span> style=<span class="c-attribute">"max-width: 1920px; max-height: 1487px;"</span>>
<<span class="c-tag">div</span> style=<span class="c-attribute">"left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 77.4479%; overflow: hidden;"</span>>
<<span class="c-tag">iframe</span> src=<span class="c-attribute">"IE3.9.html"</span>
allowfullscreen
style=<span class="c-attribute">"position: absolute; top: 0px; left: 0px; height: 100%; width: 1px; min-width: 100%; *width: 100%;"</span>
frameborder=<span class="c-attribute">"0"</span>
scrolling=<span class="c-attribute">"no"</span>>
</<span class="c-tag">iframe</span>>
</<span class="c-tag">div</span>>
</<span class="c-tag">div</span>></pre>
</p>
<p>If you share your KeyShotXR via email, send the entire zipped 'IE3.9' folder
to the recipient(s).</p>
<script>
// In cases where the mouse is in a drag state and dragged
// outside of the iframe the event is still activated
// when focusing back into the iframe. This will block the event until
// the mouse activates the event.
var blockEvent = true;
if (blockEvent) {
var overlay = document.getElementById("overlay");
document.addEventListener("mousedown", function(e) {
overlay.style.pointerEvents = "none";
}, false);
document.addEventListener("mouseup", function(e) {
overlay.style.pointerEvents = "auto";
}, false);
}
</script>
</body>
</html>