Layer on top

[rickiii]

Ik heb een popup geimplementeerd van http://openwebware.com , maar jammer genoeg wordt deze niet boven alle images in mijn pagina getoond. De popup schuift achter deze images langs.

Ik heb geen (of weinig) invloed op de orginele code van de pagina, dus wil ik dit graag oplossen in de implementatie van de popup.

Ik heb geprobeerd een 'z-index' toe te voeden aan de <div>, maar kreeg niet het resultaat wat ik wilde. Ik weet ook niet helemaal hoe die css-style werkt.

Hoe breng ik de popup helemaal vooraan, boven alle elementen in de pagina?

Dit voorspelt niet veel goeds.
[CSS layer] select box altijd in front

Heeft iemand wellicht tóch een oplossing?

[ Voor 10% gewijzigd door rickiii op 07-06-2007 17:37 ]

[soulrider]

als het via een div of span is zorgen dat ie als laatste in je html-code staat.
(of zorg ervoor dat ie als laatste element staat in je html-code)
- met ev. afmetingen op 100% van de te verbergen andere html-elementen (via css) als ie een deel van de pagina moet afdekken -

en die van hidden naar visible brengen bij pop-up.
(en nadien terug naar hidden)

(niet gekeken naar de code ofzo)

omdat ie laatst staat komt ie over de rest te staan

(je eerste link is wel merkbaar traag )

maar als je hun voorbeeld code zit merk je ook dat hun popup div pas helemaal achteraan de html-code staat en bij onload eerst wordt verborgen

[ Voor 32% gewijzigd door soulrider op 07-06-2007 17:44 ]

[rickiii]

soulrider schreef op donderdag 07 juni 2007 @ 17:36:
als het via een div of span is zorgen dat ie als laatste in je html-code staat.
(of zorg ervoor dat ie als laatste element staat in je html-code)
met afmetingen op 100% van de te verbergen andere html-elementen (via css)
en die van hidden naar visible brengen bij pop-up.
(en nadien terug naar hidden)

(niet gekeken naar de code ofzo)

omdat ie laatst staat komt ie over de rest te staan

Ik zal het even illusteren met een screenshot


Waarbij de popup een layer is, dat verplaatst kan worden.

[soulrider]

dan zit ie niet voor images maar voor droplists en dan heb je het probleem zoals vermeld in TS
(de 2de link die je geeft)

best daar ook de oplossing even bekijken:
daar wordt gespeeld met layers - waarbij de layer met dergelijke controls achteruit wordt geschoven bij pop-up

en hun eigen voorbeeld pagina

http://openwebware.com/products/openpopups/demo.shtml

[ Voor 14% gewijzigd door soulrider op 07-06-2007 17:47 ]

[BlackWhizz]

bij de css wel z-index meeggeven?

[rickiii]

soulrider schreef op donderdag 07 juni 2007 @ 17:45:
dan zit ie niet voor images maar voor droplists en dan heb je het probleem zoals vermeld in TS
(de 2de link die je geeft)

Ok, welliswaar niet echt een images, maar ook niet alleen een dropdown-list.
"Balance Summary" is een tab (div) waar ik geen invloed op heb. Daarin zitten ook images die het de schuine rand geven.

best daar ook de oplossing even bekijken:
daar wordt gespeeld met layers - waarbij de layer met dergelijke controls achteruit wordt geschoven bij pop-up

Ik las in die oplossing dat een geheel form op 'hidden' gezet moet worden. Dat lijkt mij geen optie, aangezien je er geleidelijk overheen wil kunnen schuiven

[rickiii]

shoarmaboer21 schreef op donderdag 07 juni 2007 @ 17:49:
bij de css wel z-index meeggeven?

Bij welk element? En welke waarde moet die volgens jou hebben?
Ik heb meerdere css-files. De main css-file kan ik niet aanpassen.
Die van de popup natuurlijk wel.

[Padschild]

De hoofd div, of in ieder geval de hoofd-tag van het popup scherm zul je een grote z-index waarde mee moeten geven via CSS

[Boelie-Boelie]

Misschien kun je wat met Windowed Controls Hider? (meer suggesties via de zoektermen ' "z-index" combobox')

[rickiii]

Boelie-Boelie schreef op donderdag 07 juni 2007 @ 22:11:
Misschien kun je wat met Windowed Controls Hider? (meer suggesties via de zoektermen ' "z-index" combobox')

Bedankt, dit kan wel eens een handig script zijn.
Dit werkt wel met een stilstaande layer, maar ik krijg het niet voor elkaar met de popup van openwebware waarvan ik gebruik maak.

Dit is een voorbeeld van de pagina die ik heb.
Dit is een voorbeeld inclusief het genoemde script van Boelie-Boelie.

Dit werkt wél in Firefox2, maar niet in IE6
Overigens hoef ik in Firefox geen script te gebruiken, maar enkel z-index

[ Voor 18% gewijzigd door rickiii op 08-06-2007 14:22 . Reden: Voorbeeld inclusief script toegevoegd ]

