14

Been working on this layout for some time now and each way I take I run into some sort of obstacle (v1 of this here: https://stackoverflow.com/questions/14572569/how-can-i-contain-pos-abs-div-within-specific-area)

What I'm trying to do now is to have the size of .spread adapt to the browser windows width and height, so it'll never exceed what the user currently can see in their browser (.spread currently have fixed width/height, for demo purposes). The ideal would to be able to resize on the fly and it adapts instantly (i.e. no media queries).

It works as it should in the v1 version I link to above, but then I had problems with the fade effect due to that .spread lacked an actual width/height.

Here's the new demo:
http://jsbin.com/uciguf/1

UPDATE: The markup can be changed as long as it works as described.

<div class="scrollblock" id="scroll_spread-1">
    <div class="action"><!-- --></div>
    <!--  -->       
</div>
<div class="scrollblock" id="scroll_spread-2">
    <div class="action"><!-- --></div>
    <!--  -->       
</div>

<div class="contentblock" id="spread-1">
    <div class="inner windowwidth windowheight">
        <div class="content">
            <span></span>
            <div class="spread">
                <div class="fade"><!-- --></div>
                <div class="left centerimage">
                    <img src="http://s7.postimage.org/8qnf5rmyz/image.jpg">
                </div>
                <div class="right centerimage">
                    <a href="#scroll_spread-2"><img src="http://s7.postimage.org/kjl89zjez/image.jpg"></a>
                </div>
            </div>  
        </div>  
    </div>  
</div>

<div class="contentblock" id="spread-2">
    <div class="inner windowwidth windowheight">
        <div class="content">
            <span></span>           
            <div class="spread">
                <div class="fade"><!-- --></div>
                <div class="left centerimage">
                    <a href="#scroll_spread-1"><img src="http://s7.postimage.org/5l2tfk4cr/image.jpg"></a>
                </div>
                <div class="right centerimage">
                    <a href="#scroll_spread-3"><img src="http://s7.postimage.org/fjns21dsb/image.jpg"></a>
                </div>
            </div>
        </div>  
    </div>  
</div>

 

html {
    height: 100%;
}

body {
    background: #eee;
    line-height: 1.2em;
    font-size: 29px;
    text-align: center;
    height: 100%;
    color: #fff;
}

.scrollblock {
    position: relative;
    margin: 0;
    width: 100%;
    min-height: 100%;

    overflow: hidden;
}

.contentblock {
    margin: 0;
    width: 0;
    min-height: 100%;

    overflow: hidden;

    position: fixed;
    top: 0;
    right: 0;
}

.contentblock .inner {
    z-index: 2;

    position: absolute;
    right: 0;
    top: 0;

    background: #eee;
}

.fade {
    width: 100%;
    height: 100%;

    position: absolute;
    right: 0;
    top: 0;

    background-color: #000;
    opacity: 0;

    z-index: 3;
}

.content {
    height: 100%;   
}

.content span {
   height: 100%;
   vertical-align: middle;
   display: inline-block;
}

.content .spread {
    vertical-align: middle;
    display: inline-block;
}

#spread-1 {
    color: #000;
    z-index: 105;
}

#spread-2 {
    z-index: 110;
}

.spread {

    max-height: 800px;
    max-width: 1130px;
    position: relative;
}

.spread .left {
    position: relative;
    width: 50%;
    float: left;
    text-align: right;
    height: 100%;
}
.spread .right {
    position: relative;
    width: 50%;
    float: left;
    text-align: left;
    height: 100%;
}

div.centerimage {
    overflow: hidden;
}
div.centerimage img {
    max-width: 100%;
    max-height: 100%;
}

div.centerimage span {
    height: 100%;
    vertical-align: middle;
    display: inline-block;
}
div.centerimage img {
    vertical-align: middle;
    display: inline-block; 
}

P.S. The title is really bad, don't know what I'm looking for, but please change to something more informative if you can think of anything better.

Community
  • 1
  • 1
