Tuesday, May 16, 2017

2 yorum var.

ajax dosya yüklemek html kaynak kodu

Gmail tarzı ajax dosyalarını yüklemek için düzenleme gerektirmeyen test edilmiş hazır bir upload açık kaynak kodu. Yapmanız gereken tek şey hangi tür dosyaların yükleneceğini belirleyen bir form oluşturma.
web sitesi için ajax yükleme kodu

index.html için kaynak kod örneği

<script src="/webtoolkit.aim.js" type="text/javascript"><!--mce:0--></script>       <script type="text/javascript"><!--mce:1--></script>
<form action="/index.html" method="post">
    <div><label>Name:</label>   <input name="form[name]" type="text" /></div>
    <div><label>File:</label>   <input name="form[file]" type="file" /></div>
    <div><input type="submit" value="SUBMIT" /></div>
</form>
<hr />
<div># of submited forms: <span id="nr">0</span></div>
<div>last submit response (generated by form action - index.php file):</div>
.js kaynak kod örneği
/**
*
* ajax dosya yüklemek
* http://www.webilgici.blogspot.com/
*
**/
AIM = {
frame : function(c) {
var n = 'f' + Math.floor(Math.random() * 99999);
var d = document.createElement('DIV');
d.innerHTML = '';
document.body.appendChild(d);
var i = document.getElementById(n);
if (c &amp;&amp; typeof(c.onComplete) == 'function') {
i.onComplete = c.onComplete;
}
return n;
},
form : function(f, name) {
f.setAttribute('target', name);
},
submit : function(f, c) {
AIM.form(f, AIM.frame(c));
if (c &amp;&amp; typeof(c.onStart) == 'function') {
return c.onStart();
} else {
return true;
}
},
loaded : function(id) {
var i = document.getElementById(id);
if (i.contentDocument) {
var d = i.contentDocument;
} else if (i.contentWindow) {
var d = i.contentWindow.document;
} else {
var d = window.frames[id].document;
}
if (d.location.href == "about:blank") {
return;
}
if (typeof(i.onComplete) == 'function') {
i.onComplete(d.body.innerHTML);
}
}
}

ve son olarak php kaynak kodu

print_r($_REQUEST['form']); değişiklikler yapabilir kendinize göre ayarlayabilirsiniz..
Devamını Oku »

Thursday, May 11, 2017

Yorum yok

css üçgen div'ler

AÇIKLAMA ALANI - DIV KULLANIMI

üçgen div

CSS ile hazırlanmış 4 kenarın belirli bir açı ve konuma göre ayarlanarak oluşturduğu çok şık ve kullaşlı bir div. Farklı yön gösteren üçgen ok divler 4 farklı konuya ayarlanabiliyor. CSS kısmını kendinize göre ayarlayarak divlerden istediğinizi seçip kullana bilirsiniz. HTML kısmı olarak <Div id = "divismi </ div> işaret alanını seçip istediğiniz sayfada konu altı açıklama alanı olarakta kullanabilirsiniz.
divler

CSS kısmı
.yukaridiv, .asagidiv, .soldiv, .sagdiv{ width:600px;
min-height:40px; /*min height of DIV should be set to at least 2x the width of the arrow*/
background: black;
color:white;
padding:5px;
position:relative;
word-wrap:break-word;
-moz-border-radius:5px; /*add some nice CSS3 round corners*/
-webkit-border-radius:5px;
border-radius:5px;
margin-bottom:2em;
}
.yukaridiv:after{ /*arrow added to uparrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:-20px; /*should be set to -border-width x 2 */
left:30px;
width:0;
height:0;
border-color: transparent transparent black transparent; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}
.asagidiv:after{ /*arrow added to downarrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:100%; /*should be set to 100% */
left:30px;
width:0;
height:0;
border-color: black transparent transparent transparent; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}
.soldiv:after{ /*arrow added to leftarrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:10px;
left:-20px; /*should be set to -border-width x 2 */
width:0;
height:0;
border-color: transparent black transparent transparent; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}
.sagdiv:after{ /*arrow added to rightarrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:10px;
left:100%; /*should be set to 100% */
width:0;
height:0;
border-color: transparent transparent transparent black; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}
Renk boyut ve üçken gösterge yapısını css kısmından renklendirdiğim alanlarda değişiklik yaparak, kendi tasarım renk ve hızasına getirebilirsiniz.

