zIndex wil niet hoger

[hellfighter87]

Ik heb een stukje javascript om een bepaalde div layer de hoogste zIndex te geven.
Nou zie je hieronder de code, deze code moet werken in firefox en opera. i khou verder geen rekening met andere browsers
Het probleem is als volgt:

als ik begin met: var highestIndex = 0; dan doet hij het totdat rows[i].style.zIndex 10 is.
als ik begin met: var highestIndex = 10; dan doet hij het totdat rows[i].style.zIndex 100 is.

eigenlijk komt het eropneer dat de if[ if(rows[i].style.zIndex > highestIndex) ] wel werkt zolang de lengte van de getallen hetzelfde is maar zodra de ene een lengte van 2 heeft bijvoorbeeld en de ander maar van 1 dan werkt deze functie niet meer.

nou heb ik var highestIndex = 10000001; dus je kan ongeveer 98 miljoen keer iets van zIndex veranderen maar ik zie het het liefst opgelost

Misschien dat ik zelf wat over het hoofd gezien heb maar heb al getest met een hoop alerts etc. om te ontdekken dat dit het probleem is.

Ik heb ook de if functie vervangen door:
if(100 > 99) <- werkte zoals verwacht
if(parseFloat(rows[i].style.zIndex) >parseFloat( highestIndex)) <- nog steeds problemen als de linkse 1 teken langer is

Nou hoop ik dat iemand dit probleem voor mij kan oplossen.
In iedergeval alvast bedankt voor het lezen van mijn bericht

code:

var highestIndex = 10000001;
    function setZIndexes(window_id)
    {
        var count = 0;  
        var class;
        var rows = document.getElementsByTagName('div');
        for (i=0; i<rows.length; i++) 
        {   
            if((rows[i].id == 'window') )
            {
                if(rows[i].className.split(' ') == (window_id))
                {
                    class = rows[i];
                }
                else
                {
                    if(rows[i].style.zIndex > highestIndex)
                    {               
                        highestIndex = rows[i].style.zIndex;
                    }
                }   
            }                   
        }       
        class.style.zIndex = parseFloat(highestIndex) + 1;
        
        rebuildTaskBar(class.className);        
    }

[ Voor 5% gewijzigd door hellfighter87 op 29-12-2008 22:30 ]

[Pkunk]

Wat is precies de bedoeling van dat hele gedoe met id="window" en

JavaScript:

rows[i].className.split(' ') == (window_id)

want dat ziet er niet echt logisch uit. Als je split krijg je een aantal waarden in een array. Als je niet specifiek 1 van die waarden pakt (bv. .split(' ')[0]), waarom dan uberhaupt splitten? En wat is precies window_id?

[ Voor 4% gewijzigd door Pkunk op 29-12-2008 22:43 ]

[crisp]

'class' wordt zo te zien ueberhaupt nooit geset (mede door wat Timlog hierboven aangeeft), daarbij is het ook nog eens een reserved word. Het lijkt me sterk dat je hier geen error-meldingen van krijgt in je javascript console...

[hellfighter87]

Zover in firefox werkte hij zonder error codes, ergens vond ik het ook al vreemd dat die class gewoon pikte lol.
Ik zal ff wat dingen verder uitleggen, het idee is dat ik een soort van webbassed desktop ana het bouwen ben.

Ik heb een div die ziet er zo uit: <div id="window" class="windowExplorer'+fileManagers.length+'"
id = window om in css de goede style hiervoor te krijgen, Vervolgens is de class uniek door windowExplorer + de array lengte van de windowExplorer array, ik ben er heel zeker van dat die uniek is:P.
Daarna controleer ik of de div een id als window heeft, omdat ik alleen die divs wil hebben om te controleren.
Daarna check ik of de className van de divs die ik controleer gelijk is aan het window_id, zodat ik de div heb die de hoogste index id moet hebben.

var rows = document.getElementsByTagName('div'); <- hiermee pak ik alle divs zoals jullie al begrepen hadden waarscheinlijk

Verder heb ik even het verschil bekeken tussen: alert(rows[i].className.split(' ') + ' - ' + rows[i].className);
maar die doen klaarblijkelijk hetzelfde , sowieso weet ik zeker dat class wel gezet word anders zou het hele script nooit werken

