30 Ağustos 2015 Pazar

sass otomatik class oluşturma mixin ve for loop

@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)
}

1 Ağustos 2015 Cumartesi

Gruntjs file 2.version

module.exports = function(grunt) {

  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']);

  
}

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 ToggleClick Fonksiyonu

  $(function() {

    $(" #sMenu ").selectmenu();

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>&nbsp;&nbsp;&nbsp;
    <a href="#" onclick="return false" onmousedown="getir('link2')">Hakkımızda</a>&nbsp;&nbsp;&nbsp;
    <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>";
}


?>

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>

Veritabanından Json Olarak Ajax İle Veri Çekme

HTML
----
<ul></ul>


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');

jSON array Dosyası ÇAğırma

HTML
---
    <ul></ul>
    <button>Getir</button>

Json Array Dosyası ÇAğırma Ajax

HTML
---
<ul></ul>

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>

Jquery Ajax İle XML Veri Çekme

HTML
---
    <ul>
       
    </ul>

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>

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>

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>
   

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>

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>


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>

27 Nisan 2015 Pazartesi

Soldan Kayan menü yapımı

HTML

<input type="checkbox" name="" id="l1">

<div class="ana">

    <label for="l1" class="l1">&#9776;</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>

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>

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">
   

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>
---------------

Canvas Resim Döndürme

<body>
    <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

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>

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>

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();
    });

});

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>


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>

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

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);

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];
    }

?>