I am following the last example on this link:https://support.google.com/dfp_premium/answer/4578089?vid=1-635774352437004756-19071376
its resizing however my ad is not showing for some reason, pls see below:
<html>
<head>
<title>GPT Training - Responsive Test Page</title>
<script>
// Load GPT asynchronously
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
var gads = document.createElement('script');
gads.async = true;
var useSSL = 'https:' == document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') +
'//www.googletagservices.com/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
</script>
<script>
// GPT slots
var gptAdSlots = [];
googletag.cmd.push(function() {
// Define a size mapping object. The first parameter to addSize is
// a viewport size, while the second is a list of allowed ad sizes.
var mapping = googletag.sizeMapping().
// Small ad
addSize([100, 100], [88, 31]).
// Accepts both common mobile banner formats
addSize([320, 400], [[320, 50], [300, 50]]).
// Same width as mapping above, more available height
addSize([320, 700], [300, 250]).
// Landscape tablet
addSize([750, 200], [728, 90]).
// Desktop
addSize([1050, 200], [1024, 120]).build();
// Define the GPT slot
gptAdSlots[0] = googletag.defineSlot('/1034652/Z103Home_TopLeaderboard', [728, 90], 'div-gpt-ad-1441833752374-0').
defineSizeMapping(mapping).
addService(googletag.pubads());
googletag.pubads().setTargeting("test","responsive");
// Start ad fetching
googletag.enableServices();
});
</script>
</head>
<body>
<h1>GPT Training - Responsive Test Page</h1>
<div id="div-gpt-ad-1441833752374-0">
<script>
googletag.cmd.push(function() {
googletag.display('div-gpt-ad-1441833752374-0');
});
</script>
</div>
<p><span>GPT responsive ads do not resize on change in the size of the browser.
You can add your own custom code to refresh the ad slots on resize.
To demonstrate responsive capabilities, re-size your window and refresh the page.</span></p>
</body>
</html>
This example code you have should initially display an ad when you open it on your browser. How can you say its resizing but there is no ad? This confuses me.
What I actually don't see is a code that refreshes your ad slot on window resize.
Related
Dispite the tutorial here https://konvajs.org/docs/filters/Multiple_Filters.html of using multiple filters, I have been unsuccessful in applying multiple to an image in a NodeJS space.
Here is an example of the "fun" I went through trying to get it to work:
(Konva, layer, imageNode) => {
console.log('Callback');
imageNode.cache();
// imageNode.filters([
// Konva.Filters.Brighten,
// Konva.Filters.HSL,
// ]);
imageNode.filters([Konva.Filters.Posterize]);
imageNode.levels(0.8); // between 0 and 1
// imageNode.brightness(0.8);
// imageNode.contrast(0.8);
// imageNode.saturation(0.8);
// imageNode.cache();
// imageNode.filters([
// // Konva.Filters.Brighten,
// Konva.Filters.HSL,
// ]);
// imageNode.hue(0.5);
// imageNode.saturation(0.8);
// imageNode.luminance(0.85);
imageNode.cache();
As you can see, I'm trying to use a mix of brightness, contrast, saturation, hue, lumiance; however some work, some don't, and it all doesn't seem very reliable and if any work, only one ever does.
So how do I for example, brighten, and saturate an image?
Example Image I would like to "bring into the light" by adjusting different factors of it.
My end goal is something like this:
Update #1
No Luck, I cannot even get brightness to work on a small 50x35 image:
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/konva#8.3.12/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Image Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
});
var layer = new Konva.Layer();
// main API:
var imageObj = new Image();
imageObj.onload = function () {
var imageNode = new Konva.Image({
x: 0,
y: 0,
image: imageObj,
width: 50, // 2048 / 2,
height: 35, // 1440 / 2,
});
imageNode.cache({ pixelRatio: 1})
imageNode.filters([
Konva.Filters.Brighten,
// Konva.Filters.HSL,
// Konva.Filters.Invert
]);
// imageNode.filters([Konva.Filters.Posterize]);
// imageNode.levels(0.2); // between 0 and 1
imageNode.brightness(0.8);
// imageNode.contrast(0.8);
// imageNode.saturation(0.8);
// imageNode.cache({ pixelRatio: 1})
// imageNode.filters([
// // Konva.Filters.Brighten,
// Konva.Filters.HSL,
// ]);
// imageNode.hue(0.5);
// imageNode.saturation(0.8);
// imageNode.luminance(0.85);
// imageNode.cache({ pixelRatio: 1})
layer.add(imageNode);
stage.add(layer);
};
imageObj.src = 'C:/Users/<User>/Downloads/Small.png';
</script>
</body>
</html>
Update #2
Ok this seems to be firstly an issue with doing this off a local html file, as not even taking the code from https://konvajs.org/docs/filters/Brighten.html and swapping in an absolute path to a file on my machine, works.
Seems to be an issue with editing images on a local HTML file, something stops them actually taking the changes.
I want to add webview which height would be as it content. I make it running smoothly on Android but on iOS the longer the text is the longer space below text is.
Here is my code:
var window = Ti.UI.createWindow();
var scrollView = Ti.UI.createScrollView({
layout: 'vertical',
height: Ti.UI.SIZE
});
var view1 = Ti.UI.createView({
height: 200,
backgroundColor: 'red'
});
var webview = Ti.UI.createWebView({
height: Ti.UI.SIZE,
html: '<html><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"></head><body style="margin:0; background-color: blue">Some page some text2</body></html>'
});
var view2 = Ti.UI.createView({
height: 200,
backgroundColor: 'green'
});
scrollView.add(view1);
scrollView.add(webview);
scrollView.add(view2);
window.add(scrollView);
window.open();
Thanks in advance.
The webview doesn't know the size of the content. But you can ASK the webview how high the content is.
For this you need to use evalJS.
Use the JS found on StackOverflow:
var body = document.body,
html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
and preferably put this in a function inside the webview. Lets say the above Javascript is in function getDocumentHeight and that function returns the height property. Now, to get the height use eval like this:
var height = webview.evalJS('getDocumentHeight()');
webview.height = height;
Now, you want this to execute every time the content is loaded, assuming the content changes, so in that case you can watch the load event (doc here) and trigger the evalJS above every time this event is fired.
It will not be very pretty, as the webview is not intended to scale like this, but it works.
It seems it's a bug / discouraged method for iOS. No direct workaround. Can be checked here:
Jira Ticket about problem with iOS 9,
Jira Ticket about problem with webView + ScrollView
I have a simple map with a static pixel image layer:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.13.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.13.0/build/ol.js"></script>
// reference to jquery here
</head>
<body>
<div id="map" class="map"></div>
<script>
var extent = [0, 0, 2000000, 2000000];
var projection = new ol.proj.Projection({
code: 'xkcd-image',
units: 'pixels',
extent: extent
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
image = new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'http://imgs.xkcd.com/comics/online_communities.png',
projection: projection,
imageExtent: extent
})
});
map.addLayer(image);
image.on('singleclick', function(evt) {
var xy = evt.pixel;
console.log(xy);
var canvasContext = $('.ol-unselectable')[0].getContext('2d');
var pixelAtClick = canvasContext.getImageData(xy[0], xy[1], 1, 1).data;
var red = pixelAtClick[0]; // green is [1] , blue is [2] , alpha is [4]
});
</script>
</body>
</html>
When clicking on the image I want to get the color of the pixel that I clicked on. As far as I understand the raster source example (http://openlayers.org/en/v3.13.0/examples/raster.html), this is only possible with raster sources so I converted the image into a raster source. (When I add that raster source to the layer, I get the message that this operation is insecure, so I still use the image to show on the map.)
Here (How to get a pixel's color value from an Openlayers 3 layer?) the color is read from evt.context. However, with me evt.context is undefined.
Addendum: There might be several image layers overlaying each other. I need to get the color from a single specific image layer.
So this isn't ideal but might send you along the right lines:
You can use the pixel xy of the click event to query the canvas object that openlayers creates and puts your map data onto.
map.on('singleclick', function(evt) {
var xy = evt.pixel;
var canvasContext = $('.ol-unselectable')[0].getContext('2d');
var pixelAtClick = canvasContext.getImageData(xy[0], xy[1], 1, 1).data;
var red = pixeAtClick[0]; // green is [1] , blue is [2] , alpha is [4]
});
This assumes that you are using jQuery and that the canvas is the first DOM element using the class '.ol-unselectable'.
Hope it helps.
I'm new to React and want to understand the right way to handle the following scenario.
Say, I have three React components which are essentially siblings i.e. not nested within each other.
All three components need to know the screen resolution of the user and this resolution may change. For example, the user may set the browser window to a smaller size. Essentially, the view port is in a dynamic state.
I don't want to put the view port detection logic into each component which would produce repetitive code. How do I create a common function that is responsible for view port detection and pass this information to each component?
In the following code sample, I have three components that work independently of each other but they'll all need view port information. What's the right way to handle this?
<div id="navigationHere"></div>
<div id="doSomethingHere"></div>
<div id="handleSomethingElseHere"></div>
<script src="nav.jsx" type="text/jsx"></script>
<script src="doSomething.jsx" type="text/jsx"></script>
<script src="handleSomethingElse.jsx" type="text/jsx"></script>
By the way, I'm using this inside an ASP.NET MVC application and thinking about using ReactJs.Net to handle initial state and pre-rendering on the server side. So, it's important for me to understand the right way to handle this within the context of an ASP.NET MVC application.
This is a good use case for what are known as a higher order components.
First off we define a parent component that keeps track of the screen resolution.
var ViewportManager = React.createClass({
getInitialState: function() {
return this.measureViewport();
},
componentWillMount: function() {
window.addEventListener('resize', this.onResize);
},
componentWillUnmount: function() {
window.removeEventListener('resize', this.onResize);
},
onResize: function() {
this.setState(this.measureViewport());
},
measureViewport: function() {
return {
width: window.innerWidth,
height: window.innerHeight
};
}
});
Once this component is mounted it will keep track of the size of the screen, updating each time the browser window is resized. What we need to do now is pass these values down to any components rendered inside of this one.
<ViewportManager>
<NavigationHere />
<DoSomethingHere />
<HandleSomethingElseHere />
</Viewport>
We'll pass down viewportHeight and viewportHidth to each of the inner components.
var ViewportManager = React.createClass({
// ...
render: function() {
var viewportWidth = this.state.width;
var viewportHeight = this.state.height;
var children = this.props.children;
var additionalProps = {
viewportWidth: viewportWidth,
viewportHeight: viewportHeight
};
var modifiedChildren = React.Children.map(children, function(child) {
return React.cloneElement(child, additionalProps);
});
return (
<div className='viewport-manager'>
{{ modifiedChildren }}
</div>
);
}
});
Now all of the components directly inside your ViewportManager will receive two additional props.
var NavigationHere = React.createClass({
render: function() {
// I can see this.props.viewportWidth
// and this.props.viewportHeight
}
});
I do not understand, why eventlistener (copied from demo) does not work, If I add an bitmap to stage. It seems that bitmap causes problem, because if I add another circle etc. the click works fine.
See example:
<!DOCTYPE html>
<html>
<head>
<title>EaselJS demo: Simple animation</title>
<link href="../_shared/demo.css" rel="stylesheet" type="text/css">
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script>
var stage, circle;
var counter = 0;
var ticounter = 0
var images = []
var mytext = 'kk';
var lepakko;
var mx = 0;
function init() {
stage = new createjs.Stage("demoCanvas");
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
circle.x = 500;
circle.y = 500;
stage.addChild(circle);
stage.update();
lepakko = new createjs.Bitmap("halloween-bat.png");
//Click works, if line below is commented out, why?
//stage.addChild(lepakko);
circle.addEventListener("click",circle_event);
stage.update();
}
function circle_event(event) {
alert("clicked");
};
</script>
</head>
<body onLoad="init();">
<canvas id="demoCanvas" width="700" height="700">
alternate content
</canvas>
</body>
</html>
The click should not work by default. EaselJS library needs explicit enabling of the mouseover event. You need to add:
stage.enableMouseOver(20);
after creating the stage. To change the cursor to a pointer when it's over the object there is a property in EaselJS called cursor:
// doesn't work, even if a function is decleared outside
// circle.addEventListener("mouseover", function() { document.body.style.cursor = "pointer"; });
// this works
circle.cursor = "pointer";
Method enableMouseOver is documented on EaselJS website. Do note that listening to mouseover and other events in EaselJS is a lot more demanding for a web browser.