Aanpasbare div.. mogelijk?

[Verwijderd]

Ik zit een een vraagje, ik weet alleen niet of het mogelijk is.

ik heb dus een grote div genaamd "shell" die trekt alles naar het vertikale midden van de pagina. Daarin moeten nu twee andere divs komen. laat ons zeggen "divX" en "divY". Als "divX" er niet is moet "divY" de hele ruimte (die beschikbaar is door div "shell" ) innemen. Maar als "divX" aanwezig is moet "divY" laat ons zeggen 150px opschuiven naar rechts (en dus een kleinere inhoud verkrijgen).

Dit is mogelijk door 3 stijlen te gebruiken en 3 divs, maar nu wil ik het met 2 stijlen en 2 divs doen. Hoe krijg ik dit voor elkaar?

Al mijn pogingen tot nu toe hebben niets opgebracht, mijn twee divs glijden gewoon over elkaar en dat is niet precies wat ik moet hebben.

[Koeniepoenie]

Heb je misschien een kleine testcase online staan? Want je omschrijving is nogal vaag..

[FlorisB]

Met javascript moet dit sowieso mogelijk zijn..Heb je daar al aan gedacht?

offtopic:
Ow hoi Koen

[ Voor 21% gewijzigd door FlorisB op 27-06-2006 18:49 ]

[BasieP]

je hele div 'shell' doet zo te zien niet ter zake.

je wilt gewoon 2 divs, 1 die hele pagina is wanneer hij alleen is, en 1 die 150 px (oid) groot is en waar dan de 1ste div de rest groot is.

ik zou zeggen zoek eens uit hoe procenten werken in html/css, verder zal je idd even een testcase moeten maken willen ik je verder helpen.
ik verwacht dat je iets moet doen als

div1 float left;
div2 zonder float of width

[Chester]

Het zou inderdaad zoals FlorisB al zegt mogelijk moeten zijn met javascript. Neem even een kijkje op http://www.w3.org/TR/DOM-Level-2-Core/core.html. Je zult hier de meeste dingen vinden die je nodig hebt voor wat jij wilt.

[BtM909]

Chester schreef op dinsdag 27 juni 2006 @ 19:19:
Het zou inderdaad zoals FlorisB al zegt mogelijk moeten zijn met javascript. Neem even een kijkje op http://www.w3.org/TR/DOM-Level-2-Core/core.html. Je zult hier de meeste dingen vinden die je nodig hebt voor wat jij wilt.

Ehm, verwijzen naar een allesomvattend document gaat topicstarter niet helpen, dus laat dat voortaan gewoon achterwege, ok?

---

TS, je moet toch echt met code komen wat je tot nu toe al hebt geprobeerd, screenshots wat je wilt en waar je precies tegenaanloopt. We verwachten wel iets meer zelfinzet dan wat jij tot nu toe hebt getoond.

[Zoefff]

Ik heb even zitten pielen maar volgens mij is dit niet zo 1-2-3 mogelijk. Logisch zou klinken een linkerdiv met float:left; en dan rechts een div die zich automatisch in breedte aanpast aan de linkerdiv. Heeft de rechterdiv echter gewoon display:block; dan schuift 'ie altijd onder de linker. De content komt er dan wel rechts naast, maar het is toch niet helemaal wat de TS wil volgens mij.

Het werkt volgens mij wel als je de rechterdiv display:table; meegeeft, hij vouwt zich dan netjes naast de linkerdiv als die bestaat en klapt helemaal uit als die er niet is. Toch heb ik het gevoel dat dit enigzins misbruik is van de table value. Bovendien werkt het niet in IE. Maargoed, een voorbeeld @ http://crew.tweakers.net/Zoefff/test/auto_div_adapt.html

Een tweede mogelijkheid is natuurlijk het veranderen van de margin van divY op het moment dat blijkt dat divX aanwezig is, met Javascript:

JavaScript:

if(document.getElementById("divX")) {
    document.getElementById("divY").style.marginLeft = '160px';
} 

Zie voor een voorbeeld http://crew.tweakers.net/Zoefff/test/auto_div_adapt_js.html

[Technicality]

Zoefff schreef op dinsdag 27 juni 2006 @ 23:38:
Ik heb even zitten pielen maar volgens mij is dit niet zo 1-2-3 mogelijk. Logisch zou klinken een linkerdiv met float:left; en dan rechts een div die zich automatisch in breedte aanpast aan de linkerdiv. Heeft de rechterdiv echter gewoon display:block; dan schuift 'ie altijd onder de linker. De content komt er dan wel rechts naast, maar het is toch niet helemaal wat de TS wil volgens mij.

Het werkt volgens mij wel als je de rechterdiv display:table; meegeeft, hij vouwt zich dan netjes naast de linkerdiv als die bestaat en klapt helemaal uit als die er niet is. Toch heb ik het gevoel dat dit enigzins misbruik is van de table value. Bovendien werkt het niet in IE. Maargoed, een voorbeeld @ http://crew.tweakers.net/Zoefff/test/auto_div_adapt.html

