Napisane przez
w 16 kwietnia 2013 - 12:55
Nazwa pliku: Rangi na forum (Web-Talk.pl)
Plik Dodał: zonic
Plik wysłano: 16 kwi 2013
Kategoria pliku: Darmowe pliki graficzne
Przedstawiam Wam pierwszą, bezpłatną paczkę od web-talk.pl.
Rangi dla forum dyskusyjnego. Paczka zawiera zarówno pliki .png rang jak i w pełni edytowalne pliki .PSD ze wszystkimi warstwami.
Zabrania się odsprzedaży plików jak i ich rozpowszechniania za pośrednictwem innego portalu niż web-talk.pl
Podgląd:
Napisane przez
w 26 stycznia 2014 - 13:49
W tym poradniku pokażę jak stworzyć prosty formularz kontaktowy, obsługiwany ajaxem, czyli bez konieczności przeładowywania strony.
Zaczniemy od htmla, przedstawiam najprostszy formularz chyba z możliwych:
HTML (index.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AJAX FORM</title>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js.js"></script>
<style>
.error{color:#f00;border:1px solid #f00;}
</style>
</head>
<body>
<form id="actionForm" action="send.php" method="post">
Imię: <input type="text" name="name" id="name" placeholder="Podaj swoje imię" /><br />
Temat: <input type="text" name="subject" id="subject" placeholder="Podaj temat kontaktu" /><br />
Wiadomość: <textarea name="message" placeholder="Wpisz wiadomość"></textarea><br />
Czy lew jest psem czy kotem? <input type="text" name="question" placeholder="Odpowiedz na pytanie" /><br />
<button type="submit">Wyślij</button>
</form>
</body>
</html>
Teraz w php odbierzemy informacje przesłane z formularza:
PHP (send.php)
<?php
//zapisujemy otrzymane wartości do zmiennych
$name = isset($_POST['name']) ? $_POST['name'] : '';
$subject = isset($_POST['subject']) ? $_POST['subject'] : '';
$message = isset($_POST['message']) ? $_POST['message'] : '';
$question= isset($_POST['question']) ? $_POST['question'] : '';
//na wstepie sprawdzamy czy formularz nie zostal wypelniony przez bota:
if( !in_array(strtolower($question),array('kot','kotem') ) ){
echo json_encode(array('status'=>false,'errors'=>array('question'),'msg'=>"Ty bocie ty!"));
exit;
}
//przygotowujemy sobie zmienne do zwrocenia
$status = true;
$error = array();
$msg = 'Dziękujemy zapraszamy ponownie';
//tutaj robimy walidację jaką chcemy, ja upewniam się że pole 'name' składa się z przynajmniej 3 znaków i składa się jedynie z liter, liczb, spacji oraz '-'
if( !preg_match("/^([a-zA-z0-9 -]{3,})$/",$name) ){
//w przypadku niepoprawnego pola ustawiamy status na false i do tablicy $error dodajemy name pola z bledem
$status = false;
$error[] = 'name';
}
//tutaj upewniam się ze tytul nie jest pusty
if( !preg_match("/^(.+)$/",$subject) ){
//w przypadku niepoprawnego pola ustawiamy status na false i do tablicy $error dodajemy name pola z bledem
$status = false;
$error[] = 'subject';
}
//tutaj upewniam się ze wiadomosc ma przynajmniej 10 znaków
if( !preg_match("/^((.*){10,})$/",$message) ){
//w przypadku niepoprawnego pola ustawiamy status na false i do tablicy $error dodajemy name pola z bledem
$status = false;
$error[] = 'message';
}
//jeżeli wystąpił jakiś błąd zmieniamy komunikat
if( !$status ){
$msg = "Proszę wypełnić formularz poprawnie";
}else{
//tutaj robimy co chcemy robić w przypadku poprawnych danych, np zapisujemy do bazy, wysyłamy maila, etc.
//możemy tu też sprawdzać czy docelowa akcja się powiedzie i jeżeli nie to zmieniamy status na false i msg na konkretną informacę
}
//wyświetlamy wynik całej operacji jako json
echo json_encode(array('status'=>$status,'errors'=>$error,'msg'=>$msg));
exit;
Jeżeli teraz wysłalibyśmy taki formularz to strona by się przeładowała do pliku send.php i otrzymalibyśmy goły json z wynikami operacji. Żeby to zmienić potrzebny nam jest odpowiedni skrypt JavaScript (musimy mieć załączoną bibliotekę jquery).
JAVASCRIPT (js.js)
$(document).ready(function(){
$("form#actionForm").submit(function(e){
e.preventDefault(); //
var form = $(this);
$.post(
form.attr('action'),
form.serialize(),
function(r){
if( r.status ){
form.html(r.msg);
}else{
alert(r.msg);
form.find('.error').removeClass('error');
for( var i=0;i<r.errors.length;i++ ){
var name = r.errors[i];
form.find('input[name="'+name+'"],textarea[name="'+name+'"]').addClass('error');
}
}
return;
},
'json'
);
});
});
Przeanalizujmy źródło js:
3: e.preventDefault() - dzięki tej linijce formularz się nie wyśle standardową akcją
5: $.post - wysyłamy formularz za pomocą AJAXA, requestem POST (można użyć $.get)
6: form.attr('action') - ustawiamy cel wysłania formularza na taki jaki jest w htmlu ustawiony action
7: form.serialize() - przetwarzamy wartosci wszystkich pol formularza na stringa i przekazujemy je do skryptu php
8: function® - jako parametr callback-u (funkcji wywołanej po otrzymaniu odpowiedzi od serwera) podajemy odpowiedź serwera
9: if( r.status ) - sprawdzamy czy w ospowiedzi jest ustawiona wartość status na true
10: form.html(r.msg) - jeżeli powyższe tak to wyświetlamy w miejsce formularza podziękowanie
jeżeli powyższe nie to:
12: alert(r.msg) - wyświetlamy błąd
13: form.find('.error').removeClass('error') - usuwamy wszystkim elementom formularza klasę 'error'
14-17: for(...){ ... } - przelatujemy przez wszystkie błedy i błędnym polom ustawiamy klasę error - za mocą css wyrózniamy te pola
22: 'json' - jako ostatni parametr funkcji post podajemy typ danych jakie otrzmyamy od serwera
DEMO: http://web-talk.pl/demo/933-formularz/
DOWNLOAD: 
formularz.zip 4,45 KB
0 Ilość pobrań
Jeżeli masz jakieś propozycje zmian lub rozbudowy, czekam na informację.
Poradnik jest własnością autora zgodnie z ustawą z dnia 4 lutego 1994 roku o prawie autorskim i prawach pokrewnych. Publikowanie ich na innych forach i serwisach internetowych bez wiedzy i zgody autorów jest surowo zabronione.
Napisane przez
w 09 lipca 2013 - 00:06
Napisane przez
w 09 lipca 2014 - 20:48
Siemanko!
Mam chwilę aby podzielić się z wami podstawami o AngularJS, którego mam nadzieje zacznie używać więcej ludzi w Polsce 
Link do strony domowej: https://angularjs.org/
AngularJS to JavaScriptowski framework MVW, wypluty przez google, który jest dość łatwy w uzyciu, bardzo szybko wykonamy rzeczy, które w czystym JS zajmują o wiele więcej czasu i posiada on bardzo dużo plusów na tle pozostałych z tej kategorii.
Dobra, pierwsze co to zacznijmy od 'zainstalowania' biblioteki. Stwórzmy prosty dokument z dodanym frameworkiem:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mój pierwszy skrypt!</title>
<script src="https://code.angularjs.org/1.2.19/angular.min.js"></script>
</head>
<body>
// document body here!
</body>
</html>
Jesli mamy już stworzony plik, który zawiera plik z AngularJS, teraz czas na wykonanie kilku prostych poleceń, które 'ożywią' nasz dokument!
Piwersze z nich to dodanie 'ng-app' jako wbudowanej dyrektywy, która definiuje naszą aplikacje. Wszystko pomiędzy tą dyrektywą co związane jest z Angularem, będzie brane pod uwagę przy wykonywaniu skryptu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mój pierwszy skrypt!</title>
<script src="https://code.angularjs.org/1.2.19/angular.min.js"></script>
</head>
<body>
<div ng-app>
<input type="text" ng-model="q">
<span>{{q}}</span>
</div>
</body>
</html>
Tutaj mamy do czynienia także z wbudowaną dyrektywą jaką jest ng-model. Generalnie prefiks 'ng' jest zarezerwowany dla wbudowanych dyrektyw w tym frameworków.
ng-model definiuje model danych, które są sprawdzane pod kątem zmian oraz przetwarzane w tym frameworku. Działanie to jest trawione w definicji zwanej digest cycle ale o tym troszkę później. ng-model można określić jako model danych wysyłanych do rdzenia frameworka Czyli jak wpiszemy w pole tkstowe tekst, Angular przetrawi go i zwróci wynik końcowy natychmiast.
Jak widać, użyłem także tagów {{ }} typowych dla AngularJS, pomiędzy nim, w prostszy sposó (co nie znaczy że najlepszy) definiujemy naszą treść, którą Angular wypluje - dobrym porównaniem jest 'echo' w PHP.
Tutaj można zobaczyć proste demo: http://jsfiddle.net/5Tb88/
Czyż nie jest łatwe ? Jest. Jednakże to jest początek góry lodowej, która czeka nas do wyuczenia, jeśli chcemy oczywiście cokolwiek tworzyć w tym frameworku.
To są akurat podstawy podstaw, opisane moimi słowami, myślę że to taki przedsmak tego co opiszę w następnych tematach. Chciałbym je rozdzielić na więcej i mniejszych tematów, ponieważ z doświadczenia wiem, że z tym co za dużo to i nie zdrowo.
Także nie długo kolejna część, bardziej treściwa na temat ogólnie dyrektyw, wbudowanych dyrektyw w AngularJS oraz stworzymy jakiś prosty skrypcik, który będzie korzystał z ich mocy
Tymczasem zachęcam do czytania przede wszytskim dokumentacji i powodzenia w nacue tym, którzy są zainteresowani w tym temace
Napisane przez
w 11 kwietnia 2014 - 20:44
Kiedys sie korzystalo z darmowek. Teraz to strach tykac nawet i te platne.
Jak masz dobry content to i ruch sam przyjdzie.
Powiedział to kolega od warezów...
Napisane przez
w 26 marca 2014 - 00:01
Moim zdaniem słaby hosting, nie przypadł mi do gustu i miałem z nim dużo problemów. Najlepiej jest postawić na linuxpl.com lub speedhost.pl
Napisane przez
w 28 lutego 2013 - 22:41
Napisane przez
w 07 września 2013 - 21:12
Jeśli chcemy stworzyć na swoim forum wysuwany Like Box Facebooka to możemy skorzystać z wtyczki:
Facebook Slide Fanpage
Instalujemy to rozszerzenie i w zasadzie możemy cieszyć się Like Boxem.
Niestety czasami efekt wysuwania nie działa. Wtedy musimy zrealizować następujące kroki:
- Wybieramy nasz styl w panelu administracyjnym i przechodzimy do pliku indoFacebookSlide
- Odnajdujemy w tym pliku poniższy fragment:
<!-- <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type='text/javascript'>!window.jQuery && document.write('<script src="{style_images_url}/js/jquery.min.js"><\/script>')</script> -->
i usuwamy tagi komentarza. (tj. <!--- oraz -->)
I voila! Teraz powinno wszystko hulać
Napisane przez
w 31 stycznia 2016 - 14:54
Instalujesz Gulpa globalnie czyli "npm install -g gulp"
Wchodzisz do swojego katalogu z projektem i tam już powinieneś mieć package.json - wtedy byś tylko zrobił "npm i" i by zainstalowało wszystkie zależności.
Jeśli go nie masz to robisz od początku czyli "npm init". Potem możesz dodać te swoje dev zależności: "npm install --save-dev gulp" itd.
Gulpfile też powinien być w głównym folderze ale chyba ścieżki musisz w nim poprawić.
Jak potrzebujesz tylko proste rzeczy robić to Gulp czy Grunt jest zbędny. Wszystko możesz zrobić przy pomocy npm'a.
Napisane przez
w 21 września 2015 - 15:20
W tym przypadku słówko this wskazuje na element, który został kliknięty.
Możesz tą metodę wywołać po prostu tak: Locate.setAttributes()
Napisane przez
w 25 sierpnia 2015 - 12:58
Jak nadać własne style elementom input radio i checkbox?
Wbrew pozorom nie jest to trudne zadanie. Jednak wiele osób nie wie jak to zrobić, bowiem nie da się nadać stylów tym elementom w standardowy sposób. Taki sposób nie zadziała:
input[type=checkbox] {
background: red;
border: 1px solid red;
}
Jak więc osiągnąć zamierzony efekt?
Jest to bardzo proste. Zazwyczaj elementowi input towarzyszy label i to on przejmie rolę tego pola.
<input type="checkbox" name="custom1" id="custom1"> <label for="custom1"> Label</label>
Dlatego więc ukryjemy nasz input właściwością display: none i najzwyczajniej ostylujemy element label. Nie możemy jednak zamienić całego label, ponieważ wewnątrz może znajdować się tekst opisujący nasze pole. Użyjemy do tego celu pseudoklasy :befor, po to żeby pole checkbox znalazło się przed naszym opisem.
label:befor powinien mieć pozycję absolutną, aby móc dokładnie ustalić jego położenie, a także być elementem blokowym (display: block). Reszta stylów (wysokość, szerokość, kolory) zależą od naszego uznania. Dodatkowo w poniższym przykładzie została dodana właściwość transition, dzięki temu osiągniemy efekt płynności podczas zaznaczania naszych pól.
W celu określenia co ma się stać gdy element będzie zaznaczony lub zablokowany należy użyć pseudoklas, kolejno :checked i :disabled
W celu uzyskania zamierzonego efektu należy zmienić, według uznania, właściwości background-color, border-color, width, height. Zachęcam do eksperymentowania.
Demo: http://jsfiddle.net/writen/9L9bamcs
input[type=checkbox], input[type=radio] {
display: none; /* ukrywamy nasz input */
}
input[type=checkbox] + label, input[type=radio] + label {
position: relative;
padding-left: 23px; /* margines wewnętrzny - trzeba zrobić trochę miejsca dla naszego pola */
}
input[type=checkbox] + label:before, input[type=radio] + label:before {
position: absolute;
content: "";
display: block; /* koniecznie element blokowy, aby móc nadać odpowiednie wymiary */
width: 10px;
height: 10px;
top: 0; /* ustalamy pozycje */
left: 0;
cursor: pointer; /* dodamy jeszcze odpowiedni kursor */
transition: all .4s ease;
-webkit-transition: all .4s ease;
background-color: #cccccc;
border: 3px solid #cccccc;
}
/* checkbox */
input[type=checkbox] + label:before {
border-radius: 2px;
}
/* radio */
input[type=radio] + label:before {
border-radius: 50%; /* aby input radio był okrągły */
}
/* gdy zaznaczony */
input[type=checkbox]:checked + label:before, input[type=radio]:checked + label:before {
background-color: #ffffff;
}
/* gdy zablokowany */
input[type=checkbox]:disabled + label:before, input[type=radio]:disabled + label:before {
background-color: #b6b6b6;
border-color: #b6b6b6;
}
/* gdy zaznaczony i zablokowany */
input[type=checkbox]:checked:disabled + label:before, input[type=radio]:checked:disabled + label:before {
background-color: #cccccc;
border-color: #b6b6b6;
}
Napisane przez
w 09 stycznia 2015 - 18:03
Można wrzucić przy rejestrowaniu zadanie z całką...
Tak wiem, inteligencja to nie to samo co mądrość
Ustaw sobie takie coś na budzik rano cwaniaku 
żeby go wyłączyć jebnij całkę
Napisane przez
w 07 marca 2013 - 11:28
Napisane przez
w 14 kwietnia 2013 - 12:53
Świetny tutorial pokazujący jak zrobić stronę, która dostosowuje swoją szerokość do rozdzielczości urządzenia. Należy wziąć pod uwagę, że coraz więcej osób przegląda internet przy użyciu urządzeń mobilnych.
Źródło: 1stwebdesigner.com
Napisane przez
w 13 maja 2016 - 21:39
Bo spotykam sie czasem z czymś takim że wchodzę na stronę i jest info w stylu że "strona jest offline, przeglądasz scachowaną wersję" To też jest ta sama usługa?
CDN to zewnętrzny dostawca treści, które u niego zamieścisz i będziesz korzystał z jego zasobów.
Pod tym kątem cloudflare oferuje trochę więcej niż utrzymanie .img (swoją drogą dopiero w płatnych planach)
Najważniejsze to pod pewnym kątem zabezpieczenie przed atakami DDoS, cache-owanie strony (o czym wspomniałeś) i dodatkowe serwery DNS, przyspieszające ładowanie w przypadku serwisów globalnych. Reszta to już dodatkowe usługi. Tylko przy 20$/mies to byle byznesmien popuka się w głowę, kiedy tyle z vatem płaci rocznie za hosting w PL 
Napisane przez
w 03 maja 2015 - 16:54
Chyba brakuje tutaj:
$("#submit").click(function(e) {
e.preventDefault();
... dalsza część kodu ...
Napisane przez
w 20 kwietnia 2015 - 08:27
Od razu mówię, że musi to być wyjątkowo idiotoodporne tzn. od strony usera musi być bardzo proste do obsługi
Tym samym nawet customfields odpadnie.
Pozostaje własnoręczne stworzenie guzika do tinymce.
http://code.tutsplus...ttons--wp-30182
https://www.gavick.c...-custom-buttons
W drugim tutku masz dostępne pliki do pobrania; może przyspieszą robotę.
Projekt zonic Kodowanie MediaInfini
Community Forum Software by IP.Board 3.4.6
Właściciel: Web-talk.pl