JS, JQUERY arşivleri

Bütçe Hesaplama

HTML

177 lines


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <style>
        #container{
            padding-right: 15px;
            padding-left: 15px;
            padding-top: 15px;
            margin-right: auto;
            margin-left: auto;
        }
        table td{
            margin: 20px;
        }
        input{
            cursor: pointer;
        }
        #info{
            color:#ff1121;
            font-weight: bold;
        }
        #education .color,#educationBar{
            background: #4986E7;
        }
        #environment .color,#environmentBar{
            background: #16A765;
        }
        #military .color,#militaryBar {
            background: #E9B330;
        }
        #health .color,#healthBar{
            background: #ff1121;
        }
        #crime .color,#crimeBar{
            background: #A076DD;
        }
        .meter{
            background: #555;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            padding: 5px;
        }
        .meter span {
            background: #eff151;
            border-radius: 5px;
            height: 10px;
            display: block;
        }
        .color{
            width: 25px;
            height: 25px;
            border: 1px #000000 solid;
            float: left;
        }
        .bar{
            width: 50px;
            float: left;
            border: 1px rgba(255, 255, 255, 0) solid;
            margin-left: 10px;
        }
        #chart{
            border: 1px #000000 solid;
            width: 325px;
            height: 250px;
            float: left;
            padding: 10px;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="overAll">
        <table>
            <tr>
                <td style="width: 200px;"> <label>Toplam:  <span id="total"> 0%</span></label> </td>
                <td> : </td>
                <td style="width: 300px">
                    <div class="meter">
                        <span style="width: 0"></span>
                    </div>
                </td>
                <td id="info"> ! Bütçenizi Aşıyor </td>
            </tr>
        </table>
    </div>
    <br>
    <div style="width: 100%;float: left;margin-left: 0px">
        <div id="chart">
            <span id="educationBar" class="bar"></span>
            <span id="environmentBar" class="bar"></span>
            <span id="militaryBar" class="bar"></span>
            <span id="healthBar" class="bar"></span>
            <span id="crimeBar" class="bar"></span>
        </div>
    </div>
    <div id="division" style="float: left;margin-top: 2%">
        <table>
            <tr id="education">
                <td> <label>Eğitim:  <span> 0%</span></label> </td>
                <td><span class="color"></span> : </td>
                <td> <input type="range" min="0" max="100" value="0"/> </td>
            </tr>
            <tr id="environment">
                <td> <label>Çevre:  <span> 0%</span></label> </td>
                <td><span class="color"></span> : </td>
                <td> <input type="range" min="0" max="100" value="0"/> </td>
            </tr>
            <tr id="military">
                <td> <label>Güvenlik:  <span> 0%</span></label> </td>
                <td><span class="color"></span> : </td>
                <td> <input type="range" min="0" max="100" value="0"/> </td>
            </tr>
            <tr id="health">
                <td> <label>Sağlık:  <span> 0%</span></label> </td>
                <td><span class="color"></span> : </td>
                <td> <input type="range" min="0" max="100" value="0"/> </td>
            </tr>
            <tr id="crime">
                <td style="width: 200px;"> <label>Barınma:  <span> 0%</span></label> </td>
                <td><span class="color"></span> : </td>
                <td> <input type="range" min="0" max="100" value="0"/> </td>
            </tr>
        </table>
    </div>
</div>
<script>
    $(function(){
        $("#info").hide();
        var education,environment,military,health,crime;
        var total,chartValues;
        $("table").on("change mousemove",function(){
            education = $("#education").find("input").val();
            environment = $("#environment").find("input").val();
            military = $("#military").find("input").val();
            health = $("#health").find("input").val();
            crime = $("#crime").find("input").val();
            total=(Number(education/5)+Number(environment/5)+Number(military/5)+Number(health/5)+Number(crime/5));
            chartValues =[Number(education),Number(environment),Number(military),Number(health),Number(crime)];
            console.log(chartValues);
            valueUpdate();
        });
        function valueUpdate(){
            $("#education").find("label").find("span").text(education+"%");
            $("#environment").find("label").find("span").text(environment+"%");
            $("#military").find("label").find("span").text(military+"%");
            $("#health").find("label").find("span").text(health+"%");
            $("#crime").find("label").find("span").text(crime+"%");
            console.log(total);
            $("#educationBar").css({"height":education+"%"});
            //$("#educationBar").css({"height":education+"%","margin-top":education+"%"});
            $("#environmentBar").css({"height":environment+"%"});
            $("#militaryBar").css({"height":military+"%"});
            $("#healthBar").css({"height":health+"%"});
            $("#crimeBar").css({"height":crime+"%"});
            $("#overAll").find("progress").val(Math.ceil(total));
            $("#total").text(Math.ceil(total)+"%");
            $(".meter").find("span").width(Math.ceil(total)+"%");
            if(total>50){
                $("#info").show();
            }
            else{
                $("#info").hide();
            }
        }
    });
