---

Hejsa

Jeg har fundet et script fra
http://www.storiesinflight.com/js_divsort/index.html som dynamisk
rangérer/sortérer (ændrer rækkefølgen på) bestemte <div>, enten
alfabetisk udfra deres tekstindhold, eller udfra en tilegnet
attribut-værdi.
Jeg er imidlertid udelukkende interesseret i at rangére efter
attribut-værdi.
Dog rangérer scriptet som udgangspunkt <div> med den laveste
værdi øverst, og jeg har brug for det præcis modsatte. Altså at
det er det <div> med den højeste atribut-værdi som placéres
øverst, og det med den laveste nederst.

Håber at der en nogen som kan gennemskue hvordan scriptet skal
ændres for at kunne dét.


Venligst
Ace

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Ace wrote:

> Håber at der en nogen som kan gennemskue hvordan scriptet skal
> ændres for at kunne dét.

Det er kun et 10 sekunders kig, så med de sædvanlige forbehold:

I sort_div_attribute() skal du ændre

if (a[0].toLowerCase() > b[0].toLowerCase()) {

til

if (a[0].toLowerCase() < b[0].toLowerCase()) {

Altså bytte om på større og mindre end.

Martin

---

Martin Larsen skrev:

> I sort_div_attribute() skal du ændre
>
> if (a[0].toLowerCase() > b[0].toLowerCase()) {
>
> til
>
> if (a[0].toLowerCase() < b[0].toLowerCase()) {
>
> Altså bytte om på større og mindre end.

Tak Martin :) I en lille test af scriptet virker det som ønsket
ved at bytte om på større og mindre end tegnet. Men ved
emplementering i min side hvor scriptet skal bruges, er det kun
ca. hver anden gang, at det rangérer div'ne korrekt :S Dette
lader ifølge
http://www.antipode.ca/2009/arraysort-browser-differences/ til at
skyldes, at der er forskel på hvordan diverse browsere håndterer
sort(). Men jeg skal kun have det til at fungere i IE.

Er der nogen der kender til et script der fungerer hver gang?


Venligst
Ace

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Ace wrote:

> Dette
> lader ifølge
> http://www.antipode.ca/2009/arraysort-browser-differences/ til at
> skyldes, at der er forskel på hvordan diverse browsere håndterer
> sort(). Men jeg skal kun have det til at fungere i IE.

Som scriptet er implementeret, burde det virke i alle browsere. Det er
ikke lavet efter "firefox-modellen".

Har du et online link til din side? Så er det meget nemmere at vejlede
dig :)

Martin

---

Martin Larsen skrev:

> Som scriptet er implementeret, burde det virke i alle browsere. Det er
> ikke lavet efter "firefox-modellen".

Nårh okay... Jamen så er det jo med al sandsynlighed bare mig der kludrer
i noget :)


> Har du et online link til din side? Så er det meget nemmere at vejlede
> dig :)

Yes, jeg har lige hurtigt bikset en test-side sammen, så du kan se hvad
det jeg forsøger at lave, drejer sig om...

http://clubace.dk/test2.php

I øvrigt hentes dataen således:
<div id="stats">
<?php include ('chris/chrisEntry.txt') ?>
<?php include ('christopher/christopherEntry.txt') ?>
<?php include ('jakob/jakobEntry.txt') ?>
<?php include ('mathias/mathiasEntry.txt') ?>
<?php include ('sandra/sandraEntry.txt') ?>
<?php include ('steffen/steffenEntry.txt') ?>
<?php include ('veronica/veronicaEntry.txt') ?>
</div>

Håber det er til at overskue, og tak fordi du vil kigge det igennem :)


Venligst
Ace

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Ace wrote:

> Håber det er til at overskue, og tak fordi du vil kigge det igennem:)

Jeg har ændret lidt i sorteringsfunktioen, så der nu står :

divsbucket.sort(function(a, b) {
return b[0]-a[0]
});

Det virker fint, og så er det jo meget kortere :)

Martin

---

Martin Larsen skrev:

> Jeg har ændret lidt i sorteringsfunktioen, så der nu står :
>
> divsbucket.sort(function(a, b) {
> return b[0]-a[0]
> });
>
> Det virker fint, og så er det jo meget kortere :)

You're a genius!! :D Tusind tak for hjælpen Martin. Dét havde jeg aldrig
selv fundet ud af :)

Kunne være rigtig fedt, hvis du måske også kunne se en løsning på mit
allersidste problem på mit "scoreboard"-projekt ;)

