html - How to implement app-like template? -


i trying build website make application template:

after reading couple of tutorials here i've got far:

enter image description here

it may bit complicated explaining below:

my template contains lot of div's of them maybe extra, anyway giving div's absolute position , adding overflow-x , overflow-y whenever necessary ended template looking above black bar indicates have div scrolling want.

a couple of notes: tasks table div contains big table inside that's why added both vertical , horizontal scrolling.

right panel div: has lot of other div's , h3 tags no specific styling 4 5 div's same width of right panel , different heights, that's why wanted right panel scroll vertically.

now problem have failed make right panel scroll horizontally, when resize browser widow. looks way when decrease browser window width...

enter image description here

even when decrease width more, it's right panel slides way covering both center , left panel. enter image description here

is supposed happen? why right panel not scrolling horizontally center panel when browser resized? because of div's inside right panel?

the fastest way calculate width , height of task-controls , task-table via javascript or better jquery.

example jquery 

$(function() { res(); $(window).resize(function() { res(); });  function res(){ var windowwidth = $(window).width();  var leftpanelwidth = $('left-panel').width();   var rightpanelwidth = $('left-panel').width();   $('#task-controls','#task-table').width(windowwidth-leftpanelwidth-rightpanelwidth);  } });

edit: here complete, corrected , commented version

<!-- load jquery internet, if u dont want download --> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> //run when dom (website) load completly. same "$(document).ready()" $(function() {     //call own function on first time     res();      //evertime when window reiszed user     $(window).resize(function() {         //call function again         res();     });      function res(){         //get sizes         var windowwidth = $(window).width();          //the '#left-panel' searches html element id left-panel         var leftpanelwidth = $('#left-panel').width();           var rightpanelwidth = $('#left-panel').width();           //set width emements ids #task-controls , #task-table. size window width minus both menus         $('#task-controls','#task-table').width(windowwidth-leftpanelwidth-rightpanelwidth);      } }); </script>

if u want build app website, should learn jquery http://api.jquery.com/ http://www.w3schools.com/jquery/jquery_ref_selectors.asp

or did missunderstood question? want prevent cropping of center-panel


Comments

Post a Comment

Popular posts from this blog

Change php variable from jquery value using ajax (same page) -

what i'm trying this: i've php global variable $currentid , simple jquery script check if there "id" (page) in hash of url , if yes wanted give value $currentid . i've been reading lot , notice shall use ajax i'm not managing it. my code is: <script type="text/javascript"> $(document).ready(function(){ if (parent.location.hash != '' ) { var thecurrentid = parent.location.hash.split('#')[1]; $.ajax({ url: 'my.php', //current page type: 'post', data: {theid: thecurrentid }, datatype: 'json', success: function () { } }); } // code here }); </script> could me please? thank in advance. php server side language, meaning once has sent data browser, php variables , data cannot changed... however, using ajax, can send request php page , change data in dom based on result. consider th...
Read more

Pull out data related to my apps from Android Play Store and iOS App Store -

i want pull out data related apps (ratings, reviews, etc) google play store , apple app store ? how can accomplish ? i have found open source apis google mentioned not reliable. also there paid apis (e.g. appfigures) available. has idea how able pull data these play stores ?? i looking direction on how can accomplish this. can suggest ? we (appfigures) have been working on developing infrastructure give ability reviews , bunch of other data points major app stores several years :] we make available via our api though may want check out.
Read more

How can I fetch data from a web server in an android application? -

i want retrieve data web server in android application, , don't know begin. should use web services? i recommend these tutorials: connect android php , mysql , json in android , php , mysqli i used these tutorials , managed trying working without difficulty. between them describe each step in how attempting @ each stage, android application, database , web server side , has information included can process , use received information the thing add connect android php , mysql tutorial makes use of mysql_ in php deprecated. better use mysqli why included third link. the basic outline of want this: 1) in android app make request server php script using class this: import java.io.bufferedreader; import java.io.ioexception; import java.io.inputstream; import java.io.inputstreamreader; import java.io.unsupportedencodingexception; import java.util.list; import org.apache.http.httpentity; import org.apache.http.httpresponse; import org.apache.http.namevaluepair...
Read more