</script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

İçerik Haritasi

PHP

155 lines


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 Responsive İçerik Haritasi (BreadCrumb)(Bootsrap veya Materialize Grid Uyumlu)</title>
<style type="text/css">
body {
    margin: 0;
    padding: 0;
    width: 100%;
}
#icerikharitasi {
    text-align: center;
    border-spacing: 0px;
    border-collapse: separate;
    width: 100%;
}
#icerikharitasi tr td {
    display: inline-block;
    width: 33%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    background: #3498db;
    text-align: center;
    font-size: 20px;
    text-decoration: none;
    color: #fff;
    padding: 30px;
}
@media (max-width: 767px) {
    #icerikharitasi tr td {
        display: block;
        width: 100%;
    }
}
#icerikharitasi tr td:nth-child(1) {
    background-color: rgba(224, 34, 34, 1);
}
#icerikharitasi tr td:nth-child(2) {
    background-color: rgba(124, 133, 142, 1);
}
#icerikharitasi tr td:nth-child(3) {
    background-color: rgba(104, 114, 124, 1);
}
#icerikharitasi tr td:nth-child(1):hover {
    background-color: rgba(194, 34, 34, 1);
}
#icerikharitasi tr td:nth-child(2):hover {
    background-color: rgba(120, 120, 120, 1);
}
#icerikharitasi tr td:nth-child(3):hover {
    background-color: rgba(100, 100, 100, 1);
}
@media (min-width: 768px) {
    #icerikharitasi tr td:after {
        content: "";
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 10px solid rgba(224, 34, 34, 1);
        position: absolute;
        right: -10px;
        top: 40%;
        z-index: 1;
    }
    #icerikharitasi tr td:last-child:after {
        display: none;
    }
    #icerikharitasi tr td:nth-child(1):after {
        border-left: 10px solid rgba(224, 34, 34, 1);
    }
    #icerikharitasi tr td:nth-child(2):after {
        border-left: 10px solid rgba(124, 133, 142, 1);
    }
    #icerikharitasi tr td:nth-child(3):after {
        border-left: 10px solid rgba(104, 114, 124, 1);
    }
    #icerikharitasi tr td:nth-child(1):hover:after {
        border-left: 10px solid rgba(194, 34, 34, 1);
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
    }
    #icerikharitasi tr td:nth-child(2):hover:after {
        border-left: 10px solid rgba(120, 120, 120, 1);
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
    }
    #icerikharitasi tr td:nth-child(3):hover:after {
        border-left: 10px solid rgba(100, 100, 100, 1);
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
    }
}
#icerikharitasi tr td a {
    color: #fff;
    text-decoration: none;
}
#icerikharitasi tr td:hover a {
    color: #fff;
    text-decoration: none;
    opacity: 0.8;
}
</style>
</head>
<body>
<table id="icerikharitasi">
    <tr>
        <td><a href="#1">İçerik 1</a></td>
        <td><a href="#2">İçerik 2</a></td>
        <td><a href="#3">İçerik 3</a></td>
    </tr>
</table>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
function resicerik() {
    var ih1 = "#icerikharitasi tr td:nth-child(1)";
    var ih2 = "#icerikharitasi tr td:nth-child(2)";
    var ih3 = "#icerikharitasi tr td:nth-child(3)";
    $(ih1).css('height', 'auto');
    $(ih2).css('height', 'auto');
    $(ih3).css('height', 'auto');
    var i1 = $(ih1).height();
    var i2 = $(ih2).height();
    var i3 = $(ih3).height();
    if (i3 > i2) {
        i = i3
    } else if (i3 === i2) {
        i = i2
    } else if (i2 > i1) {
        i = i2
    } else if (i2 === i1) {
        i = i1
    } else {
        i = i1
    }
    $("#icerikharitasi tr td").height(i);
}
$(document).ready(function() {
    $(window).resize(function() {
        if ($(window).width() > 767) {
            resicerik();
        }else{
            var ih1 = "#icerikharitasi tr td:nth-child(1)";
            var ih2 = "#icerikharitasi tr td:nth-child(2)";
            var ih3 = "#icerikharitasi tr td:nth-child(3)";
            $(ih1).css('height', 'auto');
            $(ih2).css('height', 'auto');
            $(ih3).css('height', 'auto');
        }
    });
});
</script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Demo için Tıklayınız

