IE and list bullets [Archive] - FutureQuest Community

phppete

08-29-2006, 03:56 AM

****!... I wasn't even aware of this property and I use CSS all the time as well as advanced DOM/CSS/JS stuff. Thanks for bringing that to my attention Wassercrats. I used background-image() on 3 lists on a site yesterday. I always like better and more efficient methods of doing things.

You could cut your list in half so to speak with JS that would create a two col list. Just count the number of li elements and programmatically add a float and clear style property to the half way point. That would make a 2 col list out of one ul.

You might have seen the drag and drop lists which seem popular now. I am currently working on dragging and dropping elements between unlimited lists, I'll post when its finally ready for prime time viewing.

Randall

08-29-2006, 05:33 PM

I wasn't even aware of this property and I use CSS all the time as well as advanced DOM/CSS/JS stuff. I didn't know you could apply background images to <li> tags, so you're still at least one step ahead of me, if that makes you feel any better. :rasberry:

Randall

Wassercrats

08-29-2006, 07:20 PM

You could cut your list in half so to speak with JS that would create a two col list. Just count the number of li elements and programmatically add a float and clear style property to the half way point. That would make a 2 col list out of one ul.I didn't try putting each half in a seperate div because I read that only li elements could be in a list if you want it to validate. I found that out when I tried using </li> tags immediately after each list item of a nested list. It wouldn't validate because the other <ul> tags had to be within li tags. I want the closing tags because I might try converting it to xhtml some day. But I haven't tried floats within the li tags.

phppete

08-30-2006, 04:21 AM

I didn't try putting each half in a seperate div because I read that only li elements could be in a list if you want it to validate. I found that out when I tried using </li> tags immediately after each list item of a nested list. It wouldn't validate because the other <ul> tags had to be within li tags. I want the closing tags because I might try converting it to xhtml some day. But I haven't tried floats within the li tags.

The type of solution I would have gone for is this:

http://www.zen106095.zen.co.uk/2col1list.htm

Click the link to cut the list in half.

Its a bit rough around the edges but works in FF, havent tested on any other browser. With JS it would be possible to position any element in any desired position but the above is a quick and simple solution (possibly).

Wassercrats

08-30-2006, 08:00 AM

