javascript - Resizing a web page dynamically -


i developing bunch of small web applications have unknown window size target. solve problem, developing large layouts , scaling them according window size.

my solution has inconvenience. when resize everything, things little bit out of place (mainly when scaling text) , noticeable. code simple, in page absolutely positioned scaling factor , apply positions , width / height of every div/img/span/input in page. code follows:

function resize() {     var wh = $(window).height();     var h = maxheight;      var ww = $(window).width();     var w = maxwidth;      var wprop = ww / w;     var hprop = wh / h;      if (wprop < hprop) prop = wprop;     else prop = hprop;      if (prop > 1) prop = 1;      console.log(prop);     $("div").each (applynewsize);     $("img").each (applynewsize);     $("span").each (applynewsize);     $("input").each (applynewsize); } //this run when page loaded function initializesize (i) {     this.ox = $(this).position().left;     this.oy = $(this).position().top;     this.ow = $(this).width();     this.oh = $(this).height();     if ($(this).css("font-size") != undefined)     {         this.ofs = number($(this).css("font-size").split("px")[0]);     } }  function applynewsize (i) {     if (this.ofs != undefined) $(this).css("font-size", math.round(this.ofs * prop) + "px");     $(this).css("left", math.round(this.ox * prop) + "px");     $(this).css("top", math.round(this.oy * prop) + "px");     $(this).width(math.round(this.ow * prop));     $(this).height(math.round(this.oh * prop)); }

this problem has been tormenting me past week. have workaround or solution this?

i recommend read responsive web design.

it works putting % instead exact pixels : 

 <div class="container">    <section>     section   </section> </div>

css::

.container{   width: 80%; // 80% instead pixels   background: gainsboro;   border: 3px inset darkgrey;   height: 200px;   margin:auto;   text-align:center; }   section{    width: 80%; // 80% instead pixels   height: 80%; // 80% instead pixels   background: darkgrey;   margin:auto;   }

then can use media queries well, reallocate blocks or applying different styles on different widths :

example tutorial : http://css-tricks.com/css-media-queries/


Comments

Post a Comment

Popular posts from this blog

python - How to create a legend for 3D bar in matplotlib? -

Image
given ax = plt.subplot() : ax.bar()[0] can passed plt.legend() . however, ax.bar3d() returns none . how create legend displayed bars? update: passing legend="stuff" ax.bar3d() , calling ax.legend() raises /usr/lib/python2.6/site-packages/matplotlib/axes.py:4368: userwarning: no labeled objects found. use label='...' kwarg on individual plots. warnings.warn("no labeled objects found. " you need use proxy artist legends not supported. this code: from mpl_toolkits.mplot3d import axes3d import matplotlib.pyplot plt import numpy np fig = plt.figure() ax = fig.add_subplot(111, projection='3d') x, y = np.random.rand(2, 100) * 4 hist, xedges, yedges = np.histogram2d(x, y, bins=4) elements = (len(xedges) - 1) * (len(yedges) - 1) xpos, ypos = np.meshgrid(xedges[:-1]+0.25, yedges[:-1]+0.25) xpos = xpos.flatten() ypos = ypos.flatten() zpos = np.zeros(elements) dx = 0.5 * np.ones_like(zpos) dy = dx.copy() dz = hist.flatten() ax...
Read more

java - Multi-Label Document Classification -

i have database in store data based upon following 3 fields: id, text, {labels}. note each text has been assigned more 1 label \ tag \ class. want build model (weka \ rapidminer \ mahout) able recommend \ classify bunch of labels \ tags \ classes given text. i have heard svm , naive bayes classifier, not sure whether support multi-label classification or not. guides me right direction more welcome! the basic multilabel classification method one-vs.-the-rest (ovr), called binary relevance (br). basic idea take off-the-shelf binary classifier, such naive bayes or svm, create k instances of solve k independent classification problems. in python-like pseudocode: for each class k: learner = svm(settings) # example labels = [class_of(x) == k x in samples] learner.learn(samples, labels) then @ prediction time, run each of binary classifiers on sample , collect labels predict positive. (both training , prediction can done in parallel, since problems assumed ...
Read more

php - Dynamic url re-writing using htaccess -

how can rewrite http://mydomain.com/test/master.php?catid=2&subcatid=8 http://mydomain.com/test/master.php/catname/subcat using .htaccess file. once rewritten, how can access these parameters in master.php? note: untested, let me know if doesn't work. rewriterule ^master.php/([a-za-z0-9_-]+)/([a-za-z0-9_-]+)$ /master.php?catid$1&subcatid=$2 [l]
Read more