Develop Reference

Changing Swiffy Ad Size

I've got an ad with the size is 728x90 which was converted from Flash to Html5 using Google Swiffy.
Myself, I've never used flash. I've done some creative campaigns in the past on GDN, but I've built them directly using Html5. Anyway, I was asked if I can convert that 728x90 flash-built-converted-to-html5-with-swiffy ad to 835x90 format.
After opening the document, I've noticed an Object literal swiffyobject = {...} which is passed as parameter to the Stage() method which resides in Google's runtime.js library. This method apparently returns an object on which we call another method start() to make the magic happen:
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject, {});
stage.start();
The object literal swiffyobject seems for me the right place to start in order to change the ad size. However, the most relevant part I found regarding changing the size is at the start, ymax & xmax:
swiffyobject = {
"as3": false,
"frameRate": 20,
"frameCount": 1,
"backgroundColor": -1,
"frameSize": {
"ymin": 0,
"xmin": 0,
"ymax": 1800,
"xmax": 15560
},
...
}
Since the height of the ad wilm remain the same and only the width is the problem, scaling up xmax to 17846 will change the add size but not in a way we desire, instead, for some reason, it shrinks the ad's height by approximately 4px.
Any idea where should I tackle this great swiffyobject (which after re-indented with my IDE has approximately 6000 lines) in order to change the ad size? Or is there any online convertor that solves this?

The only viable solution, other than completely remaking the ad in HTML5, was to get a hold of the flash files, resize them & reconvert them. Touching that swiffy object just creates a big mess and a headache.

in your html, there should be a part like that:
<div id="swiffycontainer" style="width: 728px; height: 90px">
</div>
do you also change it to 835? If not, swiffy may think it's a 835x90 flash in a 728x90 container, and scale it to fit the container.

How can I control an image's size

I am a skilled database / application programmer for the PC. I am also an ignorant html / javascript / web programmer.
I am creating some documentation about some .Net assemblies for our intranet. Ideally I would like to display an image full size if the browser window can fit it. If not then I would like to reduce it and toggle between a small version and full size version by a click. It is a dependency chart and can be different sizes for different pages. I would prefer a single function to handle this but being it is for our use none of the requirements I mentioned is set in stone. I would like to make it work well but nothing is mandatory.
I read a lot of stuff but couldn't find anything that matched what I wanted. First I tried this (after a few iterations):
<img src='Dependancy Charts/RotairAORFQ.png' width='100%' onclick='this.src="Dependancy Charts/RotairAORFQ.png";this.width=this.naturalWidth;this.height=this.naturalHeight;' ondblclick='this.src="Dependancy Charts/RotairAORFQ.png";this.width="100%";'>
It has problems. First off it enlarges a small image and it looks funny. Second I would have to put the code in every page. Third it requires a double click to restore it. I was going to live with those short commings but the double click fails. I can't figure out how to restore it.
So I tried to get fancy. I couldn't figure out how to get past problem 1, but solved 2 and 3 by creating a function in a separate file. Then I ran into what appeared to be the same problem. This was my second attempt:
function ImageToggle(Image)
{
if (ImageToggle.FullSize == 'undefined')
ImageToggle.FullSize = false;
if (ImageToggle.FullSize)
{
Image.width='100%';
ImageToggle.FullSize = false;
}
else
{
Image.width=Image.naturalWidth;
ImageToggle.FullSize = true;
}
return 0
}
And in my page:
<img src='Dependancy Charts/RotairAORFQ.png' width='100%' onclick='ImageToggle(this)'>
Can what I want be done? It doesn't sound impossible. If it is a large amount of effort would be required then alternate suggestions are acceptable.

You're probably interested in the max-width: 100% CSS property, rather than a flat-out width:100%. If you have a tiny image, it'll stay tiny. If you have a huge image, it gets resized to the width of the containing element.
For example: http://jsbin.com/kabepo/1/edit uses a small and a huge image, both with max-width:100%. As you can see, the small image is untouched, the huge image is resized to something sensible.

