Kayıtlar

2020 tarihine ait yayınlar gösteriliyor

JavaScript ile Bir Elemanın İçeriğinin En Başına Yeni Bir İçerik Eklemek

Bu işlemi yapan kodlar aşağıdaki gibidir  <script> window.onload=function(){ /*eklenecek içerik*/ var a = "<style>.eklenenKutu{display:table;max-width:350px;height:auto;;background-color:#00dd00;padding:2%;}.ekleneniIcerik{display:table-cell;text-align:center;width:100%;height:auto;vertical-align:middle;color:#fff;font-size:18px;font-weight:bold;font-family:Proxima}@media screen and (max-width:900px){.eklenenKutu{max-width:90%;width:55%;margin:5px auto;}.ekleneniIcerik{font-size:.18px;}}</style><div class=\"eklenenKutu\"><div class=\"ekleneniIcerik\">Bu eleman Javascript ile başka bir elemanın içeriğinin başlangıcına eklenmiştir.<\/div><\/div>"; /*Ekleneceği eleman*/ var b=document.querySelectorAll(".disKutu")[0]; /*eklemek istediğimiz içeriği ilgili elemanın içeriğinin başına ekleyen kod*/ b.insertAdjacentHTML('afterbegin', a); } </script> <div class="disKutu"> <div style
Yorum Gönder
Devamı

Cumhuriyet Bayramımız Kutlu Olsun

Resim
  Cumhuriyetimizin 97. Yılı Kutlu Olsun
Yorum Gönder
Devamı

CSS Hazır Basit Product Box Kodu(Transition Efektli)

Resim
Product Box'lar, E-Ticaret sitlerinde ürün kutusu olarak bilinen ve kategori sayfalarında ürünlerin gösterilmesi için kullanılan site elemanlarıdır. Kullanıcılar bu kutucuklardaki bilgilere bakarak ürünler hakkında özet bilgi edinirler. Tıkladıklarında ürün detay sayfasına yönlendirme yapar. Bazılarında sepete ekleme butonları ve çeşitli aksiyon elemanları bulunur. Bu örnekte temel seviyede bir ürün kutusu kodlaması yaptım. Basit kolay anlaşılır bir kodlar kullandım. Sadece hover etkisini basit transition ile daha şık yapmak için bir iki ufak CSS3 kodu kullandım. Kodlar aşağıdaki gibidir. <style>   .productBox {     border: solid 1px #ddd;     width: calc((100% - 10px)/4);     min-width: 150px;     min-height:340px;     height: auto;     display: block;     font-family: Arial;     float: left;     margin: 5px;     border-radius: 2%;     -webkit-border-radius: 2%;     -moz-border-radius: 2%;     transition: all .5s;     background: #fff;   }   .productBox:hover {     border: s
Yorum Gönder
Devamı

CSS Transition Background Efektli Kutucuklar

