Hey thanks for the response Ivan. I tried your suggestion but I'm
still having the same problem.
In the CSS is:
.hidden
{
display:none;
}
.visible
{
display:block;
}
"sortby" is called by the onchange event of a drop down list:
<select name="sortby" onchange="sortby(this)">
<option value="Username">Username</option>
<option value="Followers">Followers</option>
<option value="Location">Location</option>
</select>
I can verify that changing the styles works by simply commenting out
the last 2 lines that re-displays the div boxes. The problem seems to
that the browser is not making any visual changes until the entire
function has completed. :/
Here is the rest of the code called by the function. I don't think
it's the cause to my problem however.
function sortByUsername(a, b) {
var x = getAttribute(a, 0);
var y = getAttribute(b, 0);
return naturalSort(x, y);
}
function sortByLocation (a, b) {
var x = getAttribute(a, 2);
var y = getAttribute(b, 2);
return naturalSort(x, y);
}
function sortByFollowers(a, b) {
var x = a.getChildren()[0].title;
var y = b.getChildren()[0].title;
var xSplit = x.split("::");
var ySplit = y.split("::");
x = xSplit[3];
y = ySplit[3];
return y - x;
}
function getAttribute(attribute, index){
var x = attribute.getChildren()[0].title;
var xSplit = x.split("::");
x = xSplit[index];
if(x != null)
x.toLowerCase();
else x = "";
return x;
}
function naturalSort(x, y)
{
// setup temp-scope variables for comparison evauluation
var nC = String.fromCharCode(0),
xN = x.replace(/([-]{0,1}[0-9.]{1,})/g, nC + '$1' +
nC).split(nC),
yN = y.replace(/([-]{0,1}[0-9.]{1,})/g, nC + '$1' +
nC).split(nC),
xD = (new Date(x)).getTime(), yD = (new Date(y)).getTime();
// natural sorting of dates
if ( xD && yD && xD < yD )
return -1;
else if ( xD && yD && xD > yD )
return 1;
// natural sorting through split numeric strings and default
strings
for ( var cLoc=0, numS = Math.max( xN.length, yN.length ); cLoc <
numS; cLoc++ )
if ( ( parseFloat( xN[cLoc] ) || xN[cLoc] ) <
( parseFloat( yN[cLoc] ) || yN[cLoc] ) )
return -1;
else if ( ( parseFloat( xN[cLoc] ) || xN[cLoc] ) >
( parseFloat( yN[cLoc] ) || yN[cLoc] ) )
return 1;
return 0;
}
On Nov 8, 9:27 pm, "Iván N Paz" <[EMAIL PROTECTED]> wrote:
> Hi,
>
> What is in the CSS of classes "hidden" and "visible"?
>
> Where are you calling "sortby" from?
>
> A more mootoolish way (but not extensive) to code your function would be:
>
> [code]
> function sortby(element){
>
> $('userList').fade('hide');
> $('loadingImage').fade('show');
>
> var selIndex = element.selectedIndex;
> var sortby = element.options[selIndex].value;
>
> var myimages = $$('#userList a');
>
> if(sortby == 'Username')
> myimages = myimages.sort(sortByUsername);
> else if(sortby == 'Followers')
> myimages = myimages.sort(sortByFollowers);
> else if(sortby == 'Location')
> myimages = myimages.sort(sortByLocation);
>
> $('userList').adopt(myimages);
>
> $('userList').fade('show');
> $('loadingImage').fade('hide');
>
> }
>
> [/code]
>
> Other changes/considerations could be taken into account, but without
> looking at the whole scenario its too hard to guess.. do you have any
> sample site where we can look?
>
> Bests
> Iván
>
> On 11/8/08, DustyReagan <[EMAIL PROTECTED]> wrote:
>
>
>
>
>
> > Hi!
>
> > I have a javascript function that runs when a drop down selection is
> > changed. The function sorts images based on their title. Sorting can
> > potentially take a few seconds, so I'd like to display a loading image
> > before I start sorting and remove the loading image after the sort is
> > complete.
>
> > The problem I'm having is the screen is not being redrawn until the
> > sort is complete, regardless of where in the code I request to show
> > the loading image. So the loading image is never displayed at all.
>
> > It's as if the process is: set loading image, sort elements, remove
> > loading image, redraw users screen.
>
> > Any pointers?
>
> > Thanks!
> > Dusty
>
> > function sortby(element){
>
> > document.getElementById('userList').className = 'hidden';
> > document.getElementById('loadingImage').className = 'visible';
>
> > var selIndex = element.selectedIndex;
> > var sortby = element.options[selIndex].value;
>
> > var images = $$('#userList a');
>
> > if(sortby == 'Username')
> > images = images.sort(sortByUsername);
> > else if(sortby == 'Followers')
> > images = images.sort(sortByFollowers);
> > else if(sortby == 'Location')
> > images = images.sort(sortByLocation);
>
> > $('userList').adopt(images);
>
> > document.getElementById('userList').className = 'visible';
> > document.getElementById('loadingImage').className = 'hidden';
> > }
>
> --
> ◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦◦
> Ivanicus' Code Boxhttp://ivanicus.com/