I would recommend that you set a the max-width: 100% CSS property for the image.
This will prevent the image's width from expanding to be greater than the container's width.
You can also do the same with max-height: 100% if you are having problems with the image overflowing vertically.
Please see this JSFiddle for an example.
(Note: If you set both a width and a height attribute on the <img> tag directly or in your CSS file your image will not be scaled proportionally.)

Does it have to be a toggle or would a mouseover work for you as well?
<style>
.FullSize { width:100px; height:auto; }
.FullSize:hover { width:90%; height:auto; }
</style>
<img src="Dependancy Charts/RotairAORFQ.png" class="FullSize">
Note: when image is made larger IN the page - the surrounding content will be displaced around it - depending on how you have set up the layout.
Also if you have any body margins or table or div paddings, using image width at 100% will make the page scroll. To check just change 90% to 100% and work your way up / down.
You could also force the image to be a specific size until the browser gets made smaller by the user / has a smaller resolution.
<style>
.FullSize {width:1000px;max-width:100%;height:auto;}
</style>
<img src="Dependancy Charts/RotairAORFQ.png" class="FullSize">
A tip: the image used must be the largest one. So minimum width of lets say 1200 pixels wide (if that is the forced image size you use). That way regardless of size it is it will remain clearer than a small image becoming a large. Since it's an intranet, file size shouldn't be an issue.

Thanks all for your help. Rob and Mike both pointed me to an excellent solution. I now have my page load with an image that fits the browser window, resizes with the browser and if the user is interested they can expand the image and scrollbars appear if necessary. I got this to work in a function so minimal code is needed for each page.
To load the image:
<p style="overflow:auto;">
<img src='Dependancy Charts/RotairAORFQ.png' width="100%" onclick='ImageToggle(this)'>
</p>
And the function:
function ImageToggle(Image)
{
if (ImageToggle.FullSize == 'undefined')
ImageToggle.FullSize = false;
if (ImageToggle.FullSize)
{
Image.style="max-width: 100%";
ImageToggle.FullSize = false;
}
else
{
Image.style="max-width: none";
Image.width=Image.naturalWidth;
ImageToggle.FullSize = true;
}
return 1
}

if you want to get current browser window size and if you want to do it on a click event so try this in jquery or javascript:
<script>
$("#myButton").click(function(){
var x = window.innerHeight; // put current window size in x (ie. 400)
});
</script>

Google DFP Responsive Ads Not Showing Up Using GPT