I tried it out and looked at the Javascript and looked at the source chart (https://addons.mozilla.org/firefox/655/) to see what the post-Javascript HTML looks like. It seems to work, but I'm not sure how. From the viewpoint of someone who doesn't really know Javascript, it looks like you're giving only the middle li an id whose name changes in each iteration of the loop, and you keep assigning the float:right to the same, middle li. But I guess you're actually assigning float:right to every li that the loop is counting in the second half of the loop.

Anyway, it works in IE too.

phppete

08-30-2006, 11:54 AM

I've just modified it actually, there was no need to assign any id. The function is now :

function cutList(){
var li = $('mylist').getElementsByTagName('LI');
$('mylist').style.width = '340px';
for(var i=parseInt(li.length/2);i<li.length;i++){
li[i].style['float']='right';
}
}

which is basically just adding a float right to every li after the half way point which is determined by counting the list elements and dividing by two. Still not tested in IE but should work if the previous version did. Doesn't position properly in Safari, the above is just a quick hack though, if I were doing this for a proper site I would create something a little more robust and x-browser. Anyway hoped that help in some small way :)

Wassercrats

08-30-2006, 07:15 PM

phppete

08-31-2006, 04:21 AM

Now I'm even more confused. I was going to add an option to create as many columns as you choose, but I discovered that:

for(var i=parseInt(li.length/2);i<li.length;i++)

behaves the same as:

for(var i=parseInt(li.length/3);i<li.length;i++)

The list is cut exactly in half no matter how many li elements you add float:right to. That's impossible. I know I'd have to add another loop to really make more than one column, but I expected that changing the divisor would change the point at which the list is split.
The problem is that the width of the ul element was haardcoded as 340px, to give space for 2 cols. When using float:right the elements won't float outside of the parent nodes boundaries which is why you were surprised at the results.

I have modified the script, refresh this page:
http://www.zen106095.zen.co.uk/2col1list.htm

Now the function is:

function cutList(){
var cols = arguments[0];
var li = $('mylist').getElementsByTagName('LI');
var ul = document.defaultView?parseInt(document.defaultView.getComputedSty le($('mylist'),null).getPropertyValue('width')):parseInt($('mylis t').currentStyle['width']);
$('mylist').style.width = ul*cols+'px';
for(var i=parseInt(li.length/cols);i<li.length;i++){
li[i].style['float']='right';
}
}

The function now takes an argument, the number of cols like so:

<p><a href="javascript:;" onclick="cutList(3)">cut list into bits</a></p>

Change the number to create different col lengths. What I have done is to change the ul width and calculate it based on col length, so if you put 5 in the argument it calculates 5* current style width.

Works in FF, havent tested in IE but it should work but no guarantees. This is more of a quick demo and experiment than a ready to use function. Its a little mashed in Safari but works in Opera 8 Mac.

phppete

08-31-2006, 04:41 AM

Changed it again to make a better demo, click the link and enter the number of cols (via JS prompt) you want to chop the list into, a bit easier to play with.

http://www.zen106095.zen.co.uk/2col1list.htm

Wassercrats

08-31-2006, 07:55 AM

That's a pretty nice script, especially for unordered lists (I think people using ordered lists would expect the items to be numbered from top to bottom instead of left to right). I read the XHTML 2.0 specs (http://www.w3.org/TR/xhtml2/elements.html#a_elements) for ul and there's nothing there that can do this. Nothing in CSS3 either. I don't need equally divided columns for my current list, but I do for some others. :thumbguy:

phppete

08-31-2006, 08:00 AM

.. (I think people using ordered lists would expect the items to be numbered from top to bottom instead of left to right).

I actually thought that myself, give me a day or so and I'll see what I can come up with in my tea breaks. I'll post back when its done.

phppete

09-01-2006, 09:38 AM

I have created a new version:

http://www.zen106095.zen.co.uk/2col1listv2.htm

As you can see from the above this now displays the lists up/down rather than left/right.

One slight bug though which I don't have time to fix today, all col numbers work apart from 6, selecting 6 causes a weird display. I tried 1 - 8 and apart from 6 it was fine. I will look at this sometime over the weekend but its close to being ready for prime time.

I'll post back when its 100% robust, if its any use to you, feel free to make use of it.

Wassercrats

09-01-2006, 11:05 AM

I was just working with your previous version, increasing i in each iteration by the the number of items in each column and using the position property instead of float...or in addition to it, or something. I just did enough to make it look promising. Whatever way you're doing it is probably better.

Hey, you're using position too! I was trying relative positions though.

phppete

09-01-2006, 11:40 AM

Just keep the ul as position:relative, then all li elements as position:absolute, then all the li's will be relative to the parent UL which will make it easy to manage positioning.
All you have to do then is loop and split the cols, the 6 col bug has obviously highlighted its not flawless so still needs some work but its looking promising. If you do a better/different job than me post a link and I'll take a look, sometimes another pair of eyes produce a better solution :)

Wassercrats

09-01-2006, 11:51 AM

Relative to the parent is good. There's something that would be useful but isn't possible with the position property and I keep forgetting what it is. I looked it up here (http://www.tizag.com/cssT/position.php) and it says "With absolute positioning...The point of origin is the top-left of the browser's viewable area, so be sure you are measuring from that point." But I haven't tested it recently so I'm not sure.

phppete

09-01-2006, 12:42 PM

That not correct, or rather not correct when the element is a child of a parent that is relative or absolute itself. So in our list example the top:0px;left:0px is the top left edge of the containing ul and not the browser window.

Thats why when creating dhtml widgets its always best to encapsulate them in relative containers, when that container moves so does all the child elements. That is how you create a scrollable floating div that also holds the scroll controls.

Wassercrats

09-04-2006, 03:11 PM

I hate Javascript. Could someone give me a clue about what's causing the object expected error on the line that calls the function? I get that error in IE when I click the link on the top of http://www.polisource.com/PublicMisc/List_Splitter_2.html.

Arthur

09-04-2006, 03:39 PM

Error: missing } after function body
Source File: http://www.polisource.com/PublicMisc/List_Splitter_2.html
Line: 92, Column: 5
Source Code:
//--> The closing curly bracket for the cutList() function is missing, insert a } after line 90.

-Arthur

Wassercrats

09-04-2006, 03:47 PM

Thanks. Much better error message than IE. I wonder if IE 7 will be better for Javascript debugging.

Wassercrats

09-07-2006, 04:09 PM

the 6 col bug has obviously highlighted its not flawless so still needs some work but its looking promising.My version (http://www.polisource.com/PublicMisc/List-Splitter.html) has an all-but-two-and-four-columns bug and doesn't work at all in Firefox. It works in IE and Opera with two and four columns. When it's done, I'll visit Firefox's forum to see what the problem is with FF and whether there's an easy fix, but I suspect not, so your version might end up better.

And what's the deal with IE saying a variable is NaN even though it's been incremented with ++? I have to declare variables with "var x=0" instead of "var x" to get them to be seen as numbers. I hate Javascript.

phppete

09-07-2006, 05:52 PM

Mine now works in all browsers for all col selections:

http://www.zen106095.zen.co.uk/colsplitter.htm

I would have worked before I just forgot to Math.round() on the cols.

The only improvement here would be to make it more intelligent, the col calculations are just dividing list item length by cols which gives the number of items per col but for 20/6 you get 3 when rounded so it actually gives 7 cols, to make it 6 the script would need to know to put 4 items in the first 2 cols and 3 in the remainder like so:

4 - 4 - 3 - 3 - 3 - 3

it currently doesnt do that. I'm sure its possible to make it do this and I'll be looking at creating a solution very soon to make this possible.

phppete

09-07-2006, 05:55 PM

Forgot to say, NaN means 'not a number' and yes to create a counter you would do

var n = 0;
n++

var n
n++

will throw an NaN error.

Wassercrats

09-07-2006, 06:04 PM

The only improvement here would be to make it more intelligent, the col calculations are just dividing list item length by cols which gives the number of items per col but for 20/6 you get 3 when rounded so it actually gives 7 cols, to make it 6 the script would need to know to put 4 items in the first 2 cols and 3 in the remainder like so:

4 - 4 - 3 - 3 - 3 - 3

it currently doesnt do that. I'm sure its possible to make it do this and I'll be looking at creating a solution very soon to make this possible.My script uses some math that you might need:

var rows = (li.length)/cols;
var num_long_rows = parseInt(rows);
var rows_diff = rows - num_long_rows;
var num_long_columns = parseInt(rows_diff * cols); // Sometimes a fraction, probably due to Javascript's math limitations. Might have to round instead of using int.

Wassercrats

09-07-2006, 06:10 PM

Oh yeah, another nice feature would be an option for horizontal ordering. That's easy since you previously did that.

phppete

09-07-2006, 09:15 PM

I have rewritten my version so it now know how many items per col such as 6 cols gives:

4 - 4 - 3 - 3 - 3 - 3

9 gives ....

3 - 3 - 2 - 2 - 2 - 2 - 2 - 2 - 2

3 gives

7 - 7 - 6

http://www.zen106095.zen.co.uk/colv2.htm

from my tests it is perfect, which I am pleased with since I don't like to be beaten.

I did this: g = (li.length%p) that gives me the remainder, so 20%6 = 2. cols is math.floor length / col number then I just count back 1 for each remainder li and append it to the array, I count down until the remainder is 0.

Wassercrats

09-07-2006, 09:58 PM

Mine is too close to complete to abandon, so I guess the world will have two solutions. Object oriented fans would go for yours. I guess mine would be more of a functional style.

Tom E.

09-07-2006, 11:47 PM

I hope you don't mind if I join in the fun :dunno:

Here's a version that has a parameter for horizontal or vertical numbering.

It calculates the number of elements in each row or column by dividing the number of list items remaining by the number of rows/cols remaining and rounding up with ceil().
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>2 col one list demo</title>
<style type="text/css" media="screen">

</style>
<script type="text/javascript">

</script>
</head>
<body>
<p><a href="javascript: void cutList(true);">cut list, count down</a></p>
<p><a href="javascript: void cutList(false);">cut list, count across</a></p>
<ul id="mylist">
<li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li>
<li>Item 6</li><li>Item 7</li><li>Item 8</li><li>Item 9</li><li>Item 10</li>
<li>Item 11</li><li>Item 12</li><li>Item 13</li><li>Item 14</li><li>Item 15</li>
<li>Item 16</li><li>Item 17</li><li>Item 18</li><li>Item 19</li><li>Item 20</li>
</ul>
</body>
</html>

Wassercrats

09-08-2006, 02:02 AM

Mine (http://www.polisource.com/PublicMisc/List-Splitter.html) works now. Only tested in IE, but probably still works in Opera. It also lets you choose between horizontal or vertical layout. Refresh page between uses. I guess I'll clean it up and submit it to some Javascript website. Hmmm...is enough of it my code so I can do that or is too much of it phppete's?

The problem before was that I misused the math that I offered to phppete. I might implement it properly when I get a chance, but it's just a matter of making the script more intelligent, like phppete said.

phppete

09-08-2006, 05:45 AM

Tom, I was waiting for you to join in after seeing you watching the thread ;)
I hope you don't mind I have hosted your solution here:
http://www.zen106095.zen.co.uk/tomslist.htm

Works perfectly, nice solution. My only comments would be that the horizontal view doesnt need much JS, all you need to do is set the ul width based on cols and then just float right the li elements. You have created a very decent solution though :)

Wasser - for someone who doesn't do much JS/DOM you have certainly pushed ahead in the right direction. Your latest version doesn't work 100% in Opera, choosing 6 cols v gives 5 but compared to where we both were a few days ago this is a vast improvement. You need to ensure your left/top styles in script are appended with +'px' so style['left']=100 does not work in FF but style['left']=100+'px' does, that should get it working the same in FF for you.

So then guys, since this is getting a little competitive why not raise the stakes a little? I propose we now go away and create a solution that animates the li moving into position. So what we want is each li sliding into position one by one. Anyone up for the challenge?

Tom E.

09-08-2006, 08:37 AM

Tom, I was waiting for you to join in after seeing you watching the threadI'll have to remember to wear my funny-nose-and-glasses disguise next time I lurk around the coding forum. :kewl:

I hadn't used scripting to dynamically position elements before, so this was a fun way to get my feet wet . I'd love to do the animation challenge, but I've got to get back to doing paying work. Also, just reading the challenge gave me flashbacks to doing animation in 8085 assembler.

Wassercrats

09-08-2006, 08:53 AM

Your latest version doesn't work 100% in Opera, choosing 6 cols v gives 5 but compared to where we both were a few days ago this is a vast improvement. You need to ensure your left/top styles in script are appended with +'px' so style['left']=100 does not work in FF but style['left']=100+'px' does, that should get it working the same in FF for you.Fixed (http://www.polisource.com/PublicMisc/List-Splitter.html).

So then guys, since this is getting a little competitive why not raise the stakes a little? I propose we now go away and create a solution that animates the li moving into position. So what we want is each li sliding into position one by one. Anyone up for the challenge?Literally sliding? I can't even do a time delay. I have this in the code at the right spot, but it does nothing:///////////////////// Broken Timeout
setTimeout('pause()',700);
////////////////////////////////////My (empty) pause function is at the bottom of the script. I guess I'd need to put the actual code that I want delayed in the function and pass the necessary stuff to it. I spent years avoiding OO and scoping so all this goes against my grain, but I'll do it later.

phppete

09-08-2006, 09:05 AM

Tom - I too have loads of work on but I'll attempt the sliding concept and post back within the week. 8085 assembler... unfortunately I only know web dev languages and some python... one day I hope to be a proper coder and learn C or C++ :)

Wasser - yours works great in FF. As for the animation, I'll post within the week and you can perhaps get some ideas from whatever I come up with. For this we would need to set a timer and move the li pixel by pixel every 500th of a second and also set some kind of flag to trigger the next li positioning. Leave it with me and I'll see what I can come up with in my coffee breaks, not that I seem to get many these days.

Wassercrats

09-08-2006, 09:14 AM

Are you guys starting from a standard vertical list layout? I'm turning the multicolumn horizontal column layout into the vertical one, so I'd have to slide across two dimensions. It would look cool though.

phppete

09-08-2006, 09:32 AM

I'll be starting from a vertical list, I'll be attempting to slide out horizontal first then slide up/down to the correct position. If all goes well I will also add in some easing in/out as well as perhaps some animated fading/in and out before the slide starts to show which list element is about to move. All this might take a good few coffee break sessions though. What we have so far should be a good foundation. This is most certainly 'do-able', I don't do much animation myself with DHTML, I mainly work with drag/drop stuff so this will be a good exercise to do something new and outside my comfort zone.

Wassercrats

09-08-2006, 10:11 AM

I just remembered that I created a breakout type game with a bouncing ball for the C-64. I'm not sure where the algorithm is and my C-64 is broken, but I think I know how to do this.I'll be attempting to slide out horizontal first then slide up/down to the correct position.Going diagonally shouldn't be too hard. Lets say to get all the way from the starting position to the new position, you have to move up 100 px and right 50 px. Just divide 100 by 50 and you get two. Create a 100 iteration loop for the vertical movement, and have a counter within the loop that moves right every 2nd iteration, at the same time as it moves up.

Wassercrats

09-08-2006, 11:23 PM

My script wins the benchmark test. Your two scripts are about equal.

http://www.polisource.com/PublicMisc/List-Splitter-Barry.html
http://www.polisource.com/PublicMisc/List-Splitter-phppete.html
http://www.polisource.com/PublicMisc/List-Splitter-Tom.html

Wassercrats

09-09-2006, 08:25 AM

Larger runtime difference in Firefox than IE.

Wassercrats

09-09-2006, 08:54 AM

My script runs in zero miliseconds in Opera. I'm going to see if I can speed it up so it travels back in time.

phppete

09-09-2006, 09:00 AM

Opera is very fast, this week I have been developing an app that imports 250 rows of data from csv file, php converts it to JSON and I import that JSON format into my app via Ajax. The app is similar to Excel in that it has predeteremined rows, when importing if the number of rows to import is more than the current row length the app creates the row, imports the data and repeats until the end of the data. FF on Mac is the slowest (although I only have 384MB RAM), on PC/FF its quicker but Opera 9 on both PC and Mac feel like the browser is on steroids.
Although I use FF as my default browser and like it very much its a resource hog on my Mac, Opera is much more resource friendly as well as faster... maybe I should adopt Opera as my default browser....

Wassercrats

09-09-2006, 12:45 PM

If you add text under </ul>, mine is the only version that displays it under the list. It overlaps the top of the first column in your two scripts.

phppete

09-09-2006, 07:21 PM

Yours is also the only version that is not positioned correctly (in FF/Mac) each column shifts up 1px too much ;)
I used absolute positioning so yes, any content underneath will be relative to the document and not the UL. I would need to add some script to rectify that or look at a CSS fix. Typically though the UL would be in a relative div which should fix that problem, which as you correctly identified would need fixing if this was used in a real world site.

