Develop Reference

Dynamic Iframe Resize and Window Focus Scroll Bug

So I've been searching high and low to find a solution that works for me, and I almost have it, but I am running into a little glitch. Due to limitations with my product, I need to load certain pages inside iframes. I can't install any additional libraries.
My child pages have divs that when clicked on are hidden and unhidden, so the content changes size. This code almost works, the height expands, but it doesn't contract again.
<script>
function checkFocus() {
if(document.activeElement == document.getElementsByTagName("iframe")[1]) {
test.style.height = test.contentWindow.document.documentElement.scrollHeight + 'px';
}
}
window.setInterval(checkFocus, 1000);
</script>
<iframe id="test" src="/SitePages/test3.aspx" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:50px;width:100%;border:none;overflow:hidden;"></iframe>
If I add in:
test.style.height = "0px";
before:
test.style.height = test.contentWindow.document.documentElement.scrollHeight + 'px';
Then the child pages do contract again, except I get a weird scrolling bug on my main page where it's constantly forcing the page to scroll up. Any ideas how to fix?
Thanks for reading!

I figured this out. Adding
window.focus();
after
test.style.height = test.contentWindow.document.documentElement.scrollHeight + 'px';
fixed the issue. This just takes the focus off of the iframe and puts it back in the main window because it was looping.

Hide toolbar on mobile browser

I'm working on my responsive website and I'm trying to hide the address bar and toolbar of mobile browsers.
On this picture, you can see which zone I'm trying to hide (red mark)
So as I've seen when I scroll on my mobile this automatically disappear.
What I'm trying to do is once the document is ready to do an auto scroll. Something like this:
$('html, body').animate({
scrollTop: $("#id").offset().top
}, 2000);
This element is practically on the bottom of the website but still don't hide the toolbar of the web browser.
Is there any way to hide it?
EDIT: I've to clarify that this is not on my website, i'm trying to hide de footer of practically all browsers, i know that this is not possible beacause is on client side, but i'm trying to do a "trick" to hide it. I know that when i use my mobile i open safari and i navegate there is a footer to open a new tab or close it etc... But when i scroll down on a website this one disappear, so this is what i'm trying to do. Create an automatically scroll down to make it disappear... But this is not actually running

The only way I can think to solve this would be to use the Fullscreen API as described here.
For example:
// Covering all browsers that support this
var docEl = document.documentElement;
var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;
// Execute the variable on initalization
requestFullScreen.call(docEl);

use Jquery to add a CSS and display it as none
if(condition that you want){
$(.'your-menu').css({'display':'none'});
}

Prevent scroll jumping in CKEditor and TinyMCE Inline editors on Chrome on dialog close

I'm having issue specifically in chrome (52.0.2743.116, havent tried other versions) where after closing any of the dialogs in CKEditor or TinyMCE inline modes (link, table, colour picker etc) the page will scroll back to the top. This behaviour doesn't occur in Firefox, and I haven't tried IE.
The problem should be able to be reproduced in the ckeditor example here. To reproduce, select one of the long columns at the bottom, and scroll down such that the top of the div is a fair bit offscreen. Now click the Link button and press cancel, the page should snap to the top of the div.
Any ideas on how to fix this, whether it be a JS hack or just a simple configuration?
Thanks.

Next hack will help, just add to /CKEditor/config.js
CKEDITOR.on('instanceReady', function(ev) {
ev.editor.on('dialogHide', function() {
let height = (window.pageYOffset || document.documentElement.scrollTop);
window.setTimeout(function() { window.scroll(0, height); }, 0);
})
});

Fancybox inline popup on mobile not moving with page scroll

I am working on this website:
http://www.fairfaxandroberts.com.au/
And I am using fancybox for inline popup:
http://fancyapps.com/fancybox/
When you visit the site you can see the popup that is shown down below the instagram feed when you scroll.
On desktop and larger version it is working well, but on mobile versions the popup is shown when you scroll below insta feed, but it stays on the position where it is shown, it doesn't move with the page scroll behind.
The jQuery code I use to display Fancybox is this:
$(window).scroll(function() {
var y = $(window).scrollTop();
var insta_feed_top = $("#slide-55").offset().top;
if (y > insta_feed_top) {
$(window).off('scroll');
$(".fancybox_newsletter")
.fancybox({
helpers: {
overlay: {
locked: false
}
}
}).trigger('click');
}
});
What can be the issue guys? I tried a lot, saw the documentation on the site, but nothing works.

[SOLUTION]
Guys after debugging on the mobile, I found that the position was changing on absolute for mobile devices. I just changed the position to be fixed, added some top and left margin and everything looks perfect.
Thanks again.

Cross-platform method for removing the address bar in a mobile web app

I am working on a mobile web app and am trying to remove the address bar. Its easy enough, unless the <body>'s natural height is not tall enough to allow for scrolling. Try as I might I cannot find a reliable iphone/android, cross device method of insuring that the <body> is tall enough to allow the address bar to disappear. Many of the methods I've seen rely on screen.height which makes the page TALLER than it needs to be. It should be EXACTLY tall enough to allow the address bar to go away and no taller!
Does anyone have a script that handles this perfectly? I all I need to to determine the height of the page minus the address bar for iphone and android.
I've tried:
screen.height //too tall
window.innerHeight //too short
document.documentElement.clientHeight //too short
document.body.clientHeight //almost but too short
JQUERY allowed.

This site also has a few other suggestions, but this no-nonsense, no-worry one is available in a github:gist and answers your question (pasted here for convenience):
function hideAddressBar()
{
if(!window.location.hash)
{
if(document.height < window.outerHeight)
{
document.body.style.height = (window.outerHeight + 50) + 'px';
}
setTimeout( function(){ window.scrollTo(0, 1); }, 50 );
}
}
window.addEventListener("load", function(){ if(!window.pageYOffset){ hideAddressBar(); } } );
window.addEventListener("orientationchange", hideAddressBar );
As far as I can tell, the combination of extra height added to the page (which caused problems for you) and the scrollTo() statement make the address bar disappear.
From the same site the 'simplest' solution to hiding the address bar is using the scrollTo() method:
window.addEventListener("load", function() { window.scrollTo(0, 1); });
This will hide the address bar until the user scrolls.
This site places the same method inside a timeout function (the justification is not explained, but it claims the code doesn't work well without it):
// When ready...
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});

I think the way it works is the address bar is hidden when the page wouldn't fit. So you want a page exactly the height of the window including the address bar, i.e. window.outerHeight, no?