[NetForce1]

Een veelgruikte hack om popups over comboboxes te krijgen in IE is een iframe met dezelfde grootte als je popup achter je popup plaatsen.

[rickiii]

NetForce1 schreef op vrijdag 08 juni 2007 @ 14:30:
Een veelgruikte hack om popups over comboboxes te krijgen in IE is een iframe met dezelfde grootte als je popup achter je popup plaatsen.

De popup ondersteunt volgens mij geen iframe.

[ Voor 15% gewijzigd door rickiii op 08-06-2007 14:53 ]

[NetForce1]

Als je zelf de popup toont dan kun je er toch ook wel een iframe achter plaatsen?

[rickiii]

NetForce1 schreef op vrijdag 08 juni 2007 @ 14:58:
Als je zelf de popup toont dan kun je er toch ook wel een iframe achter plaatsen?

Heb je het voorbeeld wel gezien?

Ik heb het volgende geprobeerd, maar dat veroorzaakt javascript fouten.

code:

<iframe>
    <div id="popup">
        text
    </div>
</iframe>

Het onderstaande zorgt ervoor dat slechts een deel van de inhoud in de popup een iframe wordt.

code:

<div id="popup">
    <iframe>
        text
    </iframe>
</div>

De popup wordt opgebouwd in javascript (zoals je kunt zien in het voorbeeld) en dat gooit roet in het eten.

[ Voor 3% gewijzigd door rickiii op 08-06-2007 15:11 ]

[NetForce1]

Waarschijnlijk zul wel wat moeten veranderen in de lib die je gebruikt, heb nu geen tijd/zin om daar diep in te duiken. Het idee is dat je bij het tonen van de popup een iframe maakt die dezelfde afmetingen en positie heeft als je popup, alleen een lagere z-index. De iframe moet dus niet in je popup hierarchy, maar ernaast.
Het zou wel misschien wel kunnen werken met een iframe binnen je popup-div, maar dan valt de titelbalk van je popup nog steeds onder de combo Je moet dan uiteraard de iframe wel 100% hoog en breedt maken.

[KabouterSuper]

Zie ook hier (GOT) voor een soortgelijke discussie. Hier wordt de iframe oplossing afgedaan als een ranzige truc (daar was ik toen al niet mee eens ).

[NetForce1]

Het is zeker wel een ranzige truuk, maar het alternatief is op zijn minst net zo ranzig. Je kunt overigens ook overstappen op IE7...

[ Voor 3% gewijzigd door NetForce1 op 08-06-2007 15:48 . Reden: het ranzige alternatief is dus niet het overstappen op IE7 :P ]

[soulrider]

is dit hetgene je wenst ?


want het enigste dat ik heb moeten doen (let op IE7) is je z-indexen weg halen en hij verschijnt netjes boven alle elemnten

[rickiii]

NetForce1 schreef op vrijdag 08 juni 2007 @ 15:47:
Het is zeker wel een ranzige truuk, maar het alternatief is op zijn minst net zo ranzig. Je kunt overigens ook overstappen op IE7...

Overstappen op IE7 is voorlopig nog niet aan de orde (helaas)

Overigens heb ik altijd al verwacht dat ik iets in de JS-lib moest aanpassen, maar daarin zou ik niet weten waar ik moest beginnen. Aan welk object moet ik die iframe toevoegen? Ik heb al geprobeerd om in de javascript met z-index te werken, maar het 'table' element dat daarin gebruikt wordt heeft geen z-index.

[rickiii]

soulrider schreef op vrijdag 08 juni 2007 @ 15:50:
is dit hetgene je wenst ?
[afbeelding]

want het enigste dat ik heb moeten doen (let op IE7) is je z-indexen weg halen en hij verschijnt netjes boven alle elemnten

Ja dat is precies wat ik wil!
Alleen werkt het bij jou ook met IE6?

[soulrider]

euhm je kan maar 1 IE versie op een pc hebben
en ik heb IE7 en niet direct een IE6 ter beschikking
(ben nu wel virtual pc aan installeren zodat ik de dev.-image die microsoft ter beschikking stelt met een win xp en IE6 kan gebruiken - maar dat duurt nog effe)

test ev. zelf: haal in al je style tags de "z-index" weg ...

(die image van ms stond al op de pc hoor - was al nodig voor mezelve, een site die het wel doet in ff en ie7 maar niet in ie6)

de z-index-truc is in ieder geval eentje die werkt in ie7 - mocht dat ook een doel-browser zijn

[ Voor 26% gewijzigd door soulrider op 08-06-2007 16:36 ]

[rickiii]

soulrider schreef op vrijdag 08 juni 2007 @ 16:19:
euhm je kan maar 1 IE versie op een pc hebben

Dat besefte ik me ook pas na het posten, maar liet het staan voor het geval je twee computers hebt.

en ik heb IE7 en niet direct een IE6 ter beschikking

Niet dus.

