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
Related
I'm using iFrame Resizer to embed a cross domain iframe on a page. This works well, until I click on a link inside of the iframe that takes me to the next page.
In the iframe source page (the remote one) I've got the following code in the header:
<script src="https://cdn.jsdelivr.net/npm/iframe-resizer#3.6.1/js/iframeResizer.contentWindow.min.js"></script>
In the page that's embedding the iframe I've got:
<iframe id="crelate-iframe" src="https://foo.bar" frameborder="0" width="100%" scrolling="no">
</iframe>
and in the footer of the page:
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/iframe-resizer#3.6.1/js/iframeResizer.min.js?ver=1'></script>
<script>
(function($) {
$(function() {
$('#crelate-iframe').iFrameResize({
log: true,
heightCalculationMethod: 'lowestElement'
});
});
})(jQuery);
</script>
The logging doesn't give away much as far as I can tell. I can only see it initially adjusts the height of the iframe, but when I click through it doesn't and when the next page's height is smaller then I end up with a bunch of white-space at the bottom.
Any ideas what could cause this?
Each page that you load into the iFrame needs script added to it
<script src="https://cdn.jsdelivr.net/npm/iframe-resizer#3.6.1/js/iframeResizer.contentWindow.min.js"></script>
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?
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.
I want to show a loading image icon for the links to external sites when the pop-up is opened through a window.open() function.
I thought of an approach, where show the loading image in a 'div' and get the content of the external site in an Ajax call, then re write the content. Since these are external domains, $.get("external-link") won't work (although might work with some workarounds i don't links).
Is there another approach to tackle this, appreciate pointers. Thanks
Yes, you can load the content into an iframe, showing the loading image when the link is clicked, and hiding it when the iframe has loaded:
click me
<br/>
<div id="dummyloader" style="display: none; width: 500px; height: 500px; background-color: gray"><h2>loading</h2></div>
<iframe src="" id="myframe" style="display: none;" width="500px" height="500px"></iframe>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$(function(){
$('.ilink').click(function(ev){
ev.preventDefault();
$('#dummyloader').show();
$('#myframe').attr('src', $(this).attr('href'));
})
$('#myframe').load(function(){
$('#dummyloader').hide();
$(this).show();
})
})
</script>
live jsfiddle example: http://jsfiddle.net/L01d5t5a/
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).