[js+css] trage functie

[hobbeldebobbel]

ben aan het proberen om een soort pixelised effect te maken met behulp van divjes van steeds 15x15px groot. een soort mobieltje schermpje maar dan wat groter.
ik heb met behulp van divjes allemaal hokjes gemaakt: 28 rijen (A - AB), met elk 50 (0-49) divjes.
Deze hebben allemaal een eigen unieke id: letter gevolgd door nummer: A34 bijvoorbeeld.
ook hebben alle divjes dezelfde class: pixel

site: http://www.stack.nl/~ries/pixels/main.php

nu lukt het me wel om bijvoorbeeld binnen redelijke tijd een aantal(bijvoorbeeld 35) pixels random in te kleuren...... maar daarna moet ik doormiddel van een functie de divjes allemaal weer cleanen.. dwz de achtergrond kleur veranderen.

code:

function clean()
{
    var combi = new Array();
    var letters = new Array('a','b','c','d','e','f','g','h', tot en met,'aa','ab');
    for (i=0; i < 50; i++)
    {
        for(j=0; j < letters.length;j++)
        {
            combi.push(letters[j]+i)
        }
    }
    for (t=0; t<combi.length; t++)
    {
        document.getElementById(combi[t]).style.backgroundColor = '#dddddd'
    }
}

maar probleem hierbij is dat het vreselijk lang duurt om de (50*28) 1400 divjes allemaal te veranderen.
is er geen manier om ze allemaal tegelijk te veranderen? bijvoorbeeld aan de hand van die class?
of is er soms een andere manier?

[ Voor 30% gewijzigd door hobbeldebobbel op 04-01-2004 20:03 ]

[André]

Zo zou de functie er al simpeler uit zien:

JavaScript:

function clean()
{
    var letters = new Array('a','b','c','d','e','f','g','h', tot en met,'aa','ab');
    for (var i=0; i < 50; i++)
    {
        for(var j=0; j < letters.length;j++)
        {
            document.getElementById(letters[j] + i).style.backgroundColor = '#dddddd';
        }
    }
}

Maar je kunt volgens mij beter alle div's in 1 grote div zetten. En van die grote div verander je de styleClass in een andere class met als achtergrond "#DDDDDD";

[hobbeldebobbel]

maar als ik alles in 1 grote div zet en dan de achtergrond verander... dan verander ik toch de achtergrond van de divjes.... en niet van de daaronderliggende divs?

[crisp]

ja, je kan je css rules rewriten (iig in IE en Mozilla), maar ik denk dat als je de referenties naar die divs opslaat in een array, zodat je niet elke keer getElementById hoeft te doen, dat al een heel stuk scheelt

[Johnny]

Op die voorbeeld pagina krijg ik een error op regel 29, [i]which_array not defined, dat klopt wel, zodra je op de link "picture" klikt zou de picture array in which_array moeten worden geladen, maar dat gebeurt niet.

Verder staan er gaan aanhalingstekens om de id's van de div's.

[André]

HTML:

<style>
  .Veld DIV {
    background-color: #FFFFFF;
  }

  .VeldClear DIV {
    background-color: #DDDDDD;
  }
</style>

<div id="Bla" class="Veld">
  <div>A1</div><div>A2</div>
  <div>B1</div><div>B2</div>
  <div>C1</div><div>C2</div>
</div>

JavaScript:

document.getElementById("Bla").className = "VeldClear";

[ Voor 27% gewijzigd door André op 04-01-2004 20:47 . Reden: typo ;) ]

[crisp]

André schreef op 04 januari 2004 @ 20:40:
[...]document.getElementById("Bla").styleClass = "VeldClear";

styleClassclassName

[ Voor 4% gewijzigd door crisp op 04-01-2004 20:46 ]

[André]

crisp schreef op 04 januari 2004 @ 20:46:
[...]

styleClassclassName

Typefoutje

[hobbeldebobbel]

crisp schreef op 04 januari 2004 @ 20:38:
ja, je kan je css rules rewriten (iig in IE en Mozilla), maar ik denk dat als je de referenties naar die divs opslaat in een array, zodat je niet elke keer getElementById hoeft te doen, dat al een heel stuk scheelt

eeeuh ??me dazzeld.... dit snap ik niet...

[hobbeldebobbel]

Johnny schreef op 04 januari 2004 @ 20:38:
Op die voorbeeld pagina krijg ik een error op regel 29, [i]which_array not defined, dat klopt wel, zodra je op de link "picture" klikt zou de picture array in which_array moeten worden geladen, maar dat gebeurt niet.

eeuh die error ben ik nog niet tegengekomen!.......

die which_array die staat in een functie... die aangeroepen wordt aan de hand van die link.
hier gebeurdt dat wel.... welke browser gebruik je?

Verder staan er gaan aanhalingstekens om de id's van de div's.

zou dat uitmaken? ze bestaan allemaal uit aaneengesloten dingen....

[ Voor 14% gewijzigd door hobbeldebobbel op 04-01-2004 21:55 ]

[crisp]

hobbeldebobbel schreef op 04 januari 2004 @ 21:52:
[...]


eeeuh ??me dazzeld.... dit snap ik niet...

eenmalig, onload bijvoorbeeld doe je zoiets:

JavaScript:

var combi = []; // global
function init()
{

    var letters = new Array('a','b','c','d','e','f','g','h', tot en met,'aa','ab');
    for (i=0; i < 50; i++)
    {
        for(j=0; j < letters.length;j++)
        {
            combi[letters[j]+i] = document.getElementById(letters[j]+i);
        }
    }
 
}

