I have a custom 1600x433 banner, I've created it as responsive and I'm trying to use sizeMapping, on the desktop the banner works, however, on the tablet and mobile the banner area just goes blank.
Set custom sizes in settings> sizes. The original image has exactly. 1600x433 What am I doing wrong that the banner is not responsive as I customize it?
googletag.cmd.push(function() {
var mapping = googletag.sizeMapping().
// Accepts both common mobile banner formats
addSize([320, 400], [320, 50]).
// Same width as mapping above, more available height
addSize([320, 700], [360, 100]).
// Desktop
addSize([1050, 200], [1600, 433]).build();
googletag.defineSlot('/id/sitenovo',[320, 50], 'div-gpt-ad-0').defineSizeMapping(mapping).addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
Size [320, 400] matches a viewport greater than or equal to 320, 400 pixels. Use a size [0,0
Related
I have a page with a banner advert that will shrink/grow depending on screen size or if it's desktop or mobile.
The banner will be displayed with in one div.
The adverts are in three different advert ID's that each have their own size:
Example:
ad-1 is 1220x350
ad-2 is 650x190
ad-3 is 300x250
How do I make the correct advert display in a div depending on the div size?
You could use sizeMapping to dispatch your sizes based on the viewport size.
First : define the sizeMapping
var mapping = googletag.sizeMapping()
.addSize([1024, 768], [1220, 350])
.addSize([980, 690], [650, 190])
.addSize([0, 0], [300, 250])
.build();
Usage : addSize([screenWidth, screenHeight], [width,height])
Second : add the mapping to your slot definition
var slot = googletag.defineSlot('/adUnitPath/', [[1220, 350], [650, 190], [300, 250]], 'yourTargetId')
.defineSizeMapping(mapping)
.addService(googletag.pubads());
Full documentation here and here
I am using Google DFP adverts and I want to change the position they are in when the site is viewed on mobile.
I have tried duplicating the advert and showing one/ hiding the other but that still shows both adverts.
Is there any way to accomplish this, please see attached image for an example of what I am after.
Well, this is kind of hard, but not impossible. I will give you even more complicated example, where not only the banner could be in different places, but could be with different sizes depending on the device.
Scenario: You have an Ad Unit called adunit1. You want to show in the content on desktop, but on top on mobile. On desktop you want to be 300x250, and on mobile you want to 320x100 or 320x50. We consider desktop everything with viewport width of 970px and mobile anything smaller (could add more cases, but let's not make it too complicated).
Step 1: Go to the Ad Unit options in DFP and add all sizes that this ad unit will display (in our scenario: 300x250, 320x100, 320x50).
Step 2: Create size mappings variable for each sub-scenario. As bellow:
var adunit1desktop = googletag.sizeMapping().addSize([970, 0], [300, 250]).addSize([0, 0], []).build();
Which means: If viewport width is more than 970 AND viewport height is more than 0, serve banner with size 300x250. If smaller, serve nothing.
Now let us make the same for the mobile version with different name of the variable:
var adunit1mobile = googletag.sizeMapping().addSize([970, 0],[]).addSize([0, 0], [[320,100],[320,50]]).build();
Which means: If viewport width is more than 970 AND viewport height is more than 0, serve nothing. If smaller serve either 320x100 OR 320x50.
We will now define the Ad Units, but will make this twice as will assign different size mapping for desktop and mobile.
For desktop:
gptAdSlots[0] = googletag.defineSlot('/XXX/adunit1', [[300, 250], [320, 100], [320, 50]], 'div-banner-desktop').defineSizeMapping(adunit1desktop).addService(googletag.pubads());
Two details to watch here: div-banner-desktop - this is the div id where we want to show the desktop banner. defineSizeMapping(adunit1desktop) - this is how we tell DFP to show this based on the size rules above (in brief: show the desktop banner, only if viewport width is at least 970px).
Now for the mobile:
gptAdSlots[1] = googletag.defineSlot('/XXX/adunit1', [[300, 250], [320, 100], [320, 50]], 'div-banner-mobile').defineSizeMapping(adunit1mobile).addService(googletag.pubads());
Pay attention to three details: div-banner-mobile, defineSizeMapping(adunit1mobile) and gptAdSlots[1] - we increased with 1 for the next slot rendering. If there are more, each should be increased by 1 as well.
Now go to your web site and put the following code where you want to display the desktop banner:
<div id="div-banner-desktop">
<script>
googletag.cmd.push(function() { googletag.display('div-banner-desktop'); });
</script>
</div>
Now place this code where you want to display the mobile banner:
<div id="div-banner-desktop">
<script>
googletag.cmd.push(function() { googletag.display('div-banner-desktop'); });
</script>
</div>
The whole code block should look something like this
<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
</script>
<script>
var gptAdSlots = [];
googletag.cmd.push(function() {
var adunit1desktop = googletag.sizeMapping().addSize([970, 0], [300, 250]).addSize([0, 0], []).build();
var adunit1mobile = googletag.sizeMapping().addSize([970, 0],[]).addSize([0, 0], [[320,100],[320,50]]).build();
gptAdSlots[0] = googletag.defineSlot('/XXX/adunit1', [[300, 250], [320, 100], [320, 50]], 'div-banner-desktop').defineSizeMapping(adunit1desktop).addService(googletag.pubads());
gptAdSlots[1] = googletag.defineSlot('/XXX/adunit1', [[300, 250], [320, 100], [320, 50]], 'div-banner-mobile').defineSizeMapping(adunit1mobile).addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.pubads().collapseEmptyDivs();
googletag.enableServices();
});
</script>
I am new to javascript and jQuery and am trying to make a slideshow using Fancybox.
The problem is that I want the images to display on a box of the same size regardless of whether they are portrait or landscape images. My images are all either 700 X 525 for landscape or 525 X 700 for portrait.
The way I have it the landscape images load like it is showed on the top of the image below, the portrait images load as shown in the middle, and I want the portrait images to load as shown on the bottom, with the box with the same dimensions as if it were landscape:
I think what I should do is change the left padding depending on the image dimensions but I have no idea how.
Thank you for your help in advance.
I am using Fancybox version: 2.1.4 and I have set the defaults as such:
padding : 15,
margin : 20,
width : 800,
height : 600,
minWidth : 100,
minHeight : 100,
maxWidth : 9999,
maxHeight : 9999,
autoSize : true,
autoHeight : false,
autoWidth : false,
autoResize : true,
autoCenter : !isTouch,
fitToView : true,
aspectRatio : false,
topRatio : 0.5,
leftRatio : 0.5,
I know this post is 11 months old, but I thought I would share my solution in case it helps someone else out in the future.
Basically I have set a min-width css attribute onto the fancybox element and am comparing that against the current image width, if it is smaller I am adding padding to the fancybox element so that the fancybox element stays the same width but the image inside is horizontally centered.
Step 1: in your css set a min-width on the fancybox element. This is the width that you want your fancybox element to stay at regardless of image width.
.fancybox-wrap { min-width: 1120px; }
Step 2: add in the afterLoad function when you call fancybox
$(".fancybox").fancybox({
afterLoad: function(current) {
var $el = $(".fancybox-wrap").eq(0); // grab the main fancybox element
var getcurrwidth = current.width; // grab the currrent width of the element
var getdesiredwidth = $el.css('min-width'); // grab our min-width that we set from the css
var currwidth = Number(getcurrwidth);
var desiredwidth = Number(getdesiredwidth.replace('px', ''));
if (currwidth < desiredwidth)
{
var custompadding = (desiredwidth - currwidth) * 0.5; // if the width of the element is smaller than our desired width then set padding amount
this.skin.css({'padding-left': custompadding+'px', 'padding-right': custompadding+'px' }); // add equal padding to the fancybox skin element
}
}
});
According to every online resource, the Nav Bar height should be 44pts (88px on Retina screens).
Indeed, when I take a screenshot of my iPhone (see below), the Status bar's height is 20pts, and the NavBar's height is 44pts, but that's split into a 1pt white pixels, and 43 "blue" pixels:
When I develop my app and create a NavBar (standard), there is no "white" pixel between the StatusBar and the NavBar, so the NavBar's height is 43pts (and not 44pts). This makes the inner window 1pt higher:
My entire code is simply 5 lines (app.js):
var mainWindow = Titanium.UI.createWindow();
var innerWindow = Titanium.UI.createWindow({ title : "Settings" });
var navGroup = Titanium.UI.iPhone.createNavigationGroup({ window : innerWindow });
mainWindow.add(navGroup);
mainWindow.open();
Any ideas??
Maybe it'll help some one some day, if you add "top : 0" when creating the NavigationGroup, you'll get that extra pixel line :)
var navGroup = Titanium.UI.iPhone.createNavigationGroup({ top : 0, window : innerWindow });
Since iOS 6 you've got a 1 point shadow line under the navigation bar.
This may be the cause of you problem.
I'm manually porting an extension I wrote in Chrome over to Firefox. I'm attaching a panel to a widget, and setting the content of that panel as an HTML file. How can I make the panel shrink and grow with the content? There's a lot of unsightly scroll bars and grey background right now.
var data = require("self").data;
var text_entry = require("panel").Panel({
width: 320,
height: 181,
contentURL: data.url("text-entry.html"),
contentScriptFile: data.url("get-text.js")
});
require("widget").Widget({
label: "Text entry",
id: "text-entry",
contentURL: "http://www.mozilla.org/favicon.ico",
panel: text_entry
});
Not setting the height property of the panel makes it quite tall.
You might want to check out this example that resizes the panel based on the document loaded. If you want to resize based on changes to the content size, at least on initial load:
https://builder.addons.mozilla.org/package/150225/latest/
( sorry for the delay in respinding, been afk travelling )