I tried to add an exit URL and metrics from doubleclick studio from a converted swf with swiffy to the HTML5 file.
Could anyone tell me what the most efficient way is to do this? What would the code look like in the HTML5 creative? Where in the code to add best? What tags to use?
The code swiffy generates looks like a mess to me.
<!doctype html>
<html>
<head>
<script src="https://s0.2mdn.net/ads/studio/Enabler.js"> </script>
<link rel="stylesheet" type="text/css" href="exit.css">
<script src="exit.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Swiffy Output</title>
<script type="text/javascript" src="https://www.gstatic.com/swiffy/v7.3.0/runtime.js"></script>
<script>
swiffyobject = {"as3":true,"frameRate":25,"frameCount":342,"backgroundColor":-1,"frameSize":{"ymin":0,"xmin":0,"ymax":1800,"xmax":19400},"fileSize":52767,"v":"7.3.0","internedStrings":["::::::6Y:","::::: <<shortend from here>>
</script>
<style>html, body {width: 100%; height: 100%}</style>
</head>
<body style="margin: 0; overflow: hidden">
<div id="swiffycontainer" style="width: 970px; height: 90px">
</div>
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject, {});
stage.start();
</script>
</body>
</html>
This is an add-on / improvement to this answer.
So you will have a few files in your HTML5 folder ( that you'll package into a zip to upload to Doubleclick Studio at the end of the build process )
index.html
styles.css
backupimage ( *.gif / *.jpg )
ajax-loader.gif ( I use this as a placeholder when elements are still loading )
object.js ( where the converted Swiffy code will be )
script.js ( where the magic happens )
The backupimage is the image you should show just in case the Creative doesn't load, and the ajax-loader.gif is available widely online. So we'll focus on the other 4 files.
index.html
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>[ Creative Name ]</title>
<meta name="ad.size" content="width=300,height=250">
<link rel="stylesheet" type="text/css" href="styles.css" media="all">
<script type="text/javascript" src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
<!-- Make sure that this is the most recent runtime.js from the Swiffy Conversion file -->
<script type="text/javascript" src="https://www.gstatic.com/swiffy/v7.3.0/runtime.js"></script>
<script src="object.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="swiffycontainer" class="loading"></div>
<div id="bg-exit"></div>
</body>
</html>
styles.css
* {
border:0;
padding:0;
margin:0;
}
body, html {
width:100%;
height:100%;
overflow:hidden;
background:#fff;
width:100%;
height:100%;
position:relative;
}
#bg-exit {
position:absolute;
z-index:999999;
left:0;
top:0;
width:100%;
height:100%;
overflow:hidden;
cursor: pointer;
}
#swiffycontainer {
position:absolute;
z-index:100;
width:100%;
height:100%;
overflow:hidden;
}
#swiffycontainer.loading {
background: url("ajax-loader.gif") center center no-repeat;
}
objects.js
Copy whatever the output from the swiffy conversion and paste into the {} as shown below
var swiffyobject = {
"as3":false,"frameRate":24,"frameCount":114,"backgroundColor":-1,"frameSize":{" .... blah blah blah blah }]
};
scripts.js
var stage;
var clickTag;
if (!Enabler.isInitialized()) {
Enabler.addEventListener(
studio.events.StudioEvent.INIT,
enablerInitialized
);
} else {
enablerInitialized();
}
function enablerInitialized() {
if (!Enabler.isVisible()) {
Enabler.addEventListener(
studio.events.StudioEvent.VISIBLE,
adVisible
);
} else {
adVisible();
}
}
function adVisible() {
document.getElementById('swiffycontainer').className = "";
document.getElementById('bg-exit').addEventListener('click', exitHandler, false);
stage = new swiffy.Stage(document.getElementById('swiffycontainer'), swiffyobject, {});
stage.start();
}
function exitHandler(e) {
Enabler.exit('Exit');
}
Doing the above works for me and all of my creatives using the above code have been approved by Google's QA and are now being trafficked - so I'm pretty confident with my answer - although again, this is just an improvement from this answer.
Related
I have a simple C++ SDL2 program and I'm using emscripten to run it in the browser. Emscripten generates two files (javascript and webassembly) and it renders everything into HTML canvas. I found this simple HTML canvas on the internet and it works just fine but for some reason, it has white borders on the left and on the top. How can I remove these borders?
Here is the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
<script type='text/javascript'>
var Module = {
canvas: (function() { return document.getElementById('canvas'); })()
};
</script>
<script src="index.js"></script>
</body>
</html>
screenshot here
This is the browser-default margin on the body-element.
You can remove it by adding some CSS to the head-element.
Example:
<style>
body {
margin: 0;
}
</style>
I have an HTML file that I'm calling in my Flutter app.
On fetching the file using WebView, my output looks like the image shown below and does not cover up my entire screen.
This is my code:
<html>
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://s3.amazonaws.com/cdn.theoremreach/v3/theorem_reach.min.js"></script>
</head>
<body>
<iframe src="https://theoremreach.com/respondent_entry/direct?api_key=abc&user_id=12345"></iframe>
<script type="text/javascript">
var theoremReachConfig = {
apiKey: "abc",
userId: "12345",
onRewardCenterOpened: onRewardCenterOpened,
onReward: onReward,
onRewardCenterClosed: onRewardCenterClosed
};
var TR = new TheoremReach(theoremReachConfig);
function onRewardCenterOpened(){
console.log("onRewardCenterOpened");
}
function onReward(data){
window.postMessage(data.earnedThisSession)
console.log("onReward: " + data.earnedThisSession);
}
function onRewardCenterClosed(){
console.log("onRewardCenterClosed");
}
if (TR.isSurveyAvailable()) {
TR.showRewardCenter();
}
</script>
</body>
</html>
And this is what the screen looks like:
I am trying to fit the entire WebView on my screen.
Adding this to your head should work fine.
<style>
iframe {
height:100%;
width:100%;
margin:0 auto;
position:absolute;
top:0;
left:0;
}
</style>
Right now I have a canvas pop-up, but I want it to be separate from the window from which it is originated (it's stuck within the boundaries of the first window, I can only drag it within the first window).
Is there any way to do this?
You can open a new browser instance with: window.open(aURL,'name','width=400,height=400')
1. Create an html file for your popup
Put this code into popupTest.html:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
window{width:300px; height:150px; }
body{ background-color: ivory;}
#canvas{border:1px solid red; margin:0 auto; }
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.font='14px verdana';
ctx.fillText('I am a popup canvas.',20,50);
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
2. Open the popup (popupTest.html) in a new browser instance
Put this code into runPopup.html and open it:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
</style>
<script>
$(function(){
var popupURL='popupTest.html';
function myPopup(url){
window.open(url,'myPopup','width=400,height=400,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,copyhistory=no,resizable=yes');
return false;
}
$('#pop').on('click',function(){
myPopup(popupURL);
return(false);
});
}); // end $(function(){});
</script>
</head>
<body>
<button id=pop>Open Popup</button>
</body>
</html>
Note about opening your popup
This method requires the user to trigger the popup (eg button-click or anchor-click). If you want to programmatically trigger the popup you must be sure the user has any popup blocker turned off or else your popup will be blocked.
I'm trying to make my first video background and found this tubular plugin. when i follow the step, it seems that adding the code in body gets complicated.
I added the jquery link and for some reason the code i added is not valid.
can anyone help me how tomake this plugin work?
This is the instruction im trying to follow:
https://code.google.com/p/jquery-tubular/
Thank you in advance!
here is my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Using Tubular Plugin</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.1.0.js"></script>
<style type="text/css">
body,html { margin:0; padding::0; height:100%; width:100%;}
#topSection {
background-color: #D8D8D8;
height:100%;
min-height:100%;
width:100&;
position:relative;
}
</style>
</head>
<body>
$().ready(function() {
$('#wrapper').tubular({videoId: 'idOfYourVideo'}); // where idOfYourVideo is the YouTube ID.
});
<section id="topSection">Top section- I need a youtube video background here</section>
</body>
</html>
Hi Have you tryed calling jQuery from head. You should add a piece of code like:
<script>
$("document").ready(function() {
var options = { videoId: "xp-8HysWkxw", // where idOfYourVideo is the YouTube ID.
start: 0,
repeat: true
};
$("#page").tubular(options); // Here is the jQuery call
});
</script>
<html>
<head>
<title>My Website </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {allowFullScreen:true};
var attributes = {};
swfobject.embedSWF("preview.swf", "nav", "100%", "100%", "9.0.0", "expressInstall.swf",flashvars,params,attributes);
</script>
<style>
body{
margin-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
}
</style>
</head>
<body>
<div id="content" align="center">
<div id="nav">
<p><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></p>
</div>
</body>
</html>
Have you added the link to the SwfObject JS file
Have you also uploaded the swfobject.js file to the server?
Try setting a min-height on your nav div:
div#nav { min-height:100px; }