Javascript, CSS, HTML

Tuco

Tuco

I got Tuco'd!
<Gold Donor>
45,411
73,480
Cool, that's exactly what I asked for.

After looking at it a bit and extending it (To add additional static boxes) it seems a bit brittle:

http://jsfiddle.net/UmXB2/3/

In order to handle the animation cleanly I need to find out the exact pixel differences between the two states including:
the static box count, size, margins,
the container box margins, sizes,
and probably a few other things I'm not aware of.

This is fine but I'm left wondering why I shouldn't just go back to using a canvas/raphael method. I'm trying to avoid that but I wonder if there's a cleaner way to handle the animations.
 
Heriotze

Heriotze

<Gold Donor>
1,031
1,410
http://jsfiddle.net/WDycL/6/

should now be returning counts for right children and left children and finding the centerBox right margin dynamically (can easily switch all padding and margins to this with the css selector). The widths for the different static elements should have already been in there but I'm not sure why it was sticking and extra 2px onto the #center one. Also added in a way for the element being moved to know what its original position in the right column was for when it returns (in pretty much the nastiest way possible, not much less efficient than index() but not ideal). Index() and Indexof() were returning really weird results because of the append/prepend I think. Replaced the last javascript line of code with its jquery lib equivalent. Disabled the button[type=button] during animation because stop(true,true) was also acting weird upon continuous button clicks.

I've always found the benefit of javascript to mostly be that when you get it right its going to be bulletproof. IE v.whatever up to the newest iPad is going to work exactly like you want it to once you learn all of the small nuances. Canvas, as well as other really interesting things like webGL, is always going to be a bit held back by lack of 100% IE support (or in webGL's case the fact that Microsoft will probably never allow support of a non directX gfx library). I would say that javascript is just going to be a lot faster than svg and canvas alternatives as well.

This also seems like it's going to need to go OOP once you've got a lot of right column and center column boxes needing to move back and forth so it's probably going to need to sway more back towards straight javascript to end up working properly. Unless each element's html gets altered to include its original right column position as an attribute.
 
Tuco

Tuco

I got Tuco'd!
<Gold Donor>
45,411
73,480
So I created a version which you can freely click any of the boxes and they will animate and direct into the correct locations (Boxes going to the center space always append, boxes going to the right space sort).

I thought I was in the clear but I ran into an issue where the boxes in the center space won't animate their top and left positions (Only height/width) the first time they're clicked. Note that if they're moved right then moved left they work fine.

I created this fiddle to demonstrate the problem.
http://jsfiddle.net/jimmyw404/Cm55z/1/

I don't see what is different about the state that allows it to work the second time but not the first. Thanks for everyone's help!
 
Heriotze

Heriotze

<Gold Donor>
1,031
1,410
it seems similar to a problem that usually pops up with jquery and IE. .boxstyle doesn't have absolute positions when they are created so they don't fully understand the attributes of position:absolute until those elements are given values after the callback finishes. I'll crack away on it tomorrow, going to drink a bit tonight after a rough day of production code review fixes, but that seems like a good place to start. If .boxstyle gets attribute values before attempting to animate it should be able to follow your animation instructions properly. Just a first stab at it, I'll dig into some coding tomorrow. Looks like it's progressing well.
 
Tuco

Tuco

I got Tuco'd!
<Gold Donor>
45,411
73,480
Yeah that was my first thought, I tried setting its value in several different ways but couldn't figure it out. Thanks for your help!
 
Bandwagon

Bandwagon

Kolohe
<Silver Donator>
22,714
59,529
I've been working on learning python for a little bit, but just started on Javascript too. All for GIS stuff.

I just got a script working yesterday to do a point-in-polygon query against a feature service (finally). Now I'm trying to figure out how to compare overlapping polygons. Is that anything you have experience with?

For instance, I have a feature layer with 10-acre grids holding attribute values. I want to query a 200-acre polygon against that 10-acre grid layer and then summarize the attributes of the grids that overlap the 200 acre polygon.
 
You must log in or register to reply here.