På siden befinder der sig ialt syv <div> med stylen display:none. Deres
id'er spænder fra "nr1" til "nr7".

Når der ikke er nogle deltagere på listen, skal ingen af de syv <div>
vises. Men når der er én deltager på listen, skal kun <div id="nr1"></div>
vises, og med to deltagere på listen skal kun <div id="nr1"></div> og <div
id="nr2"></div>, og så videre indtil der er syv deltagere på listen og
alle syv <div> skal vises.

Så dét jeg lige nu står og mangler, for at kunne se mig færdig med dette
lille projekt, er et script der kan finde ud af hvor mange deltagere der
er på listen (<div id="stats">) og løbende vise samme antal <div> som der
er deltagere. Ved ikke om man evt. kunne gøre dette igennem
"sortérings-scriptet"?

Håber det giver mening, og at det i det hele taget er muligt:)


Venligst
Ace

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Ace wrote:

> Håber det giver mening, og at det i det hele taget er muligt:)

Jeg er sikker på det er muligt, men jeg forstår godt nok ikke hvad det
er du vil!


> På siden befinder der sig ialt syv <div> med stylen display:none.

Jeg kan ikke se nogen med display:none!


> Når der ikke er nogle deltagere på listen

Hvilken liste? Er det en tekstfil der læses ind?


Er du ude efter at der kun vises lige så mange divs som der er
deltagere? Så der altså ikke er nogen tomme.

Og så et spørgsmål: Hvorfor har du de myriader af inline styles, og
hvorfor bruger du absolut positionering på dem alle?

Martin

---

Martin Larsen skrev:

> > På siden befinder der sig ialt syv <div> med stylen display:none.
>
> Jeg kan ikke se nogen med display:none!

De var ikke med på testsiden da jeg lagde den op før :) ... men det er de
nu (med display:block) ;)

> > Når der ikke er nogle deltagere på listen
>
> Hvilken liste? Er det en tekstfil der læses ind?

Ja okay, jeg kan godt se at jeg har formuleret mig lidt uklart med ordet
"liste". Ja, deltagerne bliver læst ind fra syv forskellige txt-filer,
således:
<div id="stats">
<?php include ('chris/chrisEntry.txt') ?>
<?php include ('christopher/christopherEntry.txt') ?>
<?php include ('jakob/jakobEntry.txt') ?>
<?php include ('mathias/mathiasEntry.txt') ?>
<?php include ('sandra/sandraEntry.txt') ?>
<?php include ('steffen/steffenEntry.txt') ?>
<?php include ('veronica/veronicaEntry.txt') ?>
</div>

Men dét jeg mente med liste, var såmænd bare container-div'en
<div id="stats"></div>.


> Er du ude efter at der kun vises lige så mange divs som der er
> deltagere? Så der altså ikke er nogen tomme.

Eftersom det ikke nødvendigvis er alle syv deltagere som optræder på
"listen", skal alle syv billede-div'er selvfølgelig heller ikke vises. Med
andre ord, skal der heletiden kun være ligeså mange billede-div'er synlige
som der er deltagere. (puha det er indviklet at forklare.. og sikkert også
at forstå) ;)

> Og så et spørgsmål: Hvorfor har du de myriader af inline styles, og
> hvorfor bruger du absolut positionering på dem alle?

I know.. jeg har ikke umiddelbart noget fornuftigt svar på det :S


Håber dog at det er mere tydeligt nu, hvad det er at jeg er ude efter :)


Venligst
Ace

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Ace formulerede spørgsmålet:
> Martin Larsen skrev:
>
>> > På siden befinder der sig ialt syv <div> med stylen display:none.
>>
>> Jeg kan ikke se nogen med display:none!
>
> De var ikke med på testsiden da jeg lagde den op før :) ... men det er de
> nu (med display:block) ;)
>
>> > Når der ikke er nogle deltagere på listen
>>
>> Hvilken liste? Er det en tekstfil der læses ind?
>
> Ja okay, jeg kan godt se at jeg har formuleret mig lidt uklart med ordet
> "liste". Ja, deltagerne bliver læst ind fra syv forskellige txt-filer,
> således:
> <div id="stats">
> <?php include ('chris/chrisEntry.txt') ?>
> <?php include ('christopher/christopherEntry.txt') ?>
> <?php include ('jakob/jakobEntry.txt') ?>
> <?php include ('mathias/mathiasEntry.txt') ?>
> <?php include ('sandra/sandraEntry.txt') ?>
> <?php include ('steffen/steffenEntry.txt') ?>
> <?php include ('veronica/veronicaEntry.txt') ?>
> </div>
>
> Men dét jeg mente med liste, var såmænd bare container-div'en
> <div id="stats"></div>.
>
>
>> Er du ude efter at der kun vises lige så mange divs som der er
>> deltagere? Så der altså ikke er nogen tomme.
>
> Eftersom det ikke nødvendigvis er alle syv deltagere som optræder på
> "listen", skal alle syv billede-div'er selvfølgelig heller ikke vises. Med
> andre ord, skal der heletiden kun være ligeså mange billede-div'er synlige
> som der er deltagere. (puha det er indviklet at forklare.. og sikkert også
> at forstå) ;)
>
>> Og så et spørgsmål: Hvorfor har du de myriader af inline styles, og
>> hvorfor bruger du absolut positionering på dem alle?
>
> I know.. jeg har ikke umiddelbart noget fornuftigt svar på det :S
>
>
> Håber dog at det er mere tydeligt nu, hvad det er at jeg er ude efter :)
>
>
> Venligst
> Ace