ik heb de code wat aangepast maar maakt geen verschil
Nog steeds hetzelfde probleem

Mocht het nog neit duidelijk zijn kijk dan ff op: http://84.31.13.40/desk/desk.html?
Vervolgens op Applications -> file manager klikken, dan er 2 maken en die over elkaar heen plaatsen
Dit werkt btw alleen als je op de title balk van zoon window klikt. dus waar File manager staat.

Zodra je op de eene klikt die achter de andere staad meot die naar voren komen dat was het hele idee
Daar staat een werkende alpha versie . werkt alleen in firefox en opera ofcourse

code:

        var highestIndex = 0;
    function setZIndexes(window_id)
    {
        var count = 0;  
        var tempClass;
        var rows = document.getElementsByTagName('div');
        for (i=0; i<rows.length; i++) 
        {   
            if((rows[i].id == 'window') )
            {
                //alert(rows[i].className + ' ' + rows[i].className);
                if(rows[i].className == (window_id))
                {
                    tempClass = rows[i];
                }
                else
                {
                    if(rows[i].style.zIndex > highestIndex)
                    {               
                        highestIndex = rows[i].style.zIndex;
                    }
                }   
            }                   
        }       
        tempClass.style.zIndex = parseFloat(highestIndex) + 1;
        
        rebuildTaskBar(tempClass.className);        
    }

[ Voor 7% gewijzigd door hellfighter87 op 30-12-2008 08:48 ]

[Pkunk]

hellfighter87 schreef op dinsdag 30 december 2008 @ 08:37:
Zover in firefox werkte hij zonder error codes, ergens vond ik het ook al vreemd dat die class gewoon pikte lol.
Ik zal ff wat dingen verder uitleggen, het idee is dat ik een soort van webbassed desktop ana het bouwen ben.

Ik heb een div die ziet er zo uit: <div id="window" class="windowExplorer'+fileManagers.length+'"
id = window om in css de goede style hiervoor te krijgen, Vervolgens is de class uniek door windowExplorer + de array lengte van de windowExplorer array, ik ben er heel zeker van dat die uniek is:P.

Volgens mij ben je in de war. Een id moet juist uniek zijn.

Daarna controleer ik of de div een id als window heeft, omdat ik alleen die divs wil hebben om te controleren.

zie hierboven.

Daarna check ik of de className van de divs die ik controleer gelijk is aan het window_id, zodat ik de div heb die de hoogste index id moet hebben.

Waarom geef je niet gewoon het element wat je wil hebben mee aan de functie die je aanroept? Dat scheelt een hoop gepuzzel.

var rows = document.getElementsByTagName('div'); <- hiermee pak ik alle divs zoals jullie al begrepen hadden waarscheinlijk

Verder heb ik even het verschil bekeken tussen: alert(rows[i].className.split(' ') + ' - ' + rows[i].className);
maar die doen klaarblijkelijk hetzelfde , sowieso weet ik zeker dat class wel gezet word anders zou het hele script nooit werken

Het is mooi dat het werkt, maar snap je eigenlijk wel wat doe code doet? Want zoals ik hierboven al zeg, je doet helemaal niets met de array die de split functie terug geeft. En daarbij zie ik helemaal nergens spaties in je classnames, dus die split zal nieteens wat doen.

ik heb de code wat aangepast maar maakt geen verschil

Mocht het nog neit duidelijk zijn kijk dan ff op: http://84.31.13.40/desk/desk.html?
Vervolgens op Applications -> file manager klikken, dan er 2 maken en die over elkaar heen plaatsen
Dit werkt btw alleen als je op de title balk van zoon window klikt. dus waar File manager staat.

Zodra je op de eene klikt die achter de andere staad meot die naar voren komen dat was het hele idee
Daar staat een werkende alpha versie . werkt alleen in firefox en opera ofcourse

Ziet er leuk uit En het werkt bij mij nu overigens prima.

Anyway,

Wat heb je precies gedaan om het probleem te isoleren? Een beetje random alertjes in je code gooien en hopen dat er iets logisch langs komt is niet bepaald de beste manier om het aan te pakken.

Het punt is dat dit echt niet zo'n lastig probleem hoeft te zijn. Er zitten alleen een aantal rare dingen in je code waardoor je toch een beetje het idee wekt dat je niet precies weet waar je mee bezig bent. Probeer eerst eens te begrijpen wat de code doet, want zo'n functie bouwen hoeft helemaal niet zo ingewikkeld te zijn.

