Luponius Posted March 15, 2013 Share Posted March 15, 2013 Hi W3, new member over here. I'm in a bit of a bind right now with a project I've been working on for the past few months, and it's now come down to developing html content (using jQuery Mobile framework) to be deployed on mobile devices of varying size. The main problem is resizability and readability of text (which I'm not even sure if this would be a problem or not, however I'd rather be safe than sorry when the deployment phase happens). Currently I've managed the following on this page: http://i.imgur.com/p9JZ6jo.png The final result should look like this: http://i.imgur.com/lRLooXq.png The problem is, as I see it, that everything's clearly too big to be deployed on a mobile device. It's relatively big even for small desktop monitors and I doubt this will be useable on a device since everything will be compressed to extremely tiny values. I need to make this as dynamic as possible based on resolution (so everything should scale properly, including the image, which gets centered in the div (don't know how to pull that off) as well as the text, which takes up just the amount of space available in the div, and adjusts itself in the form of a ratio if possible. The layout must be kept as is, that is 4 divs which take up a quarter of each, with content that's yet to be further added in the middle of each div. I had a problem with making the divs take an equal amount of height so I set the CSS to be exactly 240px long, which is too much for a mobile device in most cases... I've played about with relative/absolute positioning which sent all the content inside the divs flying to the footer or the left margin and other weird results... I appreciate any help possible to make this dynamic and neat looking. CSS being used for the divs specifically is: /*Power Storage*/.batteryZone { width:45.5%; background-color: #878787; border-radius:10px; border: 1px solid #5C5C5C; float: left; margin:1%; padding:1%; min-height:240px;} This allows me to float 2 boxes together next to one another and the remaining two float below it through a clear:both; div tag which separates them. HTML for the page is as follows: <body> <div id="powerStorage" data-role="page"> <div data-role="header"> <a href='index.html' class='ui-btn-left ui-btn-back' data-icon='arrow-l' data-transition="slide" data-direction="reverse">Back</a> <h1>Power Storage</h1> </div> <div data-role="content"> <div id="content"> <div id="title"> <h1>Power Storage</h1> </div> <div class="batteryZone"> <!-- Battery description and general Info--> <h3>Auxiliary Battery 1</h3><br /> <h6>Location: Bridge, Upper Deck</h6> <br /> <h3>Status:</h3> <span id="battStatus1"></span> <br /> <h3>Operation:</h3> <span id="battOp1"></span> </div> <div class="batteryZone"> <!-- Battery level code here--> <img src="/images/battery/Battery5.png" alt = "Battery Low!" width=300px /> <br /> <br /> </div> <div class="extend"></div> <div class="batteryZone"> <!-- Time Code Here --> <h3>Load</h3> <div id="battLoad1"> </div> <br /> <h4>Time Remaining</h4> <br /> <div id = "battTime1"></div> </div> <div class="batteryZone"> <div class="source"> <h3>Current</h3> </div> <div class="source"> <h3>Voltage</h3> </div> <div class="source"> <h3>Temperature</h3> </div> </div> </div> </div> <div data-role="footer"> <h4>Footer content</h4> </div> </div> <!-- / page --> </body> Link to comment Share on other sites More sharing options...
deldalton Posted March 15, 2013 Share Posted March 15, 2013 If you put the "batteryZone" divs into a containing div of their own, you should be able to use the "height: 50%" css property on them so that they only take 50% of the available height. The same would apply with width. So that they take up equal amounts of space within their container. But, I'm all very new to this so I may have overlooked something obvious that may cause this not to work. This won't solve your whole query but it may be a step in the right direction. Link to comment Share on other sites More sharing options...
Luponius Posted March 15, 2013 Author Share Posted March 15, 2013 That's what I'm already doing. They're all in the content div which contains them, and the percentages were adjusted a little bit to allow for margin and padding. This however doesn't really appear to do much in terms of height since the initial div has no hardcoded height set to it, so everything is floating without any actual height. What this all boils down to is that the only volume available is the text / images I write in each. Width works fine since that's pre-determined but height is a value that is, to my konwledge either defined in terms of pixels, or just some form of percentage which won't do much. If I could set everything PERCENTUALLY based on the screen size itself that would be great... this way I could set the content div to wrap between header and footer say ... 20% -> 80% top to bottom, and the batteryZone divs could be 25% to 50% and 50% to 70% in height. I don't know if fixed position could allow this, but I must make sure it's based on screen size. The one additional issue I have is to dynamically resize everything contained by the divs (text,images etc) based on the size of the div itself. Thanks for the reply however, it's better than nothing, you helped me visualize my issue better. =] Link to comment Share on other sites More sharing options...
deldalton Posted March 15, 2013 Share Posted March 15, 2013 That's what I'm already doing. They're all in the content div which contains them, and the percentages were adjusted a little bit to allow for margin and padding. This however doesn't really appear to do much in terms of height since the initial div has no hardcoded height set to it, so everything is floating without any actual height. What this all boils down to is that the only volume available is the text / images I write in each. Width works fine since that's pre-determined but height is a value that is, to my konwledge either defined in terms of pixels, or just some form of percentage which won't do much. If I could set everything PERCENTUALLY based on the screen size itself that would be great... this way I could set the content div to wrap between header and footer say ... 20% -> 80% top to bottom, and the batteryZone divs could be 25% to 50% and 50% to 70% in height. I don't know if fixed position could allow this, but I must make sure it's based on screen size. The one additional issue I have is to dynamically resize everything contained by the divs (text,images etc) based on the size of the div itself. Thanks for the reply however, it's better than nothing, you helped me visualize my issue better. =] Sorry, Luponius. I completely missed this somehow ... /*Power Storage*/.batteryZone { width:45.5%;... If every container was given it's dimension as a percentage, and was relatively positioned, including the images, then I would expect them all to resize appropriately based on the size of the browser window. However, that's not going to change the size of your text. The other problem here is, of course, that if a particular screen was much longer against it's width, compared to another screen then the images may stretch ... which, I suspect, isn't what you're after. There must be a way to preserver the images and container ratios but I'm not sure how. I know whenever I've resized an image, if I only specify one dimension, it tends to keep the images height:width ratio but I don't know if this could be applied here. I think the only way to get your code to recognise when a particular screen resolution/size is being used is to use Java Script. But, I'm not familiar enough with CSS yet ... let alone Java Script. But, hopefully, someone on else on here will be able to give you a real solution. Sorry I couldn't be of any help. Link to comment Share on other sites More sharing options...
Luponius Posted March 15, 2013 Author Share Posted March 15, 2013 Not to worry, discussing it is still a big help. I've been testing from scratch some different things. I'm currently trying to set all the positions as fixed and see where that might take me. I'd be mroe than happy to use Javascript since the project contains jQuery already anyways, I'm just completely lost. This detail is killing me and I've found no proper solutions as of yet. Link to comment Share on other sites More sharing options...
deldalton Posted March 15, 2013 Share Posted March 15, 2013 Not to worry, discussing it is still a big help. I've been testing from scratch some different things. I'm currently trying to set all the positions as fixed and see where that might take me. I'd be mroe than happy to use Javascript since the project contains jQuery already anyways, I'm just completely lost. This detail is killing me and I've found no proper solutions as of yet. If you haven't already, it might also be worth posting your query on the stackoverflow.com forums. If you find your answer elsewhere though, please make sure you post it here so we can all benefit from it too. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now