Basit birkaç satır CSS3 koduyla liste kutularınıza şık ve zarif görünümlü arkaplan efektleri verebilirsiniz.  <style>   .hoverKutu {     background-color: #ededed;     color: #717171;     width: 90%;     height: 45px;     display: block;     line-height: 45px;     text-align: center;     cursor: pointer;     transition: background-color 1.1s ease;     border: solid 1px #dddddd;     margin: 5px auto;   }   .hoverKutu:hover {     background-color: #fff;   } </style> <div class="hoverKutu">   CSS3 kodları ile kutucuklara yumuşatılmış Hover efektleri verebilirsiniz. </div> <div class="hoverKutu">   Böylelikle daha yumuşak ve modern görünümlü listeler oluşturabilirsiniz. </div> Bu kodların canlı hali şu şekildedir. CSS3 kodları ile kutucuklara yumuşatılmış Hover efektleri verebilirsiniz. Böylelikle daha yumuşak ve modern görünümlü listeler oluşturabilirsiniz. Burada CSS Transition efekti class'ı "hoverKutu" o
Yorum Gönder
Devamı

JSON - HTML Tablo Dönüştürücüsü(JSON to HTML Converter)

JSON verilerini HTML tabloya çeviren basit bir JavaScript uygulaması yaptım. Kodlar aşağıdaki gibidir.  <!DOCTYPE html> <html> <body>   <style>     .objeTablo th,     .objeTablo tr,     .objeTablo td {       padding: 5px;       border: solid 1px #f00;       color: #717171;       text-align: center;     }   </style> <h2>HTML Tabloya çevirmek istediğiniz JSON içeriğini buraya yapıştırın</h2> <strong>Bu kod sadece 1 seviye değerleri gösterir.Eğer bir değerin içinde başka bir nesne varsa bunları tabloda Object olarak olarak görürsünüz. </strong><br/>   <textarea cols="70" rows="20" name="jsonGir"></textarea><br />     <input type="button" value="JSON İçeriğini Göster" onclick="objGoster()" />   <table id="tabloIcerik" class="objeTablo" style="max-width: 800px; height: auto;         border: solid 1px #f00;" cellspaci
Yorum Gönder
Devamı

CSS Timeline Side Bar

Resim
CSS ile side bar alanına eklenebilen basit bir timeline kutusu. <style>   .listTimeLine {     margin: 0px;     padding: 10px;     border-left: 1px solid #717171;     font-family: Arial;     width: auto;     display: block;     background-color: #ddd;     max-width: 40%;     height: auto;     display: block;   }   .listTimeLine li {     margin: 4px 0;   }   .listTimeLine li.listDate {     list-style-type: none;     color: #717171;     font-size: 12px;     margin: 18px 0 0 0;   }   .listTimeLine li.listDate:first-child {     margin: 0;   }   .listTimeLine li.listItem {     list-style-type: none;     font-size: 16px;     font-weight: bold;     color: #545454;     padding-left: 15px;   }   .listTimeLine li.listDate:before {     content: "■";     padding-right: 10px;     margin-left: -15px;     line-height: 10px;     vertical-align: top;     display: inline-block;     font-size: 16px;   }   .active {     color: #e04235 !important;     font-weight: bold;   } </style&
Yorum Gönder
Devamı

Google Shopping Türkiye'ye Kapanıyor.

Resim
Rekabet Kurulu ile anlaşamayan Google 10 Ağustos 2020 Tarihinden itibaren Google Shopping reklamlarının Türkiye'deki arama sonuçlarından kaldırılacağını duyurdu. Merchant Center üzerinden kontrol ettiğimiz Google Alışveriş reklamlarının, diğer Alışveriş Karşılaştırma Siteleri için haksız rekabete sebep olacak şekilde piyasayı domine ettiği, arama sonuçlarında Alışveriş Karşılaştırma Sitelerine de yeterince gösterim hakkı tanımadığı kararının alınmasını ardından Rekabet Kuruluna Google Tarafının sunduğu çözüm önerilerinin kabul edilmemesi üzerine, Google Türkiye tarafından bu kararın alındığı açıklandı. 10 Ağustostan itibaren ülkemizden yapılan arama sonuçlarında shopping reklamlarını göremeyeceğiz. Detaylar için https://turkiye.googleblog.com/2020/07/google-alisveris-reklamlari-ile-ilgili29.html
Yorum Gönder
Devamı

Responsive CSS Hazır Metin Kutusu

Resim
Metin kutusu kodları <style> .mainBox{ display:block; max-width:100%; height:auto; padding:2.5%; background-color:#f1f1f1; margin:5px auto; border:solid 1px #dfe6e9; box-sizing:border-box; } .innerBox{ background-color:#ffffff; padding:5px; width:100%; height:auto; display:block; border:0px; border-left: solid 3px #e74c3c; text-align:justify; box-sizing:border-box; color:#2c3e50; } </style> <div class="mainBox"> <div  class="innerBox">     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.     </div> </div> Bu kodların canlı hali
Yorum Gönder
Devamı

Javascript ile bul değiştir işlemi nasıl yapılır?

Javascript ile bir string ifadeyi tüm sayfada aratıp istenen değerle replace edebilirniz. Javascript kelime değiştirme kodumuz var kelime=/ aranan kelime /ig; var yeniKelime=" yeni ifade "; var x = this.document.body.innerHTML.replace(kelime,yeniKelime); this.document.body.innerHTML = x;  Bu koddaki kırmızı yerleri değiştirip tarayıcı konsolunda çalıştırdığınızda HTML sayfasında aradığınız kelime ile eşleşen tüm ifadelerin değiştirildiğini görebilirsiniz.
Yorum Gönder
Devamı

Javascript ile tıklanan elemanın sira numarasini bulmak

Bazı projelerde kullanıcının tıkladığı elemanın indeks sırasını bilmemiz gerekir. Herhangi bir şekilde JQuery vb javascript kütüphanesi kullanmadan saf javascript ile tıklanan elemanın sıra değerini öğrenebilirsiniz. Aşağıdaki kısa kod örneği bu işin kolayca yapılabilmesini sağlıyor. <style> li.demo{display:block;margin-top:2px;padding:5px;background-color:#4caf50;width:50px;text-align:center;color:#fff;cursor:pointer;} </style> <ul id="kutu">   <li class="demo">-1- </li>   <li class="demo">-2- </li>   <li class="demo">-3- </li>   <li class="demo">-4- </li>   <li class="demo">-5- </li> </ul> <div>Sıralama Bilgileri</div> <strong id="siraSonuc"></strong> <script> var elemanlar=[]; var sira; var ind; elemanlar=document.querySelectorAll(".demo"); for (var i=0;i<ele
Yorum Gönder
Devamı

HTML <!DOCTYPE> Bildirimi

<!DOCTYPE> bildirimi/deklerasyonu her HTML sayfasının başında olması gereken bir HTML elemanıdır. Tek başına herhangi bir işlevi yoktur. Sadece tasaryıcılara içinde ilgili HTML dökümanının hangi standartlara göre işleneceğini bildirir. Tarayıcının sayfayı doğru yorumlaması için bu elemanın en başta <html> etiketinden önce yazılmış olması şarttır. HTML <!DOCTYPE> Tagı Kullanım Örneği <!DOCTYPE HTML> <html>    <head>       <title>Sayfa Başlığı</title>    </head> <body>             Sayfa içeriği </body> </html> Sayfa formatına göre <!DOCTYPE> bildirim biçimleri de değişmektedir.. HTML5  <!DOCTYPE html> HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&g
Yorum Gönder
Devamı

HTML <html> Etiketi

<html> etiketi, sayfanın bir HTML sayfası olduğunu belirtmek için kullanılır. <html> şeklinde açılır ve </html> şeklinde kapanır. Sayfadaki tüm HTML ve Javascript kodları bu iki etiket arasına yazılır.   HTML <html> Tagı Kullanım Örneği <!DOCTYPE HTML> <html>    <head>       <title>Sayfa Başlığı</title>    </head> <body>             Sayfa içeriği </body> </html> HTML <html> Tagı Tarayıcı Desteği Google Chrome Desteği : Var Mozilla Firefox Desteği : Var Internet Explorer Desteği : Var Safari Desteği : Var Opera Desteği : Var
Yorum Gönder
Devamı

JSON Nesne Ayırıcı

Kodlar <!DOCTYPE html> <html> <body>     <style>         .objeTablo th, .objeTablo tr, .objeTablo td         {             padding: 5px;             border: solid 1px #f00;             color: #717171;             text-align: center;         }     </style>   <label>Listelenecek Objeyi Gir</label><br/> <input type="text" name="obje" /><br/><input type="button" value="Obje Göster" onclick="objGoster()" /><br/>   <textarea col="50" rows="20" name="jsonGir"></textarea>     <table id="tabloIcerik" class="objeTablo" style="max-width: 800px; height: auto;         border: solid 1px #f00;" cellspacing="0" cellpadding="0">         <tr>             <th>                 Nesne             </th>             <th>          
Yorum Gönder
Devamı

Textarea'yı Satır Satır Nasıl Okuturuz?

Javascript ile Textarea elemanının içeriğini satır satır okutup başka bir div elemanının içine yazdıralım. <script> function linkleriAc(){ var strlar=document.getElementById("lnklist").value.split("\n"); for (i=0;i<strlar.length;i++){ document.getElementById("sonuc").innerHTML+=strlar[i]+"<br/>"; } } </script> <textarea id="lnklist" cols="80" rows="10"> </textarea><br/> <input type="button" onclick="linkleriAc();" value="Satırları Oku" /> <div id="sonuc"> </div>  Kodların çalışan hali
Yorum Gönder
Devamı