Ik een webonderdeel geërfd van de oude leverancier van een klant en het heeft een imagoprobleem grootte. De beelden moeten worden 60×50 maar voor sommige vreemde reden, de originele leverancier hen gedwongen 42×42, dus kijken ze geplet:
|
Goed imago |
Slecht beeld |
 |
|
Hier is de markering (enigszins vereenvoudigd):
<tabel klasse = 'uitgebreid-outlook'>
<THEAD>
<tr>
<th breedte ='100′>3 Dinsdag</th>
</tr>
</THEAD><TBODY>
<klasse tr = 'forecast'>
<TD breedte ='100′>
<UL>
<Li klasse = 'hoog'>Hoge: 72&DEG;F</Li>
<Li klasse = "laag">Lage: 44&DEG;F</Li>
<Li klasse = 'voorwaarde'>Zonnig
<img src =’http://deskwx.WeatherBug.com/images/Forecast/icons/localized/60×50/en/trans/cond007.png’ breedte ='42’ hoogte ='42’ ALT =” />
</Li>
</UL>
</TD>
</tr></TBODY>
</tabel>
U zult merken dat hoewel de pad naar de afbeelding zelf toont de juiste dimensie (60×50) de originele leverancier gedwongen het in 42×42. Waarom? Gek.
Hoe dan ook, Ik wilde een snelle en gemakkelijke oplossing voor dit probleem en ik draaide me om jQuery. De truc was om te zoeken alle van de passende <img> Tags. Ik wilde niet met alle andere img-tags over muck (dat zijn er veel). Deze bits van jQuery did naar de truc:
<script type = "text/javascript" src ="http://Ajax.googleapis.com/Ajax/libs/jQuery/1.5/jQuery.min.js"></script>
<script type = "text/javascript">
$(document).klaar(functie () {$(' li.condition > img').elke(functie (index, item)
{
$(item).CSS("breedte", "60");
$(item).CSS("hoogte", "50");
});
}); // op document laden
</script>
Dat beetje van code vindt de collectie <Li> Tags waarvan klasse is "voorwaarde" en <img> kinderen. Vervolgens doorlopen dat allemaal. Werkte als een charme.
Ik zou waarschijnlijk het stroomlijnen, maar ik was nooit een de soort unix-kerel die opgelost π Aan 18 cijfers precisie met behulp van sed en awk en ik ben niet dat soort als jQuery guy hetzij 
.
</einde>
Volg mij op Twitter op http://www.twitter.com/pagalvin
