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.
Related
I'm trying to create a map inside a bootbox dialog. Here is the code.
bootBox.dialog({ title:"test", message = "<div><google-map latitude='37.77493' longitude='-122.41942'></google-map></div>" });
It creates the dialog, creates the maps box with Google logo at bottom but do not load the map. It remains gray.
I found that if I open or close Chrome Developer Tools after the dialog has displayed the map is rendered.
Any suggestion?
Edit after comments:
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/global/plugins/bootstrap/css/bootstrap.min.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="assets/global/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/global/plugins/bootbox/bootbox.min.js"></script>
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="google-map/google-map.html">
<button onclick="ft()">Open Map</button>
<script>
var ft = function(){
bootbox.dialog({title:'test', message: '<google-map latitude="37.77493" longitude="-122.41942"></google-map>'});
}
</script>
</body>
Set the height of google-map for it to appear:
<style>
google-map {
height: 600px;
}
</style>
<script>
bootbox.alert({title:'test', message: '<google-map latitude="37.77493" longitude="-122.41942"></google-map>'})
</script>
<head>
<base href="https://polygit.org/polymer+1.5.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="google-map/google-map.html">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
</head>
<body>
<style>
google-map {
height: 600px;
}
</style>
<script>
bootbox.alert({
title: 'test',
message: '<div><google-map latitude="37.77493" longitude="-122.41942"></google-map></div>'
})
</script>
</body>
codepen
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.
I have an image and I want to fade the central circular portion of the image to be shown clear and the rest of the portion to be faded.
I tried with canvas as well as by taking two divs and making one of them fade,
but not working.
Following is the pattern i need, with the area out of the circle to be faded. Please Help!!
Here's a starting point for you to get an image that's clear center and fade-to-color outside:
position 2 canvases -- one on top of the other
draw the image on the bottom canvas
fill the top canvas with your color (blue,etc)
use a combination of scaling, shadowing and compositing to "reveal" the image underneath
Demo: http://jsfiddle.net/m1erickson/HtL4P/
Example code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{position:absolute;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvas1=document.getElementById("canvas1");
var ctx1=canvas1.getContext("2d");
var img=new Image();img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/landscape2.jpg";
function start(){
canvas.width=canvas1.width=img.width/3;
canvas.height=canvas1.height=img.height/3;
ctx.drawImage(img,0,0,img.width,img.height,0,0,img.width/3,img.height/3);
ctx1.fillStyle="dodgerblue";
ctx1.fillRect(0,0,canvas1.width,canvas1.height);
ctx1.save();
ctx1.scale(3,1);
ctx1.globalCompositeOperation="destination-out";
ctx1.arc(-100,120,40,0,Math.PI*2);
ctx1.shadowColor="white";
ctx1.shadowBlur=60;
ctx1.shadowOffsetX=500;
ctx1.fill();
ctx1.restore();
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=356 height=237></canvas>
<canvas id="canvas1" width=356 height=237></canvas>
</body>
</html>
Is there any way to display a progress-bar showing how long it will take for the whole canvas to load?
I have a HTML login area, wich (on success) executes a JavaScript-function to initiate the KineticJS-drawings.
On my desktop-pc it loads very quickly, so that any loader or progress-bar wouldn't be neccesary, but on mobile devices there shows a blank page up, as soon as I've submitted the login-information and it takes about 5-10 secs to load the stage.
Could I possibly fill this blank page with something, that shows the user that my page is still loading?
You could show a "loading" .gif until your KineticJS project gets running
Just layer a loading.gif under your canvas.
Then when your project is loaded, remove the gif.
Here's code and a Fiddle: http://jsfiddle.net/m1erickson/YaU8W/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
#wrapper{
position:relative;
width:200px;
height:200px;
}
#canvas{
position:absolute; top:0px; left:0px;
border:1px solid green;
width:100%;
height:100%;
}
#loading{
position:absolute; top:50px; left:50px;
border:1px solid gray;
}
</style>
<script>
$(function(){
// Load your KineticJS project
// After your KineticJS is loaded, remove loading.gif
// var element = document.getElementById("loading");
// element.parentNode.removeChild(element);
}); // end $(function(){});
</script>
</head>
<body>
<div id="wrapper">
<img id="loading" src="https://dl.dropboxusercontent.com/u/139992952/loading1.gif" width=32 height=32></canvas>
<canvas id="canvas" width=200 height=200></canvas>
</div>
</body>
</html>
this is sample code i tried n its working
<html>
<head>
<style>
<!--
.execute { background-color: red; height: 25px; }
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js">
</script>
<!-- Let's register a onClick handle for any .execute div. -->
</head>
<body>
<div class="execute">
<head>
<script>
dojo.ready(function() // Dojo will run this after being initialized
{
// Get A list of all tags with id execute and add a event onClick
dojo.query(".execute").connect("onclick", function(evt)
{
alert("Event triggered!");
// ...
});
});
</script>
</head>
<body>
Click me 1
</body>
</div>
<br /><br />
<div class="execute">Click me 2</div>
</body>
</html>
but if i merge it in another code it highlights and as invalid code. what does it means?
Ther are several code issues. double <head> tags, HTML elements after the <body> tag.
cleaned up code:
<html>
<head>
<style>
.execute { background-color: red; height: 25px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"></script>
<script>
dojo.ready(function() { // Dojo will run this after being initialized
// Get A list of all tags with id execute and add a event onClick
dojo.query(".execute").connect("onclick", function(evt) {
alert("Event triggered!");
// ...
});
});
</script>
</head>
<body>
<div class="execute">Click me 1</div>
<br><br>
<div class="execute">Click me 2</div>
</body>
</html>
<head> should only appear once, directly under the <html>, and not within <body>.
Exceptions to this are iframes embedded within existing pages, which have their own document structure.
Just remove the second <head>.
Why do you have two heads? <script>s don't have to be in <head>s.
You should only have a single <head> in your document.
The structure of an HTML page should be as follow:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Although they do not have to be, most people put script tags within the opening and closing header tags. For example:
<html>
<head>
<title></title>
<script>
<!--This is where all your functions should be.-->
</script>
</head>
<body>
</body>
</html>