I have a requirement to create a please wait page using jQuery 1.6.2 for an existing jsp page. I was able to get the div overlay to work, along with an please wait animation in a modal window in the center of the page. However, the overlay only covers one of the framesets, the center one.
The html structure is basically (I'm leaving a lot out for clarity):
...
<frameset >
<frame id="topMostFrame">
<frameset>
<frame id="leftMostframe">
<frame id="centerMostFrame">
</frameset>
</frameset>
<noframes>
</noframes>
</body>
</html>
JQUERY
function getTheOverlay(){
$(document).ready(function() {
$("#loading-div-background").css({opacity: 0.5});
$("#loading-div-background").show();
//alert("In getOverlay!");
});
}
function remove(){
$(document).ready(function() {
$('#loading-div-background').hide();
});
}
HTML
<div id="loading-div-background" style="display:none" class="ui-widget">
<div id="loading-div" class="ui-corner-all">
<img style="height:80px;margin:50px;" src="/images/loading.gif" alt="Loading.."/>
</div>
</div>
CSS
#loading-div-background {
display:none;
position:absolute;
top:0;
left:0;
background:gray;
width:100%;
height:100%;
/* Next 2 lines IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
}
#loading-div {
width: 300px;
height: 200px;
background-color: #ffffff;
text-align:center;
position:absolute;
left: 50%;
top: 50%;
margin-left:-150px;
margin-top: -100px;
}
I tried moving the html to load in my jquery function, but it didn't display the overlay in IE8. I also had a time getting IE8 to work with the overlay itself, but that is fixed using the CSS above.
I need to disable the links on the left frame, which is probably the approach I'll use or else cover them with the overlay. Yes I know frames are bad, but that is what I was given to work with.
I can't get the overlay to go over the other framesets and cover the entire page. I've read that this is impossible to do with framesets, although I'm guessing there could be a workaround. However, when I use an alert for debugging purposes, the overlay covers over the entire page.
My question is: why is using an alert making the overlay cover everything? Is there something else I could do to get the same effect, even with the framesets?
I faced this same problem and this is what I found that worked for me.
A frame is basically a window object. All the rules about windows apply to frames. A div belongs to a document which is held inside a window. Since the document can't leave its window, the div can't leave its window. You're asking for control at the level of the browser, but all you are permitted is control at the level of the document.
However, you may do a DIV over an iframe but not a frameset.
UPDATE:
Take this example my friend, It took some time for me to solve it, but really , StackOverflow has helped me a lot, so I feel that I must put this example here to help others.
This the html of page-container, it contains an iframe that will request the page-frameset that you are wanting to overlay.
<head>
<style type="text/css">
html, body#mybcontainer_body{margin:0px;padding:0px;border:none;height:100%;width:100%;}
#mybcontainer_div{position:absolute;top:0px;bottom:0px;left:0px;right:0px;}
#mybcontainer_iframe{position:absolute;top:0%;left:0%;height:100%;width:100%;}
</style>
</head>
<body id="mybcontainer_body" >
<div id="mybcontainer_dialog" style="display:none;">Some Text Here</div>
<div id="mybcontainer_div"><iframe id="mybcontainer_iframe" border="0" frameborder="0" scrolling="no" noresize="noresize" src="page-two-contain-frameset"></iframe></div>
</body>
My Regards
I ended up using show/hide over the frameset after the explaination from Cairo Solutions. That did work, but I don't believe it's possible to cover multiple framesets with one div.
This is the code I used:
$('#divName a',top.frames['leftframe'].document).show();
$('#divName a',top.frames['leftframe'].document).hide();
Then I just used the div I created as an overlay in the main frameset to work in conjunction with this and that solved the problem.
Related
How can I display the full length of an embedded google document without the scroll bar on the iframe?
<html>
<style>
body { margin: 0; padding: 0; o}
iframe { margin-left: 2vw; margin-top: 2vh; height: 100%; width: 90vw; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
<iframe srcdoc="" frameborder="0" scrolling="no" height="100%"></iframe>
<script>
$(function() {
$.get("https://docs.google.com/document/d/17OkIgtNdV1flno_783tJm2xWU0NBh7uEmZ5wEXP2E9g/pub?embedded=true", function(html) {
var contents = $("iframe").contents();
contents.find("html").html(html);
setTimeout(function() {
contents.find('a[href^="http://"]').attr("target", "_blank");
contents.find('a[href^="https://"]').attr("target", "_blank");
}, 1000); // Actually not sure if timeout is required here...
});
});
</script>
</body>
</html>
The display shows maybe a page and half of text and stops.
Google docs is currently happy to serve published documents via CORS requests.
This means that you don't need an iframe to embed your documents. You can instead use an XMLHttpRequest to GET your document and put the response inside a div's innerHtml.
You don't actually even need to make a GET request to accomplish your requirement. If all you're wanting to do is display the full length of the document without having to have a scroll bar, you can use an <embed /> tag with some css.
<embed src="https://docs.google.com/document/d/17OkIgtNdV1flno_783tJm2xWU0NBh7uEmZ5wEXP2E9g/pub?embedded=true" width="100%" style="height: -webkit-fill-available">
When simply added to an HTML page, it will set the height to the full height of the contents of the document, so the only scroll bar you'll have is the scroll bar that is on the browser to scroll down the length of the document. Does this get you what you need?
Ok So I have a page I am building and it has a widget in an iframe tag:
<script type="text/javascript" src="/js/widget/booking.js"></script>
<script type="text/javascript">
initTaxicodeWidget("taxicode - widget", "wolverhamptontaxis.co.uk ");
</script>
<iframe id="taxicode-widget" src="blank.html" frameborder="0" style="position: absolute; top: -9999em; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';"></iframe>
When everything has finished loading, the page automatically scrolls down to the booking form widget and places a cursor ready for input... I don't want the page to scroll down to it unless the user scrolls down. How can I stop this...
My jquery and javascriptaren't great so as much detail as possible please :)
Try this
<iframe id="taxicode-widget" frameborder="0" style="position: absolute; top: -9999em; visibility: hidden;" onload="setTimeout(function (){this.style.position='static'; this.style.visibility='visible';}, 1000);"></iframe>
This will delay returning the position of iframe for 1 second. And it's scrolling bottom because the autofocus attribute installed at the first input element of your widget in iframe.
Ok so after much deliberation I have re-visited my code and established that I just needed to add a src attribute (that points to a blank html) to the iframe and it prevents the issue from happening without affecting loading speed.
I have edited the code above to reflect this
It is obviously clear to me after going through outlook documentation that I can generate a html link of my OUTLOOK calendar and embed it to any webpage. This works fine when i create my iframe as below
<iframe width="900" height="500" src="https://cpgd-ab67acdd3e1c401a.calendar.live.com/calendar/private/blalaba-balajahhhdh-342d-4cea-ad46-25433581e015/index.html"></iframe>
and insert it into my EXISTING page with contents. My problem here is: After the page loads it redirects/navigates the parent window/page and completely replaces my DOM with a full outlook calendar. My intention is simply to put it in a particular section of my page (precisely a DIV).
I HAVE TRIED
sandboxing the iframe with the new HTML5 sandbox attribute. On the
console, it throws errors.
I have also tried using ajax to load the iframe seperately. same
error and failure.
I'm sure this action is deliberate by
microsoft. I need a way to bypass this.
This might help you a little I used this when I was sharing my calendar on a website, you can configure the CSS as you wish
<style unselectable="on">
#wrap {
width:1000px;
height:900px;
padding:0;
position:relative;
left:0px;
top:0px;
overflow:hidden;
}
#frame {
width:1000px;
height:900px;
position:relative;
left:0px;
top:0px;
}
#frame {
-ms-zoom:0.7;
}
</style>
<div id="wrap" unselectable="on">
<iframe id="frame" src="[paste in here the link that outlook.com provides for you ... in between the quotes and without the brackets]"></iframe>
</div>
I have two sites that I am sort of melding together. I'm using and iframe to display content from one page in the other as if it were all one site. The caveat here is that I need the page to display as normal when viewed in an iframe and to display a warning otherwise. I cannot import the iframe page into the host page due to IIS incompatibility so that option is out. The plan works fine when I simply display the page under all circumstances, it is when I try to implement the conditional display that I run into problems. On the iframe page I have the following:
<script type="text/javascript">
window.onload = function InFrame() {
MainContent_siteIsNotFramed
if (top != self) {
//document.getElementById("siteIsFramed").style.display = "inline"
siteIsFramed.visible = "true"
}
else {
//document.getElementById("MainContent_siteIsNotFramed").style.display = "inline"
siteIsNotFramed.visible = "true"
}
init();
};
</script>
This is my attempt to get the iframe page to handle its own conditional display. The only relevant code I have in the host page is the iframe itself which, for completelness, looks like this:
</head>
<body style="margin:0; height: 100%;">
<iframe runat="server" id="signInFrame" style="border: 0; width: 100%; height: 100%; ">
Your browser does not support iframes. Consider upgrading.
</iframe>
</body>
</html>
When the content to display/not display, the content in the iframe will display with about half height. Without, it displays at full height (desired behavior). I've tried to be as thourough as possible, if anyone needs more details, let me know.
Try "positioning" the iframe:
<iframe runat="server" id="signInFrame" style="border: 0; position:absolute; width: 100%; height: 100%; ">
Your browser does not support iframes. Consider upgrading.
</iframe>
The problem is that and iframe with default position (position: static) can't have a "relative" height (i.e. a %), so it ignores the height:100%, and applies the "default" height of an iframe (150px in FF).
When a page loads on my site, the HTML appears before the javascript, which leads to a flicker when the javascript loads. The answer to this stackoverflow post gave a great solution. But I would like to load at least some of the HTML before the Javascript so that the user is not faced with a blank page during a slow connection. For example, I would like to load the header immediately, but wait to load the HTML for the javascript enhanced accordion until after the javascript loads. Any suggestions?
Here's the code that I borrowed from the answer linked above:
CSS:
#hideAll
{
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: white;
z-index: 99; /* Higher than anything else in the document */
}
HTML:
<div style="display: none" id="hideAll"> </div>
Javascript
window.onload = function()
{ document.getElementById("hideAll").style.display = "none"; }
<script type="text/javascript">
document.getElementById("hideAll").style.display = "block";
</script>
I'd suggest that you define the base/JavaScript-enabled styles of elements you want to display with CSS in the regular style block:
<style type="text/css">
#javaScriptAccordion {
display: none;
}
</style>
And then use the noscript tags (in the head) to amend this in the absence of JavaScript:
<noscript>
<style type="text/css>
#javaScriptAccordion {
display: block;
}
</style>
</noscript>
This ensures that the content is hidden on document load, preventing the flash, but visible to those users that have JavaScript disabled.
The above has been amended to prevent the 'flash of no content' (as described by #Josh3736 in his answer), and now uses opacity to hide the content:
<style type="text/css">
#elementToShowWithJavaScript {
opacity: 0.001;
width: 50%;
margin: 0 auto;
padding: 0.5em;
border-radius: 1em 0;
border: 5px solid #ccc;
}
</style>
<noscript>
<style type="text/css">
#elementToShowWithJavaScript {
opacity: 1;
}
</style>
</noscript>
Live demo.
I'm not, unfortunately, entirely sure that I understand your question. Which leaves me proposing a solution for the question I think you asked (all I can offer, in excuse, is that it's early in the UK. And I'm not awake by choice...sigh); if there is anything further that I'm missing (or I'm answering the wrong question entirely) please leave a comment, and I'll try to be more useful.
The hack in the linked question is—in my opinion—very poor advice. In this case, it is a better idea to include some script directly following your accordion elements.
<div id="accordion">...</div>
<script type="text/javascript">...</script>
However, inline script intermingled with your HTML markup is a Bad Idea and should be avoided as much as possible. For that reason, it is ideal to include inline only a function call to a function declared in your external script file. (When you reference an external script (<script src="...">), the rendering of your page will pause until it has loaded.)
<html>
<head>
<script type="text/javascript" src="script.js"></script> <!-- renderAccordion() defined in this file -->
</head>
<body>
...
<div id="accordion">...</div>
<script type="text/javascript">renderAccordion();</script>
...
</body>
</html>
Of course, the correct way to do this is to just attach to the DOM ready event from script.js and not use any inline script at all. This does, however, open up the possibility of a content flash on extremely slow connections and/or very large documents where downloading all of the HTML itself takes several seconds. It is, however, a much cleaner approach – your script is guaranteed to be loaded before anything is rendered; the only question is how long it takes for DOM ready. Using jQuery, in script.js:
$(document).ready(function() {
// Do whatever with your accordion here -- this is guaranteed to execute
// after the DOM is completely loaded, so the fact that this script is
// referenced from your document's <head> does not matter.
});
Clever use of <style> and <noscript> does a a good job of guaranteeing that there is no flash of all the content in your accordion; however, with that method there will be the opposite effect – there will be a flash of no content.
As the page loads, your accordion will be completely hidden (display:none;), then once your script finally executes and sets display back to block, the accordion will suddenly materialize and push down everything below it. This may or may not be acceptable – there won't be as much movement, but things will still have to jump after they've initially rendered.
At any rate, don't wait until onload to render your accordion. onload doesn't fire until everything—including all images— have fully loaded. There's no reason to wait for images to load; you want to render your accordion as soon as possible.