Een tweede mogelijkheid is natuurlijk het veranderen van de margin van divY op het moment dat blijkt dat divX aanwezig is, met Javascript:

JavaScript:

if(document.getElementById("divX")) {
    document.getElementById("divY").style.marginLeft = '160px';
} 

Zie voor een voorbeeld http://zoefff.gotdns.com/got/auto_div_adapt_js.html

2e link is stuk (net deed-ie het nog).

over je code:
-kun je dan niet beter de style.width opvragen van de 2 andere divs?
-if (document.getElementById('divx') != undefined) is vziw netter om uit te zoeken of een element bestaat

Maar tegen dit probleem loop ik ook vaak als ik een 2-colomslayout gebruik, want margin-left is voor mijn gevoel niet een nette oplossing. Helaas is er binnen het huidig gangbare css geen betere oplossing

[Zoefff]

Vage boel, hij staat daar toch echt online hoor, maar doet het hier ook niet meer

Wat betreft die Javascript code, dat kan vast allemaal netter. Het was ook geenszins de bedoeling om de schoonheidsprijs te winnen, meer om te demonsteren dat het een optie is

Volgens mij doet if(document.getElementById('divX') != undefined) overigens precies hetzelfde als (document.getElementById('divX')), alleen is de laatste versie gewoon korter? Of vergis ik me dan

[Technicality]

Zoefff schreef op woensdag 28 juni 2006 @ 00:27:
Vage boel, hij staat daar toch echt online hoor, maar doet het hier ook niet meer

Wat betreft die Javascript code, dat kan vast allemaal netter. Het was ook geenszins de bedoeling om de schoonheidsprijs te winnen, meer om te demonsteren dat het een optie is

Volgens mij doet <code>if(document.getElementById('divX') != undefined)</code> overigens precies hetzelfde als <code>(document.getElementById('divX'))</code>, alleen is de laatste versie gewoon korter? Of vergis ik me dan

Het werkt vast wel hoor, maar deze kwam ik tegen toen ik zocht naar een JS variant van de isset(variabele) functie van php. Het voelt netter omdat het een échte true of false oplevert, maar het gedrag van die van jouw semi-onvoorspelbaar is

[ Voor 4% gewijzigd door Technicality op 28-06-2006 02:27 ]

[BalusC]

Zoefff schreef op woensdag 28 juni 2006 @ 00:27:
Volgens mij doet if(document.getElementById('divX') != undefined) overigens precies hetzelfde als (document.getElementById('divX')), alleen is de laatste versie gewoon korter? Of vergis ik me dan

Het doet inderdaad precies hetzelfde, maar je krijgt met jouw code een Javascript error in plaats van een nette afhandeling. Mocht je hieronder meer JS code hebben hangen, dan wordt deze niet uitgevoerd.

Installeer eens https://addons.mozilla.org/firefox/60/ en check de JS console (die tekstballon met een uitroepteken helemaal rechts). Handig voor JS foutendetectie

[ Voor 13% gewijzigd door BalusC op 28-06-2006 07:29 ]

[Zoefff]

Die toolbar gebruik ik natuurlijk al jaren

Ik wil best geloven dat het geen correcte Javascript is, maar ik krijg géén error in de JS console hoor. Het voorbeeld staat trouwens weer online en werkt weer, http://crew.tweakers.net/Zoefff/test/auto_div_adapt_js.html

[frankvdtillaart]

Edit

Dit is mogelijk door 3 stijlen te gebruiken en 3 divs, maar nu wil ik het met 2 stijlen en 2 divs doen. Hoe krijg ik dit voor elkaar?

Al mijn pogingen tot nu toe hebben niets opgebracht, mijn twee divs glijden gewoon over elkaar en dat is niet precies wat ik moet hebben.

Wil je 2x2 gebruiken omdat je huidige oplossing niet werkt? Of is onderstaande 3 div oplossing ook voldoende?

Oftewel: Waarop is die 2x2 gebaseerd?

/Edit

Ik heb in een stukje code dat ik zelf een tijd terug heb gemaakt gemerkt dat het uitmaakt of de div door internet explorer of door firefox word geopend ... browser-dependent CSS-en laden dus !
(Bij mijn oplossing dan.)

Gecombineerd zag het er ongeveer zo uit:

code:

BuitenDiv: width: 600px; left: 50%; margin-left: -300px      // dit centreert de pagina, met een breedte van 600px
BinnenDivLeft: width: 150px; left: 0;
BinnenDivRight: width: 100%; right: 0     // rechts attachen, en beschikbare ruimte opvullen.
   // Die 100% werkt in Internet Explorer en Firefox anders ... even experimenteren met position:absolute en position:relative

<div BuitenDiv>

if LEFT then <div BinnenDivLeft>

<div BinnenDivRight>
</div>   //BinnenDivRight

if LEFT then </div>   // BinnenDivLeft

</div>   // BuitenDiv

[ Voor 28% gewijzigd door frankvdtillaart op 28-06-2006 10:05 ]

[Verwijderd]

Dankjewel, ik heb het opgelost met JavaScript. Bedankt voor jullie hulp.