Så test på om værdierne er 0 i php, og undlad at sætte dem ind, hvis
den er...

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Hej Birger

> Så test på om værdierne er 0 i php, og undlad at sætte dem ind, hvis den
> er...

Vil du ikke godt lade være med at citere hele baduljen hver eneste gang?
Det mindsker faktisk spørgerens chance for at få svar fra andre, da det
bliver særdeles uoverskeigt at kigge tråden igennem.

Du er ellers meget "efter folk" der ikke overholder standarderne eller
spilder båndbredde, så - please please - vil du ikke nok lade være med
dette?

Se http://www.usenet.dk/?side=citatteknik

Hilsen
Martin

---

Martin Larsen skrev:

> Er du ude efter at der kun vises lige så mange divs som der er
> deltagere?

Præcis! :D


Havde håbet på at man kunne tælle hvor mange <div> med class="sortitem"
der er på hele siden (kan max være syv), og ud fra det tal, så vise samme
antal <div> med id fra "nr1" til "nr7".

Forestillede mig noget a la:

<script type="text/javascript">
function countElementsByClass(className, elementTag){
var count = new Array();
var elements = document.getElementsByTagName(elementTag);
for (var i = 0; i < elements.length; i++){
if (elements[i].className == className){
count[i] = "";
}
}
return count.length;
}
count = countElementsByClass('sortitem', 'div');
var nr1 = document.getElementById('nr1').style;
var nr2 = document.getElementById('nr2').style;
var nr3 = document.getElementById('nr3').style;
var nr4 = document.getElementById('nr4').style;
var nr5 = document.getElementById('nr5').style;
var nr6 = document.getElementById('nr6').style;
var nr7 = document.getElementById('nr7').style;
if (count == 1) {
if (count == 2) {
if (count == 3) {
if (count == 4) {
if (count == 5) {
if (count == 6) {
if (count == 7) {
nr1.display = 'block';
nr2.display = 'block';
nr3.display = 'block';
nr4.display = 'block';
nr5.display = 'block';
nr6.display = 'block';
nr7.display = 'block';
}
else {
nr1.display = 'block';
nr2.display = 'block';
nr3.display = 'block';
nr4.display = 'block';
nr5.display = 'block';
nr6.display = 'block';
}
}
else {
nr1.display = 'block';
nr2.display = 'block';
nr3.display = 'block';
nr4.display = 'block';
nr5.display = 'block';
}
}
else {
nr1.display = 'block';
nr2.display = 'block';
nr3.display = 'block';
nr4.display = 'block';
}
}
else {
nr1.display = 'block';
nr2.display = 'block';
nr3.display = 'block';
}
}
else {
nr1.display = 'block';
nr2.display = 'block';
}
}
else {
nr1.display = 'block';
}
}
</script>