Nog een andere tip:
Ga niet je plaatjes resizen met css. Je bent nu plaatjes van 1000x1000 aan het laden om ze vervolgens als 50x50 te tonen. Dat is (1000x1000) / (50x50) = 400 keer zoveel als nodig. Per plaatjes. Beetje zonde van de brandbreedte..

[ Voor 3% gewijzigd door Pkunk op 30-12-2008 10:18 ]

[hellfighter87]

humh over de id's en classes.
Normaal zou ik inderdaad het id unike maken maar die heb ik gebruik voor mijn css en omdat meerdere windows er hetzelfde uit zullen zien hebben die dus ook hetzelfde id
Daarom heb ik het maar omgedraaid en de classname uniek gemaakt. niet dat het veel verschil maakt maar had geen zin om mijn css te verbouwe

Opzich zou ik ook wel het element mee kunnen geven, wat opzich vrij veel logischer klinkt lol maar ik moet toch door die for loop heen hobbel dus een extra ifje zald an wel neit zo heel veel uitmaken

Ik ben vooral met allerts bezig geweest om het te debuggen lol. ik heb ook firebug geinstalleerd op mijn firefox zodat ik kan zienw at voor errors die geeft.
Verder heb ik de if vervangen door: if(10 > 9) inplaats van if(rows[i].style.zIndex > highestIndex) en dat werkte dan weer wel.
Dus toen bedacht ik dat hij die rows[i].style.zIndex of highestIndex neit als getal maar als string zou kunnen zien dus heb ik er dit van gemaakt: if(parseFloat(rows[i].style.zIndex) > parseFloat(highestIndex)) maar dat gaf nogsteeds hetzelfde probleem dat als rows[i].style.zIndex 1 teken langer is als highestIndex dat dan de if niet meer werkt

Die plaatjes komen nog wel dat was meer om te testen of het daadwerkelijk werkte

Nou heb ik wel een oplossing gevonden voor mijn probleem.
Eingelijk zat ik mijn eigen tekst door te lezen en had zoeits van de lengte verschild dus altijd als het probleem opduikt.

En toen kwam ik met deze oplossing:
if((rows[i].style.zIndex > highestIndex) || (rows[i].style.zIndex.length > highestIndex.length))
inplaats van de huidige:
if(rows[i].style.zIndex > highestIndex)

Het is neit echt een fix meer een work around.
Toch wil ik nog steeds graag weten waarom dit if(rows[i].style.zIndex > highestIndex) wel werkt als het 9 > 8 is maar niet zodra het 10 > 9 is

De geupdate code:

code:

var highestIndex = 0;
    function setZIndexes(window_id)
    {
        var tempClass;
        var rows = document.getElementsByTagName('div');    //geeft array terug met alle divs
        for (i=0; i<rows.length; i++)   //foreach door de array heen
        {   
            if(rows[i].id == 'window')  //als het id een window is
            {
                //alert(rows[i].className + ' ' + rows[i].className);
                if(rows[i].className == window_id)  //als de classname gelijk is aan het window_id dan hebben we het object wat we zoeken
                {
                    tempClass = rows[i];
                }
                else    //als het niet het object is wat we zoeken dan kijken we wat voor zIndex die heeft
                {
                    if((rows[i].style.zIndex > highestIndex) || (rows[i].style.zIndex.length > highestIndex.length))    //als de zIndex van het object hoger is als het huidige index nummer
                    {               
                        highestIndex = rows[i].style.zIndex;
                    }
                }   
            }                   
        }
                
        tempClass.style.zIndex = parseFloat(highestIndex) + 1;  //zet de zIndex van het object 1 hoger als het hoogste zIndex nummer        
        rebuildTaskBar(tempClass.className);        //herbouw de taskbar
    }

[ Voor 41% gewijzigd door hellfighter87 op 30-12-2008 11:32 ]

[crisp]

'10' < '9'

[Borizz]

Lees de specificaties er eens op na wat betreft id's en classnames, een id moet uniek zijn (als in mag maar 1 keer voorkomen in je HTML document). Een classname hoeft niet uniek te zijn.. Zie ook de specificaties Element identifiers: the id and class attributes .