IE11 renders page incorrectly in an inactive tab - javascript

The problem is I try to render an iframe with some another page inside of it.
The code looks a bit like this:
<div>
<iframe></iframe>
</div>
The outer div is abolutely positioned and has width and height. The iframe and div are created dynamically.
The problem is inner html tag's top, when it's rendered, positioned above the iframe top, making all inner content to render incorrectly. And it is positioned static and have no css rules that could possibly move it to the top. Or sometimes it could be only the inner content, in the body, or the upper rendered div inside of it, on the second nesting level, while the other elements on the above levels being rendered correctly.
This issue reproduces in IE only (I'm not sure if this is 11th version only) and only when you you have some other tab selected while it loads in another, inactive tab.
I also couldn't reproduce this issue in JSFiddle or anywhere else by having some similar constructs. And I can't give real code from the production enviroment.
I know, it is crazy to ask people to help with such lack of information, but I hope, someone had the same issue and knows how to solve it, because I'm really out of ideas.
Does anyone know how this issue could possibly be solved?

Related

Foundation Reveal is removing DOM

i don't know if it's a bug or glitch. but when i try to make a reveal component the usual way by adding data-reveal attribute on it, it always removes the Reveal DOM . it's weird because it's working on most pages, but not in page1.
i can't reproduce the bug because i used the common way of doing it.
what's happening is when the document loaded, it instantly removes the reveal DOM.
i also tried removing the data-reveal attribute and instantiate a new one via javascript like this
var elem = new Foundation.Reveal($modal);
console.log(elem);
well of course it would instantiate, but when i looked at my page DOM, it's gone!
please help. i checked all my js files. and there's nothing wrong that could remove the Reveal DOM
See the attached picture. black is my html code and the white is chrome's debugging console
This is "by design". Foundation first removes reveal container and then appends it back to either body element or the created overlay. The same thing should be happening on your other pages. If you need additional content is should go inside the reveal DIV, not the parent. There should be no reason to wrap reveal in any additional DIVs.
See foundation.reveal.js, line 67-72.
if(this.$overlay) {
this.$element.detach().appendTo(this.$overlay);
} else {
this.$element.detach().appendTo($('body'));
this.$element.addClass('without-overlay');
}

jquery one page scroll start at the bottom

I'm using the One Page Scroll jquery plugin (https://github.com/peachananr/onepage-scroll) and I want to have the site start from the bottom.
I have five sections, so when I added:
$( window ).load(function() { $(".main").moveTo(5); })
The page loads at the top and then immediately scrolls down to the bottom. I'm trying to avoid that: just want it to load at the bottom and then the user can navigate upwards.
I'm still learning jquery/javascript so I have a feeling this is a simple fix and thats why I couldn't find an answer in the forum.
Thanks in advance for any help or guidance.
Edit: here's the working example
This will be very difficult for two reasons:
The browser constructs the DOM from top to bottom, like stacking blocks upside down. Handlers on window.onload or $(document).ready don't run until after the page has already been built and rendered. Any delay while your scripts and content are loading will exacerbate the lag time. To affect how it looks from the very beginning, your code would need to run even before window.onload. (EDIT: You can do that with JS that's outside an event handler and physically before the elements you're rendering, but it will run before those elements exist. Among other problems, you won't know how tall anything is yet.)
Before the DOM is rendered, there is no bottom of the page. It gains height as more blocks are stacked. You can add some kind of wrapper with an absolute height, but that has its own issues.
If you really want this to work smoothly, you may need a more radical approach. I suggest you exclude the first page from the initial response, then add it dynamically afterward. You can give it an inline style="display:none" or just add it later via AJAX. Injecting content at the top will push everything else down, so you'll need to automatically scroll down as the page expands upward. If you do it right, the user should never be able to tell.
Try this:
jQuery( document ).ready(function( $ ) {
$(".main").moveTo(5);
});
".ready()" will wait for the DOM to load and then execute the script within
I would suggest you to make us of fullPage.js instead and make use of the 'active' class to determine which section will be visible on load as detailed in its docs:
Each section will be defined with a div containing the section class. The active section by default will be the first section, which is taken as the home page.
...
If you want to define a different starting point rather than the first section or the first slide of a section, just add the class active to the section and slide you want to load first.
Living demo
<div id="fullpage">
<div class="section">One</div>
<div class="section">
<div class="slide">
<div class="demo">Demo</div>Two</div>
<div class="slide">Three</div>
</div>
<div class="section active">Third</div> <!-- Active section -->
<div class="section">Four</div>
</div>

Floating Images mess up Bootstrap Scrollspy

