Block Page Scrolling When FancyBox is Open

[Vincenzo Ferme]

Hi, there is a way to block possibility of scroll page when a fancy
box frame is open? I would make something like modal alert of java,
where there is no way to access on the content of other panel under
alert ( here the page that opened the fancy box ), until alert is
closed.

Thanks a lot.

[JFK]

that's a tricky one ... but possible

add to your script:

'onStart': function() {
$("body").css({'overflow':'hidden'});
},
'onClosed': function() {
$("body").css({"overflow":"visible"});

[Vincenzo Ferme]

Thanks a lot, it works very well!

[JFK]

please don't change the subject of the post because people with the
same request may not find the solution
"Block Page Scrolling When FancyBox is Open" makes more sense than
falsefalse, don't you think?

help others this way as you were helped too

[Vincenzo Ferme]

I don't know why the subject change, i don't change it
manually...sorry. I reply to your post, using "reply" link and google
make all :-(. I hope with this my new answer nothing happen to
subject...Here some enhance of the trick for Firefox to hide and show
bar also when the content of the page is less than screen, because
Firefox show the bar ever:

'onStart' : function() {
$("body").css({'overflow':'hidden'});

$("html").css({"overflow":"hidden"});
$("html").css({"overflow-x":"auto"});
},

'onClosed' : function() {
$("body").css({"overflow":"visible"});

$("html").css({"overflow":"-moz-scrollbars-vertical"});
$("html").css({"overflow-x":"auto"});
}

On 5 Mar, 01:28, JFK <jfk.d...@gmail.com> wrote:
> please don't change the subject of the post because people with the
> same request may not find the solution

> "BlockPageScrolling When FancyBox is Open" makes more sense than

> falsefalse, don't you think?
>
> help others this way as you were helped too
>
> On Mar 4, 3:40 pm, Vincenzo Ferme <webmas...@galileonews.it> wrote:
>
> > Thanks a lot, it works very well!
>
> > On 4 Mar, 23:41, JFK <jfk.d...@gmail.com> wrote:
>
> > > that's a tricky one ... but possible
>
> > > add to your script:
>
> > > 'onStart': function() {
> > > $("body").css({'overflow':'hidden'});},
>
> > > 'onClosed': function() {
> > > $("body").css({"overflow":"visible"});
>
> > > }
>
> > > On Mar 4, 4:33 am, Vincenzo Ferme <webmas...@galileonews.it> wrote:
>

> > > > Hi, there is a way to block possibility ofscrollpagewhen a fancy

> > > > box frame is open? I would make something like modal alert of java,
> > > > where there is no way to access on the content of other panel under

> > > > alert ( here thepagethat opened the fancy box ), until alert is
> > > > closed.
>
> > > > Thanks a lot.

[ccp]

Hello Vincenzo & JFK,

could you please explain in detail where (in which file at which
position)
I have to "add to ... [my] ... script" the suggested lines below to
prevent
the page from being scrolled when a fancybox item is opened?

That would be great – thanks in advance & greetz
Claus

--------------------------------------------

'onStart': function() {
$("body").css({'overflow':'hidden'});
},

'onClosed': function() {
$("body").css({"overflow":"visible"});
}

--
You received this message because you are subscribed to the Google Groups "fancybox" group.
To post to this group, send email to fanc...@googlegroups.com.
To unsubscribe from this group, send email to fancybox+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/fancybox?hl=en.

[Jason]

Claus,

they are api calls add them like this, obviously put your functions in, I copied the example from a working page....it goes before the </head>

<script type="text/javascript>
<!--
$(document).ready(function() {
            $("#contact").fancybox({
                'titlePosition'        : 'inside',
                'transitionIn'        : 'none',
                'transitionOut'        : 'none',
                'onStart'            : function(){document.getElementById("myImageFlow").style.display = 'none';},
                'onClosed'            : function(){document.getElementById("myImageFlow").style.display = 'block';}
            });
-->
</script>

or scroll to the very bottom of the file jquery.fancybox.js and replace

'onstart' : '',

with

'onStart': function() {$("body").css({'overflow':'hidden'});},

and the same with onClosed....... pay attention to the commer, the last line does not have one, as its the last arguement


On 24/04/2010 8:09 PM, ccp wrote:

Hello Vincenzo&  JFK,

could you please explain in detail where (in which file at which
position)
I have to "add to ... [my] ... script" the suggested lines below to
prevent
the page from being scrolled when a fancybox item is opened?

That would be great – thanks in advance&  greetz

Claus

--------------------------------------------
'onStart': function() {
$("body").css({'overflow':'hidden'});
},

'onClosed': function() {
$("body").css({"overflow":"visible"});
}

  

[ccp]

hi Jason,

thank you very much - that helped me a lot!

I applied the following "to the very bottom of the file
jquery.fancybox.js"

onStart : function() {$("body").css({'overflow':'hidden'});},

onCancel : null,
onComplete : null,
onCleanup : null,

onClosed : function() {$("body").css({'overflow':'visible'});}

and it works in this way:

- safari:
- scrolling is blocked for fancybox item and site content = fine
- after closing the opened fancybox item the scroller at the side
doesn't show up but comes back after the mousewheel is scrolled up or
down

- firefox:
- scrolling is blocked for fancybox item and site content = fine

- internet explorer 7: doesn't affect, fancybox item and site scrolls
as before

- opera: doesn't affect, fancybox item and site scrolls as before

would be great if anyone can tell me a fix ...

greetz
Claus