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 😉

$("#query").autocomplete({
  'minLength': 2,
  'delay': 0,
  create: function () {
    $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
      var re = new RegExp("^" + this.term, "i");
      var t = item.label.replace(re, "<span class='highlight'>" + this.term + "</span>");

      return $("<li></li>")
        .data("item.autocomplete", item)
        .append(t)
        .appendTo(ul);
    };
  },
  source: function (request, response) {
    //escapeRegex - /[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&"
    var re = $.ui.autocomplete.escapeRegex(request.term);
    var matcher = new RegExp("^" + re, "i");

    $.getJSON("/autocomplete/?what=" + encodeURIComponent(request.term), function (searchWord) {
      var match = $.grep(searchWord, function (item, index) {
        return matcher.test(item);
      });
      response(match);
    });
  },
  open: function (e, ui) {
    //autocomplete przesuwamy o 1px to góry, aby pozbyć się ramki 
    $(".ui-autocomplete:visible").css({ top: "-=1" });
  }
});

A tak wygląda wynik naszej pracy.

autosuggest

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
27 Kwi 2014

Support for swipe gestures in Colorbox

I used example3 here

I set rigidly width/1000px and height/600px.

$(".group3").colorbox ( { 
             rel: 'group3', transition: "none" , width: "1000", height: "600"} 
    ) ;

You must change the following css (#cboxPrevius , #cboxNext)

#cboxPrevious{
    position:absolute;
    top:32px;
    left:5px;
    margin-top:-32px;
    background:transparent url(images/trans_gif.png);
    width:49%;
    height:578px;
    text-indent:-9999px;
    outline:none;
}
#cboxPrevious:hover{
   background-position:bottom left;
}
#cboxPrevious:after{
   position:absolute;
   content:"";
   top:50%;
   left:0;
   margin-top:-32px;
   background:url(images/controls.png) no-repeat top left;
   display:inline-block;
   width:28px;
   height:65px;
   outline:none;
}
#cboxNext{
   position:absolute;
   top:32px;
   right:0;
   margin-top:-32px;
   background:transparent url(images/trans_gif.png);
   width:49%;
   height:578px;
   text-indent:-9999px;
   z-index:999;
   outline:none;
}
#cboxNext:hover{
   background-position:bottom right;
}
#cboxNext:after{
   position:absolute;
   content:"";
   top:50%;
   right:5px;
   margin-top:-32px;
   background:url(images/controls.png) no-repeat top right;
   display:inline-block;
   width:28px;
   height:65px;
   outline:none;
}

I also changed js:

$next.click(function() {
   publicMethod.next();
});
$prev.click(function() {
   publicMethod.prev();
});

for this:

$next.on('click touchstart', function() {
   publicMethod.next();
});

$prev.on('click touchstart', function() {
   publicMethod.prev();
});

At the moment, this change has been tested on Android 4.4.2 on browsers:
Chrome 34.0.1847.114
Firefox 28.0.1
Opera 21.0.1437.74904
Dolphin 11.0.1

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
}