Seçenek Seçerek Otomatik Yönlendirme

HTML
6 lines
<SELECT onchange='window.location.href="?sehir="+this.options[this.selectedIndex].value'>
<OPTION selected VALUE="0">Bir şehir seçmelisiniz</OPTION>
<OPTION VALUE="3">Konya</OPTION>
<OPTION VALUE="2">Ankara</OPTION>
<OPTION VALUE="1">Eskişehir</OPTION>
</SELECT>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

Mobil Cihaz Tespiti

Php ile

PHP
8 lines
<?php
function isMobile() {
return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up.browser|up.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);
}
if(isMobile()){
header('Location:·http://localhost/mobil');
}
?>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Javascript ile

PHP
1 lines
(function(a,b){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,'http://localhost/mobil');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

Gelişmiş Hesap Makinesi

HTML
288 lines
<HTML>
<HEAD>
<TITLE>JavaScript Gelismis Hesap Makinesi</TITLE>
<SCRIPT LANGUAGE='JavaScript'>
var displayText = ""
var num1
var num2
var operatorType
// Write to display
function addDisplay(n){
document.calc.display.value = ""
displayText += n
document.calc.display.value = displayText
}
// Addition
function addNumbers() {
if (displayText == "") {
displayText = result
}
num1 = parseFloat(displayText)
operatorType = "add"
displayText = ""
}
// Subtraction
function subtractNumbers() {
if (displayText == "") {
displayText = result
}
num1 = parseFloat(displayText)
operatorType = "subtract"
displayText = ""
}
// Multiplication
function multiplyNumbers() {
if (displayText == "") {
displayText = result
}
num1 = parseFloat(displayText)
operatorType = "multiply"
displayText = ""
}
// Division
function divideNumbers() {
if (displayText == "") {
displayText = result
}
num1 = parseFloat(displayText)
operatorType = "divide"
displayText = ""
}
// Sine
function sin() {
if (displayText == "") {
num1 = result
}
else {
num1 = parseFloat(displayText)
}
if (num1 != "") {
result = Math.sin(num1)
document.calc.display.value = result
displayText = ""
}
else {
alert("Önce bir numara yazınız")
}
}
// Cosine
function cos() {
if (displayText == "") {
num1 = result
}
else {
num1 = parseFloat(displayText)
}
if (num1 != "") {
result = Math.cos(num1)
document.calc.display.value = result
displayText = ""
}
else {
alert("Önce bir numara yazınız")
}
}
// ArcSine
function arcSin() {
if (displayText == "") {
num1 = result
}
else {
num1 = parseFloat(displayText)
}
if (num1 != "") {
result = Math.asin(num1)
document.calc.display.value = result
displayText = ""
}
else {
alert("Önce bir numara yazınız")
}
}
// ArcCosine
function arcCos() {
if (displayText == "") {
num1 = result
}
else {
num1 = parseFloat(displayText)
}
if (num1 != "") {
result = Math.acos(num1)
document.calc.display.value = result
displayText = ""
}
else {
alert("Önce bir numara yazınız")
}
}
// Square root
function sqrt() {
if (displayText == "") {
num1 = result
}
else {
num1 = parseFloat(displayText)
}
if (num1 != "") {
result = Math.sqrt(num1)
document.calc.display.value = result
displayText = ""
}
else {
alert("Önce bir numara yazınız")
}
}
// Square number (number to the power of two)
function square() {
if (displayText == "") {
num1 = result
}
else {
num1 = parseFloat(displayText)
}
if (num1 != "") {
result = num1 * num1
document.calc.display.value = result
displayText = ""
}
else {
alert("Önce bir numara yazınız")
}
}
// Convert degrees to radians
function degToRad() {
if (displayText == "") {
num1 = result
}
else {
num1 = parseFloat(displayText)
}
if (num1 != "") {
result = num1 * Math.PI / 180
document.calc.display.value = result
displayText = ""
}
else {
alert("Önce bir numara yazınız")
}
}
// Convert radians to degrees
function radToDeg() {
if (displayText == "") {
num1 = result
}
else {
num1 = parseFloat(displayText)
}
if (num1 != "") {
result = num1 * 180 / Math.PI
document.calc.display.value = result
displayText = ""
}
else {
alert("Önce bir numara yazınız")
}
}
// Calculations
function calculate() {
if (displayText != "") {
num2 = parseFloat(displayText)
// Calc: Addition
if (operatorType == "add") {
result = num1 + num2
document.calc.display.value = result
}
// Calc: Subtraction
if (operatorType == "subtract") {
result = num1 - num2
document.calc.display.value = result
}
// Calc: Multiplication
if (operatorType == "multiply") {
result = num1 * num2
document.calc.display.value = result
}
// Calc: Division
if (operatorType == "divide") {
result = num1 / num2
document.calc.display.value = result
}
displayText = ""
}
else {
document.calc.display.value = "Hata!"
}
}
function clearDisplay() {
displayText = ""
document.calc.display.value = ""
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF" LINK="#9C6060">
<TABLE>
<TD>
<TABLE BORDER=0 BGCOLOR="#AF9999">
<TD>
<TABLE border="0" cellpadding="2" cellspacing="2">
<FORM NAME=calc>
<TR>
<TD COLSPAN=5><INPUT TYPE=text SIZE=22 NAME=display></TD>
<TR align="left" valign="middle">
<TD><INPUT TYPE=button NAME="one" VALUE=" 1 " onClick=addDisplay(1)></TD>
<TD><INPUT TYPE=button NAME="two" VALUE=" 2 " onClick=addDisplay(2)></TD>
<TD><INPUT TYPE=button NAME="three" VALUE=" 3 " onClick=addDisplay(3)></TD>
<TD><INPUT TYPE=button NAME="plus" VALUE=" + " onClick=addNumbers()></TD>
<TR align="left" valign="middle">
<TD><INPUT TYPE=button NAME="four" VALUE=" 4 " onClick=addDisplay(4)></TD>
<TD><INPUT TYPE=button NAME="five" VALUE=" 5 " onClick=addDisplay(5)></TD>
<TD><INPUT TYPE=button NAME="six" VALUE=" 6 " onClick=addDisplay(6)></TD>
<TD><INPUT TYPE=button NAME="minus" VALUE=" - " onClick=subtractNumbers()></TD>
<TR align="left" valign="middle">
<TD><INPUT TYPE=button NAME="seven" VALUE=" 7 " onClick=addDisplay(7)></TD>
<TD><INPUT TYPE=button NAME="eight" VALUE=" 8 " onClick=addDisplay(8)></TD>
<TD><INPUT TYPE=button NAME="nine" VALUE=" 9 " onClick=addDisplay(9)></TD>
<TD><INPUT TYPE=button NAME="multiplication" VALUE=" * " onClick=multiplyNumbers()></TD>
<TR align="left" valign="middle">
<TD><INPUT TYPE=button NAME="zero" VALUE=" 0 " onClick=addDisplay(0)></TD>
<TD><INPUT TYPE=button NAME="pi" VALUE = " Pi " onClick=addDisplay(Math.PI)> </TD>
<TD><INPUT TYPE=button NAME="dot" VALUE=" . " onClick=addDisplay(".")></TD>
<TD><INPUT TYPE=button NAME="division" VALUE=" / " onClick=divideNumbers()></TD>
<TR align="left" valign="middle">
<TD><INPUT TYPE=button NAME="sqareroot" VALUE="sqrt" onClick=sqrt()></TD>
<TD><INPUT TYPE=button NAME="squarex" VALUE=" x^2" onClick=square()></TD>
<TD><INPUT TYPE=button NAME="deg-rad" VALUE="d2r " onClick=degToRad()></TD>
<TD><INPUT TYPE=button NAME="rad-deg" VALUE="r2d " onClick=radToDeg()></TD>
<TR align="left" valign="middle">
<TD><INPUT TYPE=button NAME="sine" VALUE=" sin " onClick=sin()></TD>
<TD><INPUT TYPE=button NAME="arcsine" VALUE="asin" onClick=arcSin()></TD>
<TD><INPUT TYPE=button NAME="cosine" VALUE="cos" onClick=cos()></TD>
<TD><INPUT TYPE=button NAME="arccosine" VALUE="acs" onClick=arcCos()></TD>
<TR align="left" valign="middle">
<TD COLSPAN=2><INPUT TYPE=button NAME=clear VALUE=" Temizle " onClick=clearDisplay()></TD>
<TD COLSPAN=3><INPUT TYPE=button NAME=enter VALUE=" = " onClick=calculate()></TD>
</TABLE>
</TABLE>
</TABLE>
</BODY>
</HTML>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

Google Map Koordinat Bulucu

PHP
80 lines
<?php
if($_POST){
print_r($_POST);
exit;
}
?>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
var placeSearch,autocomplete;
var component_form = {
'street_number': 'short_name',
'route': 'long_name',
'locality': 'long_name',
'country': 'long_name',
'postal_code': 'short_name'
};
function initialize() {
autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), { types: [ 'geocode' ] });
google.maps.event.addListener(autocomplete, 'place_changed', function() {
fillInAddress();
});
}
function fillInAddress() {
var place = autocomplete.getPlace();
var lat = place.geometry.location.lat();
var lng = place.geometry.location.lng();
for (var component in component_form) {
document.getElementById(component).value = "";
document.getElementById(component).disabled = false;
document.getElementById("long").value = lng;
document.getElementById("lat").value = lat;
}
for (var j = 0; j < place.address_components.length; j++) {
var att = place.address_components[j].types[0];
if (component_form[att]) {
var val = place.address_components[j][component_form[att]];
document.getElementById(att).value = val;
}
}
}
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
autocomplete.setBounds(new google.maps.LatLngBounds(geolocation, geolocation));
});
}
}
</script>
</head>
<body onload="initialize()">
<div id="locationField">
<input id="autocomplete" placeholder="Adresinizi Giriniz" onFocus="geolocate()" type="text"></input>
</div>
<form action="streetfindexportinput.php" method="post">
Sokak No:<input id="street_number" disabled="true"/><br>
Güzergah:<input id="route" disabled="true"/><br>
Semt:<input id="locality" disabled="true"/><br>
Posta<input id="postal_code" disabled="true"/><br>
Ülke<input id="country" disabled="true"/><br>
<input type="hidden" name="lng" id="long" />
<input type="hidden" name="lat" id="lat" />
<button type="submit">Gönder</button>
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