Anlık Arama

<?php if(isset($_POST["aranan"])){//ajax sorgu sonucu başılyor
	echo '<iframe src="http://www.sahibinden.com/kelime-ile-arama?query_text='.$_POST["aranan"].'" width="100%" height="100%" frameborder="0"></iframe>';
}else{
//sayfamızın ilk yüklemesi başlıyor
?>
<meta http-equiv="Content-Type" content="text/html; charset=utf8"> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
	$(".kelime").focus();//ok tuşları için
	$(".kelime").keyup(function(){
		$("#sonuc").html('');//sonuç divini temizle
		var arama = $(this).val();//arama değerini al
		$.ajax({
			type: "POST",
			url: "index.php",/*burayı bu dosyanın adı ile değiştiriniz*/
			data: "aranan="+arama,
			success: function(data){
				$("#sonuc").html(data);
			}
		});
	});
}); 
</script>
<input type="text" class="kelime" placeholder="Birşey mi aradınız?" style="width:100%"><div id="sonuc"></div>
<?php } ?>

Sürgü ile Renk Değiştirme

HTML Elixir

28 lines


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script>
    $(function() {
        $( "#slider" ).slider({
    range: "min",
    value: 50,
    min: 10,
    max: 99,
    slide: function(event, ui) {
      $("#sonuc").text(ui.value);
      var d=ui.value;
      var e=Math.ceil(99-d);
        var deger="#" + d + d + d;
        var degert="#" + e + e + e;
      $("body").css("background-color", deger);
      $("body").css("color", degert);
      
    }
  });
    });
  </script>
</head>
<body>
  <center><h1>Sürgü ile Renk Değiştirme</h1> </center>
<div id="slider"></div>
 <center><h3><div id="sonuc">50</div></h3></center>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Kamera Görüntülemek

JavaScript

26 lines


window.addEventListener("DOMContentLoaded", function() {
    var canvas = document.getElementById("canvas"),
        context = canvas.getContext("2d"),
        video = document.getElementById("video"),
        videoObj = { "video": true },
        errBack = function(error) {
            console.log("ulusanyazilim.com::error", error.code); 
        };
    if(navigator.getUserMedia) {
        navigator.getUserMedia(videoObj, function(stream) {
            video.src = stream;
            video.play();
        }, errBack);
    } else if(navigator.webkitGetUserMedia) {
        navigator.webkitGetUserMedia(videoObj, function(stream){
            video.src = window.webkitURL.createObjectURL(stream);
            video.play();
        }, errBack);
    }
    else if(navigator.mozGetUserMedia) {
        navigator.mozGetUserMedia(videoObj, function(stream){
            video.src = window.URL.createObjectURL(stream);
            video.play();
        }, errBack);
    }
}, false);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

HTML

2 lines


<video id="video" width="640" height="480" autoplay></video>
<canvas id="canvas" width="640" height="480"></canvas>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

noConflict ile Çakışma Önlemek

Birden fazla jquery ile çalışan kütüphane eklerseniz bazıları çalışmayabilir. İşte çözümü…

JavaScript

27 lines


·<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script type="text/javascript">
 var $x = jQuery.noConflict();
 $x(function(){
 $x( ".a" ).click(function() {
 $x( this ).css("background-color","yellow");
 });
 });
 
 var $y = jQuery.noConflict();
 $y(function(){
 $y( ".a" ).click(function() {
 $y( this ).css("color","red");
 });
 });
 </script>
</head>
<body>
 <div class="a">test</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Css Url Ayrıştırma

HTML

37 lines


·<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <style type="text/css">
 div{
 background-color:#eee;
 padding:5px;
 }
 span{
 background-color:#4fc81f;
 display:block;
 padding:5px;
 }
 </style>
 <title></title>
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
 <span class="result1"></span>
 <span class="result2"></span>
 <div id="test1">background-image: url(../images/background.png)</div>
 <div id="test2">background-image: url('../images/background.png')</div>
 <div id="test3">background-image: url("/assets/images/loginlogo.png")</div>
 <div id="test4">background-image: url(/assets/images/loginlogo.png)</div>
 <div id="test4">background-image: url(assets/images/loginlogo.png)</div>
 
 <script type="text/javascript">
 var al= $( "#test3" ).text();
 var url=/url\((.*?)\)/.exec(al);
 purl=url[1].replace('"','').replace("'","").replace('"',"").replace("'","");
$( ".result1" ).html(url[0]);
$( ".result2" ).html(purl);
 </script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Menüye Tıklayarak Anlık Sayfa Çağırma

PHP

34 lines


<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title></title>
 <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
 <style type="text/css">
 body{min-width:600px;}
 div{float:left;margin:1vh;padding:1vw;border:1vh solid #ccc;}
 .AdminMenu{width:15vw;}
 .Icerik{width:70vw;}
 </style>
</head>
<body>
<span id="Kapsa">
 <div class="AdminMenu">
 <a href="#" data="sayfa1.php" class="adminlink">Sayfa 1</a>
 <a href="#" data="sayfa2.php" class="adminlink">Sayfa 2</a>
<script>
$( ".adminlink" ).click(function() {
 var link = $( this ).attr( "data" );
 $.ajax({url: link,success: function(data) { $('.Icerik').html(data);}});
});
</script>
 </div>
 <div class="Icerik">
 ben bir varsayılan içeriğim<br>
 tıklanan linkteki html içerikler benimle değişir.
linklerdeki data="" kısmına yazdığınız adresler çağırır.
 </div>
</span>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Konu İsmini Başlığa Yazdırmak

Bildiğiniz üzere php’de değişkeni kendisinden sonra echo ile yazdırabiliyoruz.Genelde konular body kısmında olduğu için head daki <title> tagına jquery ile ulaşıp değiştirebiliriz.

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
	<div class="sayfam">
	<?php
	$baslik  ="Merhaba Dünya";
	?>
		<div id="baslik">
		<?php echo $baslik; ?>
		<script type="text/javascript">$(document).attr('title', '<?php echo $baslik; ?>');</script>
		</div>
	</div>
</body>
</html>

Şifre Zorluğu Gösterimi

HTML

161 lines


<html>
<head>
<style>
body
{
    /*ie needs this*/
    margin:0px;
    padding:0px;
    /*set global font settings*/
    font-size:10px;
    font-family:Tahoma,Verdana,Arial;
}
a:hover
{
    color:#fff;
}
#user_registration
{
    border:1px solid #cccccc;
    margin:auto auto;
    margin-top:100px;
    width:400px;
}
#user_registration label
{
        display: block;  /* block float the labels to left column, set a width */
    float: left; 
    width: 70px;
    margin: 0px 10px 0px 5px; 
    text-align: right; 
    line-height:1em;
    font-weight:bold;
}
#user_registration input
{
    width:250px;
}
#user_registration p
{
    clear:both;
}
#submit
{
    border:1px solid #cccccc;
    width:100px !important;
    margin:10px;
}
h1
{
    text-align:center;
}
#passwordStrength
{
    height:10px;
    display:block;
    float:left;
}
.strength0
{
    width:250px;
    background:#cccccc;
}
.strength1
{
    width:50px;
    background:#ff0000;
}
.strength2
{
    width:100px;    
    background:#ff5f5f;
}
.strength3
{
    width:150px;
    background:#56e500;
}
.strength4
{
    background:#4dcd00;
    width:200px;
}
.strength5
{
    background:#399800;
    width:250px;
}
</style>
</style>
<script>
function passwordStrength(password)
{
    var desc = new Array();
    desc[0] = "Çok Zayıf";
    desc[1] = "Zayıf";
    desc[2] = "İdare Eder";
    desc[3] = "Orta";
    desc[4] = "Güçlü";
    desc[5] = "Çok Güçlü";
    var score   = 0;
    //if password bigger than 6 give 1 point
    if (password.length > 6) score++;
    //if password has both lower and uppercase characters give 1 point  
    if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++;
    //if password has at least one number give 1 point
    if (password.match(/d+/)) score++;
    //if password has at least one special caracther give 1 point
    if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) score++;
    //if password bigger than 12 give another 1 point
    if (password.length > 12) score++;
     document.getElementById("passwordDescription").innerHTML = desc[score];
     document.getElementById("passwordStrength").className = "strength" + score;
}
</script>
</head>
<body>
<form method="post" action="" id="user_registration" name="user_registration">
        <p><h1>Kayıt Formu</h1></p>
        <p> 
        <label for="user">Kullanıcı Adı</label><input type="text" name="user" id="user"/>
        </p>
        <p> 
            <label for="pass">Şifre</label><input type="password" name="pass" id="pass" onkeyup="passwordStrength(this.value)"/>
        </p>
        <p>
            <label for="passwordStrength">Şifre Zorluğu</label>
            <div id="passwordDescription">Şifre Girilmedi</div>
            <div id="passwordStrength" class="strength0"></div>
        </p>
        <p> 
        <input type="submit" name="submit" id="submit" value="Kayıt Ol">
        </p>
</form> 
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX