Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] foundation 5 und js

Einklappen

Neue Werbung 2019

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

  • [Erledigt] foundation 5 und js

    als mir in diesem forum foundation 5 empfohlen wurde hab ich mir das angeschaut.
    mach ich meistes so, wenn oirgendwas empfohlen wird, auch wenn ich mit viel nichts oder noch nichts anfangen kann.

    sah erstmal übersichtlich aus, einfach erweiterbar, und da hab ich mir gedacht, fang doch auch mal mit einem cssframework an.
    foundation mir require.js einbinden hat auch gut geklappt, da war ich schon fast überzeugt.

    dann kam das problem:

    um bilder darzustellen sie einzupassen, events auf die parent objecte zu definnieren, dafür nehme ich backbone. damit komme ich auch(?) recht gut klar. folgendes setImageSize() sezt mir auch nett die bildgrösse, wenn vorher das parent ausgemessen wurde, ja geht wesentlich eleganter, seis drum:
    Code:
      setImageSize: function() {
    
         var canvas = this.canvas;
         var image = this.img;
    
         var relation = (image.width / image.height); 
    
        if (this.canvas.height === 0){
           image.width = canvas.width;
           image.height = image.width / relation;
          }else{
             canvas.relation = (canvas.width / canvas.height);
    	 if ((canvas.relation) < relation) {
    		  image.width = canvas.width;
    		  image.height = image.width /  relation; 
    	 }else{
    		  image.height = canvas.height;  
    		  image.width = image.height * relation;
    	 }
        } 
        	    console.debug(canvas);
    	    console.debug({w: image.width, h: image.height, r: relation} );
    	 
          return this;	
      }
    Zitat von console.cdebug(canvas)
    height: 500
    relation: 0.94
    widh: 470
    unabhängig von foundation.min.css oder foundation.css.
    Zitat von console.debug{}

    ohne foundation.min.css oder foundation.css
    h: 500
    r: 0.6566666
    w: 333

    mit foundation.min.css oder foundation.css
    h: 30
    r: 0.6666666
    w:20
    ich kann mir die unterschieden nicht erklären, da ich
    1.) nur eine css datei einbinde und
    2.) eine einfach zuweisung mache, welche immer klappen sollte.

    mache ich ein neues bild
    Code:
     var i2 = document.createElement('mg');
     i2.height =  canvas.height;
     i2.width =  img2.height * relation;
    /* 
    stimmen hier die werte 
    setze ich es an den platz des alten im doom
    */
    this.el.removeChild(this.el.firstChild);
    //oder
    this.el.innerHTML='';
    //und
     this.el.apendChild(i2);
    ist es wieder klein.
    woran kann sowas liegen?


    //Lösung??

    nun bin ich vollends verwirrt:
    Code:
    // works:
    		  image.height = canvas.height;  
    		  image.width = canvas.height * relation;
    // do not work with founndation work with nornal css :
    		  image.height = canvas.height;  
    		  image.width = image.height * relation;
    naja, kann mir ja jemn´and erklären, mir reicht es erstmal, dass der müll code so halbwegs functioniert(auf meiner dose wenigstens).

  • #2
    Nur getippt ohne genauer drauf zu schauen: foundation 5 nutzt afaik box-sizing: border-box. Daher bekommst du beim Zugriff auf die Breite/Höhe anstelle von 0px das Padding als Ergebnis mit. Die 20px Breite könnten eine leere Column (siehe Sass $column-gutter) sein.
    Wenn dir alte IEs egal sein können, verwende doch einfach Image.naturalWidth/naturalHeight

    Zitat von http://api.jquery.com/height/
    Note that .height() will always return the content height, regardless of the value of the CSS box-sizing property. As of jQuery 1.8, this may require retrieving the CSS height plus box-sizing property and then subtracting any potential border and padding on each element when the element has box-sizing: border-box. To avoid this penalty, use .css( "height" ) rather than .height().
    VG

    Basti
    I like cooking my family and my pets.
    Use commas. Don't be a psycho.
    [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

    Kommentar


    • #3
      moin erstmal,
      ich kriegt den fehler lustigerweise bei setzen der bildgrösse, nicht beim einlesen der grössen.
      um es klar und sauber zu fassen:
      Code:
                    var canvas = {height: 500, width: 400};
                    var relation= 0.75;
                    var image;
      // works:
      		  image.height = canvas.height;  
      		  image.width = canvas.height * relation;
      // do not work with founndation work with nornal css :
      		  image.height = canvas.height;  
      		  image.width = image.height * relation;
      könnte trozdem mal auf Image.naturalWidth/naturalHeight umstellen, ist schon der zweite thread, in dem du sowas rätst.

      Kommentar


      • #4
        Pseudo Code? Die erste Zeile müsste dir bereits um die Ohren fliegen bei der Objektdeklaration.

        Ich hab bis heute noch nicht durchschaut, was du da eigentlich genau machen willst, bin jedoch immer noch am Glauben, dass das bestimmt auch nur mit CSS schon ginge.. Eventuell hilft dir ja Uncle Daves ol' padded box

        Hier noch ein sass mixin:
        PHP-Code:
        @mixin ratio($width 1$height 1) {

            &:
        before {
                
        content"";
                
        displayblock;
                
        padding-top100% * ($height $width);
            }

            & {
                
        positionrelative;
                
        z-index1;
                
        width100%;
                
        height100%;
                .
        ratio-content {
                    
        positionabsolute;
                    
        top0;
                    
        left0;
                    
        right0;
                    
        bottom0;
                    
        z-index2;
                    
        displayblock;
                    
        width100%;
                    
        height100%;
                }
            }

        edit - usage:
        PHP-Code:
        .ratio16_9 {
            @include 
        ratio(16,9);

        markup:
        Code:
        <div class="img-wrapper ratio16_9">
          <img class="img img-full-size ratio-content" src="img/foo.jpg" />
        </div>
        Beste Grüße
        I like cooking my family and my pets.
        Use commas. Don't be a psycho.
        [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

        Kommentar


        • #5
          Wozu das & {}? Kann man doch einfach weglassen, oder?

          Kommentar


          • #6
            ich versteh davon gar nichts, könnte eine elegante lösung sein.
            hab also morgen was zu tun

            was ich da mach? ich schreib mal ordendlicher, mit kommentaren.
            und ja, war pseudocode.

            Kommentar


            • #7
              @rkr: Jo, kann man auch weglassen.

              PHP-Code:
              @mixin ratio($width 1$height 1) {

                  &:
              before {
                      
              content"";
                      
              displayblock;
                      
              padding-top100% * ($height $width);
                  }
                  
                  
              positionrelative;
                  
              z-index1;
                  
              width100%;
                  
              height100%;
                  .
              ratio-content {
                      
              positionabsolute;
                      
              top0;
                      
              left0;
                      
              right0;
                      
              bottom0;
                      
              z-index2;
                      
              displayblock;
                      
              width100%;
                      
              height100%;
                  }
                  

              @moma: Der Trick ist, das Bild auf 100% Breite/Höhe aufzuspannen und über das Padding des Pseudoelements das Seitenverhältnis zu erzwingen. Viel Spaß
              I like cooking my family and my pets.
              Use commas. Don't be a psycho.
              [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

              Kommentar


              • #8
                //update:
                zu früh gefreut,

                bei mir verzerrt das mixin die bilder, da ich die seitenverhältnisse des bildes nicht kenne (oder ich mach was falsch).
                zwar kann ich diese auch per sass ausrechnen, jedoch muss ich dann die url des bildes angeben(?), das ist nicht akzeptierbar.
                bei jeder mir bekannten form des selektors hat dies nicht geklappt.
                hätte ich die realtio nen des bildes, könnte ich wohl mit @if arbeiten.

                was habe ich übersehen?

                //update:
                ja habe ich:

                Code:
                @mixin ratio($width : 1, $height : 1) {
                
                    
                  
                    &:before {
                       
                        content: "";
                        display: block;
                        padding-top: 100% * ($height / $width);
                        
                    }
                
                    & {
                        position: relative;
                        z-index: 1;
                        width: 100%;
                        height: 100%;
                
                        .ratio-content {
                        
                	    max-width: 100%;
                	    max-height: 100%;
                            position: absolute;
                            padding: auto;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            z-index: 2;
                            display: block;
                        }
                    }
                }

                Kommentar

                Lädt...
                X