Develop Reference

iFrames and Google Ads not interactive on posts

iFrames and Google Ads (within posts) are no longer interactive on my site, meaning users can no longer click the ads. Ads outside of the post area (sidebar for example) are perfectly fine though.
I have not changed anything in the post template, or updated any templates so I'm not sure why I have this issue now.
Not sure what to post to give as an example, so here's an example of a post with this issue. I should say, that the ads are only visible on mobile within the posts.
http://www.thisisardee.ie/2016/05/12/romance-brew-ardee-karen/
HEADER: http://pastebin.com/Ne6yuf4a
SINGLE POST TEMPLATE: http://pastebin.com/9H0qcc9d
SIDEBAR TEMPLATE: http://pastebin.com/ym0NXWCQ
Could it be a CSS issue?
Any help would be massively appreciated. This is affecting potential revenue from the site.
Thanks.
EDIT: From looking further. The issue only appears to be affecting mobile users. So, given that the in-content adverts only become active on mobile, also. It could be to do with ads. Still no idea of a fix though.

One method for resolving issues like this is to open Chrome (or any other browser) Developer Tools and try to select the non-working ad. In this particular case, you will notice that there is another HTML element on top, namely the div element with classes sidebar sidebar-popular.
Solutions are many, one simple solution is just to drop the z-index of the element with CSS:
.sidebar.sidebar-popular {
z-index: -1;
}

Allow click to pass through iFrame to content behind it

The closest thing I can find to what I'm trying to do on SO is this, but sounds like this is not a workable solution anymore and it is not specific to iFrames anyway:
Click through a DIV to underlying elements
Basically I have a DIV that gets added to a page that contains an iFrame. The iFrame contents can be minimized so they don't always take up all the space of the iFrame. The iFrame is transparent so that you can still see the web page behind it. I need to be able to click on the elements in the web page behind it, but have had no luck so far.
They have a roughly 400x400 iFrame but when the contents in it are minimized, you can still click on the web page behind it. I tried doing something similar but can't get it to work.
Even in the transparent regions I cannot click on the page behind it. I also tried using pointer-events:none as mentioned in other posts but this does not help. It only disables the elements in the iFrame but has no affect on being able to click through it.
Do anyone know how to achieve this? A way to have a larger iFrame, where the contents in it can be minimized and you can still click on what's behind the iFrame?
UPDATE:
It would appear that this is not possible when using frames.

Have you tried pointer-events: none?
http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/

Strategy 1: iFrame Resizer
If you're able to get scripts into both the host page and the page contained within the iFrame, you can use Bradshaw's iFrame Resizer JS.
It will dynamically resize your iFrame to fit its content. Works cross-domain.
The use cases for it include:
You are authoring both the host page, and the iFrame page.
You are authoring either the host page or the iFrame page, and are collaborating with the author of the other page.
I can't tell if your use case meets either of those criteria.
Strategy 2: Overlapping iFrames
Using JQuery, you can toggle the visibility of 2 (or n) iFrames which overlap completely or partially. You can load each iFrame with the same content, or different content. When any iFrame is invisible, you can click through it to the content behind it, whether that's another iFrame, or anything else.
In your application, you would be sizing the 2 iFrames differently: iFrame1="full size", iFrame2="minimized."
In my application (below), the 2 iFrames mostly overlap and have the same content, but I was padding them differently and shifting their position slightly, depending on whether something else on the page was present or absent. I'm also resizing both iFrames dynamically to fit their content using iFrame Resizer (above), but that might not be required for your application.
I recommend using different border colors for your iFrames (below), while you fiddle with their position and size.
I only learned JS like, 5 mins ago, so, my apologies if I've misunderstood your question.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
// This is the Bradshaw resizer script. Required iff you need dynamic resizing.
<script src="[https://MyiFramehost.com/web/embed/js/inline.js]"/></script>
<div id="padded" style="width:100%" >
<iframe id="oos_inline" style="border:solid;border-color:green;width:100%;position:relative;padding:65px 0px 0px 0px;top:-65px;"></iframe>
</div>
<div id="normal"style="width:100%;" >
<iframe id="oos_inline_padded" style="border:solid;border-color:blue;width:100%;position:relative;padding:0px 0px 0px 0px;"></iframe>
</div>
<script>
var iframe_padded = document.getElementById("oos_inline_padded");
var iframe = document.getElementById("oos_inline");
if(document.getElementById("home-page")!=null){
iframe.src = "https://the_embedded_site.com";
$(iframe).show();
$(iframe_padded).hide();
} else {
iframe_padded.src = "https://the_embedded_site.com";
$(iframe).hide();
$(iframe_padded).show();
}
// This starts dynamic resizing. Required iff you need dynamic resizing.
iFrameResize({log:true})
</script>

