iframe scrollbars during resize of fancybox 2 - javascript

I set up a fancybox to load a form as an iframe. Fancybox autosizes depending on the size of the iframe content. This works well. But if I send the form now and have errors the iframe content get higher so the fancybox has to resize which happens.
But during resize I see ugly scrollbars till the lightbox has resized to match the new content.
Is there any possbility to adjust fancybox without having scrollbars during that? Probably a css property overflow: hidden; at the right events right in time could do the trick?
My setup of fancybox is very basic
$(".popup").fancybox({
type: 'iframe',
padding: 0
});

The solutions is this:
I was reading trough the documentation of FancyBox 2 and I adjusted my settings to:
$(".popup").fancybox({
type: 'iframe',
padding: 0,
iframe: {
scrolling : 'no'
}
});
This hides scrollbar. But the resize happens to late. It takes about 1 second after display of new content until fancybox resizes to the new content dimensions in the iframe.
If the site which is loaded in the iframe is owned by yourself. You can add the following jquery Code into the <body> of the page loaded in the fancybox iframe:
<script>
(function() {
parent.$('.fancybox-inner').height($('body').innerHeight());
parent.$.fancybox.reposition();
})();
</script>
Fancybox resizes now immediately after content is loaded.

Not sure about your exact case but adding
function myFunc(){
$(".fancybox-iframe").attr("scrolling", "no");
}
should remove the scrollbar from the iframe once and for all.
You can add this as a call back function for the fancybox.
'callBackOnShow': myFunc()

Related

jQuery .onload Function to Remove Scrollbar Until Page Load Not Working

I want a jQuery function that removes the vertical scrollbar until the page has fully loaded but it doesn't seem to be working. Any insight on the problem would be great. Thanks!
$(window).on('load', function () {
$('body').addClass('stop-scrolling');
$('body').removeClass('stop-scrolling');
});
.stop-scrolling {
height: 100%;
overflow: hidden;
}
The issue here is that your JS doesn't run until after the page has finished loading. This means the scroll bar is visible the entire time the page is loading. Then, once the page loads, you add the stop scrolling class and then, milliseconds later, you remove it again. The net result of this is that nothing appears to happen.
To achieve what you need, put the .stop-scrolling class directly in the HTML source of your page on the <body> element and then only remove it in the window.load event handler.

Javascript Scroll by one pixel on load of a div

