0

My question might be a little specific but I just couldn't find any way to make it work: what I want is to have 3 div containers which the user can adjust in size (C is a map while B is a chat and A some other information and I want the user to be able to decide which content he wants to take up the most space). This should be saved after a page refresh or I could save the location/size of the contents for a reload. Here you see what I mean, I want the possibility to adjust C horizontally and A/B vertically

What I've tried is:

  • resize in CSS, which has multiple problems, first it doesn't save after page refresh (though I could ask for the size of containers I think and reload it) but the bigger problem is that if I resize A, B doesn't get smaller but instead gets pushed out of the screen which I don't want

  • colResizable: a jQuery plugin for tables which would work well for the horizontal C adjustment but not vertically and in addition it doesn't seem to be compatible with bootstrap cause for some reason it stops working when I add this line in the code: 

    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3./js/bootstrap.min.js"></script>

    (I need bootstrap for a dropdown menu)

So I really don't have even ideas left of what I could try and can't find any other tips online, I am using php to save changes in div A, so page refreshes shouldn't reset the resizing.

If anyone has a tip for me and an idea how it could be done, I would really appreciate it :)

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Juliette
  • 966
  • 16
  • 35
  • You can't save data (here, user preferences) with just CSS. You need PHP for that. – Hugo Sainte-Marie Sep 27 '15 at 14:32
  • yeah, I know and I also know how to save data with php and load it - but where do I get it? And how do I make the resizing work? I don't think the design aspect (having a draggable element that resizes the div left and right or however you could do it) can be done in php, or can it? – Juliette Sep 27 '15 at 14:44

2 Answers2

1

Sounds like you actually have multiple questions:

  1. How to get the resize to work as you want it. For that, I would advise to use css and inline styling, in particular flexbox.
  2. How to let the user choose width in the browser. Probably JavaScript with or without jquery.
  3. How to save the chosen width and height, until after refresh. For that, you can either use localstorage - works only in the same browser on the same computer, or a more sophisticated serverside solution. For that, you could use any server side language, like php.
wintvelt
  • 13,855
  • 3
  • 38
  • 43
  • First, thanks for your answer.1. I think I know how to size the elements by default, at the moment the layout looks like in the picture I just can't make it editable for a user 2. This is my biggest problem cause I don't have any starting point of how to this - do you make a draggable div with javascript and make the divs left and right take up the remaining space? Or is it directly possible to edit div sizes in javascript? I'm quite new to especially draggable stuff and I couldn't really find any helpful tutorials about letting a user resize stuff 3.I can save the data in my database, np – Juliette Sep 27 '15 at 14:57
  • Here are some other stackoverflow questions about resizable divs: http://stackoverflow.com/questions/391440/make-div-resizeable and http://stackoverflow.com/questions/8960193/how-to-make-html-element-resizable-using-pure-javascript – wintvelt Sep 27 '15 at 19:30
0

You should use javascript for the resize... It seems you have solve that problem anyway. Whay you could do is to fire a javascript function at the end of the resize (the library you're using for resize should have that feature) that creates a cookie or calls an ajax request sending the information to a php file that saves it to the DB permanently.

sebastianbarria
  • 86
  • 2