Jeg arvet en webdel fra en klient gamle leverandør, og den har en problem med bilde-filstørrelsen. Bildene skal være 60×50 men for noen merkelig grunn, den originale forhandleren tvunget dem i 42×42, slik at de ser squashed:
|
God bilde |
Dårlig bilde |
 |
|
Her er markup (noe forenklet):
<tabellen klasse = 'utvidet outlook'>
<thead>
<tr>
<th Bredde ='100′>3 Tirsdag</th>
</tr>
</thead><tbody>
<tr-klassen = 'Vær'>
<TD bredde ='100′>
<UL>
<Li class = 'high'>Høy: 72°F</Li>
<Li class = "lav">Lav: 44°F</Li>
<Li class = "tilstand">Sunny
<img src =’http://deskwx.WeatherBug.com/images/Forecast/icons/localized/60×50/en/trans/cond007.PNG’ Bredde ='42’ høyde ='42’ alt =” />
</Li>
</UL>
</TD>
</tr></tbody>
</tabell>
Vil du merke at selv om den banen til bildet selv viser den riktige dimensjonen (60×50) den originale forhandleren tvang det i 42×42. hvorfor? gal.
Allikevel, Jeg ønsket en rask og enkel løsning på dette problemet, og jeg slått til jQuery. Trikset var å finne alle de riktige <IMG> koder. Jeg ønsker ikke å muck med andre img-koder (som er det mange). Denne bit av jQuery did kunsten:
<script type = "text/javascript" src ="http://Ajax.googleapis.com/Ajax/libs/jQuery/1.5/jQuery.min.js"></skriptet>
<script type = "text/javascript">
$(dokumentet).klar(funksjonen () {$(' li.condition > IMG').hver(funksjonen (index, element)
{
$(element).CSS("bredden", "60");
$(element).CSS("høyde", "50");
});
}); // på dokument-Last
</skriptet>
At litt av koden finner samlingen <Li> koder som har klasse er "tilstand" og <IMG> barn. Det går deretter gjennom alt dette. Arbeidet like en ynde.
Jeg kunne sannsynligvis strømlinjeforme it, men jeg var aldri en type unix-fyr som løst π til 18 sifre samplepresisjon sed og awk og jeg er ikke det slag Hvis jQuery fyren enten 
.
</slutten>
Følg meg på Twitter på http://www.twitter.com/pagalvin