vervolgens kan je overal naar combi[a1].style.backgroundColor verwijzen, dus je clear functie wordt dan:

JavaScript:

function clear()
{

    var letters = new Array('a','b','c','d','e','f','g','h', tot en met,'aa','ab');
    for (i=0; i < 50; i++)
    {
        for(j=0; j < letters.length;j++)
        {
            combi[letters[j]+i].style.backgroundColor = '#dddddd';
        }
    }
 
}

[hobbeldebobbel]

André schreef op 04 januari 2004 @ 20:40:

HTML:

<style>
  .Veld DIV {
    background-color: #FFFFFF;
  }

  .VeldClear DIV {
    background-color: #DDDDDD;
  }
</style>

<div id="Bla" class="Veld">
  <div>A1</div><div>A2</div>
  <div>B1</div><div>B2</div>
  <div>C1</div><div>C2</div>
</div>

JavaScript:

document.getElementById("Bla").className = "VeldClear";

dit werkt wel voor de eerste keer, maar daarna, als de classname al reeds op .veldclear staat...... dan doet ie het niet...
ook veranderd ie de zwarte kleurtjes van de divs niet..... echt raar

op de link staat nu de clean functie zoals hierboven... see for your self...
voor de duidelijk heb ik deze stijlen gebruikt:
.Veld DIV {
background-color: red;
}

.VeldClear DIV {
background-color: #DDDDDD;
}

alls je de pagina laadt dan zijn alle divs onder het veld class rood.
Als ik daarna op clear druk dan veranderd ie ze mooi naar #DDDDDD
maar daarna, als ik bijvoorbeeld een aantal pixels gekleurd heb... en dan clean doe dan doet ie het niet....
want de class name is dan al reed veldClear

[ Voor 21% gewijzigd door hobbeldebobbel op 04-01-2004 22:09 ]

[hobbeldebobbel]

crisp schreef op 04 januari 2004 @ 22:02:
[...]

eenmalig, onload bijvoorbeeld doe je zoiets:

JavaScript:

var combi = []; // global
function init()
{

    var letters = new Array('a','b','c','d','e','f','g','h', tot en met,'aa','ab');
    for (i=0; i < 50; i++)
    {
        for(j=0; j < letters.length;j++)
        {
            combi[letters[j]+i] = document.getElementById(letters[j]+i);
        }
    }
 
}

nou duurt het laden even lang als dat het net duurde bij de functie aanroepen dus dan verplaats je het probleem, toch
de functie zelf, de clean functie is nu wel wat sneller... maar niet opzienbarend sneller

[crisp]

hobbeldebobbel schreef op 04 januari 2004 @ 22:02:
[...]
alls je de pagina laadt dan zijn alle divs onder het veld class rood.
Als ik daarna op clear druk dan veranderd ie ze mooi naar #DDDDDD
maar daarna, als ik bijvoorbeeld een aantal pixels gekleurd heb... en dan clean doe dan doet ie het niet....
want de class name is dan al reed veldClear

dat komt omdat het zetten van een styleproperty op de div zelf de class overruled.
En className switching is vele malen trager dan rechtstreeks de styleproperties wijzigen, dus eigenlijk is dat niet echt een optie denk ik...

hobbeldebobbel schreef op 04 januari 2004 @ 22:08:
[...]
nou duurt het laden even lang als dat het net duurde bij de functie aanroepen dus dan verplaats je het probleem, toch
de functie zelf, de clean functie is nu wel wat sneller... maar niet opzienbarend sneller

ja, maar die init() voer je maar 1x uit, en de andere functies mogelijk meerdere keren, dus je wint er wel op.

[ Voor 102% gewijzigd door crisp op 04-01-2004 22:13 ]

[hobbeldebobbel]

crisp schreef op 04 januari 2004 @ 22:08:
dat komt omdat het zetten van een styleproperty op de div zelf de class overruled.
En className switching is vele malen trager dan rechtstreeks de styleproperties wijzigen, dus eigenlijk is dat niet echt een optie denk ik...

misschien dat ik er toch maar voor ga kiezen om het in php mbv verschillende pagina's te includen...... want dit duurt wel heel lang om die 1400 div's te restylen..... hmmmm

thanx anywayz voor de moeite.....
als iemand nog een geniale ingeving heeft mbt het versnellen...

[crisp]

hobbeldebobbel schreef op 04 januari 2004 @ 22:11:
[...]


misschien dat ik er toch maar voor ga kiezen om het in php mbv verschillende pagina's te includen...... want dit duurt wel heel lang om die 1400 div's te restylen..... hmmmm

thanx anywayz voor de moeite.....
als iemand nog een geniale ingeving heeft mbt het versnellen...

1400 divjes bijwerken is gewoon erg zwaar, en ga je ook niet echt sneller krijgen vrees ik. Zoek eens op Pellepaint in W&G - Pelle heeft ooit een painter gemaakt en had met een grid van 60x60 al dusdanig problemen met de performance dat hij naar 30x30 is teruggeschakeld, en zelfs dan kon een floodfill op een traag system best 10 seconden duren...

[hobbeldebobbel]

ik zie het jah...hij heeft het inmiddels ook helemaal weggehaald dat pellepaint.. althans k kan het nergens meer vinden.

maar ik ga het denk ik maar in php doen is wat makkelijker