Databases
StackOverflow2013
Postsdbo
POhow to center columns based on window width
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhow to center columns based on window width
    primarykey
    data
    text
    <pre><code>&lt;link rel="stylesheet" type="text/css" href="reset.css" /&gt; &lt;style type="text/css"&gt; body { position: relative; } .contain { position:relative; overflow: hidden; width: 80%; height: 100%; margin: 0 auto; } .box { background-color: #F0F0F0; color: #888; font-family: Arial, Tahoma, serif; font-size: 13px; } .box p { padding: 10px; } .box span { float: left; font-size: 26px; font-weight: bold; } div.alt { background-color: #CCC; } &lt;/style&gt; &lt;script type="text/javascript" src="jquery-1.3.2.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; var myFluidGrid = { COLNUMBER : 2, // Minimum column number. COLMARGIN : 10, // Margin (in pixel) between columns/boxes. COLWIDTH : 240, // Fixed width of all columns. doLayout : function() { var self = this; var pointer = 0; var arr = []; var columns = Math.max(this.COLNUMBER, parseInt($('body').innerWidth() / (this.COLWIDTH + this.COLMARGIN))); $('.box').css('position', 'absolute').css('width', this.COLWIDTH + 'px'); $('.box').each(function() { var tempLeft = (pointer * (self.COLWIDTH + self.COLMARGIN)); $(this).css('left', tempLeft + 'px'); var tempTop = 0; if (arr[pointer]) { tempTop = arr[pointer]; } $(this).css('top', tempTop + 'px'); arr[pointer] = tempTop + $(this).outerHeight() + self.COLMARGIN; pointer++; if (pointer === columns) { pointer = 0; } }); } }; $(window).ready(function() { myFluidGrid.doLayout(); }).resize(function() { myFluidGrid.doLayout(); }); &lt;/script&gt; &lt;div class="contain"&gt; &lt;div class="box"&gt;This is box number 1...&lt;/div&gt; &lt;div class="box"&gt;This is box number 2...&lt;/div&gt; &lt;div class="box"&gt;This is box number 3...&lt;/div&gt; &lt;/div&gt; </code></pre> <p>Demo of current code: <a href="http://grahamthomas.me/temp/test.html" rel="nofollow">http://grahamthomas.me/temp/test.html</a></p> <p>Trying to get the above grid to remain centered in the window no matter its size. I currently have it roughly centered, but when the window size is adjusted, the centering becomes untrue until the new column is populated with content (i.e. when the dynamic grid is between columns--larger than 3 columns, but no quite 4).</p> <p>I'm not great at JS, but my logic is: </p> <ul> <li>create a 100% wrapper (which would mimic the body.innerWidth dimension in the JS) </li> <li>create a centered wrapper inside this (80% for example)</li> <li>place the content in the centered wrapper</li> <li>once the 100% wrapper is large enough to handle an additional column, append the new div within the centered wrapper</li> </ul> <p>You can clearly see the overflow:hidden property 'run over' the right-most boxes when dragging the window smaller. I assume from this, the window width isn't being calculated properly. I tried variants of var columns, like:</p> <pre><code>var columns = Math.max(this.COLNUMBER, parseInt(($('body').innerWidth() * 0.8)/ (this.COLWIDTH + this.COLMARGIN))); </code></pre> <p>..which keeps the columns within the window, but still isn't a proper center.</p> <p>I've been looking at this for a while, anyone have any ideas?</p> <p>Thanks</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USGraham T
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POhow to center columns based on window width
      1. USCristian
      1. VTFavorite
    2. VO
      singulars
      1. POhow to center columns based on window width
      1. USDP.
      1. VTFavorite
    1. COCan you explain what your goal is more specifically? I'd check out the jQuery plugin Isotope. I use it often for these custom types of fluid layouts
      singulars
      1. POhow to center columns based on window width
      1. USGreg Thompson
    2. CO@Greg My goal is to have all the boxes that are visible to be centered. So when you have 3 columns, they're centered on the screen, then as you pull the window wider, those 3 columns stay centered until the 4th column pops in. Like Isotope has done here: [http://isotope.metafizzy.co/tests/centered-masonry.html](http://isotope.metafizzy.co/tests/centered-masonry.html)
      singulars
      1. POhow to center columns based on window width
      1. USGraham T
 

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