[JS] float toepassen, werkt niet in FF*

[storeman]

Ik ben een soort menubalk aan het maken waarin de icoontjes zoals normaal uitgelijnt worden aan de rechter kant. Zal even schetsen wat ik wil bereiken:

code:

 ____________________________________________________
|        TITLEBAR                      ____________  |
|                                     |            | |
|                                     |  ICONS     | |
|                                     |____________| |
|____________________________________________________|

Nu dacht ik, die titlebar kan ik gewoon bouwen van een divje
Definieren: Breedte en hoogte

Dan appenden aan een container (eerste object in de container) (mbv Javascript)
Vervolgens nog een element creeeren met createElement
Weer wat dingetjes definieren mbv javascript .style (breedte is noodzakelijk)

Met styleFloat = "right"; wil ik zorgen dat icons aan de rechterkant in de DIV belant. Voor IE en opera gaat dit goed, echter firefox blijft hem gewoon aan de linker kant plaatsen.

Waar heeft dit mee te maken (ik heb doc-type al op strict gezet).

Mijn vraag: Hoe krijg ik de iconenen in FireFox ook aan de rechter kant?

JavaScript:

    this.oTitlebar = document.createElement('div'); 
    var i = this.oTitlebar; 
     
    i.id                        = this.id + "Titlebar"; 
    i.style.left                = "0px"; 
    i.style.top                 = "0px"; 
    i.style.width               = "100%"; 
    i.style.height              = this.titlebarHeight + "px"; 
    i.style.position            = "relative"; 
    i.style.display             = "block"; 
    i.style.overflow            = "hidden"; 
    i.style.backgroundImage     = "url("+this.titlebarBackground+")"; 
    i.style.backgroundRepeat    = "repeat-x"; 
     
    this.oContainer.appendChild(this.oTitlebar); 
     

     
    this.oTitlebarIcons = document.createElement('div'); 
    var i = this.oTitlebarIcons; 
     
    i.style.width               = "80px"; 
    i.style.styleFloat          = "right"; 
    i.style.fontWeight          = "bold"; 
    i.style.lineHeight          = this.titlebarHeight + "px"; 
    i.style.paddingTop          = "1px"; 
    i.style.paddingLeft         = "5px"; 
    i.style.position            = "relative"; 
    i.style.display             = "block"; 
    i.style.fontFamily          = '"Courier New", Courier, monospace'; 
    i.style.fontSize            = '12px'; 
    i.innerHTML                 = '[-][X]'; 
    i.style.backgroundColor           = 'transparent'; 
     
    this.oTitlebar.appendChild(this.oTitlebarIcons);

[ Voor 32% gewijzigd door storeman op 15-05-2006 12:52 ]

[Verwijderd]

styleFloat? gewoon float zou ik zeggen...

[storeman]

Verwijderd schreef op maandag 15 mei 2006 @ 12:31:
styleFloat? gewoon float zou ik zeggen...

Nope, dat heb ik al uit andere topics gevist. Met float werkt het in geen enkele browser. styleFloat geeft wel tekenen van leven in IE en O

[BasieP]

zie mophor

verder heb je een typvout hierzo:

code:

i.backgourndColor           = 'tranparent';

dat moet zijn

code:

i.style.backgroundColor = 'transparent';

ow en verder:
je titel zegt 'behalve in ff'
ik geloof daar geen reet van eerlijk gezegt, en ik durf te wedden dat je het alleen onder IE getest heb..
Let een klein beetje op je taal, wil je?

storeman schreef op maandag 15 mei 2006 @ 12:32:
[...]


Nope, dat heb ik al uit andere topics gevist. Met float werkt het in geen enkele browser. styleFloat geeft wel tekenen van leven in IE en O

* BasieP gelooft dat niet
ff testcase bouwen

[ Voor 50% gewijzigd door BtM909 op 15-05-2006 12:45 ]

[storeman]

BasieP schreef op maandag 15 mei 2006 @ 12:34:
je titel zegt 'behalve in ff'
ik geloof daar geen reet van eerlijk gezegt, en ik durf te wedden dat je het alleen onder IE getest heb..


[...]

* BasieP gelooft dat niet
ff testcase bouwen

Ik heb het nu openstaan in FF 1.5, IE6 en Opera 8.54, en echt, IE en O doen het WEL.

En echt, style in Javascript werkt NIET, dat was het eerste wat ik probeerde, maar kreeg ik nooit resultaat. mbv styleFloat doet ie het wel, gebruik natuurlijk wel javascript! in normaal css is het natuurlijk float.

Typo's aangepast in startpost

[BasieP]

mm ik zie het probleem idd, .styleFloat werkt idd beter dan .float

echter, wat veel mooier is natuurlijk 2 classes maken in css, en gewoon de .className aanpassen, dat scheelt hoop JS

edit:
hoewel, dit gaat in mijn testcase ook niet zo lekker in FF...
als je een aantal blockjes neerzet, en je veranderd de className van de eerste gaat ie fout, als je van het laatste blokje doet gaat het goed

[ Voor 39% gewijzigd door BasieP op 15-05-2006 12:44 ]

[storeman]

BasieP schreef op maandag 15 mei 2006 @ 12:41:
echter, wat veel mooier is natuurlijk 2 classes maken in css, en gewoon de .className aanpassen, dat scheelt hoop JS

met classes gaan werken via CSS kan natuurlijk wel, maar ik wil wat standaard objecten maken, en sommige dingen zijn zo basic, die moeten eigenlijk niet veranderd kunnen worden omdat je dan net zo goed het hele object kunt weggooien. Daarbij moet het eenvoudig gebruikt kunnen worden, zonder dat er allerlei extra css gebruikt moet worden.

Ik zal later, als mijn projectje 'af' is, een topic openen hier, hopende op comments van mede-tweakers. Alles uitgebreid voorzien van commentaar. Maar dat later.

[remcotolsma]

In Firefox moet dat geloof ik zo:

JavaScript:

i.style.cssFloat          = "right"; 

[ Voor 10% gewijzigd door remcotolsma op 15-05-2006 12:59 ]

[storeman]

remcotolsma schreef op maandag 15 mei 2006 @ 12:59:
In Firefox moet dat geloof ik zo:

JavaScript:

i.style.cssFloat          = "right"; 

YES! You're my hero.

Was een beetje aan het neuzen op mozilla devWeb, maar daar wordt wel styleFloat genoemd, verder geen comments erbij.

Dit werkt iig! Thnx!

[crisp]

de reden is uiteraard dat 'float' een reserved word is in javascript

[storeman]

crisp schreef op maandag 15 mei 2006 @ 13:11:
de reden is uiteraard dat 'float' een reserved word is in javascript

Dat is natuurlijk de reden voor float, maar waarom dan geen style.styleFloat gebruiken zoals IE en O

[crisp]

storeman schreef op maandag 15 mei 2006 @ 13:13:
[...]


Dat is natuurlijk de reden voor float, maar waarom dan geen style.styleFloat gebruiken zoals IE en O

Omdat cssFloat gedefinieerd is in de CSS DOM en styleFloat niet?

[killercow]

Daarom is het altijd handig om even door de javascript properties van een object te neuzen in de DOM inspector van FF, had je gewoon onder het kopje style de argument cssFloat gezien.

Stappen:
Op crtl-shirt-i rammen, search, select element by click.
click op je element,
Kies boven in rechten plane, "javascript object"
Scroll naar style, druk op plusje
Zoek je argument.