How to improve system that saves div dimensions to css with jquery.

Question

Warning: I'm not a good person to explain things, my english isn't perfect and I'm a bit noob with php, javascript and jquery. If you think you can handle that, keep reading.

So, I have this small system where you can add divs to a website, drag them and scale them. This is easy with jquery. However I'm trying to save the changes to css and html files, so next time you open the page it would be just like you edited it to be.

It isn't ready yet, but I know it is possible to do it. However before completing it, I would like to know if anyone has suggestions how to make it more simple or better in any way.

I'll explain how it works now:

User adds few divs, scales and drags them around. (JQuery UI). When the user clicks a button that saves the changes, system checks how many child elements the main container has (all the user-created divs are children of the main container). Now the system loops all the child elements and gets their dimensions (width, height, left, right) into array like this [0]="200,300,500,500". When the loop is complete, system joins the array into a string, where different elements are separated with semicolon.

System posts the string with $.ajax() and uses php file to read it, this is what happens in the php file:

1. php parses the string it got via post, into array like this

   [0]="200,300,500,500"
   

2. now it loops through the content of the array, parsing each string into 4 variables

   $width = 200;
   $height = 300;
   $left = 500;
   $top = 500;
   

3. Now the system puts these values into another array as string and adds the css code to the string. So this new array looks like this

   [0] = "#div0{width:200px;height:300px;left:500px;top:500px;}."
   

4. Once the array is complete, system implodes it into a string, deletes the old customstyle.css file and writes the string into new customstyle.css file.

Didn't include the creation of custom html file in this, but it's simply done by checking how many values the array made of post data has, then creating equal amount of divs into html file where each div has id of "div(number)".

When the page loads, php includes custom css and html files. Goal is to have index page that doesn't require javascript and is xhtml valid with simple styling, other page that is for editing and requires javascript ofcourse.

I think this system is far too complicated, there's too many arrays etc. But I don't know how to make it more simple :)

I was thinking of creating the whole style string with javascript at start and posting it to php as a whole, then just writing it to stylesheet as it is. But it's a lot bigger string than now and posting it wouldn't be so effective. (Not that it would matter since I'm the only one trying the system, but it doesn't feel right :P)

Answer 1

This sounds like a job for cookies. Basically you save the dimension state to cookies (here's a link to Quirksmode describing using cookies in Javascript). On page load, you try to retrieve the dimension state from cookies with javascript and apply it to your elements. You can filter them with jQuery by html (css) classes so it's a simple task.

If you do it right, the user won't notice anything.

Answer 2

The save button could assemble a json object with a collection of all the divs. It offers many advantages over using strings and can easily be read by php.

On the php side, write a class for the custom element. It will help readability and also allow you to assemble your data in a more logical manner. Class could be as simple as this

class CustomElement{
    public $height;
    public $width;
    public $leftPos;
    public $rightPos;
    private $elmentName;

    public function __construct($name){
       $this->elementName = $name
    }
}

Now whenever you want to deal with a new custom element you can do

$curElement = new CustomElement("div2");
$curElement->height = 600;
$curElement->width = 800;
...