Google Map Arama ve Marker Ekleme

 

PHP
142 lines
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<?php
if($_POST){
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript' src="http://maps.google.com/maps/api/js?sensor=true&.js"></script>
<script type='text/javascript' src="https://raw.github.com/HPNeo/gmaps/master/gmaps.js"></script>
<style type='text/css'>
html,
body,
#map {
display: block;
width: 70%;
height: 90%;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(function(){
var options = {
center : new google.maps.LatLng(<?php echo $_POST["lat"]; ?>, <?php echo $_POST["lng"]; ?>),
zoom : 15
};
var div = document.getElementById('map');
var map = new google.maps.Map(div, options);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(<?php echo $_POST["lat"]; ?>,<?php echo $_POST["lng"]; ?>),
map: map,
title: ''
});
});
//]]></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
<?php
}else{
?>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
var placeSearch,autocomplete;
var component_form = {
'street_address' : 'long_name',
'route' : 'long_name',//sadece sokak varsa
'country' : 'long_name',//ülke
'administrative_area_level_1' : 'long_name',//il
'administrative_area_level_2' : 'long_name',//ilçe
'administrative_area_level_3' : 'long_name',
'locality' : 'long_name',//il
'sublocality' : 'long_name',//alt bölge
'neighborhood' : 'long_name',//sadece ilçe varsa
'postal_code' : 'long_name',//posta kodu
'street_number' : 'long_name'
};
function initialize() {
autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), { types: [ 'geocode' ] });
google.maps.event.addListener(autocomplete, 'place_changed', function() {
fillInAddress();
});
}
function fillInAddress() {
var place = autocomplete.getPlace();
var lat = place.geometry.location.lat();
var lng = place.geometry.location.lng();
var name = place.name;
var phone = place.formatted_phone_number;
var fullAddress = place.formatted_address;
for (var component in component_form) {
document.getElementById(component).value = "";
document.getElementById(component).disabled = false;
document.getElementById("long").value = lng;
document.getElementById("lat").value = lat;
document.getElementById("fa").value = fullAddress;
}
for (var j = 0; j < place.address_components.length; j++) {
var att = place.address_components[j].types[0];
if (component_form[att]) {
var val = place.address_components[j][component_form[att]];
document.getElementById(att).value = val;
}
}
}
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
autocomplete.setBounds(new google.maps.LatLngBounds(geolocation, geolocation));
});
}
}
</script>
</head>
<body onload="initialize()">
<div id="locationField">
<input id="autocomplete" placeholder="Adresinizi Giriniz" onFocus="geolocate()" type="text"></input>
</div>
<form action="" method="post">
Full Adres:<input id="fa" name="fa"/><br>
Cadde<input id="street_address" disabled="true"/><br>
Sokak<input id="route" disabled="true"/><br>
Ülke<input id="country" disabled="true"/><br>
İl<input id="administrative_area_level_1" disabled="true"/><br>
İlçe<input id="administrative_area_level_2" disabled="true"/><br>
Köy<input id="administrative_area_level_3" disabled="true"/><br>
Bölge<input id="locality" disabled="true"/><br>
Alt Bölge<input id="sublocality" disabled="true"/><br>
Mahalle<input id="neighborhood" disabled="true"/><br>
Posta<input id="postal_code" disabled="true"/><br>
Sokak No<input id="street_number" disabled="true"/><br>
Enlem<input type="text" name="lat" id="lat" /><br>
Boylam<input type="text" name="lng" id="long" /><br>
<button type="submit">Gönder</button>
</form>
</body>
</html>
<?php } ?>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

Eski Tarayıcılarda HTML5 Kullanabilmek

script tagı içerisinde bu kodları ekliyoruz

JavaScript
1 lines
(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}</style>"; c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment(); for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

sayfa kodlarınızı ekleyerek test edebilirsiniz.

HTML
11 lines
<header>ulusanyazilim.com</header>
<nav>Anasayfa</nav>
<article>
<section>
HTML5
</section>
</article>
<aside>
Reklamlar
</aside>
<footer>Copyright</footer>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

Eski Tarayıcılar için Placeholder Kullanımı

Öncelikle jquery kütüphanemizi script tagı ile çağırıyoruz.

Markdown
1 lines
http://code.jquery.com/jquery-1.10.2.min.js
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

script tagı içerisine kodlarımızı yazıyoruz.

JavaScript
174 lines
;(function(window, document, $) {
var isInputSupported = 'placeholder' in document.createElement('input');
var isTextareaSupported = 'placeholder' in document.createElement('textarea');
var prototype = $.fn;
var valHooks = $.valHooks;
var propHooks = $.propHooks;
var hooks;
var placeholder;
if (isInputSupported && isTextareaSupported) {
placeholder = prototype.placeholder = function() {
return this;
};
placeholder.input = placeholder.textarea = true;
} else {
placeholder = prototype.placeholder = function() {
var $this = this;
$this
.filter((isInputSupported ? 'textarea' : ':input') + '[placeholder]')
.not('.placeholder')
.bind({
'focus.placeholder': clearPlaceholder,
'blur.placeholder': setPlaceholder
})
.data('placeholder-enabled', true)
.trigger('blur.placeholder');
return $this;
};
placeholder.input = isInputSupported;
placeholder.textarea = isTextareaSupported;
hooks = {
'get': function(element) {
var $element = $(element);
var $passwordInput = $element.data('placeholder-password');
if ($passwordInput) {
return $passwordInput[0].value;
}
return $element.data('placeholder-enabled') && $element.hasClass('placeholder') ? '' : element.value;
},
'set': function(element, value) {
var $element = $(element);
var $passwordInput = $element.data('placeholder-password');
if ($passwordInput) {
return $passwordInput[0].value = value;
}
if (!$element.data('placeholder-enabled')) {
return element.value = value;
}
if (value == '') {
element.value = value;
// Issue #56: Setting the placeholder causes problems if the element continues to have focus.
if (element != document.activeElement) {
// We can't use `triggerHandler` here because of dummy text/password inputs :(
setPlaceholder.call(element);
}
} else if ($element.hasClass('placeholder')) {
clearPlaceholder.call(element, true, value) || (element.value = value);
} else {
element.value = value;
}
// `set` can not return `undefined`; see http://jsapi.info/jquery/1.7.1/val#L2363
return $element;
}
};
if (!isInputSupported) {
valHooks.input = hooks;
propHooks.value = hooks;
}
if (!isTextareaSupported) {
valHooks.textarea = hooks;
propHooks.value = hooks;
}
$(function() {
// Look for forms
$(document).delegate('form', 'submit.placeholder', function() {
// Clear the placeholder values so they don't get submitted
var $inputs = $('.placeholder', this).each(clearPlaceholder);
setTimeout(function() {
$inputs.each(setPlaceholder);
}, 10);
});
});
// Clear placeholder values upon page reload
$(window).bind('beforeunload.placeholder', function() {
$('.placeholder').each(function() {
this.value = '';
});
});
}
function args(elem) {
// Return an object of element attributes
var newAttrs = {};
var rinlinejQuery = /^jQueryd+$/;
$.each(elem.attributes, function(i, attr) {
if (attr.specified && !rinlinejQuery.test(attr.name)) {
newAttrs[attr.name] = attr.value;
}
});
return newAttrs;
}
function clearPlaceholder(event, value) {
var input = this;
var $input = $(input);
if (input.value == $input.attr('placeholder') && $input.hasClass('placeholder')) {
if ($input.data('placeholder-password')) {
$input = $input.hide().next().show().attr('id', $input.removeAttr('id').data('placeholder-id'));
// If `clearPlaceholder` was called from `$.valHooks.input.set`
if (event === true) {
return $input[0].value = value;
}
$input.focus();
} else {
input.value = '';
$input.removeClass('placeholder');
input == document.activeElement && input.select();
}
}
}
function setPlaceholder() {
var $replacement;
var input = this;
var $input = $(input);
var id = this.id;
if (input.value == '') {
if (input.type == 'password') {
if (!$input.data('placeholder-textinput')) {
try {
$replacement = $input.clone().attr({ 'type': 'text' });
} catch(e) {
$replacement = $('<input>').attr($.extend(args(this), { 'type': 'text' }));
}
$replacement
.removeAttr('name')
.data({
'placeholder-password': $input,
'placeholder-id': id
})
.bind('focus.placeholder', clearPlaceholder);
$input
.data({
'placeholder-textinput': $replacement,
'placeholder-id': id
})
.before($replacement);
}
$input = $input.removeAttr('id').hide().prev().attr('id', id).show();
// Note: `$input[0] != input` now!
}
$input.addClass('placeholder');
$input[0].value = $input.attr('placeholder');
} else {
$input.removeClass('placeholder');
}
}
}(this, document, jQuery));
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

