jQuery resizable's alsoResize: How can I cut the growth ratio of the inner resize div's? -


i've resizable area contains 2 areas want resized side side. ratio of growth horizontally 1:1 each area, since 2 contained areas side side, sum of widths grows twice fast container. how cut horizontal growth of 2 contained areas in half.

<html> <head>   <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" type="text/css"/>   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script> </head> <body> <style>   #resizable { background-position: top left; }   #resizable { width: 300px; height: 120px; padding: 0.5em; }   #also1, #also2 { width: 75px; height: 60px; padding: 0.5em; }   #resizable h3, #also1 h3 , #also2 h3 { text-align: center; margin: 0; }   #also1, #also2 { margin-top: 1em; } </style> <script>   $(function() {     $( "#resizable" ).resizable({       alsoresize: "#also1,#also2"     });   }); </script>  <div id="resizable" class="ui-widget-header">   <h3 class="ui-state-active">resize</h3>   <table>     <tr>       <td>         <div id="also1" class="ui-widget-content">           <h3 class="ui-widget-header">also one</h3>         </div>       </td>       <td>         <div id="also2" class="ui-widget-content">           <h3 class="ui-widget-header">also two</h3>         </div>       </td>     </tr>   </table> </div> </body> </html>

i see couple of problems. first, putting realizable divs in table. seems bit of contradiction.

second, alsoresize seems resize additional elements same number of pixels main resizable element, not resize them percentage might expect.

to solve i:

  • removed alsoresize
  • removed table
  • left floated child elements
  • relatively positioned #resizable div
  • made child divs' sizes percentage based.

this makes children resize automatically, without alsoresize. not sure if work in case, seems should let dom handle resizing when can.

example:

http://jsfiddle.net/japvz/

of course, should noted not take care of spacing around child divs. means still potentially end spacing don't want.


Comments

Post a Comment

Popular posts from this blog

asp.net - repeatedly call AddImageUrl(url) to assemble pdf document -

i'm using abcpdf , i'm curious if can recursively call addimageurl() function assemble pdf document compile multiple urls? something like: int pagecount = 0; int theid = thedoc.addimageurl("http://stackoverflow.com/search?q=abcpdf+footer+page+x+out+of+", true, 0, true); //assemble document while (thedoc.chainable(theid)) { thedoc.page = thedoc.addpage(); theid = thedoc.addimagetochain(theid); } pagecount = thedoc.pagecount; console.writeline("1 document page count:" + pagecount); //flatten document (int = 1; <= pagecount; i++) { thedoc.pagenumber = i; thedoc.flatten(); } //now try again theid = thedoc.addimageurl("http://stackoverflow.com/questions/1980890/pdf-report-generation", true, 0, true); //assemble document while (thedoc.chainable(theid)) { thedoc.page = thedoc.addpage(); theid = thedoc.addimagetoc
Read more

java - Android recognize cell phone with keyboard or not? -

in android app, want detect user's device if device has keyboard(like motorola milestone) , show corresponding user interface. guys know how that? ! regards justicepenny http://developer.android.com/reference/android/content/res/configuration.html public int keyboard the kind of keyboard attached device. 1 of: keyboard_nokeys, keyboard_qwerty, keyboard_12key. that's it!
Read more

iphone - How would you achieve a LED Scrolling effect? -

how achieve led scrolling effect example below? led sign - led ticker emulator iphone , ipad http://img.skitch.com/20101201-rsfh4p1bajb1wp94k466pdpiuj.preview.jpg sometimes remunerates comment in other posts :) have put code you, should implement font '8pin matrix' realistic feeling. uilabel *label; - (void)viewdidload { [super viewdidload]; label = [[uilabel alloc]initwithframe:cgrectmake(10, 50, 300, 20)]; label.font = [uifont fontwithname:@"courier-bold" size:16.0]; label.backgroundcolor = [uicolor blackcolor]; label.textcolor = [uicolor greencolor]; label.linebreakmode = uilinebreakmodecharacterwrap; // otherwise "…" label.text = @"this led text scrolled "; // blanks space between [self.view addsubview:label]; [nstimer scheduledtimerwithtimeinterval:0.12f target:self selector:@selector(scrolllabel) use
Read more