Szybkie posty

Jeżeli coś jest wartego uwagi a nie jest to materiał na pełnoprawnwgo posta na blogu to będę starać się to umieszczać w tym miejscu.

#ajax #apache #behat #bitbacket #bootstrap #composer #cookies #cqrs #css #css flex #ct8 #curl #docker #doctrine #edukacja #elasticsearch #enet #enp sla #filmy #firma #funkcje php #git #google #htaccess #html #inne #javascript #jedzenie #jquery #js/jquery #kawały #krypto #laravel #linux #oop #pdo #php #php wzorce narzędzia #phpmyadmin #phpspec #phpstan #phpstorm #phpunit #podcast #rabbit #redis #seo #soap #sql #symfony #szukanie po stringach w php #twig #virtual host #visual studio code #vue #wamp #windows #wino-nalewki #wyrazenia regularne #wzorce projektowe #xml #xxx #zdjecia #złote myśli
  • Szukasz po tagu: jquery
  • Ilość rekordów w bazie: 9

Stan cywilny po płci

function showMaritalStatusesBySex(sexName, selectDefault = true) {

    if (sexName === '') {
        $('#maritalStatus').hide();
        return;
    }

    $('body').find('#maritalStatus').show();

    //select default value if true 
    if (selectDefault) {
        $('#stan_cywilny').find('option').filter('[value=""]').prop('selected', true);
    }

    var maritalStatuses = [];

    maritalStatuses['male'] = ['kawaler', 'żonaty', 'rozwiedziony', 'wdowiec', 'konkubent', 'separacja'];
    maritalStatuses['female'] = ['panna', 'mężatka', 'rozwiedziona', 'wdowa', 'konkubina', 'separacja'];

    $('#stan_cywilny').find('option').not("[value='']").hide();

    $.each(maritalStatuses[sexName], function(key, value) {
        $('#stan_cywilny').find('option').filter('[value=' + value + ']').show();
    });
}

Dodanie myślnika do kodu pocztowego

function autoCompletePostCode(inputId){
	$('body').on('keyup', inputId, function(event) {
		var liveInputValue = $(this).val();

		//if input lenght i equal 2 and keaborad key != backspace
		if (liveInputValue.length === 2  && event.keyCode !== 8) {
			$(inputId).val(liveInputValue+'-');
			return;
		}

		//if 4nth char in value is equal '-' delete it 
		if (liveInputValue.length === 4 && liveInputValue.charAt(3) === '-') {
			$(inputId).val(liveInputValue.slice(0,-1));
			return;
		}
		//limited lenght to five chars
		if (liveInputValue.length > 6){
			$(inputId).val(liveInputValue.slice(0,-1));
		}

	});
}

