We Keep Coding

Page appearing blank but selectable in Safari on iOS9 on first visit

So if you visit http://movableink.com/ on Safari on iOS9.
Then click in the header on http://movableink.com/partners
On first visit or slower connections the entire page renders blank in safari.
This is a pretty standard page. There's no specific code to call out that might be causing this. This is a new page with a different css file, it's the first responsive page.
However, the text and content is selectable (but not here) and also if I check it out in the Safari developer inspector when the phone is plugged into a mac there is also nothing notable covering the page.
You may want to look in private browsing, you will want to open up the homepage first and then click on 'Partners'.
What could possibly be causeing this issue of the page disappearing?

I could reproduce this on my iOS 9 device very well if there was an ad blocker active (in my case: Crystal and Lionz). Without this ad blocker active the page was loading smoothly without a blank screen.
By using another ad blocker (e. g. 1Blocker) the page is also running smoothly.
For me the problem is only related to certain ad blocker apps on iOS.

I did some tests, it could be just request timing issues due to either un-optimised server code (like regenerating the whole site stack every first request from a client), or generating CSS.
On first load it is consistently 700ms, regardless of mobile or desktop. Safari will be more sensitive on the mobile as it processes not as many parallel resources after it has a list of url's to get.
If you are using a CMS, check for Optimising / Caching solutions in built into the system and switch that on, see if it changes the load times.
Another alternative is Cloud distributed CDN's such as Cloud Flare (free for basic, other plans for more intensive).

Appropriate way to not display adsense ads

I am trying to hide an adsense ad unit on smaller screen sizes for responsive design purposes.
I am aware of https://support.google.com/adsense/answer/3543893?hl=en&ref_topic=1307438
which indicates you are allowed to use css media queries to hide a unit as follows:
#media (max-width: 400px) { .adslot_1 { display: none; } }
I have tried that but keep on getting the following error for the screen sizes that I don't display the ads on:
"Cannot find a responsive size for a container of width=0px and data-ad-format=auto"
I find the following JavaScript solution much simpler and would prefer to use it instead of the media queries. I just add a test and do not call the adsense code unless the screen size is a sufficient size. It solves the error I was getting and I imagine it will save a request to the adsense servers as well(full disclosure: I do not understand the adsense code at all).
if ( $( window ).width() >= 600 ) {
(adsbygoogle = window.adsbygoogle || []).push({});
}
Would an implementation like the above violate any of the programs policies/guidelines? Is it a reasonable and appropriate way to not display the ad units on certain screen sizes?

http://detectmobilebrowsers.com/
Check this website out, there you can find ready to use scripts to detect if the user is on mobile or desktop, that way you can tell if he is on mobile and hide the Adsense block, or even better, you can call a "Responsive AD ID" from the Google Adsense, which is also recommended for mobile by Adsense itself.
If you still need a more simple way to detect if the user in on mobile, try this out.
html.
<div class="my_responsive_add">
your ad
</div>
and css.
.my_responsive_add {
display:inline;
}
#media (max-width:#maxResponsiveWideWidth){
.my_responsive_add {
display:none;
}
}
I would recommend you to not hide the AD, and use the responsive ad, as it will look good on mobile users, and that way you can get clicks from mobile users.
To answer your question, I believe that by hiding the AD, it will not violate any of the program policies as far as I know, since that specific AD will not get any Clicks at all and it will remain "quiet" and will not drag attention.
Hope this helps a little, good luck.

Take a look here Modification of the AdSense ad code to read about adsense program policies particularly the 'Acceptable modifications'

If anybody still got the same problem with display:none. I fixed it by removing the data-ad-format parameter from element. and keep everything else the same as documented by Google here at 'Hiding an ad unit' section, which means control the format using CSS media queries.
And it makes sense because you cannot set the format as auto when you specify the data-ad-format value and then control it by CSS.

Can "Show Insecure Content" Browser Prompt Be Detected?

We are all familiar with the problem of mixed scheme (http / https) content on a page.
I'm working on a site on which this is unavoidable. I do not want to prevent this. I know there are a ton of questions / answers on that.
What I need is simply to detect this (via JavaScript?) so I can tweak the page behavior (show a notice of degraded behavior or something). Any help?

Using jQuery you can find out if any insecure items are present on a page using the following piece of code:
var flag = false;
if($("script[src^='http:']").length > 0
|| $("link[type='text/css'][href^='http:']").length > 0
|| $("img[src^='http:']").length > 0
|| $("iframe[src^=http:]").length > 0)
flag = true; // insecure content :(
else
// yay!
Images, JS, CSS are all the insecure content that I could think of. Perhaps there are more, but you could easily add'em up as you find.

