javascript - how to center columns based on window width -

- 

<link rel="stylesheet" type="text/css" href="reset.css" />       <style type="text/css">         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; } </style> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript">     var myfluidgrid = {             colnumber : 2, // minimum column number.             colmargin : 10, // margin (in pixel) between columns/boxes.             colwidth : 240, // fixed width of 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();         });     </script>  <div class="contain">         <div class="box">this box number 1...</div>      <div class="box">this box number 2...</div>     <div class="box">this box number 3...</div> </div>

demo of current code: http://grahamthomas.me/temp/test.html

trying above grid remain centered in window no matter size. have centered, when window size adjusted, centering becomes untrue until new column populated content (i.e. when dynamic grid between columns--larger 3 columns, no quite 4).

i'm not great @ js, logic is:

  • create 100% wrapper (which mimic body.innerwidth dimension in js)
  • create centered wrapper inside (80% example)
  • place content in centered wrapper
  • once 100% wrapper large enough handle additional column, append new div within centered wrapper

you can see overflow:hidden property 'run over' right-most boxes when dragging window smaller. assume this, window width isn't being calculated properly. tried variants of var columns, like:

var columns = math.max(this.colnumber, parseint(($('body').innerwidth() * 0.8)/ (this.colwidth + this.colmargin)));

..which keeps columns within window, still isn't proper center.

i've been looking @ while, have ideas?

thanks

no javascript required:

<html> <head> <style> body {     text-align: center; } div.main {     position: absolute;     top: 100px;     left: 50%;     margin-left: -40%;     width: 80%; }  div.main div.block {     height: 180px;     width: 180px;     background: #a00;     float: right;     margin: 10px; } </style> </head> <body> <div class="main">     <div class="block"></div>     <div class="block"></div>     <div class="block"></div>     <div class="block"></div>     <div class="block"></div>     <div class="block"></div>     <div class="block"></div>     <div class="block"></div>     <div class="block"></div> </div> </body> </html>

Comments

Post a Comment

Popular posts from this blog

objective c - Change font of selected text in UITextView -

-
can suggest me how change font of selected text in uitextview.i cannot use uiwebview since have edit text. have seen pages app.how possible in app. see formatting text within uilabel differently . since need editing, should @ javascript-based editors such ckeditor or tinymce . highly recommend wwdc 2011 video session 511: "rich text editing in safari on ios."
Read more

php - Accessing POST data in Facebook cavas app -

-
so i've got simple form in canvas / iframe facebook app, , i'm trying pass along values post. reading on s.o. , fb's latest docs, understand it, data send via post form can accessed on receiving end $_request object. i read on thread on s.o. in order post forms work need pass along input named "signed_request" value current signed_request (i have signed request working ok otherwise...all login , authentication stuff working fine). isnt mentioned anywhere in official fb docs. so problem comes in $_request object signed request, , bunch of other session stuff. form inputs found. the way can read them set method of form "request" isn't real form method. takes of inputs , sends them args in url. horrible. here's sample page canvas app form i'm using try debug (leaving out authentication stuff): <form enctype="application/x-www-form-urlencoded" method="post" target="_top" id="my_form" action=...
Read more

c# - Getting control value when switching a view as part of a multiview -

-
i have following code in aspx page: <asp:button id="display_button" runat="server" text="display" onclick="button1_click" /> &nbsp; <asp:button id="edit_button" runat="server" text="edit" onclick="button2_click" /> &nbsp; <asp:button id="save_button" runat="server" text="save" onclick="button3_click" visible="false" /> &nbsp; <asp:multiview id="multiview1" runat="server" activeviewindex="0"> <asp:view id="view1" runat="server"> <asp:formview id="view_program" runat="server"> <itemtemplate> <%# eval("status").tostring().trim() %> </itemtemplate> </asp:formview> </asp:view> <asp:view id="view2" runat="server"> ...
Read more