I think you missed:
myDiv.style.opacity = "0";
myDiv.style.filter = "alpha(opacity=0)"; /* For IE8 and earlier */
BTW, use a CSS class instead of applying CSS via JS. Let me know how it goes.

How to use a <div> tag instead of <iframe> to load a Spry vertical menu?

Thanks in advance for any help you can offer. I have searched for weeks on this topic and cannot find anything that will work.
I'm in charge of updating an online resource guide for employees at my office. My work uses a proprietary web software called InQuira Info Manager for people to search the repository for answers. Basically it works like WordPress. It's a web-based WSYIWYG web editor, but you can add source code manually as well.
At work, I use Dreamweaver CS2 [upgrading is not a current option] and all our machines have IE7—I have no idea for how much longer. So, whatever I build has to be compatible with IE7 and cannot be a data-driven site, such as using PHP or other server-side technologies. I can, however, use JavaScript, whether referenced externally or inline.
The pages used for the reference guide are a two-colum format, with a left sidebar <div> for navigation and a right main <div> to display the content. I pulled the source code for a Spry vertical flyout menu from my copy of Dreamweaver CS6 at home and pasted it into my CS2 pages at work, inside a "#nav" <div> within the sidebar <div>.
Here's the problem: I need to be able to have the source HTML for the Spry menu file loaded into the <div>, rather than pasted in many different instances across multiple pages. As this is a resource guide, it will be regularly updated, so if I add or remove a topic, I don't want to have to do so twenty times, once for each topic. Template layouts will not work either, since I can't just hit the "re-publish" button in Dreamweaver—with Info Manager, I have to copy the entire HTML file's source code and manually paste it into the Info Manager file, sort of like creating a new WordPress entry.
I have tried using an <iframe> with no end of trouble; specifically, at least in IE7 <iframe> tags do not appear to respect the z-Index property and so no matter what, the flyout menus fall behind the content <div>. No matter what I do, I can't get them on top of the content . I have read about using JavaScript to use the .innerHTML property to load the content into the "#nav" <div> but I must be doing something wrong. I paste the script code within the <head> area and call the script within the HTML file, but can't get it to work.
I will admit that I'm certainly no pro when it comes to web design, but everything was going great until I hit this wall. IE7 sucks but I can't compel my work to upgrade. Any workaround ideas using JavaScript or other non-server-side alternatives would be great. Thank you!

First, the iFrame: iFrames won't work in your case (in any browser AFAIK), because not matter what z index you set, the content inside the iFrame will never overflow outside of it; so, if your menu as a drop down submenu, it will be hidden inside the iFrame.
About the document.write('...') approach: I personally don't like using document.write(), since I feel that it makes code a little messy, because it requires placing the code embebed inside the html.
Your other approach was right: save the content of the Spry menu in a HTML file (with no head or body, just the content of the div). Add a <div id='nav'> tag where your menu is going to be shown (add all the external CSS needed for the menu too); then, add next Javascript inside the Head of the page:
<script type="text/javascript">
function loadSidebar()
{
var xmlhttp;
if (window.XMLHttpRequest){
//Modern browsers (including IE8+, not sure if IE7)
xmlhttp=new XMLHttpRequest();
}else{//IE7, IE6 and IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{ //This will reemplace the content of the #Nav div
document.getElementById("nav").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","SidebarMenu.html",true);
xmlhttp.send();
}
</script>
And this just before the closing tag </body>:
<script type="text/javascript">
loadSidebar();
</script>
If this works, you may want to put the function that is on the head inside a external Javascript file (so you don't have the code in every page), and just kept the calling at the end of the body.
If it doesn't work I would recommend you to test it in Google chrome, with the console open (press F12, you may need to press F5 once too), and add some console.log() calls inside the function, so you'll know where exactly the problem is. Fix it and then test it again in IE.

Dealing with non js users - set elements to display:none / opacity :0 before page is rendered

I have done a bit of a web development faux pas by not starting with a functioning page and then building js functionality on top. The site I am redeveloping is an old site which has lots of pretty jquery animations.
I have gone to great trouble to ensure all page loads can be handled with or without ajax but I have just realised this is entirely pointless since the initial page load produces several elements which load with properties of display:none; or opacity:0; and are animated to be visible on doc ready
I would very much like to rectify this but there are several reasons I did it in the first place:
1: to hide a flash of unstyled menu before a jquery plugin kicks in. (I will replace this with a non js menu and animate into the jquery menu to solve this)
2: The other reason is that I like the initial animation on page load and would ideally like to keep it. But this presents a problem since I would like to have the bulk of the page invisible for js users and visible for non js users on load but how can I ensure that my elements css properties are changed BEFORE the page is rendered - I have tried doing this with jquery but by the time the jquery library has loaded (without caching) my page has already rendered so the content is flashed up before being hidden and animated back in?

This block will be visible only for users with JS turned off.
<noscript>html code here</noscript>
You can add some styles like this:
<noscript>
<style>
#content{
background: red;
}
</style>
</noscript>

You can add the following in your <head>:
<script>document.documentElement.className+='js'</script>
Then you can style javascript-enabled browsers differently using the js class on the html element, f.ex:
html .animate{opacity:1} /* all browsers */
html.js .animate{opacity:0} /* js-enabled browsers */
The class is added already in the head, so there is no flicker in the rest of the DOM.
You can also use the noscript tag, but personally I think this is cleaner because you can administrate the styles in a single stylesheet.

Font-face flickering when new css files are dynamically loaded

I am using the Google Webfont Loader to get my webfonts loaded with a callback and it is working fine.
Although, when a couple of components: Google +1 button, Twitter Search Widget and the Add This button is loaded, they add a new stylesheet to the DOM and makes the browser render the site again. This is causing the font-face to disappear and then show for each new stylesheet added to the dom.
I could hide the font entirely until the components are loaded but they tend to be pretty slow so that would leave me with a pretty bad user experience. About 1 sec of a headline-less site.
Andy tips on how to force font-face to not redraw or how to block dynamically loaded CSS from within Google, Twitter and FBs embed scripts?
Update: Demo here http://kristoferforsell.com/dev/fontexample/

This is currently an inherent issue with browsers and the #font-face property. The blink occurs when the font is loaded and the page updates to reflect the font. If you wish to remove the "blink" entirely, the only sure fire way is to include the font as a data URI in the style sheet. Of course, using the standard "safe" fonts will also remove the blink.
Data URIs allow you to actually embed the code for the font in the stylesheet so there's no blink when the page refreshes to show the desired font. Using data URIs, will obviously increase the file size (kb) of any style sheet.
An online converter to get base64 code can be found here
Usage for #font-face would be like so.....
#font-face {
font-family: "My Font";
src: url("data:font/opentype;base64,[ the base64 code here ]");
}