I'm trying to use Google Publisher Tags (GPT) to display responsive ads, following Google's guide. I tried to copy their example as closely as possible, but my ads are not showing up on my page at any viewport size. I stripped everything down to the simplest example possible (one ad size for desktops), but even that ad won't show up.
Everything is fine if I get rid of the extra size mapping code (I've replaced my DFP ad slot info in the code example below, but I can assure you that I have that much right).
Does anyone have any idea what I might be doing wrong? Thanks!
<script src="http://www.googletagservices.com/tag/js/gpt.js"></script>
<script type='text/javascript'>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
googletag.cmd.push(function() {
var mapping = googletag.sizeMapping().
addSize([1024, 768 ], [728, 90]). // Should work for desktops
build();
googletag.defineSlot('/######/ad-slot-name', [728, 90], "acm-ad-tag-728x90_top").
defineSizeMapping(mapping).
addService(googletag.pubads());
googletag.enableServices();
});
</script>

Your code looks ok - one thing, is that the only ad tag you have on the page? If you have more than one ad tag it seems that you have to add mappings for every single one, even if not all of the ad units need to be responsive. I couldn't get this technique to work consistently until defining size mappings for all ad slots on the page.
Beyond that, presumably you're sure the browser width and height criteria are being met? You can check this if you use Firefox's 'Responsive Design View' (ctrl-shift-m on Windows or 'Web Developer' > 'Responsive Design View' on the main Firefox menu). Do you see anything in the DFP console (warnings, errors)?
I have this working consistently, displaying a range of ad sizes and switching ad units on and off in certain circumstances - I put a short description online, although I don't think there's anything there that you're missing.

this is my solution how i make my dfp tags responsive
var width = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
if (width >= 768) {
document.write("<!-- SPM_728x90_HEAD_PT -->");
document.write("<div id='div-gpt-ad-1425863369744-6'> ");
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1425863369744-6'); });
document.write("</div>");
}
else if ((width >= 480) && (width < 768)) {
document.write("<!-- /11111111/SPM_468x60_HEAD_T -->");
document.write("<div id='div-gpt-ad-1450193161892-0'> ");
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1450193161892-0'); });
document.write("</div>");
}
else if(width<=479){
document.write("<!-- /11111111/SPM_320x50_HEAD_M -->");
document.write("<div id='div-gpt-ad-1450193161892-1'> ");
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1450193161892-1'); });
document.write("</div>");
}
</script>

Show advertisement while game loads

I looked around internet and was always looking like from previous 6 months for a script that could load flash content/game while showing an actual loading screen But I always received a few answers:
It is not possible to show an actual loading with Javascript.
You can do it only by adding action script to the flash file maybe they are talking about FLA
Why Don't you show a fake loading screen that appears and show some
seconds and then disappears (the most annoying this of such screen
is that they first make user load 15 seconds then the flash starts
loading, if it starts loading those 15 seconds still it is worth
something it is good BUT making them wait double is really bad)
But at last I found something that I was looking forever. A Jquery based script that shows actual loading (shows ad too) and uses swf Object to talk to flash content too. It is really awesome as it doesn't require you to do changes to the FLA, it is just pure outer environment dealing. So now the question arises what's the issue then. Well the issue is that this script was made for pixels, it works if you are using width and height for flash in pixels, while I can't use pixels as I am using %ages (this way user have ability to go full screen optionally by pressing f11).
So as you can see I want that script to work with %ages that is my problem, but as I mentioned earlier I didn't came here right away I have been asking for help (Actually Begging) in over 14 forums from previous few months and of course some good people still exists some people helped me to reach a certain point (but it didn't solve the problem) So now I will provide some Markup:
Here is link to the script that I am talking about http://www.balloontowerdefense.net/jquery-preloader/jquery-preloader.html (It is the link to the creator of this script)
Here is a link to working example (flash based on Pixels) http://www.balloontowerdefense.net/jquery-preloader/example.html
Some one helped me here but it didn't work 1 month ago. The person told me that I should change the plugin Named as Preroll the changes preferred were these
Modify the plugin to use user-supplied units instead of pixels. To do this, you will need to modify two functions in the plugin, applygameiframe and showgame.
applygameiframe should be changed to:
var applygameiframe = function() {
var gc = '#'+settings.gameframe;
var iframe = $('<iframe />').attr({
"id": settings.gameid,
"src": settings.swf,
"frameborder": 0,
"scrolling": "no",
"marginwidth": 0,
"marginheight": 0
}).css({
"height":'settings.height
"width": settings.width
});
$(gc).append(iframe);
return true;
};
showgame should be changed to:
var showgame = function() {
var ac = '#' + settings.adframe;
var game = '#' + settings.gameframe;
$(ac).hide();
$(game).css({
"width": settings.width,
"height": settings.height
});
};
Once those changes are made, the inline CSS should be set to whatever you supply as parameters (i.e., 100%, 50em, etc.).
I did the changes told to be done as described above to the Preroll plugin and after that this is what I get http://files.cryoffalcon.com/MyFootPrint/fullscreen.html
Now if you let the game load (as loading screen appears) all is well done except that in the end, the game doesn't appear, it loads but when it should skip and make the game appear at that time something goes wrong. (For reference you can see this link http://www.balloontowerdefense.net/jquery-preloader/example.html here when the loading finishes then game appears)
Can Someone Fix this problem?
Note: Sorry for not providing JsFiddle but as I live in Afghanistan with 5KBps speed it is not possible for me.
I didn't provided the HTML, CSS and JS that makes up the whole demo page as I thought it will make the question very long but still if you think I should provide Please let me know in comments.
I tried my best to make the question more relevant with Relevant Markups BUT still If I am missing something I would try my best by editing it and providing it you again.
Being an accountant, I tried my best to use programmers terms, coding is my passion but I am still in learning stage of JS
UPDATE: After solving the problem here you can see now everything is fine. http://files.cryoffalcon.com/MyFootPrint/newfullscreen.html
Credit: Goes to the one who answered this question.

