Databases
StackOverflow2013
Postsdbo
POHow do I scale this layout?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I scale this layout?
    primarykey
    data
    text
    <p>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: <a href="https://stackoverflow.com/questions/14572569/how-can-i-contain-pos-abs-div-within-specific-area">https://stackoverflow.com/questions/14572569/how-can-i-contain-pos-abs-div-within-specific-area</a>)</p> <p>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).</p> <p>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.</p> <p>Here's the new demo:<br/> <a href="http://jsbin.com/uciguf/1" rel="nofollow noreferrer">http://jsbin.com/uciguf/1</a></p> <p>UPDATE: The markup can be changed as long as it works as described.</p> <pre><code>&lt;div class="scrollblock" id="scroll_spread-1"&gt; &lt;div class="action"&gt;&lt;!-- --&gt;&lt;/div&gt; &lt;!-- --&gt; &lt;/div&gt; &lt;div class="scrollblock" id="scroll_spread-2"&gt; &lt;div class="action"&gt;&lt;!-- --&gt;&lt;/div&gt; &lt;!-- --&gt; &lt;/div&gt; &lt;div class="contentblock" id="spread-1"&gt; &lt;div class="inner windowwidth windowheight"&gt; &lt;div class="content"&gt; &lt;span&gt;&lt;/span&gt; &lt;div class="spread"&gt; &lt;div class="fade"&gt;&lt;!-- --&gt;&lt;/div&gt; &lt;div class="left centerimage"&gt; &lt;img src="http://s7.postimage.org/8qnf5rmyz/image.jpg"&gt; &lt;/div&gt; &lt;div class="right centerimage"&gt; &lt;a href="#scroll_spread-2"&gt;&lt;img src="http://s7.postimage.org/kjl89zjez/image.jpg"&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="contentblock" id="spread-2"&gt; &lt;div class="inner windowwidth windowheight"&gt; &lt;div class="content"&gt; &lt;span&gt;&lt;/span&gt; &lt;div class="spread"&gt; &lt;div class="fade"&gt;&lt;!-- --&gt;&lt;/div&gt; &lt;div class="left centerimage"&gt; &lt;a href="#scroll_spread-1"&gt;&lt;img src="http://s7.postimage.org/5l2tfk4cr/image.jpg"&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="right centerimage"&gt; &lt;a href="#scroll_spread-3"&gt;&lt;img src="http://s7.postimage.org/fjns21dsb/image.jpg"&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>&nbsp;</p> <pre><code>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; } </code></pre> <p>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.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USINT
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow do I scale this layout?
      1. USINT
      1. VTBountyStart
    2. VO
      singulars
      1. POHow do I scale this layout?
      1. USDanny Beckett
      1. VTFavorite
    3. VO
      singulars
      1. POHow do I scale this layout?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COMedia Queries are kind of a key tool when building responsive sites.
      singulars
      1. POHow do I scale this layout?
      1. USDA.
    2. CO@DA Maybe I should change the tag then? What I'm looking for is more like the way this behaves: jsbin.com/otacuk/2
      singulars
      1. POHow do I scale this layout?
      1. USINT
    3. COYes. Perhaps you're not really asking about responsive design but something more specific about 'scaling to browser width'
      singulars
      1. POHow do I scale this layout?
      1. USDA.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload