WN - Någon som är expert på att koda CSS?

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Någon som är expert på att koda CSS? (https://www.wn.se/forum/showthread.php?t=1047651)

Mr.Notepad

2011-04-12 11:49

Någon som är expert på att koda CSS?

Hej

Jag har ett litet problem... jag är okunnig på CSS :)

Jag undrar först och främst om det är möjligt att både hämta en bildinformation och dessutom skapa en IF-sats som anger en bestämd "width" eller "height" beroende på om det är en liggande eller stående bild?

Det finns ett fungerande script i JAVA som gör detta, men som använder "ONLOAD", vilket är ett problem i IE8 som använder cache och vägrar läsa sidinnehåll när man backar med bakåtknappen. (Vilket betyder att onload inte körs och bilderna visas i sina originalstrolekar, och detta kan inte fixas)

Se scriptet i denna tråd och berätta om det är möjligt att göra samma funktion i CSS:
http://www.wn.se/showpost.php?p=20400296&postcount=10

Tack!

WeaZear

2011-04-12 12:20

Kika på följande:
http://stackoverflow.com/questions/1...ditions-in-css

Mr.Notepad

2011-04-12 12:32

Okej, man kan skriva If i CSS, men går det att göra samma funktion som scriptet?

WeaZear

2011-04-12 12:39

Du kan ju hämta bildens width/height med ASP/PHP och sen kör du en IF-sats på det hela.

Tror det är tämligen omöjligt att hämta ut denna information med CSS?

Mr.Notepad

2011-04-12 12:47

Citat:

Ursprungligen postat av WeaZear (Inlägg 20401714)

Du kan ju hämta bildens width/height med ASP/PHP och sen kör du en IF-sats på det hela.

Tror det är tämligen omöjligt att hämta ut denna information med CSS?

Kan du visa ett exempel?

Det viktiga är att jag får samma resultat som i scriptet, men i "IMG TAGGEN" vill jag använda "CLASS" istället för "ONLOAD" för att bestämma bildens höjd eller bredd utifrån IF-satsens resultat.

WeaZear

2011-04-12 13:03

Kod:

<?php

$img = "1.jpg";

list($width, $height, $type, $attr) = getimagesize($img);

echo "<img class='resize' src=\"$img\" $attr />";

?>



<style>

img.resize{

        <?php

        if($width>100){

        echo"width:100px;";

        }

        ?>

}

</style>

Med modifikation efter vad du söker kan nog detta funka.

KarlRoos

2011-04-12 13:37

Detta löser du bäst med JavaScript likt posten du länkade till.

CSS:

Kod:

img.landscape

{border: 5px solid red;}



img.portrait

{border: 5px solid blue;}

jQuery:

Kod:

$(document).ready(function(){



        $(".apply_image_class").each(function(){

                if($(this).height() > $(this).width()){

                        $(this).addClass("portrait");

                }

                else{

                        $(this).addClass("landscape");

                }

        });



});

HTML:

Kod:

<img src="min_bild.jpg" class="apply_image_class" alt="bild 1" />

<img src="min_andra_bild.jpg" class="apply_image_class" alt="bild 2" />

Det den här koden gör är att gå igenom alla bilder som har klassen "apply_image_class" och kollar om höjden är större än bredden, då får bilden klassen "portrait", annars får bilden klassen landscape. CSS:en är bara ett exempel, förhoppningsvis ser du resultatet.

Lycka till!

Mr.Notepad

2011-04-12 13:59

Hej Karl

Det börjar likna en lösning!

(Jag kör asp och kan inte köra PHP-script i sidan)
Jag undrar dels om "jQuery" är kod som kan sättas in mellan "vanliga scripttaggar typ <script type="text/javascript"> </script>

Sedan funderar jag på hur man gör för att använda samma script eller flera script med olika namn, för att kunna visa olika storlekar.

I CSS skulle det bli flera av samma typ, men med olika namn/siffror:

img.landscape64
{width:64px;}

img.portrait64
{height:64px;}

img.landscape192
{width:192px;}

img.portrait192
{height:192px;}

...så att man direkt i IMG-taggen kan sätta en förutbestämd maxyta typ:

<img src="min_bild.jpg" class="apply_image_class64" alt="bild 1" />
<img src="min_andra_bild.jpg" class="apply_image_class192" alt="bild 2" />

Hoppas du förstår hur jag menar.

KarlRoos

2011-04-12 14:14

Förstår hur du menar!

jQuery ligger i <script>-taggar. Såhär skulle den delen kunna se ut i head för dig:

Kod:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){



        $(".apply_image_class").each(function(){

                if($(this).height() > $(this).width()){

                        $(this).addClass("portrait").addClass("portrait_" + $(this).width());

                }

                else{

                        $(this).addClass("landscape").addClass("landscape_" + $(this).height());

                }

        });



});

</script>

Exempel. Bilden min_bild.jpg är 192px hög och 100px bred. Den ser ut såhär innan scriptet körs:

Kod:

<img src="min_bild.jpg" alt="min fina bild" class="apply_image_class" />

Efter scriptet ser den ut såhär:

Kod:

<img src="min_bild.jpg" alt="min fina bild" class="apply_image_class portrait portrait_192" />

Hoppas det funkar för dig!

Mr.Notepad

2011-04-12 21:41

