javascript - Programmatically Resizing Divs -


i'm working on html5 browser game can divided 3 parts: 2 ui panels on left , right of center set of square canvases playing surface. 3 panels need horizontally aligned, , total game needs keep aspect ratio of 16:9. left , right panels should of equal widths, , 3 panels must of equal height. have specified minimum width , height inside resize() function called when onresize event detected.

currently, each panel div, , 3 contained inside section. right now, section isn't necessary, want keep game separated content @ bottom of screen might choose add later.

the css style follows:

* {     vertical-align: baseline;     font-weight: inherit;     font-family: inherit;     font-style: inherit;     font-size: 100%;     border: 0 none;     outline: 0;     padding: 0;     margin: 0; }  #gamesection {     white-space: nowrap;     overflow-x: hide;     overflow-y: hide; }   #leftpanel, #centerpanel, #rightpanel {     display: inline-block; }  #leftpanel {     background-color: #6495ed; }  #centerpanel {     background-color: #e0ffff; }  #rightpanel {     background-color: #b0c4de;

right now, have set background color of each div show me when i'm correctly setting size of each div.

the body of html document follows:

<body onresize="resize()">     <section id="gamesection">         <div id="leftpanel">left panel.</div>         <div id="centerpanel">center panel.</div>         <div id="rightpanel">right panel.</div>     </section> </body>

and finally, resize() function (i created separate function resizing game in case add more elements below later):

    function resize() {         var min_game_width = 800;         var min_game_height = 450;         var game_aspect_ratio = 16 / 9;          var width = window.innerwidth;         var height = window.innerheight;          var gwidth, gheight;          if(width < min_game_width || height < min_game_height) {             gwidth = min_game_width;             gheight = min_game_height;         }         else if ((width / height) > game_aspect_ratio) {             <!-- width large height -->             gheight = height;             gwidth = height * game_aspect_ratio;         }         else {             <!-- height large width -->             gwidth = width;             gheight = width / game_aspect_ratio;         }          resizegame(gwidth, gheight, game_aspect_ratio);     }      function resizegame(var gwidth, var gheight, var aspectratio) {         var gsection = document.getelementbyid("gamesection");         var lpanel = document.getelementbyid("leftpanel");         var cpanel = document.getelementbyid("centerpanel");         var rpanel = document.getelementbyid("rightpanel");          gsection.height = gheight;         gsection.width = gwidth;          <!-- should below taken care of in css? -->         lpanel.height = gheight;         cpanel.height = gheight;         rpanel.height = gheight;          cpanel.width = cpanel.height;         lpanel.width = (gwidth - cpanel.width) / 2;         rpanel.width = lpanel.width;     }

i've tried number of different commands resize divs, isn't working me. when try adding test canvases, color appears, boxes still aren't correct size. have considered loading invisible background image each div , scaling desired size; however, able resize canvas using above method before , seemed work fine.

additional notes
while i've had pretty success resizing single canvas, don't want use 1 canvas game because not parts of ui need drawn @ same time.

i'm trying keep solely in javascript.

i suspect use css handle resizing fixing aspect ratio 16:9 , using width:56.25% center panel , width:21.875% side panels, limits me 1 aspect ratio , doesn't explain why above script isn't working.

i can provide entire html file if needed. it's supposed like: end goal (without right panel)

thank you!

udpate:
jsfiddle

i got kind of working here. made lot of changes/minor fixes code before finding wrong (other various syntax errors):

you using .width , .height instead of .style.width , .style.height, , applying integers these instead of strings "px" appended them. both of these things understandable miss.

i moved onresize body tag js, don't know why wasn't working on jsfiddle, practice anyways.

in future: learn how debug js using console , when ask questions, use small examples, not entire codebase. question have been simplified "how resize div?" 1 line of js , 1 div. should consider not doing specific thing in js, , using flexbox redbmk said.


Comments

Post a Comment

Popular posts from this blog

java - Spring Data JPA: Why findOne(id) executing delete query internally? -

i have 1 application using @manytomany annotation link 2 different entities 1 parent entity. not sure if have implemented properly. when execute .findone() on parent entity's repository find it, @ first fetch data along executing delete queries internally delete record mapping table (a table jpa creates after adding @manytomany annotation.). following generated sql queries , code snippet: java class @entity @table(name = "inventory") public class inventory { @id long id; // many other properties @manytomany(fetch=fetchtype.lazy) private list<stream> streams; @manytomany(fetch=fetchtype.lazy) private list<subject> subjects; } there no other annotation i've put in stream , subject entity class link inventory class. when run app, create following tables: inventory stream subject inventory_stream inventory_subject (inventory_stream , inventory_subject, 2 tables created automatically, don't k...
Read more

python - Mongodb How to add addtional information when aggregating? -

i beginner , wrote line pipeline works, wanna add other information output, screen name , or number of tweets.i tried add under $group gave me syntax error everytime here pipeline: def make_pipeline(): # complete aggregation pipeline pipeline = [ { '$match': { "user.statuses_count": {"$gt":99 }, "user.time_zone": "brasilia" } }, { "$group": { "_id": "$user.id", "followers": { "$max": "$user.followers_count" } } }, { "$sort": { "followers": -1 } }, { "$limit" : 1 } ]; i using on example : { "_id" : objectid("5304e2e3cc9e684aa98bef97"), "text" : "first week of school on :p", "in_reply_to_status_id" : null, "retweet_count" : null, ...
Read more

java - Incorrect order of records in M-M relationship in hibernate -

Image
i have 4 records in bridge table in mysql database. using @manytomany in hibernate, accurate order of employees incorrect incorrect of projects. following required material figure out doing mistake. this source. @entity @table(name="project") public class projectbean { @id @generatedvalue @column(name="project_id") private int projectid; @column(name="title") private string projecttitle; @manytomany(mappedby="projects") private collection<employeebean> employees; public projectbean() { employees = new arraylist<employeebean>(); } //getters & setters } @entity @table(name="employee") public class employeebean { @id @generatedvalue @column(name="employee_id") private int employee_id; @column(name="first_name") private string ...
Read more