INT
  • 910
  • 4
  • 21
  • 45
  • Media Queries are kind of a key tool when building responsive sites. – DA. Jan 30 '13 at 16:29
  • @DA Maybe I should change the tag then? What I'm looking for is more like the way this behaves: jsbin.com/otacuk/2 – INT Jan 30 '13 at 16:31
  • Yes. Perhaps you're not really asking about responsive design but something more specific about 'scaling to browser width' – DA. Jan 30 '13 at 16:32
  • Perhaps all you need here is % widths in your CSS. Post your HTML and CSS in your question please. – jfriend00 Jan 30 '13 at 16:33
  • @INT did that work, do you still need help? – Parris Feb 03 '13 at 01:51
  • @Parris Did what work? I feel that I haven't gotten a proper suggestion on how to solve this yet. – INT Feb 03 '13 at 12:15

4 Answers4

4

Three-Quarters of the Way to a Full Solution

This is not quite a full solution yet, as it cannot accommodate a super narrow width window size (like your old version did). However, it is a good step toward what you seek.

Here is the example.

The key things that have been changed:

Added

.spread { height: 93%; } /* You had originally wanted a height difference */

Removed

  • overflow: hidden from div.centerimage.
  • width: 50% from .left and .right.
ScottS
  • 71,703
  • 13
  • 126
  • 146
  • Thanks for your suggestion ScottS! I appreciate the effort. Do you think it's impossible to have it scale the width? – INT Feb 04 '13 at 01:15
  • @INT: I have not found a solution for the width scaling yet. Part of my problem is I don't fully understand yet what all is going on and how it is structured. It is a complicated layout. – ScottS Feb 04 '13 at 03:10
  • In that past, I've applied width and height properties to DOM objects that didn't have those exposed by adding a div wrapper container & setting it there. – RandomUs1r Feb 06 '13 at 23:19
  • @Syn123: It is not a matter of having them exposed, it is an issue with the complexity of what the OP is doing in the layout. Adding a `width` for scaling at present destroys what is occurring with the functionality. – ScottS Feb 06 '13 at 23:33
1

maybe you could just pin your .spread divisor 

.spread {
  bottom: 11px;
  left: 11px;
  right: 11px;
  top: 11px;
  position: absolute;
  /* ... */
}

This way, it will be resized the same of the viewport area.

Here a jsFiddle to demonstrate.

Carry on

Milche Patern
  • 19,632
  • 6
  • 35
  • 52
  • Yes i did try it. Of course, knowing that it's parent element (body) is positioned relative with width and height at 100%, etc etc. – Milche Patern Feb 20 '13 at 15:20
  • I see, but your fiddle is much too simplicated compared to mine and I don't see how it helps me as I cannot test it in a real live case (and I failed to adapt the changes you suggest and get it to work). Thanks for trying to solve it though. – INT Feb 21 '13 at 20:38
0

I know you were probably looking for a solely CSS/HTML solution, but really you're probably best off using some Javascript. There's no way to be clean and precise just using CSS & HTML. But if you run a tiny bit of JavaScript on page load and window-resize, then your divs can have actual height/width values and scale cleanly. The trick is to have the outside div get its width/height set by the JavaScript, and then all its children use % dimensions so they grow appropriately.

Here's the basics using some JQuery:

<script type="text/javascript">
//Function to get the current window dimensions.
function get_window_dims() {
    var dims = [];
        if (parseInt(navigator.appVersion)>3) {
            if (navigator.appName=="Netscape") {
                dims[0] = window.innerWidth;
                dims[1] = window.innerHeight;
            }
            if (navigator.appName.indexOf("Microsoft")!=-1) {
                dims[0] = document.body.offsetWidth;
                dims[1] = document.body.offsetHeight;
            }
        }
    return dims;
}
function ResizeDivs {
    var dims = get_widnow_dims();
    var div_width = Math.floor(dims[0] * 0.93); // calculating the div width to be 93% of the window width
    $('div.spread').css('width',div_width+'px');
}
$(function() {
    ResizeDivs();
    $(window).resize(function(){
         ResizeDivs();
    });
});
</script>

You could easily clean up this code to be more concise, but I figured I'd put it out here this way for you to see all the parts. If you wanted to spend the extra time, you could even add more JQuery to animate the divs when the window resizes.

Hope this helps.

swafo
  • 25
  • 8
0

Have you considered using a responsive framework to solve your issue? You can set width's and heights to percentages and have min-width, min-height.

jms
  • 49
  • 1
  • 8