It's hacky, but I managed to fix this in all browsers with just JavaScript. Let me see if I can sketch it out.
We have this basic encrypted page:
<html>
<body>
<div> stuff </div>
<iframe src="URL_WHICH_IS_MAYBE_INSECURE"></iframe>
</body>
</html>
When URL_WHICH_IS_MAYBE_INSECURE is https, all is good. But when URL_WHICH_IS_MAYBE_INSECURE is http, IE will not load the content unless the user OK's insecure/mixed content. I want to tell the user the page is kinda busted until they click allow. For reasons I can't go into, I know all the sites are trustworthy. Just some of them do not support SSL and the parent site needs to.
AFAIK, I cannot detect this dialog / semi-loaded state with JS. But what I can do is run JS over an insecure connection IF they allow it (which also makes the iframe go). So only when URL_WHICH_IS_MAYBE_INSECURE is http & the site is https (mixed) I add two bits of code + HTML.
<html>
<body>
<div> stuff </div>
#if(needSpecialHandlingForMixedMode) {
<div id="secureWarn">
WARNING: This page has limited functionality, allow mixed content
</div>
}
<iframe src="URL_WHICH_IS_MAYBE_INSECURE"></iframe>
</body>
#if (needSpecialHandlingForMixedMode)
{
string baseUrl = Request.Url.SchemeAndHostAndPort().Replace("https", "http");
<script src="#baseUrl/scripts/security-warning.js"></script>
}
</html>
and the script is
$(document).ready(function(e) {
$("#secureWarn").remove();
});
So it works like this.
If mixed-mode both the iframe and script will only load if the user allows it. This is not allowed by default in IE and is allowed by default in Chrome & FireFox.
If they do nothing (don't allow in IE, for example), it will keep the warning div visible.
If they do click it, the iframe loads, and now the script also runs (because it was insecure back to my server), this removes the warning from the page.
Happiness commences...
Hope this helps someone.
Cheers,
Michael

Display Alternative Content for Users with AdBlockers

I'm working on an ad funded project. Really something subtle and content aware, not lame popups for genital enlargement etc.
Since the project is ad funded, people with Ad Blockers will not benefit the project, (since they obviously don't know the ads on that specific site is not that bad).
How can I display an alternative content for people with ad blockers? Something like
We noticed you have an active Ad Blocker. Example.com is ad funded, we promise our ads are of high quality and are unobtrusive. The best help you could provide to keep us running, is to whitelist us in your ad blocker. Thanks!
How can I test for an ad blocker?
Found an example! http://mangastream.com

Ad Blockers basically manipulate some elements with some IDs or jQuery like selection rules, stored in their database, it is done a while after the DOM is ready.
So you have to check if your ad element is manipulated or not after a certain time for example 3 seconds after the DOM is ready. You can basically check the display (because AdBlockers hide it) CSS property or the innerHTML of your ad element. Below is an example:
Working Demo: http://jsfiddle.net/cxvNy/ (Tested using AdBlock for Chrome, you need to have this active)
If your Ad HTML is:
<div id="google_ads_frame1">aa</div>
Then:
$(function(){
setTimeout(function(){
if($("#google_ads_frame1").css('display')=="none") //use your ad's id here I have used Google Adense
{
$('body').html("We noticed you have an active Ad Blocker. Example.com is ad funded, we promise our ads are of high quality and are unobtrusive. The best help you could provide to keep us running, is to whitelist us in your ad blocker. Thanks!");
}
},3000);
});
Hope above code is self explanatory :)

Eventually, I used the following implementation (similar to this site's). The following code is used:
function abp() {
if ($('.ad').height() == 0) {
$('.ad').css("height", "90px");
$('.ad').css("background-image", "url(/static/images/msblock.png)");
}
}
$(abp);
At the very end of the document. Seems to be working like a pro. Thanks for everyone's excellent answers, upvotes for all!

Shooting from the hip here, but methinks you can check the content of your ad's div with some javascript after the page has loaded.
<!-- html -->
<div id="MyAdDiv">
<div id="BeaconContainer" style="display:none">I rendered!</div>
// Ad content here.
</div>
// javascript
var d = document.getElementById("MyAdDiv");
if ( d.innerHTML.indexOf("I rendered!") === -1 ) {
// Your ad has been blocked.
// Run code to launch WhiteList request message.
}
I don't know exactly when the adblocker does it's thing, so it would probably be a good idea to delay this function's execution for a few seconds with setTimeout(). There's probably some interesting stuff you could do with some ajax calls, too, like collecting stats on how many users are running ad blockers. Management just loves that kind of stuff.
UPDATE:
I just installed adblock for Chrome and checked it against StackOverflow. It looks like AdBlock just removes the contents of the ad container, so the method above will work.

The most common trick is to create a JavaScript file with a name which is commonly blocked by adblockers, for instance /ads/advert.js.
If the file gets blocked, you know the visitor has an adblocker enabled.
CSS files usually don't get blocked by adblocker lists, so this would be a safer approach.

This can be done with simple JavaScript also, without using jQuery.
<script>
window.onload = function(){
setTimeout(showAdblockImage, 3000);
};
function showAdblockImage(){
//get all google ad elements
var adsList = document.querySelectorAll("ins.adsbygoogle");
if(!adsList){ return;}
for(var i=0; i<adsList.length;i++){
if(adsList[i].innerHTML.replace(/\s/g, "").length != 0){
//AdBlock is not active, hence exit
break;
}
//apply inline css to force display
adsList[i].style.cssText = 'display:block !important';
//modify html content of element
adsList[i].innerHTML='<img src="imageurl/img_1.jpg" />';
}
}
</script>
Ref: Place alternate content in place of AdBlock Censored Ads

I don't know how ad blockers work but for example a Chrome ad blocker I have lets me pick a specific DOM element containing ad to be removed: <div id="ad_holder"> ... ads ... </div>, and the blocker would remove it somehow.
If you put some javascript inside that div, with a short timer, that would modify a global variable, and another timer that executes afterwards, reading that global variable, could you then assume there're no ad blockers on the page if the variable was properly set? What happens if the blocker removes the div after Chrome evaluating that javascript, would the timer stil manage to set the variable although the parent div was removed?
AdBlock also maintains a public list of 'bad' servers (http://www.doubleclick.com ?) and will probably block http requests for content from those servers. This can be done if it integrates with Chrome so that it can define some sort of a content policy - what gets loaded and what doesnt. This case you can detect with the previously described approach. If your client is an ad provider, i guess sooner or later it will end up black listed :)
The blocker might only modify the CSS and hide the whole div, but this could be easily detected.

My favorite approach is to simply add a class of 'ads' or 'ad' or something similar around all nice large useful content blocks on my site, then when people with an ad blocker view it, they don't see anything.
They're forced to disable their ad block in order to see the content.
Don't bother with warnings, let them figure it out. It's not dummies using ad blocking software.
Here is the current list of block rules from some popular adblock extensions. Simply pick a class or id that they are blocking (use your developer tools to view the list of css classes)

<script> // Run after all the page elements have loaded window.onload = function(){
// This will take care of asynchronous Google ads
setTimeout(function() {
// We are targeting the first banner ad of AdSense
var ad = document.querySelector("ins.adsbygoogle");
// If the ad contains no innerHTML, ad blockers are at work
if (ad && ad.innerHTML.replace(/\s/g, "").length == 0) {
// Since ad blocks hide ads using CSS too
ad.style.cssText = 'display:block !important';
// You can put any text, image or even IFRAME tags here
ad.innerHTML = '<img src="http://blog.liveurlifehere.com/wp-content/uploads/2015/01/adblock.jpg" width="300" height="250" />';
}
}, 2000); // The ad blocker check is performed 2 seconds after the page load }; </script>
Use this code you can set image in replacment of google ads

You can implement https://github.com/sitexw/FuckAdBlock which is very good and easy to use.

How do I make a html page printable without reloading/refreshing the data?

I have a small html/css site powered by jQuery, generated with PHP, you can see it in action here.
All the idea about the site is that once loaded, it works without the internet connection, if the browser supports javascript, that is.
You can see it has a PRINT button ready, but it doesn't work yet. I want to make it work, but I'm not sure what is the best approach, or any approach, thereof.
I need to print the content area only, that means the header (song title) and the paragraph (song lyrics). Probably add a header/footer to the paper, so that the site name is printed too.
On other sites it usually works in the way that the PRINT button opens up a new window, which loads for example /print.php?id=40, but I don't really want to do that here, as it requires an active internet connection.
In case the print feature cannot be done without an internet connection, an answer which at least describes on how to best approach this with reloading the site will still be acceptable.

Use a print stylesheet to specify element visibility for printing.
<link rel="stylesheet" type="text/css" href="styles/print.css" media="print">
... and in print.css
#hideThisElementInPrint,
.andThisOneToo {
display: none;
}