Top distance to the browserwindow

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

Top distance to the browserwindow

no64
I would like to have the shadowbox horizontal centered but I also want to set an absolute y-position to control the top distance to the browserwindow.

In the CSS there is the
#shadowbox_container and the
#shadowbox

both have margin and padding set to "0" but I still have an gap at the top

Shouldn't it be setting the topposition of the #shadowbox_container to "0" ?


Maybe I need an additional div around the #shadowbox to center the #shadowbox and then set the #shadowbox to position: absolute with a specefic topposition in pixel.

Where can I make a hack to insert that div, or do anybody know what I'm missing?
Reply | Threaded
Open this post in threaded view
|

Re: Top distance to the browserwindow

eschulist
I would love to know a solution to this as well!
Reply | Threaded
Open this post in threaded view
|

Re: Top distance to the browserwindow

Wizzud
In reply to this post by no64
What you are missing is the fact that it's the Shadowbox code that centres the displayed content within the viewport (browser window). If you don't want it to then you are going to have to modify the code.
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: Top distance to the browserwindow

eschulist
 * Adjusts the height of #shadowbox_body and centers #shadowbox vertically
     * in the viewport.
     *
     * @param   {Number}    height      The height to use for #shadowbox_body
     * @param   {Number}    top         The top to use for #shadowbox
     * @param   {Boolean}   anim        True to animate the transition
     * @param   {Function}  cb          A callback to use when the animation
     *                                  completes
     * @return  void
     * @private
     */
    var adjustHeight = function(height, top, anim, cb){
        height = parseInt(height);

        // adjust the height
        var sb = SL.get('shadowbox_body');
        if(anim){
            animate(sb, 'height', height, options.resizeDuration);
        }else{
            SL.setStyle(sb, 'height', height + 'px');
        }

        // adjust the top
        var s = SL.get('shadowbox');
        if(anim){
            animate(s, 'top', top, options.resizeDuration, cb);
        }else{
            SL.setStyle(s, 'top', top + 'px');
            if(typeof cb == 'function') cb();
        }
    };

Does this part of the code need to be altered or is there an option or variable I can use from it.

Id like my shadowbox to be always centered horizontally but absolutely positioned 150px from the top.
Reply | Threaded
Open this post in threaded view
|

Re: Top distance to the browserwindow

Wizzud
Some pointers....

If you inspect your code extract you will see that it animates/sets 2 properties : height and top. Both are ultimately set to the value of an argument passed into the function, top being the second.
If you search (shadowbox.js) for calls to adjustHeight you will see that the second argument passed in is always dims.top.
If you search for dims.top you will see that it is only ever used by adjustHeight().
Ergo, it would seem logical that dims.top is what requires changing.
Search the code for dims and you will find a useful definition of the dims object, that also tells you where it (the dims object) is set up - setDimensions.
Find the setDimensions function.

Now, somewhere in here you have to make changes to achieve the effect you want without compromising Shadowbox's ability to display content within the viewport.

One thing you need to recall from the Shadowbox options - with which you are no doubt familiar - is that there is an option for setting 'viewportPadding' - gives the minimum clearance between viewport and content edges.

You now have to decide exactly what it is that you want to do - I would assume you are maintaining the use of viewportPadding for all bar the top clearance (while respecting content dimensions), and forcing top clearance to be 150px with no respect for content dimensions.

Looking at the bottom of the function you will see that top is calculated from other variables, and from the variable naming it seems reasonable to deduce that top is being set to ...
[ViewportHeight] - ([InnerContentHeight] + [ContentBordersAndMargins]) divided by 2, with [ViewportPadding] added
...all of which results in the content being vertically centred in the viewport.

The problem you have is with [InnerContentHeight] because it is calculated. And not only is it calculated based on the other 3 variables but also on widths (content and viewport)!

You could try simply overriding top to 150, but you would quickly find that the calculated content height would not respect your available viewport height! So you will also need to change the calculations that determine height.

Before making any changes I recommend ensuring you have a backup of the original code.

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

Re: Top distance to the browserwindow

eschulist
Thank you so much for taking the time to look into the issue and answer my question!!

My content is all the same, no resizing and all the players are the same.
So setting the top to a set number was all I needed.  I'm sure if my content was all different I would have had to change the equation like you suggested.

        // update dims
        dims = {
            height:     h + border_h + bar_h,
            width:      w + border_w,
            inner_h:    h,
            inner_w:    w,
            top:        146,
            resize_h:   resize_h,
            resize_w:   resize_w,
            drag:       drag
        };

Thank you for pointing me to where I needed to be looking!

Reply | Threaded
Open this post in threaded view
|

Re: Top distance to the browserwindow

Wizzud
Okay.

[Final word of caution : Just be careful that you're not making an assumption about the size of the end user's browser window.]
Combine literacy with curiosity and a whole world of information opens up to you