I havent started my sliding version yet but hope to make a start later this weekend, I need put some distance between myself and you guys, at the moment its too close to call, my sliding version will make you :bow: and :clapper: and send you away :wah: wishing you were as good as me :rasberry:

Wassercrats

09-11-2006, 09:31 PM

I had my sliding version written shortly after you mentioned it, but I haven't gotten around to debugging it yet. Meanwhile, I added a view source option. http://www.polisource.com/PublicMisc/List-Splitter.html

That's actually what I'd use because I don't want to rely on someone having Javascript on. I'd just paste it into my HTML.

I just have to figure out why Firefox appears to be waiting for something after showing the source.

I think I'll let the FF/Mac bug stay for now.Patron: Which branches or research libraries in Manhattan or Brooklyn provide internet access with Macintosh computers? A full list would be best, but I'd like at least a couple of locations to choose from. It would also help if I knew what browser they use.

Librarian 1: Regrettably, according to Jane Kunstler, Manager of The New York Public Library Branch Libraries Information Systems Office, as far as is known no New York Public Library locations have Macintosh computers.

Just to be absolutely certain, both the Aguilar Branch Library and the Donnell Library Center were also contacted. However, these branch locations do not have Macintosh computer terminals.

As such, please contact the Brooklyn Public Library (http://www.brooklynpubliclibrary.org/ask_librarian.jsp) or the Queens Library (http://www.queenslibrary.org/index.aspx?section_id=4&page_id=14) for assistance.

Wassercrats

09-13-2006, 12:49 AM

Ok, I give up. I think I have to flush the buffer to get setTimeout to work, but I don't think there's a built-in flush function in Javascript anymore. In this (http://www.polisource.com/PublicMisc/list-splitter-timeout-bug.html) script, I have setTimeout("funtest(" + li_count + "," + pos_change_left + "," + pos_change_top + ")",700); which calls function funtest(aaa,bbb,ccc)
{
var li = $('mylist').getElementsByTagName('LI');
li[aaa].style.position = 'relative';
li[aaa].style.left = bbb + 'px';
li[aaa].style.top = ccc + 'px';
}once for each li that's moved (20), but there's only one delay then they're all moved. If I put an alert in the function, it's triggered 20 times, once before every change in position of a li, so why not 20 delays (one before each move) instead of one long one?

phppete

09-13-2006, 04:20 AM

You'll need to animate each list item, increment the position, set some kind of flag to indicate in the script when its finished so you can then animte the next one. I haven't had any spare time yet but might see if I can spend an hour on it later tonight, if I do get the time I'll upload.

Wassercrats

09-13-2006, 12:12 PM

I asked here (http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/01ecbbdb7d2aeb3a/#) and received one reply so far. I hate Javascript.

Wassercrats

09-13-2006, 12:29 PM

Incrementing the amount of delay for each iteration worked. http://www.polisource.com/PublicMisc/list_splitter_timeout.html

Now I just need to debug my sliding version and I can add a delay.

phppete

09-13-2006, 12:30 PM

I asked here (http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/01ecbbdb7d2aeb3a/#) and received one reply so far. I hate Javascript.

As you can see from the 2 replies the problem isnt with JS bugs, its a slightly difficult task and since you aren't that experienced with JS it will be rather challenging.

What I plan to do first (hopefully tonight) is create 5 divs and get it working on a prototype that is easier to debug first. Then I upon getting the execution sorted I'll move it to my list and just tweak the code. I should have the basic concept with 5 divs done tonight, at which point I will upload.

phppete

09-13-2006, 12:32 PM

Incrementing the amount of delay for each iteration worked. http://www.polisource.com/PublicMisc/list_splitter_timeout.html

Now I just need to debug my sliding version and I can add a delay.

Its certainly going in the right direction :)

Wassercrats

09-13-2006, 04:41 PM

I posted about the setTimeout issue here (http://www.webdeveloper.com/forum/showthread.php?p=637609) too, even though it's kind of settled. I'm going to look for a Javascript for Dummies book to see if that would have helped. I won't buy it or read the whole thing. I want to know whether it's possible for a novice to get usable information from documentation of a specific...whatever setTimeout is. I don't think it's possible on the internet.

Tom E.

09-13-2006, 05:10 PM

Another approach would be to use window.setInterval() to call an independent animation function repeatedly for each object. Then you could do neat stuff like having them all move at the same time or having the next one start before the current item is finished.

I may be able to give it a try in the next few days...

Wassercrats

09-13-2006, 06:38 PM

So now I know that setTimeout starts an additional thread while the rest of the code continues to run. I didn't see that in any documentation.

Do all function calls start a new thread while the rest of the code continues to run? I guess they do. It would have been nice to read that somewhere.

Tom E.

09-13-2006, 07:12 PM

Do all function calls start a new thread while the rest of the code continues to run?
setTimeout() and setInterval() are the only ones I'm aware of that behave that way (unless you count the entire event handling system).

I thought there might be a sleep() or delay() function that pauses execution of the current thread, but I couldn't find anything that fit the bill.

I seem to recall that the way to pause a thread is to set a global variable with the number of milliseconds you want to delay, then use setInterval() to repeatedly call a function that just decrements the global every millisecond until it gets to zero. The main routine just waits in a loop until the global reaches zero. Kind of convoluted for such a simple task...

phppete

09-13-2006, 07:24 PM

setTimeout() and setInterval() are the only ones I'm aware of that behave that way (unless you count the entire event handling system).

Unfortunately even the respected O'Reilly JS books don't go into the depths about threading, so at this point I'm not sure if every new setTimeout/setInterval starts a new thread, although I think it does. A secondary thread is started for the setTimeout/setInterval otherwise of course the script would just stop and nothing else would execute.

Danny Goodmans - Definitive HTML states setInterval is the solution for animation FWIW. Its 11:23pm and I'm still working on client stuff, I might have a late one tonight and get started on my list extravaganza... so much to do so little time... I need a setTimeout on my life :confuz:

Wassercrats

09-13-2006, 07:28 PM

A secondary thread is started for the setTimeout/setInterval otherwise of course the script would just stop and nothing else would execute.Before I knew about the threading, I figured that after executing a function called by setTimeout, the script would return to the line after the setTimeout.

phppete

09-14-2006, 10:35 AM

As previously stated I like to start something like this with a very simple cut down prototype. So I have got an animation going that moves one div at a time and then starts the next div after the previous one has finished, like so:

http://www.zen106095.zen.co.uk/animate.htm

Next tea break task will be to slide horizontal and then vertical, creeping nearer to the functionality I outlined for this animation task.

phppete

09-15-2006, 07:55 AM

Animate v2 http://www.zen106095.zen.co.uk/animate2.htm

I've added horizontal animation, there are now targets for the divs to position to, the targets are randomly positioned onload so refresh to see various positions. Next version will be the actual list we began with.

Wassercrats

09-15-2006, 10:32 AM

You overshoot some of your targets by a couple of pixels, but it's corrected at the end of each move.

phppete

09-15-2006, 10:36 AM

You overshoot some of your targets by a couple of pixels, but it's corrected at the end of each move.

Yes I know that, that is because I am incrementing by more than 1px at a time, I could correct that by testing the distance and if there is only a different of 6 for example increment by just 1 to prevent the overshoot for happening.

You might also have noticed I haven't yet set this up to slide up the screen if the target has a style.top less than the original starting point. I might sort out all these bits and pieces out tonight.

Wassercrats

09-15-2006, 10:56 AM

I think I'll show the number of pixels each li has moved in the status bar so if there's a lot of off screen movement, you can see something is still happening.

phppete

09-15-2006, 11:42 AM

Just fixed the above issues, no overshooting now, also speeded it up a little.

Wassercrats

09-15-2006, 04:12 PM

Looks like you're still overshooting vertically, but I'd have to slow it down to be sure.

phppete

09-15-2006, 04:54 PM

Looks like you're still overshooting vertically, but I'd have to slow it down to be sure.

No I'm not :). Look in the code there is no correction going on, I removed that. I think its just the speed that gives the illusion, when a div is in one increment of the target I slow it down to 1px increments so its impossible to overshoot, and since I am not correcting now its 100% solid.

Wassercrats

09-15-2006, 05:05 PM

Are too! :bounce:

I slowed yours down. Sometimes it overshoots vertically, I think only when it moves up. http://www.polisource.com/PublicMisc/lists_splitter_phppete_test.html

phppete

09-15-2006, 05:05 PM

I wonder what lurker Tom has got up his sleeve, I know his watching the thread, I also know Tom will come up with something decent, so come on Tom, lets see your code ;)

phppete

09-15-2006, 05:08 PM

Are too! :bounce:

I slowed yours down. Sometimes it overshoots vertically, I think only when it moves up. http://www.polisource.com/PublicMisc/lists_splitter_phppete_test.html

Hmmm... my apologies it would appear you are correct, its a 1px jump and correction, I will fix that little bug. I'll have to employ you as my bug tester :)

phppete

09-15-2006, 05:15 PM

Fixed it (I think .... I hope ....)

Wassercrats

09-15-2006, 05:19 PM

I wonder what lurker Tom has got up his sleeve, I know his watching the thread, I also know Tom will come up with something decent, so come on Tom, lets see your code ;)Yesterday I spent a bunch of time cleaning up my code for no big reason, then I debugged it and I think I fixed the problem I was having within a few minutes, then I spent about an hour looking over everything else and decided my fix was wrong so I didn't save it. Now I think it was right and I have to redo it. :confuz:

Tom E.

09-15-2006, 05:51 PM

I wonder what lurker Tom has got up his sleeve...I hate to disappoint, but I'm not working on the animation extra credit portion of this project.

If there are any Jazz fans out there (not the sports team), I've got to suspend my forum lurking tonight to go see Joel Frahm with Jimmy Cobb (last living musician from "Kind of Blue") sitting in on drums.

Progress on the animation looks good. I'll continue lurking tomorrow...

Wassercrats

09-17-2006, 04:01 AM

As long as we're showing off movement before the final product, here's (http://www.polisource.com/PublicMisc/list-splitter-animation.html) mine. Remember to select vertical and web view.

Wassercrats

09-18-2006, 03:31 AM

Now I have everything moving in roughly the right direction. One more debugging session and mine should be done.

Fear my simultaneous diagonality.

Wassercrats

09-18-2006, 09:50 PM

The simultaneous movement is a major problem with the browsers. For example, if you choose 10 columns and vertical layout (horizontal doesn't require CSS positioning so I'm not bothering animating that), my script does pretty much what it's supposed to do, and if you wait long enough everything ends up in the correct position, but I think buffering issues from the extreme number of threads (one for each pixel movement of each list item) are causing the jumpy movement. It's fairly smooth in Opera though. This script probably requires a fast browser. Future computers will be able to handle it. I'll just say I'm ahead of my time.

phppete

09-19-2006, 04:17 AM

I'll need to look on my PC later, on Mac Opera and FF its a bit mashed. I thought we were going to move one at a time, at least that is what I will be doing but I can change it to moving them all at once as well if required. I don't think modern browsers have a problem moving so many elements, the execution will be slower for those with less memory and CPU though.

I was hit with another severe migraine yesterday so I lost a whole day, I hope to get mine completed tonight or tomorrow night.

Wassercrats

09-19-2006, 05:10 AM

Actually, the all-at-once movement wasn't intended, but I like it. I could make it one at a time by setting the delay according to the distance of the last item's movement, but I think I'll leave some overlap. And I want to debug it first. The 10/vertical/web configuration should work though, except for a one pixel misalignment. On my computer, it takes 30 seconds in IE and 15 seconds in Opera.I was hit with another severe migraine yesterday so I lost a whole day, I hope to get mine completed tonight or tomorrow night.I dropped a vise on my ankle yesterday, but I'll give the pain and suffering points to you.

phppete

09-19-2006, 08:23 PM

Here is my offering http://www.zen106095.zen.co.uk/animate2.htm

Works as I outlined at the start of this challenge. Tested in FF, IE6, Safari and Opera, no issues with memory or anything.

I dropped a vise on my ankle yesterday, but I'll give the pain and suffering points to you.

I am pleased you don't obviously suffer with migraines like I do because you would then understand I don't have them to gain 'points'. If you did drop a vice on your ankle I hope its not seriously injured, but for javascript you might be better with a hammer :rasberry:

Wassercrats

09-19-2006, 08:36 PM

I got word that mine worked smoothly in FF. They must have had a fast computer.

I must have really strong blood vessels because there's no black and blue mark on my ankle, though it still hurts when I press on it. Could have been my toe because I was wearing sandles.

I get headaches when I abuse myself, but not usually major. I once had one for three days. One was really, really bad in the middle of the night. I bet that one could have competed with yours.

Tom E.

09-19-2006, 10:06 PM

Looks good, guys!

I can now reveal that the real reason I've been lurking in this thread is that I am really Heidi Klum, and I'm looking for people to join my new reality show about software designers called "Project Runtime".

One day you're input, the next day you're output...
:safegrin:

Wassercrats

09-25-2006, 02:21 AM

Ok, I'm ready for the reality show now. It was a small bug. I learned how to trap errors for it but I ended up not having to when I looked at it again. Now mine works for all numbers of columns, with an occasional error of a few pixels which I'll fix eventually. Remember to choose vertical and web when prompted.

Eventually I'll rewrite it so only one timeout is set at a time, which should solve the jumpy movement problem that some slow browsers and/or computers cause.

http://www.polisource.com/PublicMisc/list-splitter-animation.html

phppete

09-25-2006, 04:48 AM

In FF on Mac, after choosing the cols/v/w they all move into the columns instantly, then some appear to move. Is that what supposed to happen?

Wassercrats

09-25-2006, 05:02 AM

Nope, but that might be fixed when I do one set timeout at a time. That sounds like an extreme variation of the jumpiness problem in other browsers, but I'm not sure.

I guess different browsers handle long floating point numbers differently because Firefox positions 5/v/w differently than IE, by a few pixels. I experimented with floor and ceil but that just made things worse, as I expected, so I'm going to see if there's a way to make Javascript math accurate to more decimal places.

Then there's the six-column bug, which gives a "li[li_count_3] has no properties" error even though everything seems to work.

It's best viewed in Opera, at least on Windows.

phppete

09-25-2006, 05:55 AM

I looked in Opera on PC and its the same as FF/Mac. I see what you are doing now, moving them from the columns which are already positioned, whereas I am moving them into the positions without sorting them after moving.

Works fine though, they end up in the right order :)

Forgot to say its smoother on my PC, probably due to processor speed and better graphics card.

Wassercrats

09-25-2006, 06:37 AM

Oh, that's what you meant. Yeah, that's what I'm doing, but I'm thinking of slowly changing from standard one column layout to the multicolumn layout by gradually changing the width, then having my current script take over. It probably would have been easier to go directly from one column to correctly ordered multicolumn layout, but the way I'm doing it looks better when lists are "below the fold" because fewer list items are hidden.

Opera gives the best Javascript error messages. Now I have a better idea where to look to fix the "li[li_count_3] has no properties" error.