Is it possible to prevent shadowbox from automatically resizing?

classic Classic list List threaded Threaded
44 messages Options
123
Reply | Threaded
Open this post in threaded view
|

Is it possible to prevent shadowbox from automatically resizing?

Josh
I have tried: handleOversize: "none"

But to no avail, and I'm not even sure if that was the intended purpose of handlerOversize.

Shadowbox automatically resizes the viewport as the user resizes their browser, adding scrollbars to the viewport.

I would rather they used the browser's scroll bars and the viewport never changed size. Is this possible?

Thanks!
Reply | Threaded
Open this post in threaded view
|

Re: Is it possible to prevent shadowbox from automatically resizing?

Wizzud
No
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: Is it possible to prevent shadowbox from automatically resizing?

MoKeS
In reply to this post by Josh
Hello,

I had the same issue but I found a solution...

For my project, I must use the browser's scrollbar instead of shadowbox's. So I edit the shadowbox.js but not dynamicly...

You have to change the adjustHeight function.  ( Line 1876). The first thing si to give a sb.style.height which is not dynamic.
In my case, i wrote : sb.style.height = '1024px';
This line prevents the shadowbox to resize its height automatically.

Then you need to change the top of the SB. When my scroll bar is on top, my shadowbox has a 15 px padding-top. But you can change that value has you want. And, when you will scroll, the SB should stay at the same place. To do that, you should calculate the right padding top.

I first create a variable :

var scrollHeight = window.pageYOffset ||
           document.body.scrollTop ||
           document.documentElement.scrollTop;

This var will be the distance between the top and the scroll position. Then i will use the "t" variable from the adjustHeight function, and calculate the right style.top

==> t = 15 - scrollHeight ;

Now, when you will resize your window, the sb will be at the right place, without scrollbars.
But, we would that the sb will be at the same place when we scroll... so i just add a little javascript function under the adjustHeight function.

==> window.onscroll = function() {adjustHeight()};

And now, it works... :-).
When you scroll your window, the sb does'nt move and you can see all you iframe, or sb content by scrolling the main window.


MoKeS
Reply | Threaded
Open this post in threaded view
|

Re: Is it possible to prevent shadowbox from automatically resizing?

dontresizeme
In reply to this post by Wizzud
Wow, really Frog, really?  That should be like a top consideration.
Reply | Threaded
Open this post in threaded view
|

Re: Is it possible to prevent shadowbox from automatically resizing?

Deniz Dogan
I agree, seeing as people are implementing the functionality using little hacks of their own.
Reply | Threaded
Open this post in threaded view
|

Re: Is it possible to prevent shadowbox from automatically resizing?

Nick
Shadowbox developers, can you build in an option for this?  I too am working on a project, and wanted to use Shadowbox but not if it resizes the port when the browser resizes --- deal breaker!  Is it too much to ask?  I'll try the hack I guess.
Reply | Threaded
Open this post in threaded view
|

Re: Is it possible to prevent shadowbox from automatically resizing?

duggi
In reply to this post by Josh
wow, there are a lot of requests for this but no solutions.

i will offer here my insights from looking at shadowbox.js ...

shadowbox has an object named K, which holds the shadowbox markup and methods for acting on it.

the methods we are interested in are K.init() and K.onWindowResize()

== brute approach
in K.init(), simply comment out:

addEvent(window,"resize",function(){if(timer){clearTimeout(timer);timer=null}if(open){timer=setTimeout(K.onWindowResize,10)}})

sadly, this will prevent the shadowbox overlay form resizing as well, so if user increases screen size they underlying page will peek through


== approach 2
looking at K.onWindowResize, you can see that you could comment everything out and write in a function to fix just the shadow overlay size

note that there is a delegate there that fires a player based onWindowResize - this is the hook to change behaviour per player type.


these are the critical pieces of data you need to custom resize your shadowbox
MC
Reply | Threaded
Open this post in threaded view
|

Re: Is it possible to prevent shadowbox from automatically resizing?

