display:none in scroll-area

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • display:none in scroll-area

    Hallo zusammen!

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

    CSS:

    Code:
    <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:

    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

    Code:
     
    
    $('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
    Zuletzt geändert von Onyxagargaryll; 16.04.2008, 14:33.

  • #2
    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

    Kommentar


    • #3
      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.
      [FONT="Helvetica"]twitter.com/unset[/FONT]

      Shitstorm Podcast – Wöchentliches Auskotzen

      Kommentar


      • #4
        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!

        Kommentar


        • #5
          Hat MooTools keine hide und show Methoden?
          [FONT="Helvetica"]twitter.com/unset[/FONT]

          Shitstorm Podcast – Wöchentliches Auskotzen

          Kommentar


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

            Kommentar


            • #7
              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

              Kommentar


              • #8
                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.
                [FONT="Helvetica"]twitter.com/unset[/FONT]

                Shitstorm Podcast – Wöchentliches Auskotzen

                Kommentar


                • #9
                  @ 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)

                  Kommentar


                  • #10
                    @ 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*
                    Zuletzt geändert von Onyxagargaryll; 16.04.2008, 15:42.

                    Kommentar


                    • #11
                      Na dann werde ich mal die "Austausch"-Methode benutzen

                      Ich danke herzlichst für eure Mühen!

                      MfG
                      Onyxagargaryll

                      Kommentar


                      • #12
                        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?

                        Kommentar


                        • #13
                          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...

                          Kommentar

                          Lädt...
                          X