I have set up a page using bootstrap. (http://ethnoma.org/about.html) I have a sidebar navigation that is affixed (which is working great). I also am using bootstrap scrollspy on this navigation and all links in the navigation are within the same page (using ancors). Everything was working fine (even with a smooth-scroll plugin added). I simply had to call this script to force Scrollspy to refresh after all content is added to the page (which I placed in the <head>).
<script type="text/javascript">
// ScrollSpy
$(function () {
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
});
});
</script>
My client then asked me to add images to the page. I did so using bootstrap markup and css classes like the following:
<a class="pull-right pad5" href="#">
<img class="media-object img-polaroid" src="assets/img/about-001.jpg" alt="Partnership"/>
</a>
Which makes the parent "a" tag float to the right (in this case) and makes the img into a block element.
Problem is these floated images make the page longer than it was originally. Yet Scrollspy is still switching the active link at the same place. This causes scrollspy to activate links for content farther down the page than you currently are.
I am at a loss for how to force Scrollspy to take the floated images into account when calculating the location of the ID's the ancors link to. Do any of you have an idea how I could fix this. You can see the problem in effect at the following page http://ethnoma.org/about.html
I just came across this issue myself, so I thought I'd provide some explanation, and a possible solution, in case anyone else finds themselves in this bind.
First, scrollspy is working correctly. At the time that it computes the offsets of the various elements on the page, the images haven't loaded yet, so they have an effective height of 0. Later, when the images load, the browser determines their native dimensions, recalculates the page layout, and then repaints the page with the images. However, scrollspy is completely unaware that the page has been repainted, so it continues to use the stale offsets.
If you were to refresh scrollspy after all the images loaded, you'd find that the offsets would be correct. So, the question is how to do this.
One solution is to attach an onLoad event handler on every image, and then refresh scrollspy inside the handler. A simplified approach might look like this:
<script type="text/javascript">
function refreshScrollspy() {
$('[data-spy="scroll"]').each(function() {
$(this).scrollspy('refresh');
});
}
$(function() {
refreshScrollspy();
});
</script>
<img onload="refreshScrollspy()" src="assets/img/about-001.jpg" alt="Partnership"/>
Here's a working jsfiddle example. Note that that image's load handler has to be registered before the image actually loads. Otherwise, it won't get fired. That's why I'm using an inline event handler here. A more elegant solution is left to the reader.
Came across this issue myself while trying to use the Scrollspy from Bootstrap, and it seems that the script doesn't take into account of the image's height while calculating, thus causing the Scrollspy to be in accurate.
I believe this is due to that the image doesn't have a height set to it. By inspecting the page, I have found that the floating images I have included in the page had the height set to auto, and when I've set it to a specific value after media queries in the CSS, my Scrollspy was working perfectly.

make an element overflow out of an iframe [duplicate]

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Is there a way to have content from an IFRAME overflow onto the parent frame?
Here is my issue:
I have two types of dialog which (should) look and act the same. One loads content directly into the page, and one uses a iframe to load content. I have an element which I need to overflow out of the iframe and show completely on the page. This element is basically an enhanced select element built with a list (ul/li). How can I make this act as a select would inside an iframe and overflow the iframe?
The first thing that comes to mind is to put the select/list outside of the iframe and position it in the correct spot, though this will require communicating between the iframe and parent more than I would like. Ideally I'd like a solution that keeps the select/list in the iframe.
You can't.
An <iframe> is an element containing a separate, distinct browser window (essentially).
Think of it literally like a window: when you look out of your window, the view of the outside stops at the windowframe.
This is in contrast to content inside, say, a scrollable <div>, which is more like a hand-held sheet of glass with some stuff painted on it and some other stuff stuck on with sellotape and hanging off over the edges.
You could use php to load the page into your current page. A lot of people consider iframes bad practice. It would only take a couple lines of php to load the page elements, instead of an iframe, which is sometimes slower.
Here is how you would do it....
<?php
include('file.html');
?>
You would put this line in a and contain it on the page just as you would with the iframe. You can use ajax/js to seamlessly change the content of the html and even load things from a server if you wish.
Imagine that the document is a picture.
Imagine that the iFrame is a real frame.
Could you make the picture come out of the frame? No.
It's exactly the same thing here.
Your best bet is to figure out a way to avoid the iFrame.
Besides, iFrames are bad practice.

Best practice for injecting a header or toolbar into a page?

Our webapp allows customers to view historical snapshots of pages on their site. We want to inject a header into the top of the page (something like the digg or linkedin toolbar) that contains data like snapshot time, url, and various other metrics.
We want to present these pages as close as possible to their original state.
So what is the best way to add a header into a page whilst preserving it as best possible?
Potential approaches we have looked at:
Sticking the cached page in an iframe. However a surprising number of sites contain frame-breaking code and we don't want to do anything hacky like trying to stop this.
Add an absolutely/fixed positioned div to the top of the page with a high z-index. The problem with this approach is that a) some of your styling may get over-written, b) javascript that runs on DOM load can screw around with your html/ccs (e.g Plone-powered sites add classes and styles to all tables for example) c) the varying DOCTYPEs or lack-of can screw up our css (yes IE, looking at you).
Adding an absolutely positioned iframe to the top of the page with a high z-index. This get around any of our html/css being clobbered or amended. However again we have DOCTYPE issues - we'd like it statically positioned and IE7 doesn't support this in Quirksmode.
Any thoughts? Thanks
Why would you want to use a banner with a height of 100px? I see some other possibilities:
Can't you use a link to a popup or page with more information?
Or make it pull out if you hover it.
That way it will not obscure a large percentage of the site.
If you control the links that lead to an archived version, you could put in a proxy-url. Let that URL open the right html in a frame. This is much like google cache:
show a list of links that look like pagearchive.html?version=43234324
let pagearchive.html be a html page with an iframe that starts 100px from the top. the version=43234324 part can let you open the right url in the frame.

Categories