MC
Has any progress been done on this?
CB
Reply | Threaded
Open this post in threaded view
|

Re: Is it possible to prevent shadowbox from automatically resizing?

CB
commenting out some of the adjusting stuff fixes the resize, but it breaks the repositioning.
CB
Reply | Threaded
Open this post in threaded view
|

Re: Is it possible to prevent shadowbox from automatically resizing?

CB
Ok, so the handleResize 'none' or 'drag' didn't seem to work with Video for me using Shadowbox.js, version 3.0.3 and the init code:

Shadowbox.init({...handleOversize: 'drag',...

So, I went in the code and inside the K.onWindowResize = function() I changed:

adjustWidth(dims.width,dims.left)

to this new code:

var duration = (S.options.resizeDuration ? S.options.resizeDuration : 0); animate(wrapper, "left", dims.left, duration)

If you look at the adjustWidth function, it has this same piece, but it is combined with a resize animation.

Changing the height is left as an exercise.
CB
Reply | Threaded
Open this post in threaded view
|

Re: Is it possible to prevent shadowbox from automatically resizing?

CB
This doesnt seem to be ideal, because if the viewport is small to start with, it will never get bigger.

What we really need is for it to respect a min-width, min-height.
CB
Reply | Threaded
Open this post in threaded view
|

Re: Is it possible to prevent shadowbox from automatically resizing?

CB
So...

Inside the K.onWindowResize, we make some progress if you replace the

adjustWidth(...) and adjustHeight(...) with

if(S.getWindowSize("Width")>=(player.width+80)){ adjustWidth(...); }
if(S.getWindowSize("Height")>=(player.height+120)){ adjustHeight(...); }

The +80 and +120 will kinda depend on your viewportPadding (assuming that setting works for you). Anyways, this seems to work for me if im grabbing the corner of firefox. However, if i grab one of the sides only, then it seems to do something weird: if i move the bottom of the browser up and down, shadowbox changes width. And vice versa.

Also this doesnt change the initial loading minSize yet either.

Will have to look at the code more later, unless the devs want to comment ? :)
Reply | Threaded
Open this post in threaded view
|

Re: Is it possible to prevent shadowbox from automatically resizing?

HenzeBerkheij
In reply to this post by CB
i'm still looking for a solution for that..in the mean time i have managed to keep shadowbox in the viewport, even while scrolling..simple CSS solution. Just replace the #sb-container and #sb-overlay with:

#sb-container{margin:0;padding:0;top:0;left:0;z-index:999;text-align:left;visibility:hidden;display:none;}
#sb-overlay{position:fixed;height:100%;width:100%; top:0; left:0;}

that way the viewport will not scroll with you, so you can see actually the entire viewport. maybe if we figured out the way to get the initial endheight + width to the specified size we can do that dynamically
Reply | Threaded
Open this post in threaded view
|

Re: Is it possible to prevent shadowbox from automatically resizing?

HenzeBerkheij
This post was updated on .
small steps for getting the box centered and get given sizes ( I hooked up on the modal, if modal, the thing will not resize!:

1. add the following code to K.onOpen
    if(S.options.modal){
        container.style.position = "static";
        overlay.style.position = "fixed";
        overlay.style.top = "0";
        overlay.style.left = "0";
        }else{
        container.style.position = "fixed";
        overlay.style.position = "relative";
        }
This is for making sure the box isn't moving around while you scroll to see the rest of the content!
2. replace in K.onOpen: setSize(); in:
    if(!S.options.modal){
        setSize();
    }
If you don't do that the height will continue to grow everytime you reopen the shadowbox
3. in S.getWindowSize change the client to scroll and you add a type variable(so we are able to define the type of height/width), so you get this:
    S.getWindowSize = function (dimension, type) {
    if(!type){
    if(S.options.modal){
    type = "scroll";
    }else{
    type = "client";
    }
    }
   
        if (document.compatMode === "CSS1Compat") {
            return document.documentElement[type + dimension]
        }
        return document.body[type + dimension]
    };
4. replace the S.setDimensions function with this:

S.setDimensions = function (height, width, maxHeight, maxWidth, topBottom, leftRight, padding, preserveAspect) {
        var originalHeight = height,
            originalWidth = width;
        if(!S.options.modal){
                var extraHeight = 2 * padding + topBottom;
                if (height + extraHeight > maxHeight) {
                    height = maxHeight - extraHeight
                }
                var extraWidth = 2 * padding + leftRight;
                if (width + extraWidth > maxWidth) {
                    width = maxWidth - extraWidth
                }
                var changeHeight = (originalHeight - height) / originalHeight,
                    changeWidth = (originalWidth - width) / originalWidth,
                    oversized = (changeHeight > 0 || changeWidth > 0);
                if (preserveAspect && oversized) {
                    if (changeHeight > changeWidth) {
                        width = Math.round((originalWidth / originalHeight) * height)
                    } else {
                        if (changeWidth > changeHeight) {
                            height = Math.round((originalHeight / originalWidth) * width)
                        }
                    }
                }
                var top = Math.floor((maxHeight - (height + extraHeight)) / 2 + padding);
                var left = Math.floor((maxWidth - (width + extraWidth)) / 2 + padding);
        }else{
        var vscroll = (document.scrollTop ? document.scrollTop : window.pageYOffset);
        var top = Math.floor((S.getWindowSize("Height", "client") - (height)) / 2)-30+vscroll;
        if(top<0){
        top = 50;
        }
                var left = Math.floor((S.getWindowSize("Width", "client") - (width)) / 2);
                if(left<0){
        left = 50;
        }
        }
        S.dimensions = {
            height: height + topBottom,
            width: width + leftRight,
            innerHeight: height,
            innerWidth: width,
            top: top,
            left: left,
            oversized: oversized
        };
        return S.dimensions
    };
This is my solution of the problem. inorder to get the same script as me, i suggest you use the one that is standalone, you can use jsbeautifier.com to get a nice script out of the wall of garble!
Reply | Threaded
Open this post in threaded view
|

Re: Is it possible to prevent shadowbox from automatically resizing?

HenzeBerkheij
if you where following this thread by email: see my earlier post. made some changes, now the shadowbox stays centered in your browser viewport, if this gets to small, the top and/or left will be 50px!
Reply | Threaded
Open this post in threaded view
|

Re: Is it possible to prevent shadowbox from automatically resizing?

HenzeBerkheij
In reply to this post by HenzeBerkheij
adapted my script from earlier post:

- CSS is managed by javascript instead of changing the css file!
- now the viewer will open on a location based on the vertical scroll position
Reply | Threaded
Open this post in threaded view
|

Re: Is it possible to prevent shadowbox from automatically resizing?

HenzeBerkheij
In reply to this post by HenzeBerkheij
for email followers:

- fixed some bugs!
Reply | Threaded
Open this post in threaded view
|

Re: Is it possible to prevent shadowbox from automatically resizing?

smappdooda
I'm kind of a tard for this stuff. Could you provide a link to a modified .js for those of us who are not as savvy?
Reply | Threaded
Open this post in threaded view
|

Re: Is it possible to prevent shadowbox from automatically resizing?

HenzeBerkheij
This post was updated on .

Modified JS: http://rapidshare.com/files/455955003/shadowbox.js

there is also some other thing i needed: the ability to toggle the loading screen when i need that (in case an ajax call failed) just call Shadowbox.toggleLoading(true) to show the loading screen or Shadowbox.toggleLoading(false) to show the current content again!

edit: i just realized that you don't need to edit the CSS anymore since the script will do that for you...so you only require the Javascript file!
Reply | Threaded
Open this post in threaded view
|

Re: Is it possible to prevent shadowbox from automatically resizing?

Gilli
Your modified script does not seem to change anything for me, when i resize the browser the shadowbox still resizes the width.
123