/    Sign up×
Community /Pin to ProfileBookmark

Dynamically generating CSS with Javascript drag and drop

Copy linkTweet thisAlerts:
Apr 08.2009

I’m working on a rather complex issue with JavaScript/CSS, and was hoping to see if anyone had ideas that might help point me in the right direction.

On one of my websites ([url]http://tcdb.grinnell.edu/map/[/url]) I have a set of relatively positioned div’s that use the CSS background-image property to display an icon; then, I use PHP to check if the lab/printer is open based on a number of criteria and display the open (green) image if it’s open and closed (red) if it’s closed.

The CSS for this can be found here (the relevant CSS is on lines 147-220): [url]http://code.google.com/p/gctechmap/source/browse/trunk/css/labmap.css[/url]

It took me quite a while to generate the CSS for these positions by hand so that the icon would align perfectly over the location to which it corresponds. Now, I’m making “maps” of each computer lab to show, similarly, which individual computers are available or unavailable at a given time. So I have an image ([url]http://tcdb.grinnell.edu/map/pictures/lab_sketchups/scilab.png[/url]) on which I need to generate a similar set of positions for individual computer icons.

Basically, since I’ll be doing this for a number of labs, I thought it might be nice to be able to drag icons into a given place (see [url]http://www.hunlock.com/examples/dragdroppic.html[/url] or [url]http://interface.eyecon.ro/demos/sort.html[/url]), read their X, Y positions, and dynamically generate the corresponding CSS from that.

Note that I haven’t done much with AJAX, but I’d imagine I could read an X Y position of a given icon with JavaScript, and (having assigned a name to that icon) pass that information to a script on the server that could start writing data to a CSS file with the relevant information. But how exactly I might go about that is the bigger issue : )

If anyone has any suggestions or ideas, I’m all ears!

Cheers,
Dill

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@karinarmstrongApr 08.2009 — your website is nice.


much more pretty, less complicated and easy is using flash which works on all platforms and in particular with php.
Copy linkTweet thisAlerts:
@DillauthorApr 08.2009 — I thought about using Flash for certain applications, but for the website as a whole I don't think it would work.

But back to the original question...
Copy linkTweet thisAlerts:
@haulinApr 10.2009 — i tried sth like that recently. it's still not finished (ff makes troubles), but check out this thread. especially notice the method [B]move(x,y)[/B] (last 4 lines are irrelevant), which creates a new [B]style[/B] tag in the head of your html or replaces the old one, if there is any. in my script it was writing the absolute positioning of [B]the_product[/B], but passing it another argument, you can position multiple objects.

then, using toicontien's function from this thread, you can clone the window and see its generated code, so you can copy/paste it to an external file, if you want...
×

Success!

Help @Dill spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...