İlhami Yılmaz

Bu uygulamanın farkı, ekrana gelecek işaretçilerin noktalarına göre otomatik olarak uzaklaştırma ve sığdırma ayarlaması. Detayları yorum satırlarında görebilirsiniz. HTML      < div id ="map_wrapper">         < div class ="mapping" id ="map_canvas">             &nbsp;         </ div >     </ div > CSS      #map_wrapper {         height : 400px ;     }     #map_canvas {         width : 100% ;         height : 100% ;     } JS     jQuery( function ($) {         // API'yi Google'dan Asenkron Olarak Çağır         var scr...

Web sitesi üzerinden ücretsiz canlı destek vermek için kullanabileceğiniz yöntemlerden birisi de neredeyse her bilgisayarda kullanılan Skype yazılımıdır. Şirketin Microsoft tarafından satın alınması bu yazılımın daha da büyüyeceğinin hatta bir standart olabileceğinin göstergesi olarak kabul edilmektedir. Belirli kullanıcıları operatör olarak kullanmak ve bunları bir canlı destek hattı gibi göstermek ise oldukça basit bir kaç adımdan oluşuyor. Öncelikle web sitenize koyacağınız kısmın üzerinden geçelim.      < a href ="skype:webtasarim101?call">         < img alt ="My status" height ="16" src ="http://mystatus.skype.com/smallicon/webtasarim101" style =" border : currentColor ; " width ="16" />         webtasarim101     </ a > Bu kodu iletişim sayfanıza ya da istediğiniz her hangi bir yere yapıştırdıktan sonra " webtasarim101 " yazan kısıml...

Mobil uyumluluğu olmayan siteleriniz için açılır menü yapmakta zorlanıyorsanız ya da birden fazla JavaScript içeren hazır çözümlerle uğraşmak istemiyorsanız doğru yere geldiniz. Az sonra göreceğiniz yöntemle sadece bir kaç satır kodla yapabileceğinizi göreceksiniz. Öncelikle sitemizin kendi menüsüne ek olarak, hemen üst kısmına bir select/option element ağı oluşturuyoruz. < select class ="mobilMenu" name ="select" id ="mobilDrop">         < option value ="/"> Sayfaya Git... </ option >         < option value ="hakkimizda.html"> Hakkımızda </ option >         < option value ="iletisim.html"> İletişim </ option > </ select > Buraya kadar geldiğinize göre Media Query ile CSS'de tasarımınızı nasıl mobil hale getireceğinizi muhtemelen biliyorsunuzdur. Fakat çok derine inmeden, burada yapacağımız olan kısmı kısaca ...

Instagram'ın Android sürümünde ısrarla süregelen bir sorun var. Sadece kendimde değil, birçok kişide de görmeye başlayınca canımı sıktı. Çözüm ise iki üç dokunma kadar yakın. Instagram'da kendi profil sayfanıza gidip yukarıdan alt alta gelen 3 nokta sembolüne basarak Seçenekler sayfasını açın. Ayarlar ana başlığı altından Kamera'yı seçerek Gelişmiş Özellikler sayfasına geçin. Yüksek Kalitede Görüntü İşleme Kullan seçeneğini kapatın. Bitti gitti... Demek ki Instagram'ın sözüm ona yüksek kalite görüntü işleme motoru tam aksine fotoğrafları bozuyormuş. Umarım ki Instagram Pikselleşme Sorunu yaşayan ve "Instagram'da fotoğraflar bozuk çıkıyor" diyen herkesin sorununu çözer. Galaxy Ace, Galaxy Note2, Galaxy Note3, GM Discovery'de denenmiştir. Teknoloji için takipte kalın, sevgiler...

Zaman zaman yazdığınız yazılardaki bir kelime mevcut div alanınızdan daha geniş olabilir. Zira bu tür durumlarda bu kelime div'in dışına taşmaktadır. Her ne kadar metin bütünlüğü açısından zaman azman sorunlar yaratsa da tasarımın kaymaması adına bu kelimeyi bölüp bir alt satıra geçirmek tasarımcı açısından daha mantıklı olacaktır. Örnek senaryoda kullanıcının isim ve soyismini tutan ve genellikle kelimeleri alt alta getiren bir div var fakat soyismi çok uzun olan bir kullanıcı tasarımda bozulmaya neden oluyor. Word Wrap'ın nasıl bir etki yarattığını görelim. HTML (Normal) <p class="isimAlani">Ali Kocamustafapaşaoğulları</p> CSS (Normal) .isimAlani { width:80px;  border:1px solid #000000; } Sonuç: HTML (Word Warp ile) <p class="isimAlani">Ali Kocamustafapaşaoğulları</p> CSS (Word Warp ile) .isimAlani { width:80px;  border:1px solid #000000; word-wrap:break-word; } Sonuç: CSS Word Warp öz...

Eğer bir <div>'in içerisindeki içeriği belirli bir aksiyona göre değiştirmek istiyorsanız bunun en kolay yollarından birisi, ilgili alanı tamamen gizlemek veya göstermektir. JavaScript ile bu kolayca gerçekleştirilebilir. HTML <nav class="subnav" id="paket">  <ul>   <li><a href="a.html">Referans A</a></li>   <li><a href="a.html">Referans B</a></li>   <li><a href="a.html">Referans C</a></li>  </ul> </nav> <nav class="subnav" id="sektorel" style="display:none;">  <ul>   <li><a href="1.html">Referans 1</a></li>   <li><a href="1.html">Referans 2</a></li>   <li><a href="3.html">Referans 3</a></li>  </ul> </nav> <input type="button" id="bir" v...

Aslına bakarsanız bu bir hata değildir, tarayıcı tarafından geliştirilmiş bir tepkidir. Bazı dosyaların HTTP Request'de bu hatayı vermesinin nedeni, ilgili tarayıcı veya cihazın bu siteyi daha önce ziyaret etmiş olmasıdır. Handshake (El Sıkışma) dediğimiz protokol gerçekleşirken, tarayıcı ilgili sitenin dosyalarının bulunduğu bir listeyi, yani HTTP Request Listesi'ni, bilgisayarınıza indirir. Bu listeden cache'e almadığı, yani belleklemediği dosyaları sunucudan indirerek derleme için hazırlar. Elinde olanları ise sunucuyla karşılaştırır. Eğer ilgili dosya, siz siteye girdiğinizden bu zaman hiç değişmemişse bu dosya indirilmez ve atlanır. Bu yüzden HTTP 304 Not Modified hatası oluşur. Teknoloji için takipte kalın...