Not sure if it would fix your issue but you could use css to set the visibility of the elements to hidden until the font is loaded. Google's API provides wf-loading and wf-active classes which are added to the body to address this issue.
I always set up a separate stylesheet just for the #font-face rule, and within that put in the following rules, where replace is the class of the element that's being replaced, for you that would just be the p tag.
.wf-loading .replace { visibility: hidden;}
Yours would be
.wf-loading p { visibility: hidden;}
Then as soon as the webfont is loaded, JS puts the wf-active class on the body, and your text shows up. Let me know how that goes and if you have any issues then just drop me a line. It might also be worth doing some searching for "flash of unstyled content" or "flash of unstyled text" as this is a well known and well documented bug.

I can suggest a simple and dirty trick I have used myself to solve issues like this. If you implement this, from the user's side the effect will be that the entire page will load at once (with the correct Web Fonts), but after a delay. Once loaded, nothing will flicker or change.
Wrap your entire page contents in a div and set its visibility to hidden. Then use js to turn on the visibility once the whole page (stylesheets and all) is loaded.
Here's the code:
<head>
<script>
function show()
{document.getElementById('wrapper').style.visibility='visible';}
</script>
</head>
<body onload="show()">
<div id="wrapper">
...your entire page contents...
</div>
</body>
The onload ensures that the visibility is switched on only after the entire body has loaded. Although I haven't used Web Fonts, I use this trick to fade in the entire contents of this website with no changing or updating afterwards. But yes, there will be a delay before the entire page comes into view.
EDIT: I added Google Web Fonts to the site I linked. Still works fine. No font-face flickering.

This is a shot in the dark, as I've not tested it:
Could you create another html page with only those social networking buttons, and then load that into an iframe? Then only set the src to the iframe once the document is fully loaded, so it doesn't hold anything up.
In html:
<iframe id="socialMedia"></iframe>
In script:
$(document).ready(function() {
$('#socialMedia').src = "http://mysite.com/mysocialmediastrip.html";
});
Where mysocialmediastrip.html contains all the social media buttons. Setting the src will cause that iframe to reload and pull in that content, but IIRC, the rest of the page will be left alone -- all of the button rendering will have been done in mysocialmediastrip.html, not in your main page.

I totally understand what you are saying about the delay process, waiting while window loads before you actually show your goods. Abhranil provided a good solution but you can take his solution further. You can use jQuery's ajax to load your specific page content that's using the special font type. Why? because ajax comes with a special function called beforeSend(). Within the beforeSend function(), you can load a very cool gift animation that will display on your screen, before your main content is ready to viewed.
Use that moment to show some creativity towards your audience, before the main event!

The best and most simple answer is adding font-display: block when specifying a font face
#font-face {
font-display: block; /* Fix flickering */
}
You should also preload the font in the html file
<head>
<link rel="preload" as="font" href="/path_to_your_font.ttf">
<-- repeat for all typeface -->
</head>