javascript - Text Will Not Fill Up Div -
i designing stat board call center , having trouble getting 2 elements size correctly. have used automatic text resizer called fittext(link below). have gotten every other element work fittext except 100% , 100 listed in code. cannot figure out why 100% , 100 stay small compared sizes of divs contained in. both containers 100% width. have played around hundreds of css combinations no avail. appreciated. via requests below, here jsfiddle link.
http://jsfiddle.net/neggly/57tvw/
css
#wrap { position: absolute; height:100%; width:100%; margin:0 auto; background-color: black; } #statuscolorwrap { background-color: aqua; float: left; width: 1%; height: 100%; } #numberwrap { background-color: #ff0; float: left; width: 20%; height: 100%; } #announcementwrap { background-color: coral; float: left; width: 79%; height: 100%; } #queuewrapper { height:40%; width:100%; float: top; background-color: darkorchid; } #queuecolors { height:40%; width:100%; float: top; background-color: cadetblue; } #queuepercentage { height: 50%; width: 100%; float: top; background-color: chartreuse; } #queueholding { height: 50%; width: 100%; float: bottom; background-color: crimson; } #topcolor { height: 50%; width: 100%; float: top; background-color: darkseagreen; } #bottomcolor { height: 50%; width: 100%; float: bottom; background-color: moccasin; } #datetimewrapper { width:100%; height:5%; float: top; background-color: deepskyblue; } #messages { width: 100%; height: 60%; float: top; background-color: darkorchid; overflow-y: auto; } .messagewrapper { width: 100%; height: 100px; float:top; background-color: azure; } .messageimportance { float:left; width: 5%; height: 100%; background-color: darkslategrey; } .messagesubject { float:left; width: 95%; height: 100%; background-color: blanchedalmond; } h1 { font: helvetica, sans-serif; margin:0; padding:0; text-align: center; } h2 { font: helvetica, sans-serif; margin:0; padding:0; text-align: center; } h3 { font: helvetica, sans-serif; font-weight: bold; margin:0; padding:0; text-align: center; } #anpicturewrap { float:top; width:100%; height:45%; background-color: darkcyan; } #antextwrap { float:top; width:100%; height:50%; background-color: darkkhaki; overflow-y: auto; } img { max-width: 100%; max-height: 100%; display:block; margin:auto; } h4 { font: helvetica, sans-serif; margin: 0; padding: 0; text-align: left; } #text { width: auto; margin-left: 40px; margin-right:40px; margin-bottom: 30px; } .subjecttext { height: 100%; width:100%; margin-left: 10px; margin-right: 10px; margin-top: auto; margin-bottom: auto; } html
<html> <head> <title>virginia summary</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="reset.css"/> <link rel="stylesheet" href="base.css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="js/libs/jquery/jquery.fittext.js" type="text/javascript"></script> </head> <body> <div id="wrap"> <div id="numberwrap"> <div id="queuewrapper"> <div id="queuepercentage"> <div class="subjecttext"> <h1 id="fittext1">1</h1> </div> </div> <div id="queueholding"> <h1 id="fittext2">100</h1> </div> </div> <div id="messages"> <div class="messagewrapper"> <div class="messagesubject"> <div class="subjecttext"> <h2 id="fittext3">enter subject here</h2> </div> </div> <div class="messageimportance"> </div> </div> </div> </div> <div id ="statuscolorwrap"> <div id="queuecolors"> <div id="topcolor"> </div> <div id="bottomcolor"> </div> </div> </div> <div id="announcementwrap"> <div id="datetimewrapper"> <h3 id="fittext4">12/12/2014 18:00</h3> </div> <div id="anpicturewrap"> <img src="images/pic.jpg" alt=""/> </div> <div id="antextwrap"> <div id="text"> <h4 id="fittext5">sample text</h4> </div> </div> </div> </div> <script type="text/javascript"> $("h1").fittext(1); $("#fittext2").fittext(1.2); $("#fittext3").fittext(1.2); $("#fittext4").fittext(1.2, {minfontsize: '20px', maxfontsize: '30px'}); $("#fittext5").fittext(1.2); </script> </body> </html>
default margins on headings , of margins have set causing of alignment issues. if switched of padding, , used box-sizing:border-box; on of divs, make things bit easier style:
div { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } http://www.paulirish.com/2012/box-sizing-border-box-ftw/
in js fiddle example, doesn't javascript resize text being called on anything. when turn on jquery in fiddle , call text-resize stuff on elements work resize elements.
$(document).ready( function(){ jquery("#fittext1").fittext(.2); jquery("#fittext2").fittext(.3); jquery("#fittext3").fittext(.6); jquery("#fittext4").fittext(1, {minfontsize: '20px', maxfontsize: '30px'}); jquery("#fittext5").fittext(1.2); }); edit: updated of css worked way might have expected to. moved normalize top of css, since should first thing added. want add space , things in of boxes, since added border-box, can padding on percentage sized elements.
Comments
Post a Comment