(ben nu wel virtual pc aan installeren zodat ik de dev.-image die microsoft ter beschikking stelt met een win xp en IE6 kan gebruiken - maar dat duurt nog effe)
test ev. zelf: haal in al je style tags de "z-index" weg ...

Laat dat downloaden maar zitten. Ik heb het getest en werkt hier niet. Ik hoopte dat jij het op een slimmere manier gedaan had

[soulrider]

in IE6 komt die pick-list er idd nog voor.
zal met 1 der boven vermelde trucén dan toch moeten gaan.

probeer mss deze avond nog eens - pc van thuis heeft nog wel IE6

[Boelie-Boelie]

Nogal offtopic, maar wellicht handig:

soulrider schreef op vrijdag 08 juni 2007 @ 16:19:
euhm je kan maar 1 IE versie op een pc hebben

Install multiple versions of IE on your PC

[soulrider]

Boelie-Boelie schreef op zondag 10 juni 2007 @ 02:16:
Nogal offtopic, maar wellicht handig:

[...]

Install multiple versions of IE on your PC

effe reageren, als je mijn eigen post goed had gelezen, begreep je wrs dat ik bedoelde dat microsoft dit _standaard_ niet toelaat en dat al de rest er maar een hack op is waardoor het niet altijd gaat zoals het hoort. en mits het mijn werk-pc is ga ik er geen hacks of andere prul op los laten.

ook had je dan al gezien dat ik de oplossing die microsoft zelve aanbied voor webontwikkelaars ging toepassen.
namelijk het installeren van het gratis Virtual pc pakket en de image die MS aanbied met een winXP sp2 met daarop nog IE6. (dit is wel toegestaan op die computer van't werk)
(net zoals ze ook een image aanbied met IE7 voor de pre-winXP-ontwikkelaars)

mss handig voor de rest die link, maar niet voor mij.

[rickiii]

Om even terug te komen op het probleem.
Weet iemand misschien een goede javascript library voor een popup window die wél over een form-listbox getoond wordt?

[Verwijderd]

Als ik je probleem lees zonder je bestanden te bekijken zou ik naar de volgende dingen kijken:

1. in IE6 word het CSS model op veel fronten verkeerd implementeerd, één van de meest bekende gevallen is het box-model waar je vast vaker van gehoord hebt. Een tijdje terug heb ik dit zelf ondervonden bij het maken van een uitrolmenu. Het lijkt alsof IE6 geen standaard z-index toekent waar andere browsers dit wel doen (FF). Ik heb dit toen opgelost door z-indexen toe te kennen aan het globale div-element en html element. Probeer op alle elementen een waarde van 0 of -1 en op je popup een hogere waarde.

2. Absolute divs worden uit de normale "Flow" van de elementen gehaald mochten zij dus niet in een nadrukkelijk relatief benoemde div genest zijn dan zal je absolute div dus ook geen eigenschappen overerven.

3. Gewoon "ff checken", html word van boven naar onder gelezen en voor absolute divs maakt het dus niet uit of ze boven of onder in de code worden geplaatst, ik raad aan om ze onderaan in de html te plaatsen zodat ze ook boven andere divs komen.

4. Probeer je javascript eens uit te voeren aan het eind van je html pagina.

Ik hoop dat dit helpt.

[Edit]

Schoot me net te binnen dat de declaratie van je document type ook belangrijk is hoe CSS word geimplementeerd, naar ervaring en persoonlijke voorkeur prefereer ik XHTML Strict zo heb je met minst last van "quirks".

[ Voor 8% gewijzigd door Verwijderd op 11-06-2007 14:06 ]

[rickiii]

Verwijderd schreef op maandag 11 juni 2007 @ 13:58:
Als ik je probleem lees zonder je bestanden te bekijken zou ik naar de volgende dingen kijken:
.........

Ik vind leuk geprobeerd, maar op deze manier is het echt giswerk. Bijna alle tips heb ik inmiddels geprobeerd, maar elk element een z-index meegeven lijkt mij nutteloos aangezien er was geconstateerd dat IE6 een bug bevat waardoor deze de z-index negeer bij listboxen. Daarnaast worden bij mij de elementen opgebouwd d.m.v. een javascript, waardoor ik de controle hierover kwijt ben.

Toch is het gelukt om met behulp van een WCH script iets voor elkaar te krijgen bij een stilstaande layer, maar ik heb moeite om te begrijpen wat daar gebeurt en waarom dit niet werkt bij de popup-window. Misschien dat iemand kan zien wat ik verkeerd doe met het implementeren van het script in mijn voorbeeld?

[ Voor 39% gewijzigd door rickiii op 12-06-2007 11:30 ]

[Verwijderd]

Boelie-Boelie schreef op zondag 10 juni 2007 @ 02:16:
Nogal offtopic, maar wellicht handig:

[...]

Install multiple versions of IE on your PC

nog meer offtopic, maar ook heel handig zonder het installeren van multiple versions: http://ipinfo.info/netrenderer/

[rickiii]

Ik heb het opgelost met behulp van deze library
http://www.macridesweb.com/oltest/