jQuery - Fancybox: But I don't want scrollbars!
I am using jQuery Fancybox for a popup registration form here
I would like the form to come up at the size of 450px by 700px but no matter what I set the height and width at I get scrollbars:
<script type="text/javascript">
$(document).ready(function() {
$("a#regForm").fancybox({
'titleShow' : false,
'autoscale' : true,
'width' : '450',
'h开发者_如何学JAVAeight' : '700',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
</script>
There must be something I am doing wrong but I can't figure out what it is. I would appreciate a helpful hand here. Thanks.
I had the same problem with fancybox and an iframe, googled for a solution and ended up here. The overflow: hidden did not work for me, however I found out that fancybox allows you to set the option for the iframe scrolling (equivalent to setting "scrolling=no" attribute on the iframe), which fixes the problem in IE7 in a more graceful manner:
$.fancybox({
'type' : 'iframe',
'scrolling' : 'no',
... and the rest of the parameters.
Sounds a bit wierd. an ugly solution is to use css, overflow:hidden;
Whenever I use fancybox, the scrollbars work correctly. sure that the content oc the fancybox is not setting another height?
Edit: Viewed your example-site. Seems like there is some width beeing set in the content that is larger than the fancybox itself.
I struggled quite a bit with this, only to find the answer within the Fancybox documentation.
As hinted above, first I thought it would have been as easy as this to disable scrolling:
$('.fancybox').fancybox({'type': 'iframe', 'scrolling': 'no', 'width': 500})
Just setting the 'scrolling' option to 'no' was not enough, though. I had to repeat the same thing in the 'iframe' option, like this:
$('.fancybox').fancybox({
'type': 'iframe',
'scrolling': 'no',
'width': 500,
'iframe': {'scrolling': 'no'}
})
Just wanted to say Magnus' answer above did it for me, but for the second "overlay" that needs to be "overflow"
helpers : {
overlay : {
css : { 'overflow' : 'hidden' }
}
}
after testing every of the above tips (and still having useless scrollbars caused by some inline overflow: scroll at .fancybox-inner) and also trying a lot of other own workarounds, i got rid of the scrollbars with this solution:
afterShow: function(){
this.inner.css({
overflow: 'auto' // or 'no'
});
}
I have face the same problem and after times of trial and error, I found out that you can avoid scrollbars by overriding frame css class.
You can do like this:
iframe.fancybox-iframe {
overflow:hidden;
}
JS configuration:
jQuery(document).ready(function(){
$("a.various").fancybox({
'width' : 'auto',
'height' : 'auto',
'autoScale' : false,
'autoDimensions' : false,
'scrolling' : 'no',
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
Note: Your fancybox box type must be an iframe for this to take effect.
I had a similar problem, with vertical scrollbars appearing when I set a maxWidth in the Fancybox options.
To get around the problem I had to set
.fancybox-inner {
overflow: hidden !important;
}
and set a fixed width CSS rule on the Fancybox content rather than specifying a maxWidth in the Fancybox options. If I did the latter, Fancybox's calculated height for the content was slightly too small - probably hinting at why it was putting in scrollbars in the first place.
You need to put the iframe option in it's own context eg:
$(".someclass").fancybox({
type : 'iframe',
iframe : {
scrolling : 'no'
}
});
I believe the solution to this is to set
'autoDimensions' : false
then the width and height for inline content would be as you set it to be
I know this sounds a bit weird but have any of you tried to set the margin of the form page body tag to 0.
The problem is actually pretty simple, the reason is that the body tag margin by default is set to 8px (depending on browser) and if you just set it to 0 then it fixes the scrollbar.
The js configuration I have is as follows and it works well without changing the css of fancybox.
$(".iframe").fancybox({
'autoScale' : false,
'autoDimensions' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
Add iframe: { scrolling : 'no' } as option
example
$.fancybox({
href: 'yourUrl.html',
width: 800,
height: 415,
autoSize: false,
type : 'iframe',
iframe: {
scrolling : 'no',
preload : true
}});
Remove the quotes around your height and width values:
<script type="text/javascript">
$(document).ready(function() {
$("a#regForm").fancybox({
'titleShow' : false,
'autoscale' : true,
'width' : 450,
'height' : 700,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
</script>
I had I guess the same issue. It wasnt what the fancybox properties or CSS was, but the main css for my site.
if you have something like
div {overflow:auto;height:auto;}
for a inheritable/root in your site css then it will cause scroll bar issues in the fancy box. Remove and make your HTML and CSS more precise with IDs and classes
Fancybox 2.x at least has an "overlay helper" which turned out to be the key for me. I added the following to my fancybox configuration parameters:
helpers : {
overlay : {
css : { 'overlay' : 'hidden' }
}
}
I had tried setting this in the CSS, but that didn't work, and late in the game, such as on the beforeShow event, but that led to a flickering bar. This seems to work without a hitch.
on jquery.fancybox.js, I edited this part:
iframe : {
scrolling : 'no', // i changed this from 'auto' to 'no'
preload : true
},
$(".various").fancybox({
fitToView : false,
width : '100%',
height : '100%',
maxWidth : 850,
maxHeight : 550,
fitToView : false,
padding : 20,
autoSize : true,
closeClick : true,
openEffect : 'none',
closeEffect : 'none',
overflow : 'hidden',
scrolling : 'no'
});
This is the only thing that worked for me for both IE and Google Chrome, I think it's mostly because of the .body.scrollHeight stuff, which works in IE best. I put +30 for Firefox ...
jQuery.fancybox({
href: href,
type: "iframe",
centerOnScroll: 'true',
scrolling: 'no',
width: 650,
'onComplete': function() {
jQuery('#fancybox-frame').load(function() {
jQuery('#fancybox-content').height(this.contentWindow.document.body.scrollHeight + 30);
});
}
});
Using fancybox version: 2.1.5 and tried all of the different options suggest here and none of them worked still showing the scrollbar.
$('.foo').click(function(e){
$.fancybox({
href: $(this).data('href'),
type: 'iframe',
scrolling: 'no',
iframe : {
scrolling : 'no'
}
});
e.preventDefault();
});
So did some debugging in the code until I found this, so its overwriting all options I set and no way to overwrite this using the many options.
if (type === 'iframe' && isTouch) {
coming.scrolling = 'scroll';
}
In the end the solutions was to use CSS !important hack.
.fancybox-inner {
overflow: hidden !important;
}
The line of code responsible is:
current.inner.css('overflow', scrolling === 'yes' ? 'scroll' : (scrolling === 'no' ? 'hidden' : scrolling));
Fancybox used to be a reliable working solution now I am finding nothing but inconsistencies. Actually debating about downgrading now even after purchasing a developers license. More info here if you didn't realize you needed one for commercial project: https://stackoverflow.com/a/8837258/560287
Here is another thought. I had
html { overflow-y: scroll; }
in my main CSS to prevent a centered content well from jumping around between pages that did or did not require a scroll bar. I tried all of the above to get rid of the scrollbar in the popup until I realized this. Once I turned it off for the popup only, the scrollbar in the popup disappeared as well. So, make sure that the scroll bar you are seeing is actually coming from the iframe and not from the page inside.
My 2 cents, write
*{ margin:0; padding:0; }
in your target page main css, add a content div with the height size of all your elements, don't touch the .js, listo, saludos
Edit line 197 and 198 of jquery.fancybox.css:
.fancybox-lock .fancybox-overlay {
overflow: auto;
overflow-y: auto;
}
I did this to get rid of the overflow (scrollbar) ...
by the end of the jquery.fancybox....js file there are onStart, onCancel, onComplete etc. functions, and they are all empty ... so just go ahead and fill into the curly brackets of onStart with "$('body').css('overflow','hidden')" and onClosed "$('body').css('overflow','visible')" ... should look like this ...
onStart:function(){$('body').css('overflow','hidden')},
onClosed:function(){$('body').css('overflow','visible')},
peace
The answers here offer many ways to potentially fix this issue, but most will not work for devices with touchscreens. I think the source of the problem stems from these lines of code from the source:
if (type === 'iframe' && isTouch) {
coming.scrolling = 'scroll';
}
This seems to override any options set by the fancybox initial configuration, and can only be changed after these lines of code have run, i.e. changing the css using the afterShow method. However, all such methods will cause a noticeable delay/lag and you will be able to see the scrollbars disappear as you open it.
My suggested fix is that you remove these lines from the main source file jquery.fancybox.js around line 880, because I don't see a reason to force scrollbars onto devices with touchscreens.
Note that this won't immediately make the scrollbars disappear, it simply stops it from overriding the scrolling configuration option. So you should also add scrolling: 'no' to your fancybox initial configuration.
Another alternative is to change the overflow:
body {
overflow: hidden;
}
in your iframe's HTML.
加载中,请稍侯......
精彩评论