Jag börjar med att be om ursäkt för min okunskap och för att jag kanske missat något uppenbart, men jag ser inte hur det skulle fungera.

Jag förklarar utgångsläget och vad jag vill uppnå...

Jag har alltså ett stort antal bilder på servern som jag inte kan/vill skapa som miniatyrer i flera olika format.
På en hemsida vill jag kunna visa dessabilder i olika maxstorlekar. (låt oss säga tre maxstorlekar på 192x192, 128x128 & 64x64)
T ex: <img class="img_64" border="0" src="bild1.jpg>

Bilderna är i alla möjliga storlekar och beskärningar, samt både liggande och stående.
I alla webbläsare utom IE (som typiskt nog är den vanligaste) så fungerar följande kod:
<img style="max-width:64px; max-height:64px;" border="0" src="bild1.jpg)
Bilden visas inom maxstorleken OCH behåller sin aspect ratio, så det spelar ingen roll om det är en stående eller liggande bild.
Problemet är att denna kod inte fungerar på IE, och att man därför måste göra en annan lösning som fungerar för alla webbläsare.
Det var därför jag tänkte att CSS/CLASS kunde vara en lösning.

Som jag skrev tidigare så fungerar scriptet jag länkade till i början av tråden, men istället för "onload" så behöver jag använda class i IMG taggen.
Om den koden kan användas på något sätt tillsammans med CSS för at för fram en användbar CLASS så slipper dessutom köra Jquery.

(Jag kanske rör till det, men hoppas att det går att förstå hur jag menar)

Jine	2011-04-13 08:53

Det finns lösningar mha. expressions i IE's CSS-motor.
Läs mer på
http://perishablepress.com/press/200...rnet-explorer/

WeaZear

2011-04-13 08:57

Kod:

max-width:64px; max-height:64px;

Är CSS men "inline styling".

Du kan ju annars kika på jquery thumbs: http://joanpiedra.com/jquery/thumbs/
Har använt det på flera sidor, fungerar bra och är lätt att installera.

Mr.Notepad

2011-04-13 09:40

Citat:

Ursprungligen postat av Jine (Inlägg 20401835)

Det finns lösningar mha. expressions i IE's CSS-motor.
Läs mer på
http://perishablepress.com/press/200...rnet-explorer/

Jag vet inte om det går att kombinera de båda IF-satserna så det blir både maxberdd och maxhöjd där det dessutom inte är avgjort om bilden är stående eller liggande, samt att koden är inte är gjord för bilder utan är gjord för divvar och textrutor osv

Mr.Notepad

2011-04-13 10:04

Citat:

Ursprungligen postat av WeaZear (Inlägg 20401836)

Kod:

max-width:64px; max-height:64px;

Är CSS men "inline styling".

Du kan ju annars kika på jquery thumbs: http://joanpiedra.com/jquery/thumbs/
Har använt det på flera sidor, fungerar bra och är lätt att installera.

"max-width & max-height" fungerar tyvärr inte på bilder i Internet Explorer :(

Jqueryscriptet är fint, men efter att ha läst och sett demon i länken så verkar det inte göra miniatyrer på det traditionella viset genom att minska bilden, utan det skär ut en miniatyr av den stora bilden.

Jine	2011-04-13 10:46

max/min-height finns som sagt inte i IE.
Men expressions finns, om du funderar noga och läser länken jag skickade + kommenterar så tror jag det löser ditt problem. Att exemplet är för divs spelar ingen som helst roll, båda är blockelement. Du nämnde ju själv att min/max-height inte fungerar i IE, det där är lösningen.

Har inte tid att posta kod atm, men jag är säker på att det går att lösa.

EDIT:
WeaZear, det är inte alls inline-styling, beror ju helt och hållet på var du lägger koden.
min/max-height/width är korrekt sätt att göra det. (om man inte ska göra korrekta thumbnails i backenden - vilket är föredraget sätt)

IE9+ och FF, webkit-läsare klarar av det.

EDIT2:
Undvik JS om du kan, bla. jag (och många fler) kör med noscript.

Mr.Notepad

2011-04-13 10:57

Citat:

Ursprungligen postat av Jine (Inlägg 20401852)

Jag ska klia mig i huvudet och ta en ny titt.
Om du kan ge exempelkod senare när du har tid så skulle jag vara väldigt tacksam, för jag börjar tro att det inte går att lösa.

Jine	2011-04-13 12:51

http://www.google.se/search?q=min+height+ie+fix

http://www.google.se/search?q=min+height+in+ie

http://www.google.se/search?q=min+height+ie+image

osv :)

Mr.Notepad

2011-04-13 16:51

Vänta lite...
Jag tror att jag hittade nåt bland de hundratals kommentarerna i länken...

Efter en del modifiering så verkar det som om det fungerar! :)

Kod:

<style type="text/css">

.my_img_96 {

    max-width: 96px;

    max-height: 96px;

    /* Resize the image for IE */

height:expression(this.height>=this.width && this.height>95?96:true);

width:expression(this.width>=this.height && this.width>95?96:true);



}

</style>





<img class="my_img_96" src="bild1.jpg">

<img class="my_img_200" src="bild2.jpg">

...osv

Detta måste testas mer, men just nu ser det riktigt ljust ut!
Tack Jim!!

Alla tider är GMT +2. Klockan är nu 13:25.