Wyszukanie markera z atrybutem zawierającym wartość:
$('.description li a[href*=option]').click(function(){
return view_option();
});Przypisanie do linka zawierającego w adresie wartość 'option' funkcji wywoływanej w zdarzeniu click.
11 mar 2014
2 mar 2014
Skrócenie zbyt długiego tekstu za pomocą CSS
Aby skrócić element do pewnej wielkości musi być on elementem blokowym, można nadać mu oczywiście właściwość block - display:block lub display: inline-block;
Powiedzmy że mamy div o wymiarach 200px szerokości, w którym znajduje się zbyt długi tekst który nie chcemy aby się załamywał do następnej linii a jedynie ucinał i na końcu tekstu pojawiły się trzy kropki "..."
.cut-string {
width: 200px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}<div class="cut-string">Jakiś sobie tekst który jest za dług</div>Po użyciu tego stylu otrzymujemy "Jakiś sobie tekst który jest z..."
Polecam również lekką bibliotekę do skracania tekstów w wielu liniach, ale i nie tylko. Za jej pomocą można skracać również tabele, elementy list li itd. zerknij może Ci się przyda show-more
27 lut 2014
SVG animacja
Najpierw styl którym nadajemy kolor wykresów.
<style>
rect {
fill:red;
}
</style>Teraz umieszczamy svg w stronie.
<svg width="500px" height="300px">
<g transform="scale(1, -1) translate(0, -300)">
<rect x="0" y="0" height="30%" width="15%">
<animate attributeName="height" from="0" to="30%" dur=".5s"></animate>
</rect>
<rect x="20%" y="0" height="10%" width="15%">
<animate attributeName="height" from="0" to="10%" dur=".5s"></animate>
</rect>
<rect x="40%" y="0" height="20%" width="15%">
<animate attributeName="height" from="0" to="20%" dur=".5s"></animate>
</rect>
<rect x="60%" y="0" height="70%" width="15%">
<animate attributeName="height" from="0" to="70%" dur=".5s"></animate>
</rect>
<rect x="80%" y="0" height="40%" width="15%">
<animate attributeName="height" from="0" to="40%" dur=".5s"></animate>
</rect>
</g>
</svg>26 lut 2014
Zdarzenie focus i blur na polu input
$('#auto').focus(function () {
if ($(this).val() == $(this).attr('valueDef')) {
$(this).val('');
}
$(this).css({ 'color': '#000' });
});$('#auto').blur(function () {
if ($(this).val() == '') {
$(this).val($(this).attr('valueDef'));
$(this).css({ 'color': '#93999e' });
} else {
$(this).css({ 'color': '#000' });
}
});25 lut 2014
Prosty sposób na wyświetlanie pozycji elementu na stronie
$('.box-gal li').hover(
function () {
console.log($(this).offset());
}, function () { });