javascript fixed toolbar in html

[orf]

Hallo,

Met javascript probeer ik een toolbar te bouwen die altijd in beeld blijft. (zoals bijvoorbeeld de googletoolbar in IE)

Mijn werkwijze was als volgt:

- Haal de html uit de body op
- Bouw een div en geef die een absolute positie als toolbar
- Bouw een div met een overflow:auto waarin je de html van de body zet
- Geef de tweede div nieuwe properties on resize

Met het CMS wordt dan dit javascriptje mee gestuurd als iemand ingelogd is in het systeem.
Bij een hoop websites gaat dit goed, maar het gaat verkeerd wanneer je bijvoorbeeld een background image hebt voor de body, dan verspringt deze. Ook kan ik me problemen voorstellen met andere javascript al in de pagina.

Een andere oplossing is om dynamisch een frameset te genereren, met de toolbar en de oorspronkelijke pagina. Maar ook dat geeft problemen als de pagina gebruik maakt van het window object e.d.

Heeft iemand wel eens zoiets gebouwd of is er een slimme manier om een toolbar fixed bovenaan te zetten?

[BasieP]

nu kan ik zonder code (demo site?) niet zien hoe en wat jij precies bedoelt, want van je verhaal snap ik niet zoveel, maar je hebt in css de property 'display' waaraan je de waarde 'fixed' mee kan geven..
dan blijft een element (divje waarschijnlijk) gewoon altijd in beeld. Ook als je scrolled.

is dat niet precies wat jij wil hebben? je hebt dan helemaal geen JS nodig

[ Voor 4% gewijzigd door BasieP op 08-12-2006 17:27 ]

[orf]

fixed werkt niet in IE.
Ik heb niets online staan, maar wat ik wil is eigenlijk heel simpel:
Als iemand de juiste rechten heeft, dan doet het CMS in elke pagina een aanroep naar een JS bestand.

In dat JS bestand wil ik een toolbar bouwen zoals de Google toolbar. Probleem is dat ik niet zomaar alle templates van pagina's aan kan passen.

[Alex)]

http://tagsoup.com/cookbook/css/fixed/

[orf]

Die hack heb ik weleens voorbij zien komen en mijn opmerking over de ondersteuning was niet helemaal terecht.

Dit vergt een aanpassing van de html. Dat kan simpelweg niet. Het zijn websites die al klaar zijn waar dynamisch een toolbar aan toegevoegd moet worden. De css van zo'n website aanpassen is géén optie.

[Alex)]

Je kunt ook dynamisch CSS invoeren hoor

[orf]

Ook dat snap ik. Maar lees alsjeblieft even de probleemstelling zonder op één puntje te focussen. Dit is niet mijn eerste hello world script.

Het probleem waar ik tegen aan loop is dat als je dynamisch dingen gaat aanpassen je wijzigingen krijgt.

Nog even mijn werkwijze:

innerhtml van de body in een div zetten met een overflow. Deze div absoluut positioneren, met daarboven de toolbar. Dat werkt prima, de div scrolled, de toolbar blijft op z'n plek staan. Als je echter een website hebt gebouwd met een background-image die gecentreerd staat, dan klopt dat niet meer met dit nieuwe model. De background image staat precies in het midden van het browserscherm, alles wat nu gecentreerd in de div staat, staat echter niet precies in het midden van het browserscherm. In dit geval komt dat door een scrollbar die nu deel uit maakt van de content.

Dat is niet hét probleem, want dat kan ik eenvoudig oplossen door de background image op de div te zetten ipv op de body. Ik wil alleen geen specifieke gevallen oplossen; ik wil een constructieve manier om dynamisch een toolbar toe te voegen aan een website.

[Alex)]

Wat dacht je van de toolbar invoeren en vervolgens een padding-top aan je body toevoegen? Als je het goed aanpakt heeft je toolbar nergens last van terwijl de rest van de site het opgegeven aantal pixels omlaag schuift.