sayfa kodlarımızı ekliyoruz

HTML
3 lines
<form>
<input id="input" name="" type="text" placeholder="Birşeyler Arayın.."/>
</form>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

en alta script tagı içerisine kodlarımızı ekliyoruz.

JavaScript
12 lines
$(function() {
$('input, textarea').placeholder();
var html;
if ($.fn.placeholder.input && $.fn.placeholder.textarea) {
html = '<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> and <code>textarea</code> elements.</strong> The plugin won’t run in this case, since it’s not needed. If you want to test the plugin, use an older browser ;)';
} else if ($.fn.placeholder.input) {
html = '<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> elements, but not for <code>textarea</code> elements.</strong> The plugin will only do its thang on the <code>textarea</code>s.';
}
if (html) {
$('<p class="note">' + html + '</p>').insertAfter('form');
}
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

Responsive Modal Box

Hazır kütüphaneler kullanmadan yapabileceğiniz bir uyumlu açılır pencere çalışması.

Sayfamıza ilk olarak uyumlu olması için metaları ekleyelim

HTML
7 lines
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

style tagı içerisine kodlarımızı ekleyelim.

CSS
109 lines
.kalici-kaplama {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
-webkit-transition: 1ms opacity ease;
-moz-transition: 1ms opacity ease;
-ms-transition: 1ms opacity ease;
-o-transition: 1ms opacity ease;
transition: 1ms opacity ease;
background: rgba(0,0,0,.6);
}
.kalici-kalici {
position: fixed;
z-index: 9999;
top: 50%;
left: 50%;
opacity: 0;
width: 94%;
padding: 24px 20px;
-webkit-transition: 1ms opacity ease;
-moz-transition: 1ms opacity ease;
-ms-transition: 1ms opacity ease;
-o-transition: 1ms opacity ease;
transition: 1ms opacity ease;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 2px;
background: #fff;
}
.kalici-kalici.kalici-acik.kalici-baglantili {
top: 20px;
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.kalici-kalici.kalici-acik { opacity: 1; }
.kalici-kaplama.kalici-acik { opacity: 1; }
.kalici-kapat {
font-family: Helvetica, Arial, sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 12px;
position: absolute;
top: 5px;
right: 5px;
padding: 5px 7px 7px;
cursor: pointer;
color: #fff;
border: 0;
outline: none;
background: #e74c3c;
}
.kalici-kapat:hover { background: #c0392b; }
.kalici-kaplama.karart-ve-kaldir {
display: block;
opacity: 0;
}
.kalici-kalici.karart-ve-kaldir {
top: -300%;
opacity: 1;
display: block;
}
.kalici-kalici.karart-ve-kaldir.kalici-acik {/*kararmadan sonra kalici çıkış*/
top: 50%;
-webkit-transition: 500ms top 1ms ease;
-moz-transition: 500ms top 1ms ease;
-ms-transition: 500ms top 1ms ease;
-o-transition: 500ms top 1ms ease;
transition: 500ms top 1ms ease;
}
.kalici-kalici.karart-ve-kaldir.kalici-acik.kalici-baglantili {
-webkit-transition: 500ms top 500ms ease;
-moz-transition: 500ms top 500ms ease;
-ms-transition: 500ms top 500ms ease;
-o-transition: 500ms top 500ms ease;
transition: 500ms top 500ms ease;
}
.kalici-kaplama.karart-ve-kaldir.kalici-acik {/*arka plan kararış*/
top: 0;
-webkit-transition: 100ms opacity ease;
-moz-transition: 100ms opacity ease;
-ms-transition: 100ms opacity ease;
-o-transition: 100ms opacity ease;
transition: 100ms opacity ease;
opacity: 1;
}
.kalici-kalici.karart-ve-kaldir {
-webkit-transition: 500ms top ease;
-moz-transition: 500ms top ease;
-ms-transition: 500ms top ease;
-o-transition: 500ms top ease;
transition: 500ms top ease;
}
.kalici-kaplama.karart-ve-kaldir {/*arka plan kararış iptal*/
-webkit-transition: 100ms opacity 100ms ease;
-moz-transition: 100ms opacity 100ms ease;
-ms-transition: 100ms opacity 100ms ease;
-o-transition: 100ms opacity 100ms ease;
transition: 100ms opacity 100ms ease;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

script tagı içerisine kodlarımızı ekleyelim.

JavaScript
92 lines
(function() {
this.Kalici = function() {
this.kaplama = null;
this.kalici = null;
this.kapatButonu = null;
this.gecisSonu = gecisSec();
var varsayilan = {
className: 'karart-ve-kaldir',
kapatButonu: true,
icerik: "",
maxWidth: 600,
minWidth: 280,
kaplama: true
}
if (arguments[0] && typeof arguments[0] === 'object') {
this.ayarlar = varsayilanEk(varsayilan, arguments[0]);
}
}
Kalici.prototype.acik = function() {
olusturma.call(this);
initializeEvents.call(this);
window.getComputedStyle(this.kalici).height;
this.kalici.className = this.kalici.className +
(this.kalici.offsetHeight > window.innerHeight ? ' kalici-acik kalici-baglantili' : ' kalici-acik');
this.kaplama.className = this.kaplama.className + ' kalici-acik';
}
Kalici.prototype.kapat = function() {
var _ = this;
this.kalici.className = this.kalici.className.replace(' kalici-acik', '');
this.kaplama.className = this.kaplama.className.replace(' kalici-acik', '');
this.kalici.addEventListener(this.gecisSonu, function() {
_.kalici.parentNode.removeChild(_.kalici);
});
_.kalici.parentNode.removeChild(_.kalici);
this.kaplama.addEventListener(this.gecisSonu, function() {
if (_.kaplama.parentNode) _.kaplama.parentNode.removeChild(_.kaplama);
});
}
function gecisSec() {
var el = document.createElement('div');
if (el.style.WebkitTransition) return "webkitTransitionEnd";
if (el.style.OTransition) return "oTransitionEnd";
return 'transitionend';
}
function varsayilanEk(kaynak, ozellikler) {
var ozellik;
for (ozellik in ozellikler) {
if (ozellikler.hasOwnProperty(ozellik)) {
kaynak[ozellik] = ozellikler[ozellik];
}
}
return kaynak;
}
function olusturma() {
var icerik, icerikTutucu, belgeParcasi;
if (typeof this.ayarlar.icerik === 'string') {
icerik = this.ayarlar.icerik;
} else {
icerik = this.ayarlar.icerik.innerHTML;
}
belgeParcasi = document.createDocumentFragment();
this.kalici = document.createElement('div');
this.kalici.className = 'kalici-kalici ' + this.ayarlar.className;
this.kalici.style.minWidth = this.ayarlar.minWidth + 'px';
this.kalici.style.maxWidth = this.ayarlar.maxWidth + 'px';
if (this.ayarlar.kapatButonu === true) {
this.kapatButonu = document.createElement('button');
this.kapatButonu.className = 'kalici-kapat kapat-button';
this.kapatButonu.innerHTML = 'x';
this.kalici.appendChild(this.kapatButonu);
}
if (this.ayarlar.kaplama === true) {
this.kaplama = document.createElement('div');
this.kaplama.className = 'kalici-kaplama ' + this.ayarlar.className;
belgeParcasi.appendChild(this.kaplama);
}
icerikTutucu = document.createElement('div');
icerikTutucu.className = 'kalici-icerik';
icerikTutucu.innerHTML = icerik;
this.kalici.appendChild(icerikTutucu);
belgeParcasi.appendChild(this.kalici);
document.body.appendChild(belgeParcasi);
}
function initializeEvents() {
if (this.kapatButonu) {
this.kapatButonu.addEventListener('click', this.kapat.bind(this));
}
if (this.kaplama) {
this.kaplama.addEventListener('click', this.kapat.bind(this));
}
}
})();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

sonra sayfa kodlarımızı ekleyelim

HTML
13 lines
</head>
<body>
<a href="#" id="calistirKaliciButton"></a>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

script tagı içerisine kapatma komutlarını ekleyelim

JavaScript
7 lines
var kalicim = new Kalici({
icerik: 'Test1 <b>Test2</b>'
});
var calistirKalici = document.getElementById('calistirKaliciButton');
calistirKalici.addEventListener('click', function() {
kalicim.acik();
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

sayfa kapanış kodlarımızı ekleyelim

HTML
1 lines
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

Çok Renkli Küre Etiket Bulutu

Öncelikle jquery kütüphanemizi script tagı ile çağırıyoruz

Markdown
1 lines
https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

istediğimiz alana bu menü linklerimizi ekliyoruz.

PHP
5 lines
<ul id="test" class="xmpl" style="height: 390px; width: 698px;">
<?php for($x=0;$x<100;$x++){
echo '<li value="'.floor(100-$x).'"><a href="#'.$x.'" >d'.$x.'n</a></li>';
}?>
</ul>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

script tagı içerisinde bu kodları ekliyoruz

JavaScript
196 lines
/*
* jQuery TagCloud 0.5.1
*/
;(function($) {
// private variables
var oSettings;
var oUlCss = {};
var oLiCss = {};
var fGAng = 2.399963; // sphere angle in radians*pi
// default settings
$.tagcloud = {
id: "TagCloud"
,version: "0.5.1"
,defaults: {
height: null
,type: "cloud" // "cloud", "list" or "sphere"
,sizemax: 20
,sizemin: 10
,colormax: "00F"
,colormin: "B4D2FF"
,seed: null // only for type=="cloud"
,power: .5 // only for type=="sphere"
,padding: 0
}
};
$.fn.extend({
tagcloud: function(_settings) {
oSettings = $.extend({}, $.tagcloud.defaults, _settings);
if (oSettings.seed===null) oSettings.seed = Math.ceil(Math.random()*45309714203);
switch (oSettings.type) {
// treemap :: http://www.jquery.info/The-TreeMap-plugin
case "sphere":
case "cloud":
oUlCss = {position:"relative"};
oLiCss = {position:"absolute",display:"block"};
break;
case "list":
oUlCss = {height:"auto"};
oLiCss = {position:"static",display:"inline"};
break;
}
Rng.setSeed(oSettings.seed+123456);
return this.each(function(i,o) {
var mUl = $(o);
var aLi = mUl.find(">li");
var iNumLi = aLi.length;
var iUlW = mUl.width();
// var iUlH = oSettings.height===null?mUl.height():oSettings.height;
var iUlH = oSettings.height===null?(.004*iUlW*iNumLi):oSettings.height;
mUl.css({width:iUlW,height:iUlH,listStyle:"none",margin:0,padding:0});
mUl.css(oUlCss);
var iValMx = -2147483647;
var iValMn = 2147483648;
var iLastVal = -1;
for (var j=0;j<iNumLi;j++) {
var mLi = $(aLi[j]);
var iVal = mLi.attr("value")==-1?iLastVal++:mLi.attr("value");
if (iVal>iValMx) iValMx = iVal;
if (iVal<iValMn) iValMn = iVal;
iLastVal = iVal;
}
var iValRn = iValMx-iValMn;
// place on line to create minimal overlays
var aLine = new Array();
for (var j=0;j<iNumLi;j++) aLine[j] = j;
for (var j, x, k = aLine.length; k; j = parseInt(Rng.rand(0,1000)/1000 * k), x = aLine[--k], aLine[k] = aLine[j], aLine[j] = x);
iLastVal = -1;
for (var j=0;j<iNumLi;j++) {
var mLi = $(aLi[j]);;
var iVal = mLi.attr("value")==-1?iLastVal++:mLi.attr("value");
iLastVal = iVal;
//
var fPrt = ((iNumLi-j-1)/(iNumLi-1));
var fPrt = (iVal-iValMn)/iValRn;
//
var iSzFnt = oSettings.sizemin + fPrt*(oSettings.sizemax-oSettings.sizemin);
var sColor = colorRng(oSettings.colormin,oSettings.colormax,fPrt);
//
mLi.css({"word-wrap":"break-word",
"fontSize":iSzFnt,
"position":"absolute",
"color":"#"+sColor,
"margin":0,
"padding":oSettings.padding}).children().css({color:"#"+sColor});
var iLiW = mLi.width();
var iLiH = mLi.height()
//
var oCss = {};
if (oSettings.type!="list") {
if (oSettings.type=="cloud") {
var iXps = Rng.rand(0,iUlW-iLiW);
var iYps = aLine[j]*(iUlH/iNumLi) - iLiH/2;
} else {
var fRds = Math.pow(j/iNumLi,oSettings.power);
var fRad = (j+Math.PI/2)*fGAng;
var iXps = iUlW/2 - iLiW/2 + .5*iUlW*fRds*Math.sin(fRad);
var iYps = iUlH/2 - iLiH/2 + .5*iUlH*fRds*Math.cos(fRad);
}
oCss.left = iXps;
oCss.top = iYps;
}
for (var prop in oLiCss) oCss[prop] = oLiCss[prop];
mLi.css(oCss);
}
});
}
});
// Park-Miller RNG
var Rng = new function() {
this.seed = 23145678901;
this.A = 48271;
this.M = 2147483647;
this.Q = this.M/this.A;
this.R = this.M%this.A;
this.oneOverM = 1.0/this.M;
}
Rng.setSeed = function(seed) {
this.seed = seed;
}
Rng.next = function() {
var hi = this.seed/this.Q;
var lo = this.seed%this.Q;
var test = this.A*lo - this.R*hi;
this.seed = test + (test>0?0:this.M);
return (this.seed*this.oneOverM);
}
Rng.rand = function(lrn, urn) {
return Math.floor((urn - lrn + 1) * this.next() + lrn);
}
// hex dec
function d2h(d) {return d.toString(16);}
function h2d(h) {return parseInt(h,16);}
// function getC(s,rgb) {
// var aRng = [[[0,1],[1,2],[2,3]],[[0,2],[2,4],[4,6]]][s.length==3?0:1][rgb];
// return s.substring(aRng[0],aRng[1]);
// }
function getRGB(s) {
var b3 = s.length==3;
var aClr = [];
for (var i=0;i<3;i++) {
var sClr = s.substring( i*(b3?1:2), (i+1)*(b3?1:2) );
aClr.push(h2d(b3?sClr+sClr:sClr));
}
return aClr;
}
function getHex(a) {
var s = "";
for (var i=0;i<3;i++) {
var c = d2h(a[i]);
if (c.length==1) c = "0"+c; // todo: this can be better
s += c;
}
return s;
}
function colorRng(mn,mx,prt) {
var aMin = getRGB(mn);
var aMax = getRGB(mx);
var aRtr = [];
for (var i=0;i<3;i++) aRtr.push( aMin[i] + Math.floor(prt*(aMax[i]-aMin[i])) );
return getHex(aRtr);
}
// trace
function trace(o) {
if (window.console&&window.console.log) {
if (typeof(o)=="string") window.console.log(o);
else for (var prop in o) window.console.log(prop+": "+o[prop]);
}
};
// set functions
$.fn.TagCloud = $.fn.Tagcloud = $.fn.tagcloud;
})(jQuery);
$(document).ready(function() {
$("ul").tagcloud({type:"sephere",width:300,height:300,sizemin:8,sizemax:36,power:0.5});
function createRandomColor() {
var hex = '0123456789ABC'.split(''), color = '#', i;
for (i = 0; i < 6; i += 1) {
color = color + hex[Math.floor(Math.random() * 13)];
}
return color;
}
$('ul li').each(function() {
var $a = $(this).find('a');
var rastgelerenk = createRandomColor();
$a.css({color: rastgelerenk});
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

Anlık Çoklu Resim Yüklemek

index.php dosyası oluşturup jquery kütüphanemizi script tagı ile ekleyin.

Markdown
1 lines
http://code.jquery.com/jquery-1.10.2.js
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

style tagı içerisine bu kodları ekleyin.

CSS
30 lines
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
color: #ffffff;
font-size: 14px;
font-weight: bold;
line-height: 1.428571429;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.btn-add {
color: #ffffff;
background-color: #428bca;
border-color: #357ebd;
}
.btn-add:hover, .btn-add:focus, .btn-add:active, .btn-add.active {
color: #ffffff;
background-color: #3276b1;
border-color: #285e8e;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

script tagı içerisine bu kodları ekleyin.

JavaScript
23 lines
$(document).ready(function(){
//Dosya Yükle
$("#form").bind("submit",function(){
$("#sonuclar").empty();
$(this).attr("target","gelenBilgi");
$("<img />").attr("src","yukleniyor.gif").appendTo($("#sonuclar"));
$("#gelenBilgi").bind("load", function(){
var deger = $("#gelenBilgi").contents().find("body").html();
$("#sonuclar").html(deger);
$("#sonuclar2").val($("#sonuclar img").attr("src"));
});
});
});
var dosya = $("input[name=dosya[]]").val();
var file = "dosya="+dosya;
$.ajax({
type: "POST",
url: "dosyayukle.php",
data: file,
success: function(sonuc){
$("#gelenBilgi").append(sonuc);
}
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

istediğiniz bir yere bu kodları ekleyin.

HTML
29 lines
<table class="table">
<tr>
<td>
<strong>Resim:</strong>
</td>
<td>
<form action="dosyayukle.php" method="post" enctype="multipart/form-data" id="form">
<input type="file" style="width:80px;" name="dosya[]" />
<input type="submit" value="Yükle" />
</form>
</td>
<td rowspan="2" align="center">
<iframe id="gelenBilgi" name="gelenBilgi" src style="display:none;">
</iframe>
<div id="sonuclar"></div>
</td>
</tr>
<tr>
<form action="" method="post">
<td colspan="3" >
<iframe id="gelenBilgi" name="gelenBilgi" src style="display:none;">
</iframe>
<input name="resim" id="sonuclar2" ><br>
<input name="update" type="submit" class="btn btn-edit" value="Yüklenen url yi gönder" />
</td>
</form>
</tr>
</table>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

yukleniyor.gif adlı bir resim oluşturun.

dosyayukle.php adlı bir dosya oluşturun ve içine bu kodları ekleyin.

PHP
29 lines
<?php
function rasgeleharf($kackarakter){
$s="";
$char="abcdefghijklmnoprstuwvyzqx1234567890–__"; /// İzin verilen karakterler ?
for ($k=1;$k<=$kackarakter;$k++){
$h=substr($char,mt_rand(0,strlen($char)-1),1);
$s.=$h;
}
return $s;
}
$toplam = count($_FILES["dosya"]["name"]);
$formatlar = array("image/png","image/jpeg","image/gif","image/bmp");
for($i= 0;$i < $toplam; $i++){
if (in_array($_FILES["dosya"]["type"][$i],$formatlar)){
$uzanti =substr($_FILES["dosya"]["name"][$i],-4,4);
$ad =substr($_FILES["dosya"]["name"][$i],0,-4);
$isim = rasgeleharf(5);
$dizin = "img/".$ad."_".$isim.$uzanti;
if(move_uploaded_file($_FILES["dosya"]["tmp_name"][$i],$dizin)){
echo '<img height="100" src="'.$dizin.'" alt="" class="resim" />';
}else{
echo '<font color="red">Dosya Yüklenemedi!!</form>';
}
}else{
echo '<font color="red">Geçersiz Dosya Formatı.</font>';
}
}
?>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Son olarak img diye resimlerin saklanacağı bir klasör oluşturun.