I am using a mixture of jQueryTools overlay (lightbox type thing) and a scroll-bar called Perfect Scrollbar. The problem I have is that when the overlay is loaded the scroll-bar doesn't show until you scroll within that box. I need to be able to make it clearer so that everyone knows it is a scroll-able content box. One way this could be possible is to make the content box scroll up one pixel when the overlay is opened. I have found the following code
$(".scroll-content").load(function() {
window.scrollBy(0,-1);
}
which I have been told should work but no matter what I can't get it to scroll at all.. Is there something i'm doing wrong?
Since you have the scroll bar method bind to an element that is initially in a 'hide' status, in fact .BigSuperBlock .block_overlay is hidden by display:none; in Css, the plugin can not properly calculate the height of the overlay container.
So, when you call the function that show-up the 'overlay' container, you have to call the method on the scroll-content class:
$('.scroll-content').perfectScrollbar('update');
You can find the documentation of this in the author's page.
To make it works, you have to call the plugin 'update' method, again, in the jQueryTools modal function, as a callback.
$(".block_overlay").overlay({
onLoad: function(event) {
$('.scroll-content').perfectScrollbar('update');
// here you update the perfectScrollbar plugin
},
onClose: function(event) {
// other custom code
}
});
Try with this:
jQuery("container").animate({ scrollTop: 50 }, 800);
Give that you want to make clear that there is a scrollbar, you can have it on all the time if you change the perfect-scrollbar.css
.ps-container .ps-scrollbar-x-rail {
...
opacity: 0.6;
}
.ps-container .ps-scrollbar-y-rail {
...
opacity: 0.6;
}

Position Fancybox 2 to the Top of Viewport

I am using Fancybox 2. I would like it positioned to the top of the viewport.
I tried the following code:
$(".fancybox").fancybox({
topRatio:0
});
This positions fancybox to the top of the page, not the viewport. This works if a person isn't scrolling down the page, however, when a person starts to scroll down the page fancybox is out of the screen.
Screenshot of Fancybox when scrolled:
I have Fancybox in an iframe and wonder if that may be part of the problem?
How do I get Fancybox to always stay within the viewport?
UPDATE
In attempting to get this to work it would be best if it opens outside of the iFrame. I attempted the following code:
$( ".fancybox" ).click(function(e){
parent.$.fancybox({
href: this.href
});
return false;
});
and
$( ".fancybox" ).click(function(){
parent.$.fancybox();
return false;
});
In both cases it doesn't work and there are no errors.
How do I get this to work?

What parameter to use for Fancybox so IFRAME opens in an autosized window?

As the title says really. I'm using Fancybox, the popular jQuery lightbox script on my site.
I've set a hyperlink which pops open the lightbox using an IFRAME of the requested page.
This works fine, however...
The lightbox is too big, I'd like it to auto size to the content. On the documentation at http://fancyapps.com/fancybox/#docs you can see in the table there's an autosize parameter.
Is this it, can someone who knows jQuery please help show me how this appears in my configuration of the script?
Here's my current configuration:-
$(document).ready(function() {
$(".fancybox").fancybox({
type: 'iframe',
nextClick: false
});
});
I have tried autoSize on your site and it does not seem to work. But this code seems to do the trick:
$(".fancybox").fancybox({
type: 'iframe',
beforeShow: function(){
this.width = $('.fancybox-iframe').contents().find('div:first').width();
},
nextClick: false
});
I found it in this answer and adapted it to your layout to retrieve the width from the root div.
But it would be better to understand why autoSize does not have any effect on the iframe you load.
Looking at your URL, the IFRAME has a fixed width of 520px on the first div element.
<div style="width: 520px; margin: 0 auto;">
Try removing or reducing that width to make it less wide - according to your needs.

iframe on the page bottom: avoid automatic scroll of the page

I have an iframe from the middle to bottom on a page. When I load the page it scrolls to the bottom. I tried to body onload window.scroll(0,0) but it does an ugly effect because it first goes down and then immediately scrolls up.
What's the cause of this automatic scroll to bottom with iframe on the page?
This is just a random one, but possible doing something like this:
<iframe style="display: none;" onload="this.style.display='block';" src="..."></iframe>
The thinking being that if it is some focus stealing script on a remote page that you can't control, the browser won't focus a hidden element. And there's a good likelihood that your onload will fire after their focus changing script.
Or, one other option that might be a bit more reliable:
<iframe style="position: absolute; top: -9999em; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';" src="..."></iframe>
Here we're basically saying hiding the frame and moving it to a negative offset on the page vertically. When it does try to focus the element inside of the frame, it should scroll the page upward, then once loaded place the iframe back in it's intended position.
Of course, without knowing more, it's hard to say for sure which tradeoffs are okay, and both of these options have conditions that are a tad racy, so YMMV.
I hope that helps :)
I came up with a "hack" that works well. Use this if you don't want your webpage to be scrolled to anywhere except the top:
// prevent scrollTo() from jumping to iframes
var originalScrollTo = window.scrollTo;
window.scrollTo = function scrollTo (x, y) {
if (y === 0) {
originalScrollTo.call(this, x, y);
}
}
If you want to disable autoscrolling completely, just redefine the function to a no-op:
window.scrollTo = function () {};
Similar method but using classes.. I added a class to the iFrame's parent div of "iframe_display" with a style inside that of visibility: hidden. On page load I then used jQuery to remove the class
.iframe_display{visibility:hidden}
$(function(){
$('#iframe_wrapper').removeClass('iframe_display');
});
This takes the focus away from the iFrame and stops the scrolling down to the iFrame on page load
Simple. Use about:blank in src like
<iframe id="idName" name="idName" src="about:blank" style="display:none"></iframe>
The src="about:blank" trick provided by Leandro & edited by Spokey worked for me, but I'd like to share a workaround I was using before.
A temporary solution I found was to embed the iframe in the uppermost element on my page (nav, header etc), so that even if the browser wants to jump to focus, it 'jumps' to the top element. This still can cause a slightly perceptible jump, which might bug you.
To make sure the iframe remains hidden if you choose to place it near the top of a page, I applied an inline style of style="visibility:hidden; height: 0px; width: 0px;". I guess you could also use a z-index combo.
This seems to work well:
<iframe src="http://iframe-source.com" onLoad="self.scrollTo(0,0)"></iframe>
This is the solution I came up with and tested in Chrome.
We have an iframe wrapped by a div element. To keep it short, I have removed the class names related to sizing the iframe. Here, the point is onMyFrameLoad function will be called when iframe is loaded completely.
<div class="...">
<iframe onload="onMyFrameLoad()" class="..." src="..."></iframe>
</div>
Then in your js file, you need this;
function noscroll() {
window.scrollTo(0, 0);
}
// add listener to disable scroll
window.addEventListener('scroll', noscroll);
function onMyFrameLoad() {
setTimeout(function () {
// Remove the scroll disabling listener (to enable scrolling again)
window.removeEventListener('scroll', noscroll);
}, 1000);
}
This way, all the scroll events become ineffective till iframe is loaded.
After iframe is loaded, we wait 1 sec to make sure all the scroll events (from iframe) are nullified/consumed.
This is not an ideal way to solve your problem if your iframe source is slow. Then you have to wait longer by increasing the waiting time in setTimeout function.
I got the initial concept from https://davidwells.io/snippets/disable-scrolling-with-javascript/

Categories

Resources