HTML - Strona 12 - Kody, triki, sztuczki

13 lut 2015

Jak ukryć swój adres e-mail na stronach www

1. CSS pseudo elementy

<style>
  span:after {
    content: attr(data-domain);
  }
  span:before {
    content: attr(data-user);
  }
</style>

<span data-user="greg" data-domain="gmail.com">@</span>

Czytaj dalej

1 lut 2015

Wyłączenie intergracji SKYPE z telefonami na stronach

Często gęsto bywa tak że posiadamy na stronie numery telefonów i powiedzmy ktoś wchodzi na stronę ze skypem ustawionym na ingerencję w numery telefonów.
Wtedy przerabiane są wszystkie telefony na wygląd skypowy, jednym słowem wszystko się "rozjeżdża" 🙁

Wystarczy dodać w sekcji head dodać jedną linijkę kodu i mamy delikwenta z głowy:

<head>
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
</head>

23 sty 2015

Tabele w RWD

Powiedzmy że posiadamy tabelę z rezerwacjami hotelowymi.
Jeżeli zmniejszymy rozdzielczość na wielkość znaczka pocztowego - powiedzmy 320px to nic nie będzie widać i tutaj z pomocą przychodzi CSS.
Poniższe rozwiązanie działa od IE8 no i oczywiście w nowych przeglądarkach 😉

Przykładowa a tak wygląda tabela.

<section class="reservation-box">
    <table class="table-reservation">
        <thead>
        <tr>
            <th>Nazwisko i imię</th>
            <th>Telefon</th>
            <th>Adres e-mail</th>
            <th>Liczba wizyt</th>
            <th>Data ostatniej rezerwacji</th>
        </tr>
        </thead>
        <tbody>
        <tr class="reservation-row-item">
            <td data-title="Nazwisko i imię">Pałczyński stefan</td>
            <td data-title="Telefon">14725836</td>
            <td data-title="Adres e-mail">palczynski.stefan@gmail.com</td>
            <td data-title="Liczba wizyt">0</td>
            <td data-title="Data ostatniej rezerwacji">nie odbyła się</td>
        </tr>
        <tr class="reservation-row-item">
            <td data-title="Nazwisko i imię">Miałczyński Cezary</td>
            <td data-title="Telefon">69522999</td>
            <td data-title="Adres e-mail">mcezik@tet.pl</td>
            <td data-title="Liczba wizyt">1</td>
            <td data-title="Data ostatniej rezerwacji">28 stycznia 2014</td>
        </tr>
        <tr class="reservation-row-item">
            <td data-title="Nazwisko i imię">Tomaczek Andrzej</td>
            <td data-title="Telefon">32999222</td>
            <td data-title="Adres e-mail">tomaczekandrzej@jawa.pl</td>
            <td data-title="Liczba wizyt">1</td>
            <td data-title="Data ostatniej rezerwacji">20 stycznia 2015</td>
        </tr>
        </tbody>
    </table>
</section>

Jak widać tabela jak tabela, wygląda normalnie ale pojawiło się coś w komórkach "data-title" - atrybuty, te same nazwy co w sekcji thead > th.

<tr class="reservation-row-item">
    <td data-title="Nazwisko i imię">Pałczyński stefan</td>
    <td data-title="Telefon">14725836</td>
    <td data-title="Adres e-mail">palczynski.stefan@gmail.com</td>
    <td data-title="Liczba wizyt">0</td>
    <td data-title="Data ostatniej rezerwacji">nie odbyła się</td>
</tr>

Czytaj dalej

8 lip 2014

Sortowanie polskich znaków w javascript

function MySort(alphabet) {
  return function (a, b) {
    const index_a = alphabet.indexOf(a[0]);
    const index_b = alphabet.indexOf(b[0]);

    if (index_a === index_b) {
      if (a < b) {
        return -1;
      }
      if (a > b) {
        return 1;
      }
      return 0;
    }
    return index_a - index_b;
  };
}

const items = ['świat', '1', 'ł', 'k', 'ą', '*sdf', '!', '!sdf', '@asdf', 'łódź', '_asd', '.sadf', '(sadf', ')sadf', '#sadf', '^asdf', '&asdf', '%asdf', '-sadf', '=sadf', '+sadf', '-sdf', 'sef', 'brocka'];

const sorter = MySort(
  '*!@_.()#^&%-=+01234567989aąbcćdeęfghijklłmnńoóprsśtuwyzźż'
);

console.log(items.sort(sorter));

W wersji z ES6 można to zrobić o wiele prościej:

items.sort((a, b) => a.localeCompare(b);

Polecam zapoznać się localeCompare, ma kilka przydatnych opcji.

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
}