1 maj 2015

keyCode javascript

Trochę kodów dla js którymi można wykryć klikanie w klawisze 🙂

$(document).on('keydown',function (e) {
   if (e.keyCode == 27) {
       alert(e.which + " escape został naciśnięty");
   }
});

backspace   8
tab     9
enter   13
shift   16
ctrl    17
alt     18
pause/break     19
caps lock   20
escape  27
page up     33
page down   34
end     35
home    36
left arrow  37
up arrow    38
right arrow     39
down arrow  40
insert  45
delete  46
0   48
1   49
2   50
3   51
4   52
5   53
6   54
7   55
8   56
9   57
a   65
b   66
c   67
d   68
e   69
f   70
g   71
h   72
i   73
j   74
k   75
l   76
m   77
n   78
o   79
p   80
q   81
r   82
s   83
t   84
u   85
v   86
w   87
x   88
y   89
z   90
left window key     91
right window key    92
select key  93
numpad 0    96
numpad 1    97
numpad 2    98
numpad 3    99
numpad 4    100
numpad 5    101
numpad 6    102
numpad 7    103
numpad 8    104
numpad 9    105
multiply    106
add     107
subtract    109
decimal point   110
divide  111
f1  112
f2  113
f3  114
f4  115
f5  116
f6  117
f7  118
f8  119
f9  120
f10     121
f11     122
f12     123
num lock    144
scroll lock     145
semi-colon  186
equal sign  187
comma   188
dash    189
period  190
forward slash   191
grave accent    192
open bracket    219
back slash  220
close braket    221
single quote    222
14 kwi 2015

Stworzenie ciągu DD-MM-YYYY z obiektu DATE

Poniższy fragment kodu pokazuje, jak uzyskać sformatowany ciąg DD-MM-YYYY z obiektu Date.

var date = new Date();
 
var yyyy = date.getFullYear().toString();
var mm = (date.getMonth()+1).toString();
var dd  = date.getDate().toString();
 
var mmChars = mm.split('');
var ddChars = dd.split('');
 
var currentDay = (ddChars[1]?dd:"0"+ddChars[0]) + '-' + (mmChars[1]?mm:"0"+mmChars[0]) + '-' + yyyy;

console.log(currentDay);
19 mar 2015

Less i extend

Mamy podstawowy styl dla button powiedzmy taki:

.button {
  padding: 12px 20px;
  border: 0;
  border-radius: 10px;
  margin: 5px;
  box-shadow: 0 5px 0 black;
}

Chcemy zrobić następne buttony o kolorze blue i red, zamiast za każdym razem dodawać do każdego butona podstawowy styl można użyć &:extend
"extend" działa od wersji 1.4 lessa

Tworzymy style:

.button--red {
  &:extend(.button);   // pobranie podstawowych danych
  background: red;     // dodajemy kolor red, możemy dodać także i tak #c63c67 ale 
                       // i w ten sposób czyli przez ustawienie zmiennych @red-default:	#ff0000;
}
<button class="button">button</button>
<button class="button--red">button</button>
19 mar 2015

Wyświetlenie thumba postu

<?php if (has_post_thumbnail()) {?>
  <div class="post-thumb">
  <?php
$blog_url = get_bloginfo('url');
    $large_image_arr = wp_get_attachment_image_src(

        get_post_thumbnail_id($post->ID), 'large-thumb');

    $large_image_url = $large_image_arr[0];
    $large_image_url = str_replace($blog_url, 'http://kody.wig.pl/zdjecia/', $large_image_url);

    echo '<img src="' . $large_image_url . '"
    width="' . $large_image_arr[1] . '"
    height="' . $large_image_arr[2] . '"
    title="' . the_title_attribute('echo=0') . '"
    class="attachment-large-thumb wp-post-image" >';
    ?>
   </div>
<?php }?>

Kod sprawdza czy istnieje thumb postu. Następnie pobierany jest array załączników dopisanych do postów. Na końcu wygenerowany jest kod html obrazka.

Copyright © | kodyWiG Theme