hope you can help me, again 🙂
i want to build a little webbased gui designer. the user can switch into editor-mode and can place the components wherever (s)he wants via drag’n’drop. when (s)he switches back to user-mode i want the position-details in the external css-file to be updated via javascript.
i looked into some examples that sort of do what i want, but i can’t seem to figure out, how to get it working.
thnx in advance,
dg
In order to edit external stylesheets with JS you’ll need to use the methods listed here : http://www.quirksmode.org/dom/w3c_css.html (see Accessing Stylesheets and Changing Style Sheets). As you can see from PPKs tables, there some significant CSS incompatabilities – this is edge case stuff and I do not know how you would save this generated CSS file.
I would look at posting (possibly with ajax) the values back to the server which generates the new CSS file which is then called by the user-mode page.
In the edit mode I would have all the styles inline (style=”…”) and then when the page is submitted, enumerate each element’s style property to extract the values and use them to build a POST request. Then create the new file on the server.