This seems to be just a pure css problem. You're trying to set the width to 100% while the parent of div.gamewrapper has no width or height. That's why the size is 0 and it will not show up.
The trick you need to apply is add the following to your style:
html, body, .gamecontent {
height: 100%;
width: 100%;
}
Update:
Also, remove float: left; from .gamecontent .game, and add a width and height of 1px such that it becomes:
.gamecontent .game {
margin:0px auto 0px auto;
padding:0px;
overflow:hidden;
width : 1px;
height : 1px;
}

Well, after an hour and a half of playing Bloons on your link (my untouched work load can verify that), I feel it's safe to say that the full screen features work exactly as I'd expect them to. I'm using Chrome 18.0.x.
My experience was: Click link, game loads. The loader took about 2 seconds longer to finish then it took for the "Click Here to Show the Game" button appeared. After, an ad appeared for 10seconds and then I clicked "Play" and it went right to the game. Full screen worked correctly to my knowledge, although when I left full screen the game didn't resize back down - the bottom section was cut off.
I know that doesn't answer your question, but perhaps the issue is only in certain browsers?

i found that in FF the problem seems to be the height and width of 100%. I changed the script slightly to:
$(game).css({
"width": window.innerWidth,
"height": window.innerHeight
});
and now the game shows correctly in FF.

Conditionally loading javascript in responsive design

I'm trying to do something that I think should be pretty straightforward but I have not found a straightforward explanation of the solution.
I am building a responsive website that is mobile first (320px width as the default). At that small resolution, the site is one column and I am happy to allow each individual "box" to expand or contract to the natural height of the contents contained inside.
However, at larger resolutions where the site expands to three columns, I want to add a small Javascript function to equalize the heights of the boxes of each column. The function I am talking about would be something like this:
jQuery(document).ready(function() {
setHeight('#inner-footer .widget-area');
});
var maxHeight = 0;
function setHeight(column) {
//Get all the element with class = col
column = $(column);
//Loop all the column
column.each(function() {
//Store the highest value
if($(this).height() > maxHeight) {
maxHeight = $(this).height();;
}
});
//Set the height
column.height(maxHeight);
}
I've found different ways to do what I'm talking about.
I can use the modernizr "load" function (formally yesnope.js).
Using a custom function that incorporates Nicholas Zakas "isMedia" function as described in this link Media Specific Javascript or
a custom javascript function using the the "screenWidth" variable as in
var screenWidth = (screen.width < 768) ? true : false;
as described in Media queries in the real world
With my limited javascript knowledge, I have been unable to actually write the code to get any of these approaches to work for my script. Can anyone help me out here?
I have no particular preference for approach I just want it to work cross browser, etc. My sense is that the modernizr approach is the most robust and stable way to make this work in the greatest number of use cases but I'm not totally sure of that. I've never modified modernizr so I'm unsure of how to write and where to put the custom load function.
Anyone have thoughts and specific code for the modernizr approach or any of the other solutions (or something else)? I greatly appreciate the assistance.

Modernizr can check that media queries apply with the Modernizr.mq() function
You pass it your media query that you want it to match like this
if(Modernizr.mq('all and (min-width: 768px)')) {
// Equal height code here
}
Here once the min width is past 768px then the code inside the function would be called, so for you the equal height code.

You can try to make use of matchMedia, this will allow you to load specific js based on media queries.
https://developer.mozilla.org/en/DOM/window.matchMedia
Paul Irish has been working on some polyfills
https://github.com/paulirish/matchMedia.js/
Hope this helps
Ian