Men der er et eller andet galt med scriptet :(

Kan nogen hjælpe mig?


Venligst
Ace

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Ace wrote:

> Havde håbet på at man kunne tælle hvor mange<div> med class="sortitem"
> der er på hele siden (kan max være syv), og ud fra det tal, så vise samme
> antal<div> med id fra "nr1" til "nr7".

Denne fremgangsmåde er korrekt

> Forestillede mig noget a la:

<klip>

> Men der er et eller andet galt med scriptet:(

I første omgang er der det galt at du kalder DOM-elementerne fra <head>
på et tidspunktet hvor dokumentet slet ikke er parset. Dvs. at du
refererer til fx id=nr1 før der overhovedet findes noget element med den id!

Der er flere løsning på dette. Det nemmeste er at flytte koden ned i
bunden af dokumentet, lige før den </body>. Så er du sikker på at
DOM-træet er behandlet.

Men når jeg nu er i gang, kan jeg lige så godt optimere din kode

Først og fremmest så bruger du i forvejen et javascript-framework
(mootools) og så kan du lige så godt benytte dette. Koden er alligevel
indlæst af browseren. Nu kender jeg ikke mootools, så jeg har erstattet
det med jquery og tilpasset koden der sorterer på sortitem tilsvarende.
Men som du kan se er der ikke den store forskel:

<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
<script type="text/javascript">
function sort_div_attribute(attname) {
divsbucket = new Array();
divslist = $('div.sortitem');
for (a=0;a<divslist.length;a++) {
divsbucket[a] = new Array();
divsbucket[a][0] = $(divslist[a]).attr(attname);
divsbucket[a][1] = divslist[a];
}
divsbucket.sort(function(a, b) {
return b[0]-a[0]
});
for (a=0;a<divslist.length;a++) {
$('#stats').append(divsbucket[a][1]);
}
}
</script>


Dernæst er der hele showet der viser nr1-nr7 afhængig af antallet af
sortitem. Det kan gøres voldsomt meget kortere og ditto overskueligt:


count = $(".sortitem").length;
for (var i=1; i<=count; i++) {
$("#nr"+i).show();
}


Count bruger jQuery til at tælle antal sortitem. Så loopes der igennem
dem, og de respektive nrX vises, også med jQuery.

Men du er godt klar over at der ikke er noget synligt indhold i nrX?

Du kan se scriptet her:

http://kreacom.dk/test/sortitem.html

Martin

---

Martin Larsen kom med denne ide:
8X
> I første omgang er der det galt at du kalder DOM-elementerne fra <head> på
> et tidspunktet hvor dokumentet slet ikke er parset. Dvs. at du refererer til
> fx id=nr1 før der overhovedet findes noget element med den id!

Svjks er der tale om en funktion, der kaldes når der er brug for det.
Så rent principielt er det bedøvende ligegyldigt hvor koden står.

> Der er flere løsning på dette. Det nemmeste er at flytte koden ned i bunden
> af dokumentet, lige før den </body>. Så er du sikker på at DOM-træet er
> behandlet.

Er direkte imod konventionerne. Scripting hører til i head, med mindre
det skriver direkte i dokumentet (document.write) - hvilket man bør
undgå.

8X

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Birger Sørensen wrote:

> Svjks er der tale om en funktion, der kaldes når der er brug for det. Så
> rent principielt er det bedøvende ligegyldigt hvor koden står.

Nej, koden kaldes med det samme. Og så er det vigtigt at DOM-træet er
indlæst.

> Er direkte imod konventionerne. Scripting hører til i head, med mindre det skriver direkte i dokumentet (document.write) - hvilket man bør undgå.

Det med konventionerne kan man nok diskutere mange gange. Men jeg er i
øvrigt enig i at det bør placeres i head. Nu skrev jeg så også at det
var den nemmeste løsning.

Hvis det skal gøres efter bogen i jquery-standard (som jeg benyttede i
eksemplet), så:

<head>
<script type="text/javascript">
$(document).ready(function() {
// Herinde er dom-træet indlæst
});
</script>
</head>

Det er ikke altid nok at smække koden i document.onload.

Martin

---

Martin Larsen frembragte:
> Birger Sørensen wrote:
>
>> Svjks er der tale om en funktion, der kaldes når der er brug for det. Så
>> rent principielt er det bedøvende ligegyldigt hvor koden står.
>
> Nej, koden kaldes med det samme. Og så er det vigtigt at DOM-træet er
> indlæst.

Nej det gør den ikke. En funktion kaldes når man har brug for den. Hvad
skulle formålet med at skrive koden i en funktion være, hvis koden
udføres når browseren møder den?

>> Er direkte imod konventionerne. Scripting hører til i head, med mindre det
>> skriver direkte i dokumentet (document.write) - hvilket man bør undgå.
>
> Det med konventionerne kan man nok diskutere mange gange. Men jeg er i øvrigt
> enig i at det bør placeres i head. Nu skrev jeg så også at det var den
> nemmeste løsning.

Nej det kan man heller ikke.
HTML i body.
css i separate filer, der linkes i head
funktionalitet (scripting) i separate filer, der hentes i head.

That *is* the order of things...

8X
> Det er ikke altid nok at smække koden i document.onload.

Muligvis. Her er der nu ikke noget i vejen med at gøre det.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Birger Sørensen wrote:

> Nej det gør den ikke. En funktion kaldes når man har brug for den. Hvad
> skulle formålet med at skrive koden i en funktion være

Jo den gør! Hvad med at kigge i koden i stedet for at gætte?

Pointen er jo netop at han IKKE har sat koden i en funktion. Den starter
sådan her, umiddelbart efter definitionen af countElementsByClass() :

<script type="text/javascript">
function countElementsByClass() {
<klip>
}
count = setTimeout("countElementsByClass('sortitem', 'div');", 0);
var nr1 = document.getElementById('nr1').style;
var nr2 = document.getElementById('nr2').style;

osv.

> Nej det kan man heller ikke.

Hvad kan man - heller - ikke?

> HTML i body.
> css i separate filer, der linkes i head
> funktionalitet (scripting) i separate filer, der hentes i head.

> That *is* the order of things...

Det er normalt det klogeste, ja. Men det står ikke sort-på-hvidt nogen
steder at det nødvendigvis skal være sådan.

Martin

---

Martin Larsen kom med denne ide:
> Birger Sørensen wrote:
>
>> Nej det gør den ikke. En funktion kaldes når man har brug for den. Hvad
>> skulle formålet med at skrive koden i en funktion være
>
> Jo den gør! Hvad med at kigge i koden i stedet for at gætte?
>
> Pointen er jo netop at han IKKE har sat koden i en funktion. Den starter
> sådan her, umiddelbart efter definitionen af countElementsByClass() :

JEg har lidt svært ved at overskue koden, pga. manglende indrykninger.
Har ikke rigtigt tid til at nærlæse.

8X
>> Nej det kan man heller ikke.
>
> Hvad kan man - heller - ikke?

Diskutere konventionerne.

>
>> HTML i body.
>> css i separate filer, der linkes i head
>> funktionalitet (scripting) i separate filer, der hentes i head.
>
>> That *is* the order of things...
>
> Det er normalt det klogeste, ja. Men det står ikke sort-på-hvidt nogen steder
> at det nødvendigvis skal være sådan.
>

Derfor foreslår du at gøre noget andet...
Det rigtige er at lægge koden i en onload. Genveje fører normalt til
fejl der er svære at finde - i bedste fald til uoverskuelig kode, der
måske virker her og nu, men er besværlig at vedligeholde.
Hvis man vil vente med at udføre kode, kan man anvende defer i script
tagget i header. (Vist noget med at det ikke virker som tænkt i alle
browsere).

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Birger Sørensen wrote:

> JEg har lidt svært ved at overskue koden, pga. manglende indrykninger.

Det har du så evigt ret i. Det er nogle mystisk if-kontruktioner han
laver

>> Hvad kan man - heller - ikke?
> Diskutere konventionerne.

Nå, det går det ellers meget god :)

> Hvis man vil vente med at udføre kode, kan man anvende defer i script
> tagget i header. (Vist noget med at det ikke virker som tænkt i alle
> browsere).

Ja, det er ikke så pålideligt. Jeg har haft et tilfælde hvor det eneste
der virkede var at lægge scriptet ind lige før </body>. Normalt er en
onload fint; det har dog det problem at den fyrer af inden eksterne
kilder er loaded, så du kan ikke med sikkerhed operere på fx billeder i
onload.

Det kan du derimod i en document.ready() eller tilsvarende konstruktion.

Martin

---

Martin Larsen har bragt dette til verden:
> Birger Sørensen wrote:
8X
>>> Hvad kan man - heller - ikke?
>> Diskutere konventionerne.
>
> Nå, det går det ellers meget god :)

Diskutere, ja. Lave om på, nej.
>
>> Hvis man vil vente med at udføre kode, kan man anvende defer i script
>> tagget i header. (Vist noget med at det ikke virker som tænkt i alle
>> browsere).
>
> Ja, det er ikke så pålideligt. Jeg har haft et tilfælde hvor det eneste der
> virkede var at lægge scriptet ind lige før </body>. Normalt er en onload
> fint; det har dog det problem at den fyrer af inden eksterne kilder er
> loaded, så du kan ikke med sikkerhed operere på fx billeder i onload.

Det er nu min erfaring, at bortset fra billeder, går det fint med
onload på body eller window.
Billeder laver man med onload på billedet. Det validerer så ikke, fordi
onload på billeder ikke eksisterer i HTML længere, så man er nødt til
at assigne dem med js - hvilket jo så ikke er et problem, og faktisk
hjælper med til at overholde konventionerne, om opsplitning af indhold,
layout og funktionalitet.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk