[OO JS && CSS] Relative div resized niet mee met parent

[SchizoDuckie]

Ik ben sinds vandaag (ja, sinds vandaag pas, schop me ) eindelijk bezig met het in OO klussen in PHP & JS, en ben bezig aan een standaard draggable JS window object voor m'n content.

In samenwerking met beehive2 is dit een eitje, maar ik zit met een probleempje:

• er wordt eerst een window object gemaakt
• daarin een een title object
• en ook een content object


Allebei de geneste objecten krijgen zijn position: relative, dus ze zouden netjes mee moeten schalen als de container schaalt, alleen dat werkt dus niet. Het titel object lijkt een vaste width te behouden?

Ik heb al verschillende dingen geprobeerd, van het toevoegen / verwijderen van een vaste width=100% in css, tot het opgeven van een grootte in de code nadat de content geschreven wordt, maar ook dat mag niet baten...

Nog vreemder is, dat op http://www.schizofreend.nl/ , waar ik exact hetzelfde doe, maar dan niet in OO JS, ditzelfde wel goed gaat

Is er iemand die me kan vertellen wat ik fout doe?

m'n is hier te vinden: http://www.schizofreend.nl/windowtest/

[ Voor 23% gewijzigd door SchizoDuckie op 05-01-2004 01:18 ]

[Verwijderd]

code:

width: 300;
height: 200;

Is dat in inch of het aantal duim? Als je wil dat iets meerekt, moet je niet alleen op IE's rare manier rekenen van 'overflowde' inhoud. 'min-width' en 'max-width' zijn daar veel beter voor.

[Clay]

Als je met parent.createObject( ... ) een element aanmaakt met een className hoef je toch niet meer die width en height mee te geven? die staat immers in je css. Misschien mol ik dat 3e argument er maar uit

Wat betreft je oojs;

code:

function draggableWindow() {
    // constructor ...
    
    // prototyping ...
    draggableWindow.prototype.setPos = function(x, y) {
        this.windowContainer.setStyle({left:x, top: y});
    }

    // ...
}

Je zet de prototype toewijzingen nu IN de constructor van het window. Elke keer als je een instantie van dat window aanmaakt worden die prototypes dan opnieuw toegewezen, en het idee van prototyping is juist dat dat niet hoeft. Daarnaast kan je de container beter met een .moveTo(x, y) verplaatsten, .setStyle() kan wel veel meer maar die moveTo is er niet voor niets. Voor ints wordt er dan ook automagisch px achter geplakt. Je lost dan ook meteen (als je dat al had) het verspringen van de windows op als je ze de eerste keer dragged. Code wordt dan ongeveer:

code:

function draggableWindow() {
    // constructor ...
}

    // prototyping ...
    draggableWindow.prototype.setPos = function(x, y) {
        this.windowContainer.moveTo(x, y);
    }

Let er ook wel op dat Beehive II nog beta is he je hebt inmiddels alweer een verouderde versie

[SchizoDuckie]

Clay schreef op 05 januari 2004 @ 09:27:

code:

function draggableWindow() {
    // constructor ...
}

    // prototyping ...
    draggableWindow.prototype.setPos = function(x, y) {
        this.windowContainer.moveTo(x, y);
    }

thx voor de tip, dat is idd beter nu.
Alleen met die width van de titel die niet meeschaalt zit ik dus nog even Is er maybe een of andere ranzige hack voor te verzinnen

[Verwijderd]

De titel div de container maken en daarbinnnen de andere div opnemen.

code:

<div class="title">
 <h2>title</h2>
 <div class="content">
 </div>
</div>

Geen van beide geef je een explicite width. Als de content groter wordt, wordt div#title ook groter waardoor die dus meeschaalt. De H2 schaalt ook mee met de grote aangezien dat (standaard) een block-level element is.

[SchizoDuckie]

Met een hoop hulp van Clay is het eindelijk gelukt

Het kwam er op neer dat de hele zut niet werkte door de height:20px; van de title

* SchizoDuckie gaat weer lekker verder knutselen. even een xmlHTTP object erin bouwen