7 wrz 2015

jQuery UI Autocomplete highlight

Mamy sobie prosty formularz. Do podpowiedzi użyjemy pluginu jquery autocomplite. Chcemy również dodać wyboldowanie podpowiedzi.
Dokładnie uzyskać taki efekt "meble, Waszawa" gdzie highlight jest zmianą koloru na czarny i wyboldowaniem.

<form id="search" action="/" method="GET" role="search">
  <fieldset>
    <input id="query" type="text" name="query" value="" maxlength="255" autocomplete="off"
      placeholder="Produkt, usługa, miasto, ulica"/>
    <button type="submit" id="button-search"></button>
  </fieldset>
</form>

A teraz trochę js 😉

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
26 mar 2014

html5 placeholder w IE7 i IE8

// set placeholder values
       $('[placeholder]').each(function() {
		if ($(this).val() == '') // if field is empty
		{
			$(this).val($(this).attr('placeholder'));
		}
	});
	// focus and blur of placeholders
	$('[placeholder]').focus(function() {
		if ($(this).val() == $(this).attr('placeholder')) {
			$(this).val('');
			$(this).removeClass('placeholder');
		}
	}).blur(function() {
		if ($(this).val() == '' || $(this).val() == $(this).attr('placeholder')) {
			$(this).val($(this).attr('placeholder'));
			$(this).addClass('placeholder');
		}
	});

	// remove placeholders on submit
	$('[placeholder]').closest('form').submit(function() {
		$(this).find('[placeholder]').each(function() {
			if ($(this).val() == $(this).attr('placeholder')) {
				$(this).val('');
			}
		})
	});

Należy oczywiście sprawdzić czy placeholder jest wspierane przez przeglądarkę.

if (!("placeholder" in document.createElement("input"))) {
    odpalPlaceHolder(); // tutaj odpalamy funkcje która obsługuje placeholder
}

Można również użyć modernize jeżeli oczywiście używamy już w projekcie.

if(!Modernizr.input.placeholder) {
 // custom placeholder code
}
11 mar 2014

Wyszukanie markera z atrybutem zawierającym wartość

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.