display:none in scroll-area

[Onyxagargaryll]

Hallo zusammen!

Ich spiele ein wenig mit dem "Mootools" Framework rum (Javascript Library). Dabei stosse ich auf folgendes generelles Problem:

CSS:

<style type="text/css">
.auctIin {
height:60px;
width:310px;
color:white;
margin-bottom:10px;
background-color:#666666;
padding:5px;
text-align:center;
}
</style>

Der HTML-Code:

<input type="button" value="Set up an auction" onclick="swapAuct()" />


<div id="auctionlist" style="float:left; width:340px; height:320px; background-color:black; padding:10px; overflow-y:scroll; overflow-x:hidden;">
    <div class="auctIin">
        Here's an Item...
    </div>
    <div class="auctIin">
        Here's an Item...
    </div>
    <div class="auctIin">
        Here's an Item...
    </div>
    <div class="auctIin">
        Here's an Item...
    </div>
    <div class="auctIin">
        Here's an Item...
    </div>
    <div class="auctIin">
        Here's an Item...
    </div>
    <div class="auctIin">
        Here's an Item...
    </div>
    <div class="auctIin">
        Here's an Item...
    </div>
    <div class="auctIin">
        Here's an Item...
    </div>
    <div id="auct_dropper">
   			Drop here
	</div>
</div>

Mootools Javascript:
$$('') = Iteriert durch die Elemente mit der Klassendefinition xy
$('') = document.getElementById('') auf mootoolisch

 

$('auct_dropper').setStyle('display','none');
var auswap = 0;
function swapAuct() {
	if (auswap==0) {
		$('auct_dropper').setStyle('display','inline');
		$$('.auctIin').each(function(el){ el.setStyle('display','none'); });
		auswap=1;
	} else if (auswap==1) {
		$('auct_dropper').setStyle('display','none');
		$$('.auctIin').each(function(el){ el.setStyle('display','inline'); });
		auswap=0;
	}
}

Wenn ich die Elemente nach dem "Ausschneiden" wieder einfüge (display: inline), ist das CSS weg!
Aber wenn ich das ganze mit der Visibility mache, bleibt der Scrollbalken gleich gross.
Wüsste da jemand eine Lösung?

Danke im Voraus für eure Hilfe!

EDIT: Die Funktion löscht & fügt zwar den auct_dropper ein, aber die anderen werden nicht gelöscht. allerdings kommen beim zweiten Mal klicken die Styles weg..


PS: Ich hab das ganze auf die Schnelle programmiert, also bitte keine "Klugscheisser" mit Sachen wie: du könntest ja #auctionlist div {} machen o.ä. Ich weiss, dass man das alles noch stark verbesser kann

[Onyxagargaryll]

Lösung

Ich habe jetzt eine Pseude-Lösung gefunden. Ich verschiebe die Elemente in ein unsichtbares Div und hol sie dann wieder da raus..

Aber die Lösung ist ziemlich unschön :S also wenn jemand eine andere Lösung / Idee hat, bitte sagts mir!

Danke und MfG

Onyxagargaryll

[unset]

Woher kommt setStyle? Ist das von MooTools? Bei Prototype jedenfalls übergibt man da eine Struktur, und nicht einfach nur zwei Parameter. Evtl. ist das dein Problem.

[Onyxagargaryll]

Danke für die Antwort Aber leider ist es das nicht...
Ja, ist sowas mootools-proprietäres:
setStyle('was','wie');
Also das setStyle funktioniert...
Es weigert sich ja nur, die Styles, die ich oberhalb (im CSS-Bereich) definiert habe, wieder "anzunehmen"...

MfG!

[unset]

Hat MooTools keine hide und show Methoden?

[PHP-Desaster]

Belässt Mootools alle Inline-Style und Klassennamen korrekt? Der Firebug hilft da sehr gut!

[Onyxagargaryll]

Hab ich grad geprüft, leider arbeitet er da mit opacity und visibility...
Damit der Scrollbalken sich verändert muss ich die Elemente wohl entweder da rausnehmen oder display:none benutzen...
Aber mit display:none übernimmt er 1. keine im Head definierten Styles und 2. keine Eventlistenener..

schwierige Sache oO

Muss ichs bei einem Austausch (hidden div, so wie in der "Lösung" erklärt) belassen..?

MfG

[unset]

Musst du MooTools benutzen? Mit Prototype klappte sowas bei mir immer wunderbar und auf Anhieb.

Tut mir leid dir da ansonsten keine Hilfestellung geben zu können.

[Onyxagargaryll]

@ PHP-Desaster

Gute Idee, aber "leider" macht er das korrekt.. vielleicht ein neuer Event-Listener, der auf die Eigenschaft "display" achtet und bei change die Styles anpasst?

(Komlizierter gehts zwar nimmer :S)

[Onyxagargaryll]

@ unset

hehe ^^
Naja ich hab mal Dojo versucht und war nicht zufrieden.. und ich hab mich anhand von den Beispielen, der schönen Website und der Tatsache, dass Mootools vieles von Prototype "abkopiert" für mootools entschieden...

Und was auch noch wichtig für mich ist; jede Art des Prototype-Frameworks war um ein vielfaches grösser als Mootools... Ich bin bei Mootols mit lächerlichen 40-50kb bedient, bei Prototype sind das 100+ je nach dem.

MfG


EDIT: Walter Zorn hab ich auch mal benutzt ^^ *grinst*

[Onyxagargaryll]

Na dann werde ich mal die "Austausch"-Methode benutzen

Ich danke herzlichst für eure Mühen!

MfG
Onyxagargaryll

[PHP-Desaster]

Und was auch noch wichtig für mich ist; jede Art des Prototype-Frameworks war um ein vielfaches grösser als Mootools... Ich bin bei Mootols mit lächerlichen 40-50kb bedient, bei Prototype sind das 100+ je nach dem.

Kenne mich da jetzt nicht genau bei Mootools aus, aber vielleicht bietet Prototype ja einfach mehr?

[Onyxagargaryll]

Nun dem ist ganz bestimmt so. Aber ich brauche die zusätzlichen Features nicht ausserdem kann man bei Mootools genau die Features aussuchen die man benötigt und dann die gewünschte js-library "zusammenstellen"...

Das hier hat mich ebenfalls überzeugt (auf "Start" fängt der Geschwindigkeitstest an)

Speedtest

(was sie nicht aufführen ist das Drag & Drop; find ich das von mootools mit Abstand das beste, auch wenn es mehr Rechnerleistung als andere verlangt Und das vereinfachte AJAX ist auch nice, hat aber Prototype auch, Rest weiss ich net)

MfG

PS: Ich konnte die "Lösung" meines Problems noch optimieren.. ist zwar die gleiche, aber sie verschlingt nimmer so viel Ressourcen...