@mixin margin($direction) {
@if $direction == top{
.mt-#{$i*10}{ margin-top: $i * 10;}
} @else if $direction == bottom{
.mb-#{$i*10}{ margin-bottom: $i * 10;}
}
}
@for $i from 1 through 10{
@include margin(top)
}
@for $i from 1 through 10{
@include margin(bottom)
}
30 Ağustos 2015 Pazar
1 Ağustos 2015 Cumartesi
Gruntjs file 2.version
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
17 Temmuz 2015 Cuma
gruntfile.js dosyam
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
options:{
livereload: true
},
css: {
files: 'sass/style.scss',
tasks: ['sass','uglify']
},
},
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'css/style.css': 'sass/style.scss',
}
}
},
cssmin: {
target: {
files: [{
expand: true,
cwd: 'css',
src: ['*.css', '!*.min.css'],
dest: 'css',
ext: '.min.css'
}]
}
},
uglify: {
options: {
mangle: false
},
my_target: {
files: {
'js/custom.min.js': ['js/custom.js']
}
}
},
express: {
all: {
options: {
port: 9000,
hostname: 'localhost',
bases: ['.'],
livereload: true
}
}
},
concat: {
jquery: {
files: {
'js/jquery.js': ['bower_components/jquery/dist/jquery.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-express');
grunt.registerTask('server', ['express','watch']);
}
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
options:{
livereload: true
},
css: {
files: 'sass/style.scss',
tasks: ['sass','uglify']
},
},
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'css/style.css': 'sass/style.scss',
}
}
},
cssmin: {
target: {
files: [{
expand: true,
cwd: 'css',
src: ['*.css', '!*.min.css'],
dest: 'css',
ext: '.min.css'
}]
}
},
uglify: {
options: {
mangle: false
},
my_target: {
files: {
'js/custom.min.js': ['js/custom.js']
}
}
},
express: {
all: {
options: {
port: 9000,
hostname: 'localhost',
bases: ['.'],
livereload: true
}
}
},
concat: {
jquery: {
files: {
'js/jquery.js': ['bower_components/jquery/dist/jquery.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-express');
grunt.registerTask('server', ['express','watch']);
}
23 Mayıs 2015 Cumartesi
Sass ile Sayfa Yenilemeden Değişiklikleri Görmek
<script src="https://raw.githubusercontent.com/yukulele/CSSrefresh/master/cssrefresh.js"></script>
<script>
window.onload = function(){
var script = document.createElement('script');
script.src = "js/cssrefresh.js";
document.querySelector('head').appendChild(script);
};
</script>
21 Mayıs 2015 Perşembe
jQuery Ui Modal Kullanımı
HTML
<a href="#" class="btnc">Tıkla</a>
<div id="tmpExample" title="deneme">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus quam maxime nostrum voluptatem eveniet! Dolor repellat tenetur esse harum suscipit culpa sint ducimus assumenda eum perferendis, illo at molestiae ipsa, odio ea impedit sit. Dolorum in, laudantium tenetur fugiat atque repellat enim, sequi adipisci libero provident aliquid non ullam quidem.</p>
</div>
18 Mayıs 2015 Pazartesi
Jquery Ajax Load Content
HTML
<a href="#" onclick="return false" onmousedown="getir('link1')">Anasayfa</a>
<a href="#" onclick="return false" onmousedown="getir('link2')">Hakkımızda</a>
<a href="#" onclick="return false" onmousedown="getir('link3')">İletişim</a>
<div class="icerik"></div>
PHP
$phpVal = $_POST['phpVal'];
if ($phpVal == "link1") {
echo "bu link 1 in içeriğidir";
}elseif ($phpVal == "link2") {
include "dene.html";
}elseif ($phpVal == "link3") {
echo "bu link 3333333 in içeriğidir";
}
JS
function getir(val){
$(".icerik").html('<img src="load.gif" width="400" height="300" />').show();
$.post("init.php",{phpVal:val},function(data){
setTimeout(function(){
$(".icerik").html(data).show();
},500);
});
}
<a href="#" onclick="return false" onmousedown="getir('link1')">Anasayfa</a>
<a href="#" onclick="return false" onmousedown="getir('link2')">Hakkımızda</a>
<a href="#" onclick="return false" onmousedown="getir('link3')">İletişim</a>
<div class="icerik"></div>
PHP
$phpVal = $_POST['phpVal'];
if ($phpVal == "link1") {
echo "bu link 1 in içeriğidir";
}elseif ($phpVal == "link2") {
include "dene.html";
}elseif ($phpVal == "link3") {
echo "bu link 3333333 in içeriğidir";
}
JS
function getir(val){
$(".icerik").html('<img src="load.gif" width="400" height="300" />').show();
$.post("init.php",{phpVal:val},function(data){
setTimeout(function(){
$(".icerik").html(data).show();
},500);
});
}
Ajax ile otomatik arama
HTML
<input type="text" placeholder="ara" onkeyup="getir(this.value)" >
<div class="sonuclar"></div>
JS
function getir(value){
$.post("init.php",{phpValue:value},function(data){
if (value != "") {
$(".sonuclar").html(data);
}else{
$(".sonuclar").html("");
}
})
}
PHP
<?php
mysql_select_db("people",mysql_connect("localhost","root",""));
$phpValue = $_POST['phpValue'];
$ara = mysql_query("select sirket from kisi where sirket like '$phpValue%'");
while ($row = mysql_fetch_array($ara)) {
echo "<div>".$row["sirket"]."</div>";
}
?>
<input type="text" placeholder="ara" onkeyup="getir(this.value)" >
<div class="sonuclar"></div>
JS
function getir(value){
$.post("init.php",{phpValue:value},function(data){
if (value != "") {
$(".sonuclar").html(data);
}else{
$(".sonuclar").html("");
}
})
}
PHP
<?php
mysql_select_db("people",mysql_connect("localhost","root",""));
$phpValue = $_POST['phpValue'];
$ara = mysql_query("select sirket from kisi where sirket like '$phpValue%'");
while ($row = mysql_fetch_array($ara)) {
echo "<div>".$row["sirket"]."</div>";
}
?>
7 Mayıs 2015 Perşembe
Jquery Ajax Php KAyıt Formu
Not:Öyle bir kullanıcı adı varsa hata göstermesi için veritabanında uniqi(benzersiz)yapılmalıdır.
HTML
----
<form action="init.php" id="mForm" method="post">
Adı: <input type="text" name="adi" id="ad"><br/>
Şifre: <input type="text" name="sifre" id=""><br/>
Soyadı: <input type="text" name="soyadi" id=""><br/>
İşyeri <input type="text" name="isyeri" id=""><br/>
<button id="submit">KAydet</button>
</form>
<p></p>
HTML
----
<form action="init.php" id="mForm" method="post">
Adı: <input type="text" name="adi" id="ad"><br/>
Şifre: <input type="text" name="sifre" id=""><br/>
Soyadı: <input type="text" name="soyadi" id=""><br/>
İşyeri <input type="text" name="isyeri" id=""><br/>
<button id="submit">KAydet</button>
</form>
<p></p>
Php ve Json Türkçe Karakter Sorunu
Veritabanı bağlantısı altına
mysql_query('SET NAMES UTF8');
mysql_query("SET CHARACTER SET utf8");
mysql_query("SET COLLATION_CONNECTION = 'utf8_general_ci'");
Json Dosyasına
header('Content-type: application/json; charset=utf-8');
mysql_query('SET NAMES UTF8');
mysql_query("SET CHARACTER SET utf8");
mysql_query("SET COLLATION_CONNECTION = 'utf8_general_ci'");
Json Dosyasına
header('Content-type: application/json; charset=utf-8');
5 Mayıs 2015 Salı
Ajax İle Veritabanına Form Kaydettirme SerializeArray
HTML
---
<form id="mform" action="init.php" method="post">
adı : <input type="text" name="adi" id="">
Yşı : <input type="text" name="yasi" id="">
<button id="but">Kaydet</button>
</form>
<p id="fb"></p>
---
<form id="mform" action="init.php" method="post">
adı : <input type="text" name="adi" id="">
Yşı : <input type="text" name="yasi" id="">
<button id="but">Kaydet</button>
</form>
<p id="fb"></p>
3 Mayıs 2015 Pazar
Basic İmage Divider Sliding Yapımı
HTML
----
<div class="container">
<div class="divider-wrapper">
<div class="code-wrapper">
<img src="design.jpg" alt="">
<div class="design-wrapper">
<div class="design-image">
<img src="code.jpg" alt="">
</div>
</div>
</div>
<div class="divider-bar"></div>
</div>
</div>
----
<div class="container">
<div class="divider-wrapper">
<div class="code-wrapper">
<img src="design.jpg" alt="">
<div class="design-wrapper">
<div class="design-image">
<img src="code.jpg" alt="">
</div>
</div>
</div>
<div class="divider-bar"></div>
</div>
</div>
2 Mayıs 2015 Cumartesi
jQuery Tab Menü
HTML
----
<div class="tab-dis">
<div class="tab-link">
<a href="#">Tab 1</a>
<a href="#">Tab 2</a>
<a href="#">Tab 3</a>
</div>
----
<div class="tab-dis">
<div class="tab-link">
<a href="#">Tab 1</a>
<a href="#">Tab 2</a>
<a href="#">Tab 3</a>
</div>
Jquery Slider Otomatik onat ve ileri geri buton
HTML
-----
<html>
<head>
<meta charset="UTF-8">
<title>Slider Yapımı</title>
<link rel="stylesheet" href="stle.css">
</head>
<body>
-----
<html>
<head>
<meta charset="UTF-8">
<title>Slider Yapımı</title>
<link rel="stylesheet" href="stle.css">
</head>
<body>
29 Nisan 2015 Çarşamba
Parallax Header ve Görse Geçişleri
HTML
------
<div class="contain">
<header class="header">
<div class="bg"></div>
<div class="logo"></div>
<div class="karga"></div>
</header>
------
<div class="contain">
<header class="header">
<div class="bg"></div>
<div class="logo"></div>
<div class="karga"></div>
</header>
Güzel Form Yapımı Dripple Tarzı
HTML
----------
<form class="guzelForm">
<input type="text" id="i1"><label for="i1" class="l1">Adınızı Yazın</label>
<input type="text" id="i2"><label for="i2" class="l2">Email Adresiniz</label>
<input type="submit" value="Gönder">
</form>
----------
<form class="guzelForm">
<input type="text" id="i1"><label for="i1" class="l1">Adınızı Yazın</label>
<input type="text" id="i2"><label for="i2" class="l2">Email Adresiniz</label>
<input type="submit" value="Gönder">
</form>
28 Nisan 2015 Salı
Müziğe Göre Hareket Eden Audio Player
HTML
<article id="palyer">
<div class="player">
<div class="dis"></div>
<div class="ic"></div>
<div class="playpause"></div>
</div>
<audio data-bpm="86">
<source src="m1.mp3" type="audio/mp3">
<source src="m1.ogg" type="audio/ogg">
</audio>
</article>
<article id="palyer">
<div class="player">
<div class="dis"></div>
<div class="ic"></div>
<div class="playpause"></div>
</div>
<audio data-bpm="86">
<source src="m1.mp3" type="audio/mp3">
<source src="m1.ogg" type="audio/ogg">
</audio>
</article>
27 Nisan 2015 Pazartesi
Soldan Kayan menü yapımı
HTML
<input type="checkbox" name="" id="l1">
<div class="ana">
<label for="l1" class="l1">☰</label>
<div class="icerik">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum voluptate dolorem
</div>
<input type="checkbox" name="" id="l1">
<div class="ana">
<label for="l1" class="l1">☰</label>
<div class="icerik">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum voluptate dolorem
</div>
26 Nisan 2015 Pazar
Radio ve checkbox button plugini iCheck
https://github.com/fronteed/iCheck
<link href="futurico/futurico.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="icheck.min.js"></script>
<script>
$(document).ready(function(){
$('input').iCheck({
checkboxClass: 'icheckbox_futurico',
radioClass: 'iradio_futurico',
increaseArea: '10%' // optional
});
});
</script>
<link href="futurico/futurico.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="icheck.min.js"></script>
<script>
$(document).ready(function(){
$('input').iCheck({
checkboxClass: 'icheckbox_futurico',
radioClass: 'iradio_futurico',
increaseArea: '10%' // optional
});
});
</script>
Custom radio button ve checkbox yapımı
--Css content ile yapımı--
HTML KISMI
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<form>
<input type="checkbox" name="" id="c1"><label for="c1">Chek 1</label><br>
<input type="checkbox" name="" id="c2"><label for="c2">Chek 2</label>
</form>
HTML KISMI
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<form>
<input type="checkbox" name="" id="c1"><label for="c1">Chek 1</label><br>
<input type="checkbox" name="" id="c2"><label for="c2">Chek 2</label>
</form>
25 Nisan 2015 Cumartesi
404 hATASI çÖZÜmü
http://www.site.com/asd-dsa-sss-116.html //url yapısı------
$get_url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
$url = "http://".$_SERVER['HTTP_HOST']."/".seo_url($say['url'])."-".$say['id'].".html";
//echo $get_url."<br>".$url;die();
if ($get_url<>$url) {
header( 'HTTP/1.1 404 Not Found' );
include( $_SERVER['DOCUMENT_ROOT'] . '/404.php' );
}
if($say){ ?>
<? }else{ ?>
24 Nisan 2015 Cuma
owl carousel kullanımı
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Carousel</title>
<link rel="stylesheet" href="owl.carousel.css">
<link rel="stylesheet" href="owl.theme.css">
<link rel="stylesheet" href="style.css">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Carousel</title>
<link rel="stylesheet" href="owl.carousel.css">
<link rel="stylesheet" href="owl.theme.css">
<link rel="stylesheet" href="style.css">
21 Nisan 2015 Salı
Spotlight Yapımı Jquery
<link rel="stylesheet" href="style.css">
<script src="jquery.min.js"></script>
<script src="js.js"></script>
<div class="kutu">
Kutucuk
<div class="tooltip">Buraa Dikkat</div>
</div>
---------------
<script src="jquery.min.js"></script>
<script src="js.js"></script>
<div class="kutu">
Kutucuk
<div class="tooltip">Buraa Dikkat</div>
</div>
---------------
Canvas Resim Döndürme
<body>
<canvas width="1280" height="720" id="canvas"> </canvas>
<script>
var resim = new Image();
resim.src= "r.png";
<canvas width="1280" height="720" id="canvas"> </canvas>
<script>
var resim = new Image();
resim.src= "r.png";
NiceScroll.js
<script src="jquery.nicescroll.js"></script>
<script>
$(document).ready(
function() {
$("html").niceScroll();
$(".deneme").niceScroll();
}
);
</script>
--------------
nicescroll.js
http://areaaperta.com/nicescroll/
https://github.com/inuyaksa/jquery.nicescroll
<script>
$(document).ready(
function() {
$("html").niceScroll();
$(".deneme").niceScroll();
}
);
</script>
--------------
nicescroll.js
http://areaaperta.com/nicescroll/
https://github.com/inuyaksa/jquery.nicescroll
Circle ProgressBar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Circle Progress Bar</title>
<script src="jquery.min.js"></script>
<script src="rotater.js"></script>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Circle Progress Bar</title>
<script src="jquery.min.js"></script>
<script src="rotater.js"></script>
Jquery Fixed header
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(window).on('load scroll', headerFixed);
function headerFixed() {
var scrollTop = $(window).scrollTop();
if (scrollTop > 130) {
$(".menu").addClass('fixed');
}else{
$(".menu").removeClass('fixed');
}
}
</script>
<script>
$(window).on('load scroll', headerFixed);
function headerFixed() {
var scrollTop = $(window).scrollTop();
if (scrollTop > 130) {
$(".menu").addClass('fixed');
}else{
$(".menu").removeClass('fixed');
}
}
</script>
8 Nisan 2015 Çarşamba
Siteyi Responsive Çevirme
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
/*---------------iPad & Samsung Galaxy Tablets portrait---------------*/
/*___________________________________________________________________*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
}
/*---------------iPhone & Samsung Mobiles landscape---------------*/
/*___________________________________________________________________*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
}
/*---------------iPhone & Samsung Mobiles landscape---------------*/
/*___________________________________________________________________*/
@media only screen and (min-width: 320px) and (max-width: 479px) {
}
/*Mobil Menü İçin*/
jQuery(document).ready(function($) {
var a=0;
$(".menu-mobil").click(function(){
if(a == 0){
$(this).text("KAPAT");
a++;
}else{
$(this).text("MENÜ");
a=0;
}
$("#categories").toggle();
});
});
/*---------------iPad & Samsung Galaxy Tablets portrait---------------*/
/*___________________________________________________________________*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
}
/*---------------iPhone & Samsung Mobiles landscape---------------*/
/*___________________________________________________________________*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
}
/*---------------iPhone & Samsung Mobiles landscape---------------*/
/*___________________________________________________________________*/
@media only screen and (min-width: 320px) and (max-width: 479px) {
}
/*Mobil Menü İçin*/
jQuery(document).ready(function($) {
var a=0;
$(".menu-mobil").click(function(){
if(a == 0){
$(this).text("KAPAT");
a++;
}else{
$(this).text("MENÜ");
a=0;
}
$("#categories").toggle();
});
});
28 Mart 2015 Cumartesi
Css ile modal yapımı
HTML
<a href="#modal">Aç</a>
<div class="modal" id="modal">
Ben Bir Garip Modal window örneğiyim
</div>
<a href="#modal">Aç</a>
<div class="modal" id="modal">
Ben Bir Garip Modal window örneğiyim
</div>
24 Mart 2015 Salı
Jquery Serialize ile get
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="" method="get">
<input type="text" name="adi" id="">
<input type="text" name="soyadi" id="">
<input type="text" name="sifre" id="">
<input type="button" value="Gönder" class="gonder">
</form>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="" method="get">
<input type="text" name="adi" id="">
<input type="text" name="soyadi" id="">
<input type="text" name="sifre" id="">
<input type="button" value="Gönder" class="gonder">
</form>
23 Mart 2015 Pazartesi
Php ile Upload
<?php
if (isset($_FILES['file'])) {
$boyut = $_FILES['file']['size'];
$tip = $_FILES['file']['type']; //---image/jpeg
$adi = $_FILES['file']['name'];
$dosya = $_FILES['file']['tmp_name']; //--yüklenen dosya yolu
if (isset($_FILES['file'])) {
$boyut = $_FILES['file']['size'];
$tip = $_FILES['file']['type']; //---image/jpeg
$adi = $_FILES['file']['name'];
$dosya = $_FILES['file']['tmp_name']; //--yüklenen dosya yolu
Dinamik Sitemap PHP
<?php
function seo_url($data) {
$sefurl = str_replace('A','a',$data);
$sefurl = str_replace('B','b',$sefurl);
$sefurl = str_replace('C','c',$sefurl);
function seo_url($data) {
$sefurl = str_replace('A','a',$data);
$sefurl = str_replace('B','b',$sefurl);
$sefurl = str_replace('C','c',$sefurl);
21 Mart 2015 Cumartesi
PDO
VERİ TABANI BAĞLANMA
<?php
try{
$pdo = new PDO("mysql: host=localhost;dbname=kayit","root","");
}catch(PDOExeption $e){
echo $e->getMessage();
}
/*hata gösterme*/
if ($pdo->query("select * from uyeler order by")) {
//
}else{
$hata = $pdo->errorInfo();
echo $hata[2];
}
?>
<?php
try{
$pdo = new PDO("mysql: host=localhost;dbname=kayit","root","");
}catch(PDOExeption $e){
echo $e->getMessage();
}
/*hata gösterme*/
if ($pdo->query("select * from uyeler order by")) {
//
}else{
$hata = $pdo->errorInfo();
echo $hata[2];
}
?>
Kaydol:
Kayıtlar (Atom)