Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
44878314 by Dan Rempel
Options

Updated the index files for CWL 2017 Fall

1 parent 6df153e3
Inline Side-by-side
Showing 11 changed files with 298 additions and 21 deletions
...@@ -148,7 +148,7 @@ ...@@ -148,7 +148,7 @@
148 position: relative; 148 position: relative;
149 width: 300px; 149 width: 300px;
150 height: 250px; 150 height: 250px;
151 border: 1px solid #55565A; 151 /* border: 1px solid #55565A; */
152 background-color: #FFFFFF; 152 background-color: #FFFFFF;
153 overflow: hidden; 153 overflow: hidden;
154 cursor: pointer; 154 cursor: pointer;
......
...@@ -148,7 +148,7 @@ ...@@ -148,7 +148,7 @@
148 position: relative; 148 position: relative;
149 width: 300px; 149 width: 300px;
150 height: 250px; 150 height: 250px;
151 border: 1px solid #55565A; 151 /* border: 1px solid #55565A; */
152 background-color: #FFFFFF; 152 background-color: #FFFFFF;
153 overflow: hidden; 153 overflow: hidden;
154 cursor: pointer; 154 cursor: pointer;
......
...@@ -148,7 +148,7 @@ ...@@ -148,7 +148,7 @@
148 position: relative; 148 position: relative;
149 width: 300px; 149 width: 300px;
150 height: 600px; 150 height: 600px;
151 border: 1px solid #55565A; 151 /* border: 1px solid #55565A; */
152 background-color: #FFFFFF; 152 background-color: #FFFFFF;
153 overflow: hidden; 153 overflow: hidden;
154 cursor: pointer; 154 cursor: pointer;
......
...@@ -148,7 +148,7 @@ ...@@ -148,7 +148,7 @@
148 position: relative; 148 position: relative;
149 width: 300px; 149 width: 300px;
150 height: 600px; 150 height: 600px;
151 border: 1px solid #55565A; 151 /* border: 1px solid #55565A; */
152 background-color: #FFFFFF; 152 background-color: #FFFFFF;
153 overflow: hidden; 153 overflow: hidden;
154 cursor: pointer; 154 cursor: pointer;
......
...@@ -155,7 +155,7 @@ ...@@ -155,7 +155,7 @@
155 position: relative; 155 position: relative;
156 width: 300px; 156 width: 300px;
157 height: 600px; 157 height: 600px;
158 border: 1px solid #55565A; 158 /* border: 1px solid #55565A; */
159 background-color: #FFFFFF; 159 background-color: #FFFFFF;
160 overflow: hidden; 160 overflow: hidden;
161 cursor: pointer; 161 cursor: pointer;
......
...@@ -155,7 +155,7 @@ ...@@ -155,7 +155,7 @@
155 position: relative; 155 position: relative;
156 width: 300px; 156 width: 300px;
157 height: 600px; 157 height: 600px;
158 border: 1px solid #55565A; 158 /* border: 1px solid #55565A; */
159 background-color: #FFFFFF; 159 background-color: #FFFFFF;
160 overflow: hidden; 160 overflow: hidden;
161 cursor: pointer; 161 cursor: pointer;
......
...@@ -155,7 +155,7 @@ ...@@ -155,7 +155,7 @@
155 position: relative; 155 position: relative;
156 width: 600px; 156 width: 600px;
157 height: 566px; 157 height: 566px;
158 border: 1px solid #55565A; 158 /* border: 1px solid #55565A; */
159 background-color: #FFFFFF; 159 background-color: #FFFFFF;
160 overflow: hidden; 160 overflow: hidden;
161 cursor: pointer; 161 cursor: pointer;
......
1 <!DOCTYPE html>
2 <head>
3
4 <meta charset="utf-8">
5 <title>HTML5 Ad</title>
6 <!--
7 <script type="text/javascript">
8
9 // IAB source: modified to allow link testing
10 var clickTag = "http://thecommonwell.ca/wave";
11 function getParameterByName(name)
12 {
13 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
14 if (match == null || match == ""){
15 return clickTag;
16 } else{
17 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
18 }
19 }
20 clickTag = getParameterByName('clickTag');
21 </script>
22 -->
23 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
24 <script type="text/javascript">
25 window.onload = function() {
26 eyeBuild.initialize();
27 window.isVideoClick = false;
28
29 var videoPlays = 0;
30 var v0 = false;
31 var v25 = false;
32 var v50 = false;
33 var v75 = false;
34
35 var video = document.getElementById("video");
36 var videoControls = document.getElementById("video-controls");
37 var playButton = document.getElementById("play-pause");
38 var muteButton = document.getElementById("mute");
39
40 playButton.addEventListener("click", function(e) {
41 if (video.paused == true) {
42 play();
43 eyeBuild.doIAT(0);
44 } else {
45 pause();
46 eyeBuild.doIAT(1);
47 }
48 });
49 var play = function(){
50 video.play();
51 videoPlays++;
52 videoControls.className = ""
53 toggleClass(videoControls, "playing");
54 toggleClass(playButton, "playing");
55 }
56 var pause = function(){
57 video.pause();
58 toggleClass(videoControls, "playing");
59 toggleClass(playButton, "playing");
60 }
61 video.addEventListener('ended', function(e){
62 video.currentTime = 0;
63 pause();
64 videoControls.className = "start"
65 v0 = false;
66 v25 = false;
67 v50 = false;
68 v75 = false;
69 eyeBuild.doIAT(9);
70 }, false);
71
72 muteButton.addEventListener("click", function(e) {
73 if (video.muted == true) {
74 eyeBuild.doIAT(4);
75 } else {
76 eyeBuild.doIAT(3);
77 }
78 video.muted = !video.muted;
79 toggleClass(muteButton, "muted");
80 });
81
82 // track video plays
83 video.addEventListener('timeupdate', function(e){
84 var pct = video.currentTime / video.duration *100;
85 if (pct > 75 && !v75){
86 v75 = true;
87 eyeBuild.doIAT(8);
88 }else if (pct > 50 && !v50){
89 v50 = true;
90 eyeBuild.doIAT(7);
91 }else if (pct > 25 && !v25){
92 v25 = true;
93 eyeBuild.doIAT(6);
94 }else if (pct > 0 && !v0){
95 v0 = true;
96 eyeBuild.doIAT(5);
97 if(videoPlays>1){
98 eyeBuild.doIAT(10);
99 }
100 }
101 }, false);
102
103 }
104
105
106 function toggleClass(element, toggleClass){
107 var currentClass = element.className;
108 if(currentClass.indexOf(toggleClass) > -1){ //has class
109 newClass = currentClass.replace(toggleClass,"")
110 }else{
111 newClass = currentClass + " " + toggleClass;
112 }
113 element.className = newClass;
114 }
115
116 </script>
117
118
119 <style>
120
121 body{
122 margin: 0;
123 padding: 0;
124 width: 600px;
125 height: 566px;
126 line-height: 1.2;
127 font-size: 27px;
128 letter-spacing: .4;
129 color: #CD040B;
130 font-family: "Neue Haas Grotesk", Arial, sans-serif;
131 /*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
132 font-style: normal;
133 }
134
135 a{
136 text-decoration: none;
137 color: inherit;
138 }
139 #click-tag{
140 display: block;
141 position: absolute;
142 width: 100%;
143 height: 114px;
144 top:0px;
145 }
146 #click-tag2{
147 display: block;
148 position: absolute;
149 width: 100%;
150 height: 114px;
151 top:453px;
152 }
153
154 #border{
155 position: relative;
156 width: 600px;
157 height: 566px;
158 /* border: 1px solid #55565A; */
159 background-color: #FFFFFF;
160 overflow: hidden;
161 cursor: pointer;
162 box-sizing: border-box;
163 }
164
165 #border:hover #cta{
166 background-color: #666666;
167 }
168
169 #border:active #cta{
170 background-color: #000000;
171 }
172
173 #video, #video-controls{
174 position: absolute;
175 width: 598px;
176 height: 337px;
177 left:1px;
178 top:113px;
179 }
180 #video-controls.start{
181 background: url(assets/video-poster.jpg) no-repeat center center;
182 opacity:1;
183 }
184 #video-controls.playing {
185 opacity:0;
186 }
187
188 #video-controls:hover {
189 opacity:1;
190 }
191
192 #video-controls button{
193 border: none;
194 cursor: pointer;
195 width: 100%;
196 height: 100%;
197 }
198
199 /*
200 button#play-pause{
201 background: url(assets/play.svg) no-repeat center center;
202 background-size: 83px 83px;
203 }
204 button#play-pause.playing{
205 background: url(assets/pause.svg) no-repeat 30px 127px;
206 background-size: 20px 20px;
207 }
208 button#play-pause:hover{
209 background-size: 85px 85px;
210 }
211 button#play-pause.playing:hover{
212 background-position: 29px 126px;
213 background-size: 21px 21px;
214 }
215 */
216 button#play-pause{
217 background: url(assets/play.svg) no-repeat center center;
218 background-size: 83px 83px;
219 }
220 button#play-pause.playing{
221 background: url(assets/pause.svg) no-repeat 30px 311px;
222 background-size: 20px 20px;
223 }
224 button#play-pause:hover{
225 background-size: 85px 85px;
226 }
227 button#play-pause.playing:hover{
228 background-position: 29px 310px;
229 background-size: 21px 21px;
230 }
231
232
233 button#mute{
234 background: url(assets/mute-un.svg) no-repeat center center;
235 background-size: 20px 20px;
236 position: absolute;
237 width: 22px;
238 height: 22px;
239 left:5px;
240 bottom: 5px;
241 }
242 button#mute.muted{
243 background: url(assets/mute.svg) no-repeat center center;
244 background-size: 20px 20px;
245 }
246
247 button#mute:hover{
248 background-size: 22px 22px;
249 }
250
251
252 </style>
253
254 </head>
255
256 <body>
257 <div id="border">
258 <div id="img"><img id="logoImg" src="assets/img.gif" width="600" height="566" style="border-style:none"></div>
259 <video id="video" width="272" height="152">
260 <!-- <source src="https://player.vimeo.com/external/231396375.sd.mp4?s=0af188e125a9506ac3a15823208bcf87a8051513&profile_id=164" type="video/mp4" class="A"> -->
261 <source src="https://player.vimeo.com/external/231396499.sd.mp4?s=73e636a2a254547c28119040deb033fb3e94d708&profile_id=164" type="video/mp4" class="B">
262 Your browser doesn't support HTML5 video.
263 </video>
264 <div id="video-controls" class="start">
265 <button type="button" id="play-pause" class=""></button>
266 <button type="button" id="mute" class=""></button>
267 </div>
268
269 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
270 <a id="click-tag2" href="javascript:eyeBuild.doClick(0)"></a>
271 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
272 </div>
273
274 </body>
275
276 </html>
...\ No newline at end of file ...\ No newline at end of file
...@@ -11,15 +11,13 @@ ...@@ -11,15 +11,13 @@
11 </head> 11 </head>
12 <body> 12 <body>
13 13
14 <h3><a href="index.html">Desktop HTML5 Ads</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="index_mobile.html">Mobile Ads</a></h3> 14 <h3><a href="index.html">Postmedia & Acuity</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="index_twn.html">TWN</a></h3>
15 15
16 <iframe id='' class="b728x90 stacked" scrolling="no" src="en_728x90_cwl_2016Fall_farmers/index.html"></iframe> 16 <iframe id='' class="b300x250 stacked" scrolling="no" src="CWL_2017_Fall_Online_300x250_A/index.html"></iframe>
17 <iframe id='' class="b728x90 stacked" scrolling="no" src="en_728x90_cwl_2016Fall_store/index.html"></iframe> 17 <iframe id='' class="b300x250 stacked" scrolling="no" src="CWL_2017_Fall_Online_300x250_B/index.html"></iframe>
18 <iframe id='' class="b728x90 stacked" scrolling="no" src="en_728x90_cwl_2016Fall_trades/index.html"></iframe>
19 <iframe id='' class="b728x90 stacked" scrolling="no" src="en_728x90_cwl_2016Fall_business/index.html"></iframe>
20 18
21 <iframe id='' class="b300x600 stacked" scrolling="no" src="en_300x600_cwl_2016Fall_makeawave/index.html"></iframe> 19 <iframe id='' class="b300x600 stacked" scrolling="no" src="CWL_2017_Fall_Online_300x600_A/index.html"></iframe>
22 <iframe id='' class="b600x566 stacked" scrolling="no" src="en_600x566_cwl_2016Fall_makeawave/index.html"></iframe> 20 <iframe id='' class="b300x600 stacked" scrolling="no" src="CWL_2017_Fall_Online_300x600_B/index.html"></iframe>
23 21
24 22
25 23
......
...@@ -11,12 +11,14 @@ ...@@ -11,12 +11,14 @@
11 </head> 11 </head>
12 <body> 12 <body>
13 13
14 <h3><a href="index.html">Desktop HTML5 Ads</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="index_mobile.html">Mobile Ads</a></h3> 14 <h3><a href="index.html">Postmedia & Acuity</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="index_twn.html">TWN</a></h3>
15
16 <iframe id='' class="b300x600" scrolling="no" src="CWL_2017_Fall_Online_TWN_300x600_A/index.html"></iframe>
17 <iframe id='' class="b300x600" scrolling="no" src="CWL_2017_Fall_Online_TWN_300x600_B/index.html"></iframe>
18
19 <iframe id='' class="b600x566" scrolling="no" src="CWL_2017_Fall_Online_TWN_600x566_A/index.html"></iframe>
20 <iframe id='' class="b600x566" scrolling="no" src="CWL_2017_Fall_Online_TWN_600x566_B/index.html"></iframe>
21
15 22
16 <img class="stacked" src="en_320x50_cwl_2016Fall_business.gif" alt="en_320x50_cwl_2016Fall_business" width="320" height="50">
17 <img class="stacked" src="en_640x100_cwl_2016Fall_farmers.gif" alt="en_640x100_cwl_2016Fall_business" width="640" height="100">
18 <img class="stacked" src="en_640x100_cwl_2016Fall_store.gif" alt="en_640x100_cwl_2016Fall_business" width="640" height="100">
19 <img class="stacked" src="en_640x100_cwl_2016Fall_trades.gif" alt="en_640x100_cwl_2016Fall_business" width="640" height="100">
20 <img class="stacked" src="en_640x100_cwl_2016Fall_business.gif" alt="en_640x100_cwl_2016Fall_business" width="640" height="100">
21 </body> 23 </body>
22 </html> 24 </html>
......
...@@ -24,7 +24,8 @@ a:hover { ...@@ -24,7 +24,8 @@ a:hover {
24 } 24 }
25 iframe, img { 25 iframe, img {
26 margin: 10px; 26 margin: 10px;
27 border: 1px #d4d4d4 solid; 27 /* border: 1px #d4d4d4 solid; */
28 border: 0px fuchsia solid;
28 overflow: hidden; 29 overflow: hidden;
29 iframe::-webkit-scrollbar { 30 iframe::-webkit-scrollbar {
30 display: none; 31 display: none;
......