Topic: Curves with JavaScript (Page 1 of 1) Pages that link to <a href="http://ozoneasylum.com/backlink?for=28017" title="Pages that link to Topic: Curves with JavaScript (Page 1 of 1)" rel="nofollow" >Topic: Curves with JavaScript <span class="small">(Page 1 of 1)</span>\

 
WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

IP logged posted posted 05-31-2006 18:09 Edit Quote

I was looking at this tutorial ( http://couchfort.net/article/59/css-curves ) and thought that it might make things a little bit cleaner on the HTML dev if the actual effect was performed with javascript.

I have put together this little example http://www.codetown.org/examples/curvetest/

Let me know what you think.

Dan @ Code Town

WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

IP logged posted posted 05-31-2006 20:43 Edit Quote

I updated the code to work with a generic circle object.

Dan @ Code Town

DmS
Maniac (V) Inmate

From: Sthlm, Sweden
Insane since: Oct 2000

IP logged posted posted 05-31-2006 22:48 Edit Quote

that's pretty darn nice Dan!
Works perfect in Safari on OSX as well
/D

{cell 260} {Blog}
-{" Computer:
”As a Quantum Supercomputer I take advantage of Zeno’s paradox”
C: “Imagine a photon that must travel from A to B. The photon travels half the distance to B. From its new location it travels half the new distance. And again, it travels half that new distance.”
C: “It continually works to get to B but it never arrives.”
Human: “So you keep getting closer to finishing your task but never actually do?”
C: “Hey, coders make a living doing that…”
”}-

WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

IP logged posted posted 05-31-2006 22:57 Edit Quote

That is awesome. I am glad it is working on the mac.

I need to come up with a better function name and maybe a couple of wrappers to make some standard operations easier.

Dan @ Code Town

_Mauro
Maniac (V) Inmate

From:
Insane since: Jul 2005

IP logged posted posted 05-31-2006 23:46 Edit Quote

but it's really cool altogether, I agree with Dan. Smooth and good looking on my hi res monitor, Opera 9.

TwoD
Bipolar (III) Inmate

From: Sweden
Insane since: Aug 2004

IP logged posted posted 06-01-2006 20:36 Edit Quote

Sweet!
I wonder if complete circles could be done the same way. Floating positioning might get tricky if it's not 'docked' to a side...

/TwoD

WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

IP logged posted posted 06-01-2006 20:51 Edit Quote

You can only float an object right or left, so doing a full circle would not be possible with this method.

Dan @ Code Town

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 06-01-2006 21:09 Edit Quote

Honestly I can't think of many designs that require text wrapping. But I guess my vision is biased.

You could have a multi column layout with some "hole" between the columns around which the text will wrap. With a well thought design it would look really nice.

WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

IP logged posted posted 06-02-2006 13:55 Edit Quote

I have yet to come up with anywhere that I would want to use this, but it was a fun little test. I am sure that someone has some crazy idea in their head that would make use of something like this.

Dan @ Code Town

Scott
Paranoid (IV) Inmate

From: schillmania.com
Insane since: Jul 2002

IP logged posted posted 06-20-2006 17:06 Edit Quote

Actually, funny you mention this - I have been working on a music-themed site which uses a record as part of the interface (it's intentionally "metaphorical" and not very effective, but I wanted something a bit different.)

Anyway, I'm doing effectively the same thing, creating a number of float:left; clear:left; DIV elements which recreate a circular shape that text will flow around. The actual record image is absolutely-positioned, and the floated elements sit underneath.

It's for the site http://www.freshly-ground.com/ - but I haven't finished it yet.

(edit) Oh, what the hell - here's a preview URL. (From my crap cable connection at home, just FYI. ) - best viewed likely with Firefox.
ihatespam.dyndns.org/freshly-ground/

Resize the window (width-wise) to see how the text will wrap on the left.

(Edited by Scott on 06-20-2006 17:12)



Post Reply
 
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
 
Your Text:
Loading...
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu