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 @@
position: relative;
width: 300px;
height: 250px;
border: 1px solid #55565A;
/* border: 1px solid #55565A; */
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
......
......@@ -148,7 +148,7 @@
position: relative;
width: 300px;
height: 250px;
border: 1px solid #55565A;
/* border: 1px solid #55565A; */
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
......
......@@ -148,7 +148,7 @@
position: relative;
width: 300px;
height: 600px;
border: 1px solid #55565A;
/* border: 1px solid #55565A; */
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
......
......@@ -148,7 +148,7 @@
position: relative;
width: 300px;
height: 600px;
border: 1px solid #55565A;
/* border: 1px solid #55565A; */
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
......
......@@ -155,7 +155,7 @@
position: relative;
width: 300px;
height: 600px;
border: 1px solid #55565A;
/* border: 1px solid #55565A; */
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
......
......@@ -155,7 +155,7 @@
position: relative;
width: 300px;
height: 600px;
border: 1px solid #55565A;
/* border: 1px solid #55565A; */
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
......
......@@ -155,7 +155,7 @@
position: relative;
width: 600px;
height: 566px;
border: 1px solid #55565A;
/* border: 1px solid #55565A; */
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
......
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 Ad</title>
<!--
<script type="text/javascript">
// IAB source: modified to allow link testing
var clickTag = "http://thecommonwell.ca/wave";
function getParameterByName(name)
{
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
if (match == null || match == ""){
return clickTag;
} else{
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
}
clickTag = getParameterByName('clickTag');
</script>
-->
<script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
<script type="text/javascript">
window.onload = function() {
eyeBuild.initialize();
window.isVideoClick = false;
var videoPlays = 0;
var v0 = false;
var v25 = false;
var v50 = false;
var v75 = false;
var video = document.getElementById("video");
var videoControls = document.getElementById("video-controls");
var playButton = document.getElementById("play-pause");
var muteButton = document.getElementById("mute");
playButton.addEventListener("click", function(e) {
if (video.paused == true) {
play();
eyeBuild.doIAT(0);
} else {
pause();
eyeBuild.doIAT(1);
}
});
var play = function(){
video.play();
videoPlays++;
videoControls.className = ""
toggleClass(videoControls, "playing");
toggleClass(playButton, "playing");
}
var pause = function(){
video.pause();
toggleClass(videoControls, "playing");
toggleClass(playButton, "playing");
}
video.addEventListener('ended', function(e){
video.currentTime = 0;
pause();
videoControls.className = "start"
v0 = false;
v25 = false;
v50 = false;
v75 = false;
eyeBuild.doIAT(9);
}, false);
muteButton.addEventListener("click", function(e) {
if (video.muted == true) {
eyeBuild.doIAT(4);
} else {
eyeBuild.doIAT(3);
}
video.muted = !video.muted;
toggleClass(muteButton, "muted");
});
// track video plays
video.addEventListener('timeupdate', function(e){
var pct = video.currentTime / video.duration *100;
if (pct > 75 && !v75){
v75 = true;
eyeBuild.doIAT(8);
}else if (pct > 50 && !v50){
v50 = true;
eyeBuild.doIAT(7);
}else if (pct > 25 && !v25){
v25 = true;
eyeBuild.doIAT(6);
}else if (pct > 0 && !v0){
v0 = true;
eyeBuild.doIAT(5);
if(videoPlays>1){
eyeBuild.doIAT(10);
}
}
}, false);
}
function toggleClass(element, toggleClass){
var currentClass = element.className;
if(currentClass.indexOf(toggleClass) > -1){ //has class
newClass = currentClass.replace(toggleClass,"")
}else{
newClass = currentClass + " " + toggleClass;
}
element.className = newClass;
}
</script>
<style>
body{
margin: 0;
padding: 0;
width: 600px;
height: 566px;
line-height: 1.2;
font-size: 27px;
letter-spacing: .4;
color: #CD040B;
font-family: "Neue Haas Grotesk", Arial, sans-serif;
/*font-weight: 800;*/ /*BOLD-800, MEDIUM-600, ROMAN - 400*/
font-style: normal;
}
a{
text-decoration: none;
color: inherit;
}
#click-tag{
display: block;
position: absolute;
width: 100%;
height: 114px;
top:0px;
}
#click-tag2{
display: block;
position: absolute;
width: 100%;
height: 114px;
top:453px;
}
#border{
position: relative;
width: 600px;
height: 566px;
/* border: 1px solid #55565A; */
background-color: #FFFFFF;
overflow: hidden;
cursor: pointer;
box-sizing: border-box;
}
#border:hover #cta{
background-color: #666666;
}
#border:active #cta{
background-color: #000000;
}
#video, #video-controls{
position: absolute;
width: 598px;
height: 337px;
left:1px;
top:113px;
}
#video-controls.start{
background: url(assets/video-poster.jpg) no-repeat center center;
opacity:1;
}
#video-controls.playing {
opacity:0;
}
#video-controls:hover {
opacity:1;
}
#video-controls button{
border: none;
cursor: pointer;
width: 100%;
height: 100%;
}
/*
button#play-pause{
background: url(assets/play.svg) no-repeat center center;
background-size: 83px 83px;
}
button#play-pause.playing{
background: url(assets/pause.svg) no-repeat 30px 127px;
background-size: 20px 20px;
}
button#play-pause:hover{
background-size: 85px 85px;
}
button#play-pause.playing:hover{
background-position: 29px 126px;
background-size: 21px 21px;
}
*/
button#play-pause{
background: url(assets/play.svg) no-repeat center center;
background-size: 83px 83px;
}
button#play-pause.playing{
background: url(assets/pause.svg) no-repeat 30px 311px;
background-size: 20px 20px;
}
button#play-pause:hover{
background-size: 85px 85px;
}
button#play-pause.playing:hover{
background-position: 29px 310px;
background-size: 21px 21px;
}
button#mute{
background: url(assets/mute-un.svg) no-repeat center center;
background-size: 20px 20px;
position: absolute;
width: 22px;
height: 22px;
left:5px;
bottom: 5px;
}
button#mute.muted{
background: url(assets/mute.svg) no-repeat center center;
background-size: 20px 20px;
}
button#mute:hover{
background-size: 22px 22px;
}
</style>
</head>
<body>
<div id="border">
<div id="img"><img id="logoImg" src="assets/img.gif" width="600" height="566" style="border-style:none"></div>
<video id="video" width="272" height="152">
<!-- <source src="https://player.vimeo.com/external/231396375.sd.mp4?s=0af188e125a9506ac3a15823208bcf87a8051513&profile_id=164" type="video/mp4" class="A"> -->
<source src="https://player.vimeo.com/external/231396499.sd.mp4?s=73e636a2a254547c28119040deb033fb3e94d708&profile_id=164" type="video/mp4" class="B">
Your browser doesn't support HTML5 video.
</video>
<div id="video-controls" class="start">
<button type="button" id="play-pause" class=""></button>
<button type="button" id="mute" class=""></button>
</div>
<a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
<a id="click-tag2" href="javascript:eyeBuild.doClick(0)"></a>
<!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
</div>
</body>
</html>
\ No newline at end of file
......@@ -11,15 +11,13 @@
</head>
<body>
<h3><a href="index.html">Desktop HTML5 Ads</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="index_mobile.html">Mobile Ads</a></h3>
<h3><a href="index.html">Postmedia & Acuity</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="index_twn.html">TWN</a></h3>
<iframe id='' class="b728x90 stacked" scrolling="no" src="en_728x90_cwl_2016Fall_farmers/index.html"></iframe>
<iframe id='' class="b728x90 stacked" scrolling="no" src="en_728x90_cwl_2016Fall_store/index.html"></iframe>
<iframe id='' class="b728x90 stacked" scrolling="no" src="en_728x90_cwl_2016Fall_trades/index.html"></iframe>
<iframe id='' class="b728x90 stacked" scrolling="no" src="en_728x90_cwl_2016Fall_business/index.html"></iframe>
<iframe id='' class="b300x250 stacked" scrolling="no" src="CWL_2017_Fall_Online_300x250_A/index.html"></iframe>
<iframe id='' class="b300x250 stacked" scrolling="no" src="CWL_2017_Fall_Online_300x250_B/index.html"></iframe>
<iframe id='' class="b300x600 stacked" scrolling="no" src="en_300x600_cwl_2016Fall_makeawave/index.html"></iframe>
<iframe id='' class="b600x566 stacked" scrolling="no" src="en_600x566_cwl_2016Fall_makeawave/index.html"></iframe>
<iframe id='' class="b300x600 stacked" scrolling="no" src="CWL_2017_Fall_Online_300x600_A/index.html"></iframe>
<iframe id='' class="b300x600 stacked" scrolling="no" src="CWL_2017_Fall_Online_300x600_B/index.html"></iframe>
......
......@@ -11,12 +11,14 @@
</head>
<body>
<h3><a href="index.html">Desktop HTML5 Ads</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="index_mobile.html">Mobile Ads</a></h3>
<h3><a href="index.html">Postmedia & Acuity</a> &nbsp; &nbsp; | &nbsp; &nbsp;<a href="index_twn.html">TWN</a></h3>
<iframe id='' class="b300x600" scrolling="no" src="CWL_2017_Fall_Online_TWN_300x600_A/index.html"></iframe>
<iframe id='' class="b300x600" scrolling="no" src="CWL_2017_Fall_Online_TWN_300x600_B/index.html"></iframe>
<iframe id='' class="b600x566" scrolling="no" src="CWL_2017_Fall_Online_TWN_600x566_A/index.html"></iframe>
<iframe id='' class="b600x566" scrolling="no" src="CWL_2017_Fall_Online_TWN_600x566_B/index.html"></iframe>
<img class="stacked" src="en_320x50_cwl_2016Fall_business.gif" alt="en_320x50_cwl_2016Fall_business" width="320" height="50">
<img class="stacked" src="en_640x100_cwl_2016Fall_farmers.gif" alt="en_640x100_cwl_2016Fall_business" width="640" height="100">
<img class="stacked" src="en_640x100_cwl_2016Fall_store.gif" alt="en_640x100_cwl_2016Fall_business" width="640" height="100">
<img class="stacked" src="en_640x100_cwl_2016Fall_trades.gif" alt="en_640x100_cwl_2016Fall_business" width="640" height="100">
<img class="stacked" src="en_640x100_cwl_2016Fall_business.gif" alt="en_640x100_cwl_2016Fall_business" width="640" height="100">
</body>
</html>
......
......@@ -24,7 +24,8 @@ a:hover {
}
iframe, img {
margin: 10px;
border: 1px #d4d4d4 solid;
/* border: 1px #d4d4d4 solid; */
border: 0px fuchsia solid;
overflow: hidden;
iframe::-webkit-scrollbar {
display: none;
......