Develop Reference

get the meta data from an advert iframe

I want to put advertising in my site in a similar way as Google Display. I'm using iframe to insert the ads but I'm having problems with the size of it.
I don't know why the iframe are sized by default in 300 x 150 no matter the source size.
The adverts have a meta line with the size of it.
<meta name="ad.size" content="width=300,height=250">
I want to take this information and change the iframe size with javascript. I tryed:
$('#myiframe').load(function() {
var element = document.querySelector('meta[name="ad.size"]')['content‌​'];
});
and the result is empty.
Please your help.
B/R

ok, I finally got it:
var adif= document.getElementById('myiframe');
var x= adif.contentWindow.document.getElementsByName("ad.size")[0].content;
I hope it helps someone else.

How to serve scaled images in blogger

When I check my blog in Gtmetrix it shows 0 value for "serve scaled images". I don't know how to show scaled images in blogger. I tried many codes from fellow bloggers but still, it shows 0 value in "serve scaled images".
My link is here.
Should I keep the same thumbnail size for homepage and post pages or anything else?
I don't know how to solve this matter.
The code used for resizing the images is as follows -
<script type='text/javascript'>
//<![CDATA[
function snippetimage(a,e){var g=416,i=312;return image_tag='<img src="'+a.replace("/s72-c/","/w"+g+"-h"+i+"-p/")+'" alt="'+e+'"/>',yimage_tag='<img src="'+a.replace("default","0")+'" alt="'+e+'"/>',-1!=a.indexOf("img.youtube.com")?yimage_tag:""!=a?image_tag:""}
//]]>
</script>
Please help!

This issue is happening because a larger than required image is being loaded by the template. You will have to change the resolution of the image (from the current 416x312 px to 183x200 px, as mentioned by the GTmetrix report shown in the screenshot below ). You will have to change the above code as follows -
<script type='text/javascript'>
//<![CDATA[
function snippetimage(a,e){var g=183,i=200;return image_tag='<img src="'+a.replace("/s72-c/","/w"+g+"-h"+i+"-p/")+'" alt="'+e+'"/>',yimage_tag='<img src="'+a.replace("default","0")+'" alt="'+e+'"/>',-1!=a.indexOf("img.youtube.com")?yimage_tag:""!=a?image_tag:""}
//]]>
</script>

How to include external javascript on mobile devices

I have a javascript ad code that I only want to show on lets say devices 600px and smaller. For bigger screens I have an iframe ad. I've read so much and can't find a similar example.
Here's the javascript I need for smaller screens
<script type="text/javascript">
ad_idzone = "39483984";
ad_width = "300";
ad_height = "100";
</script>
<script type="text/javascript" src="https://ads.exoclick.com/ads.js"></script>
<noscript><img src="https://syndication.exoclick.com/ads-iframe-display.php?idzone=39483984&output=img&type=300x100" width="300" height="100"></noscript>
I've read about all types of ways like this but it's not going to work obviously and I'm not very experienced. Any suggestions?
<script type="text/javascript">
if (screen.width<500){
//if screen width less than 500px it's probably a mobile device
// so do this code...
}
else{
// screen wider than 500 pixels
// then do this code
}
</script>

You can try to append the javascript file for your ad on smaller screens using javascript.
<script>
if (screen.width < 500) {
var myScript = document.createElement('script');
myScript.setAttribute('type', 'text/javascript');
myScript.setAttribute('src', 'https://ads.exoclick.com/ads.js');
document.getElementsByTagName('head').item(0).appendChild(myScript);
} else {
showMyIframeAd();
}
</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>

Resize EpicEditor based on the content put within it

I'm using epiceditor within my site, and I am populating it with markdown embedded on the page by the server. Currently when epiceditor displays, it has a very small default height, with scroll bars to handle viewing the entire content. I can manually set the height of the div, and for now that's the best I've been able to do (I've set it to something reasonably large: 800px). However I would like its height to always be enough to fit the entire content without scroll-bars. Essentially something like overflow:visible.
Here's the relevant portions so far
<html>
<head>
<script src="/assets/javascripts/epiceditor/js/epiceditor.min.js" type="text/javascript"></script>
<script id="postMarkdown" type="text/markdown" data-postId="1">
#Markdowns in here
...
</script>
<style>
#epiceditor{
height: 800px;
}
</style>
<script src="/assets/javascripts/thrown/posts/edit.js" type="text/javascript"></script>
</head>
<body>
<div id="epiceditor">
</div>
</body>
</html>
And heres the edit.js source (its compiled from coffescript)
$ ->
postMarkdown = $("#postMarkdown").first()
options =
basePath : '../../assets/javascripts/epiceditor'
editor = new EpicEditor(options).load()
postId = postMarkdown.data('postId')
markdown = postMarkdown.html()
editor.importFile('posts/'+postId,markdown);
editor.reflow();
I was hoping reflow might expand the height after the content was inserted, however no such luck. However If I resize the div and call reflow, It does resize properly.
I've inspected the markup it creates in hopes I could determine the height and resize its container and tell it to reflow. However it seems it contains multiple iframes, and at a glance I didn't expect that to be a quick change, or if it would even be possible. However I'd welcome any solution.
I also understand that if I size its container to the right height, epiceditor will fill the proper space. However I want its height to be the amount needed to render, such that the editor takes up the right space in the rest of the sites design. Therefore if there something I can set in EpicEditor to have it not overflow in the manner it is, or a way to determine the height after it loads, I'm set.
Thanks for any help.

I'm the guy who made EpicEditor, here's a solution for you:
var editor = new EpicEditor({
basePath: 'https://raw.github.com/OscarGodson/EpicEditor/develop/epiceditor'
});
var updateEditorHeight = function () {
editorHeight = $(editor.getElement('editor').body).height();
// +20 for padding
$('#epiceditor').height(editorHeight + 20);
editor.reflow();
}
editor.load(function (){
updateEditorHeight();
});
editor.on('update', function () {
// You should probably put a check here so it doesn't
// run for every update, but just on update, AND if the
// element's height is different then before.
updateEditorHeight();
});
Also, in the CSS I added a overflow: hidden to epiceditor's wrapper so the scrollbars don't appear as it grows.
DEMO: http://jsbin.com/eyidey/1/
DEMO CODE: http://jsbin.com/eyidey/1/edit
UPDATE
As of EpicEditor 0.2.2 autogrow is built in. Just turn on the autogrow option.