İşaretleme kısmı

<div class="yukaridiv">
This is a test
</div>
<div class="asagidiv">
This is a test
</div>
<div class="soldiv">
This is a test
</div>
<div class="sagdiv">
This is a test
</div>
Wapper(sayfa) boyutumun genişliğinden dolayı div uzunluğu ve görünümü tam çıkmıyor, bu sizin sayfanızın boyutuna göre değişir ve ayarlana bilir. 
Devamını Oku »

Sunday, May 7, 2017

Yorum yok

kod yayınlama kutusu özelleştirme

kodlarınız için size özel kod yayınlama kutucuğu

CSS gerektirmeden kod yayınlarınız için sadece html ile çalışan şık bir kod yayınlama eklentisini sizinle paylaşıyorum. Kodlar üzerinde değişiklik yapabilmeniz için html kodları üzerindeki birkaç özelliği size anlatayım.
kod yayınlama eklentisi
En güzel tarafı arka planına istediğiniz bir resim yerleştirip kodlarınızı bu resim üzerinde paylaşabilirsiniz.
pre {
   font-size: 12px;
   padding: 0;
   margin: 0;
   background: #f0f0f0;
   border-left: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   line-height: 20px;
   background: url(//img.webme.com/pic/-/-index-/pre_code_bg.gif) repeat-y left top;
   width: 600px;
   overflow: auto;
}
özellikleri:
  • font-size: kod alanı yazı boyutu
  • padding: kenar boşluğu
  • margin: kenar
  • background: arka fonu
  • background url: arka plan resmi
Bunlar değişiklik yapabileceğiniz önemli özellikleri. En iyi özelliği ise arka plan resim özelliği background: url(resim url) repeat-y left top;. Arka planında kullandığım resim kendi tercihim, resim boyutunda dikkatetmeniz gereken genişliğin 700px'in altında olmaması. Bunun dışında sadece html ile çalıştığı için her sayfa üzerine ayrı ayrı yerleştirmeniz.


Devamını Oku »

Saturday, May 6, 2017

Yorum yok

iki kolonlu şık bir bloggger tasarım

iki kolonlu turuncu renk blogger theme

Biraz uğraşla kendime göre düzenlediğim bir blogger teması, eski halinden neredeyse eser yok isteyen arkadaşlar alıp kendileri'de, üzerinde birkaç değişiklik yapıp kullanabilirler. Kodlar üzerinde oynama yaparken birkaç atlama yapmış olabilirim. Kod bilgisi olmayan arkadaşlar temayı olduğu gibi kullansın. Bu blogger şablonu kodlarını ücretsiz almak için yorum kısmına (blogger temasını istiyorum) yazarlarsa mail yoluyla tema kodlarını göndereceğim.
ücretsiz blogger teması
blogger iki kolonlu theme
Bu tema eğer çok yorum ve istek alırsa indirme linki oluşturucam ve ayrıca farklı temalarda değişiklik yapıp paylaşıma sunucam. Şimdilik temayı bende kullanıyorum ve sadece bende mevcut. Ayrıca bloghocam temasından örnek alarak temayı şekillendirdim. saygılar

NOT: Blogger teması üzerinde bulduğunuz herhangi bir hataya rastlarsanız lütfen söyleyin hallederiz.
Devamını Oku »

Saturday, January 28, 2017

1 yorum var.

Lal kelimesi

Nama Pertama Nama Terakhir
Gian MR
Kaka Slank
John Lennon

Lal kelime anlamı olarak ne demek

Lal kelime anlamı olarak dilsiz,  konuşamayan veya aşırı kekemek insanlara denir.

Lal hangi dilden türedi

Lal kelimesi Farsça dan türemiş olup kürtçede de kullanılıp aynı anlamı taşır.
Devamını Oku »