onchange='window.location.href="?sehir="+this.options[this.selectedIndex].value'selected VALUE="0"Bir şehir seçmelisinizVALUE="3"KonyaVALUE="2"AnkaraVALUE="1"Eskişehir
onchange='window.location.href="?sehir="+this.options[this.selectedIndex].value'selected VALUE="0"Bir şehir seçmelisinizVALUE="3"KonyaVALUE="2"AnkaraVALUE="1"Eskişehir
Php ile
<?phpfunction 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');}?>
Javascript ile
(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');
JavaScript Gelismis Hesap MakinesiLANGUAGE='JavaScript'var displayText = ""var num1var num2var operatorType// Write to displayfunction addDisplay(n){document.calc.display.value = ""displayText += ndocument.calc.display.value = displayText}// Additionfunction addNumbers() {if (displayText == "") {displayText = result}num1 = parseFloat(displayText)operatorType = "add"displayText = ""}// Subtractionfunction subtractNumbers() {if (displayText == "") {displayText = result}num1 = parseFloat(displayText)operatorType = "subtract"displayText = ""}// Multiplicationfunction multiplyNumbers() {if (displayText == "") {displayText = result}num1 = parseFloat(displayText)operatorType = "multiply"displayText = ""}// Divisionfunction divideNumbers() {if (displayText == "") {displayText = result}num1 = parseFloat(displayText)operatorType = "divide"displayText = ""}// Sinefunction sin() {if (displayText == "") {num1 = result}else {num1 = parseFloat(displayText)}if (num1 != "") {result = Math.sin(num1)document.calc.display.value = resultdisplayText = ""}else {alert("Önce bir numara yazınız")}}// Cosinefunction cos() {if (displayText == "") {num1 = result}else {num1 = parseFloat(displayText)}if (num1 != "") {result = Math.cos(num1)document.calc.display.value = resultdisplayText = ""}else {alert("Önce bir numara yazınız")}}// ArcSinefunction arcSin() {if (displayText == "") {num1 = result}else {num1 = parseFloat(displayText)}if (num1 != "") {result = Math.asin(num1)document.calc.display.value = resultdisplayText = ""}else {alert("Önce bir numara yazınız")}}// ArcCosinefunction arcCos() {if (displayText == "") {num1 = result}else {num1 = parseFloat(displayText)}if (num1 != "") {result = Math.acos(num1)document.calc.display.value = resultdisplayText = ""}else {alert("Önce bir numara yazınız")}}// Square rootfunction sqrt() {if (displayText == "") {num1 = result}else {num1 = parseFloat(displayText)}if (num1 != "") {result = Math.sqrt(num1)document.calc.display.value = resultdisplayText = ""}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 * num1document.calc.display.value = resultdisplayText = ""}else {alert("Önce bir numara yazınız")}}// Convert degrees to radiansfunction degToRad() {if (displayText == "") {num1 = result}else {num1 = parseFloat(displayText)}if (num1 != "") {result = num1 * Math.PI / 180document.calc.display.value = resultdisplayText = ""}else {alert("Önce bir numara yazınız")}}// Convert radians to degreesfunction radToDeg() {if (displayText == "") {num1 = result}else {num1 = parseFloat(displayText)}if (num1 != "") {result = num1 * 180 / Math.PIdocument.calc.display.value = resultdisplayText = ""}else {alert("Önce bir numara yazınız")}}// Calculationsfunction calculate() {if (displayText != "") {num2 = parseFloat(displayText)// Calc: Additionif (operatorType == "add") {result = num1 + num2document.calc.display.value = result}// Calc: Subtractionif (operatorType == "subtract") {result = num1 - num2document.calc.display.value = result}// Calc: Multiplicationif (operatorType == "multiply") {result = num1 * num2document.calc.display.value = result}// Calc: Divisionif (operatorType == "divide") {result = num1 / num2document.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>
<?phpif($_POST){print_r($_POST);exit;}?>name="viewport" content="initial-scale=1.0, user-scalable=no"http-equiv="content-type" content="text/html; charset=UTF-8"Google Maps JavaScript API v3 Example: Map Simpletype="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"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));});}}onload="initialize()"id="locationField"id="autocomplete" placeholder="Adresinizi Giriniz" onFocus="geolocate()" type="text"action="streetfindexportinput.php" method="post"Sokak No: id="street_number" disabled="true"Güzergah: id="route" disabled="true"Semt: id="locality" disabled="true"Posta id="postal_code" disabled="true"Ülke id="country" disabled="true"type="hidden" name="lng" id="long"type="hidden" name="lat" id="lat"type="submit"Gönder
Google Maps JavaScript API v3 Example: Map Simple<?phpif($_POST){?><!DOCTYPE html>http-equiv="content-type" content="text/html; charset=UTF-8"type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'type='text/javascript' src="http://maps.google.com/maps/api/js?sensor=true&.js"type='text/javascript' src="https://raw.github.com/HPNeo/gmaps/master/gmaps.js"type='text/css'html,body,#map {display: block;width: 70%;height: 90%;}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: ''});});//]]>id="map"<?php}else{?>name="viewport" content="initial-scale=1.0, user-scalable=no"http-equiv="content-type" content="text/html; charset=UTF-8"type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"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));});}}onload="initialize()"id="locationField"id="autocomplete" placeholder="Adresinizi Giriniz" onFocus="geolocate()" type="text"action="" method="post"Full Adres: id="fa" name="fa"Cadde id="street_address" disabled="true"Sokak id="route" disabled="true"Ülke id="country" disabled="true"İl id="administrative_area_level_1" disabled="true"İlçe id="administrative_area_level_2" disabled="true"Köy id="administrative_area_level_3" disabled="true"Bölge id="locality" disabled="true"Alt Bölge id="sublocality" disabled="true"Mahalle id="neighborhood" disabled="true"Posta id="postal_code" disabled="true"Sokak No id="street_number" disabled="true"Enlem type="text" name="lat" id="lat"Boylam type="text" name="lng" id="long"type="submit"Gönder<?php } ?>
script tagı içerisinde bu kodları ekliyoruz
(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);
sayfa kodlarınızı ekleyerek test edebilirsiniz.
ulusanyazilim.comAnasayfaHTML5ReklamlarCopyright
Öncelikle jquery kütüphanemizi script tagı ile çağırıyoruz.
http://code.jquery.com/jquery-1.10.2.min.js
script tagı içerisine kodlarımızı yazıyoruz.
;(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#L2363return $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 submittedvar $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 attributesvar 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));
sayfa kodlarımızı ekliyoruz
id="input" name="" type="text" placeholder="Birşeyler Arayın.."
en alta script tagı içerisine kodlarımızı ekliyoruz.
$(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');}});
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
<!DOCTYPE html>http-equiv="Content-Type" content="text/html; charset=UTF-8"charset="utf-8"http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"name="viewport" content="width=device-width, initial-scale=1"
style tagı içerisine kodlarımızı ekleyelim.
.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;}
script tagı içerisine kodlarımızı ekleyelim.
(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));}}})();
sonra sayfa kodlarımızı ekleyelim
href="#" id="calistirKaliciButton"Açtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
script tagı içerisine kapatma komutlarını ekleyelim
var kalicim = new Kalici({icerik: 'Test1 <b>Test2</b>'});var calistirKalici = document.getElementById('calistirKaliciButton');calistirKalici.addEventListener('click', function() {kalicim.acik();});
sayfa kapanış kodlarımızı ekleyelim
Öncelikle jquery kütüphanemizi script tagı ile çağırıyoruz
https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js
istediğimiz alana bu menü linklerimizi ekliyoruz.
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>';}?>
script tagı içerisinde bu kodları ekliyoruz
/** jQuery TagCloud 0.5.1*/;(function($) {// private variablesvar 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-plugincase "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 overlaysvar 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 RNGvar 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 decfunction 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 betters += 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);}// tracefunction 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});});});
index.php dosyası oluşturup jquery kütüphanemizi script tagı ile ekleyin.
http://code.jquery.com/jquery-1.10.2.js
style tagı içerisine bu kodları ekleyin.
.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;}
script tagı içerisine bu kodları ekleyin.
$(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);}});
istediğiniz bir yere bu kodları ekleyin.
class="table"Resim:action="dosyayukle.php" method="post" enctype="multipart/form-data" id="form"type="file" style="width:80px;" name="dosya[]"type="submit" value="Yükle"rowspan="2" align="center"id="gelenBilgi" name="gelenBilgi" src style="display:none;"id="sonuclar"action="" method="post"colspan="3"id="gelenBilgi" name="gelenBilgi" src style="display:none;"name="resim" id="sonuclar2"name="update" type="submit" class="btn btn-edit" value="Yüklenen url yi gönder"
yukleniyor.gif adlı bir resim oluşturun.
dosyayukle.php adlı bir dosya oluşturun ve içine bu kodları ekleyin.
<?phpfunction 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>';}}?>
Son olarak img diye resimlerin saklanacağı bir klasör oluşturun.