Menu zmieniające text w divie

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .change-form-link{padding:20px;display:inline-block;font-weight:900;border-bottom:3px solid transparent;text-decoration:none;cursor: pointer;}
  .change-form-link:hover{text-decoration: none;}
  .active{border-bottom:3px solid #ff7b33;color:#ff7b33;}
</style>
</head>
<body>
  <article>
    <header>
      <nav>
        <a target="1" class="change-form-link active">DIABLO</a>
        <a target="2" class="change-form-link">STARCRAFT</a>
      </nav>
    </header>
    <section class="container  container-show" id="1">
      <p>Diablo 2 podzielone zostało na 4 akty. Każdy z nich rozgrywać się będzie w zupełnie inne scenerii. Raz jest to zwyczajny teren pełen zieleni i łąk, innym razem jest to wielka pustynia, bagna, aż w końcu samo piekło. Każdy z rozdziałów przygody rozpoczniemy w osiedlu będącym naszą niejako bazą. To właśnie tutaj przebywać będą wszystkie ważne postacie, takie jak handlarze, kowale czy też NPC zlecający nam misje. W prawdzie ich liczba nie jest zbyt wielka, bo to ledwie kilka osobistości na akt, ale w zupełności starczą na potrzeby gry. Bardzo fajną sprawą jest losowe generowanie lokacji, znane już z pierwszej części Diablo. Dzięki temu rozgrywka zawsze wygląda nieco inaczej i nie ma możliwości gry „na pamięć”. Rzecz jasna, nasza podróż nie toczy się jedynie na otwartym terenie: nie raz przyjdzie nam zejść do głębokich jaskiń, do mrocznych grobowców, zwiedzić jakąś świątynie czy też więzienie.</p>
    </section>
    <section class="container  container-show" id="2" style="display: none">
      <p>O StarCraft słyszał chyba każdy chociaż odrobinę interesujący się grami. Ta wiekowa, ale wciąż popularna produkcja doczeka się wkrótce odświeżonego wydania. Producent przybliżył kwestię tego, kto będzie mógł się nią cieszyć.
        I zgodnie z przypuszczeniami, do zabawy przystąpi chyba każdy zainteresowany. Ujawnione przez Blizzard wymagania sprzętowe są bardzo niskie, nawet te zalecane z bardzo dużą nawiązką spełniają kilkuletnie komputery..</p>
    </section>
  </article>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script>
    $('.change-form-link').click(function(e) {
      e.preventDefault();
      $('.container-show').hide();
      $('#'+this.target).show();
      $('.change-form-link').removeClass('active');
      $(this).addClass('active');
    });
  </script>
</body>
</html>

Sprawdzanie czy co najmniej jeden checkbox o danej klasie jest zaznaczony

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <form>
      <div class="container-checkbox">
        <input class="check_test" type="checkbox">
        <input class="check_test" type="checkbox">
        <input class="check_test" type="checkbox">
        <input class="check_test" type="checkbox">
        <input class="check_test" type="submit" value="Submit">
      </div>
      <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
      <script>  
      $('.check_test').change(function() {
        if($('.container-checkbox input[type=checkbox]:checked').length) {
          console.log('co najmniej jeden checkbox jest zaznaczony');
        }else{
          console.log('nic nnie jest zaznczone');
        }
      });
      </script>
    </form>
  </body>
</html>

Sprawdzanie zaznaczenia checkboxa

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>check input</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
</head>
<body>
<label for="id_checbox">
  <input type="checkbox" id="id_checbox">Zaznacz
</label>
  <script>
    $('#id_checbox').change(function() {
      if ($(this).is(':checked')) {
        console.log('Checked');
      } else {
        console.log('Unchecked');
      }
    });
  </script>
</body>
</html>

Dodawanie grupy inputów do formularza

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>add group forms</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
</head>
<body>
  <div class='add-container'>
    <div class="form-group-register">
      <label for="key_people_data_name">imie</label>
      <input type='text' name='key_people_data_name[]' class="register-input">
    </div>

    <div class="form-group-register">
      <label for="key_people_data_surname">nazwisko</label>
      <input type='text' name='key_people_data_surname[]' class="register-input">
    </div>
    <div class="form-group-register">
      <label for="key_people_data_name">funkcja</label>
      <select name="key_people_data_function[]" id="" class="register-input">
        <option value="">--------------</option>
        <option value="">jeden</option>
        <option value="">dwa</option>
        <option value="">trzy </option>
        <option value="">tzry</option>
        <option value="">cztery </option>
        <option value="">piec</option>
        <option value="">szesc</option>
      </select>
    </div>
    <div class="form-group-register">
      <label for="key_people_data_email">email</label>
      <input type='text' name='key_people_data_function[]' class="register-input">
    </div>
    <div class="form-group-register">
      <label for="key_people_data_phone">telefon</label>
      <input type='text' name='key_people_data_function[]' class="register-input">
    </div>
    <hr>
  </div>
  <button id='add_group_form'>Add</button>

  <script>
    $(document).ready(function() {
      var remove_Button = "<button class='remove_group_form'>Remove</button>";
      var max_fields = 5;//max add group inputs
      var lenght = 1;
      $('#add_group_form').click(function() {
        if(lenght < max_fields){
          lenght++;
          $('div.add-container:last').after($('div.add-container:first').clone());
          $('div.add-container:last').append(remove_Button);
        }
      });
      $('body').on('click','.remove_group_form', function() {
        lenght--;
        $(this).closest('div.add-container').remove();
      });
    });
  </script>
</body>
</html>

Add class/remove class jquery

<script>
    $(document).ready(function() {
        $('.btn-mp3').click(function(){
            if ($('.eq').hasClass("eq--off")) {
                $('.eq').removeClass('eq--off');
                $('.eq').addClass('eq--on');
            } else {

                $('.eq').removeClass('eq--on');
                $('.eq').addClass('eq--off');
            }
        });
    });
</script>

funkcja resize outer height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
    <script>
        if ($("#nav").outerHeight() > $( window ).height()) {
            $('#nav').addClass('test-over');
        }else{
            $('#nav').removeClass('test-over');
        }
        $(window).resize(function() {
            if ($("#nav").outerHeight() > $( window ).height()) {
                $('#nav').addClass('test-over');
            }else{
                $('#nav').removeClass('test-over');
            }
        });
    </script>
</body>
</html>

Opcje odczytu pliku, odczyt pliku jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
    <script>
        $( document ).ready(function() {
            alert( "document loaded" );
        });
        $( window ).load(function() {
            alert( "window loaded" );
        });
    </script>
</body>
</html>