İlhami Yılmaz

Bilindiği üzere arkaplan resmi olarak çağırdığımız resimler HTML validasyonundan geçmemekte ve alt etkiketi gibi önemli etiketler kullanılamamaktadır. Her ne kadar kullanacağımız resimleri arkaplan resmi olarak çağırmak, kullanıcı tarafında kesme -biçmeyi engelleyerek büyük kolaylık sağlasa da, sabit yükseklik değeri alma zorunluluğundan dolayı developer'ın üzerine yük bindirmekte ve her media query için ayrı ayrı yükseklik yazdırmak zorunda bırakmaktadır. Zira, artı ve eksileri bir yana dursun, ikisini birlikte kullanmak şu mantık ile daha basittir: Bildiğiniz üzere, Bootstrap kendi içerisinde img-responsive adında bir sınıf barındırmakta, bu sınıf ise resimlerimizi bulunduğu konteyner kadar genişlik verdirerek aynı zamanda da yüksekliğini otomatik olarak hesaplatmaktadır. Bu tutorial, Bootstrap'ın bu özelliğini baz almaktadır. Yapacağımız sistemin mantığı, resmi çağırmak ama boyutlarını kaybetmeden görünmez hale getirmek, ardından da dışına bir konteyner oluşturarak, o...

jQuery wheel  fonksiyonu ile sayfanın hareket edip etmediğini tespit etmemiz mümkün olmasın rağmen, sayfanın yukarı ya da aşağı kaydığını anlamamız, fonksiyonun ham hali ile mümkün değildir. Bunu yapabilmek için öncelikle mouse orta tuş kaydırma hareketini equalize (eşitleme) ile bir değişkene atamamız ve delta Y hareketini kontrol etmemiz gerekmektedir.         $(function () {             $(window).on('wheel', function (e) {                 var delta = e.originalEvent.deltaY;                 if (delta > 0) {                     console.log("Aşağı Gittim");                 }                 else {                     console.log("Yukarı Gittim");     ...

Sayfanızda dinamik pozisyona sahip birden çok çapa olması halinde tek bir buton ile arasında gezinmek isteyebilirsiniz. Bu durumda ilk başta tüm ID'leri bir diziye toplamanız ve ardından dizi içerisindeki nesneleri kontrol ederek tek tek gezmeniz gerekmektedir. Örnek kod aşağıdadır:  Not: jQuery dependant yazılmıştır. HTML:     <div style="position:fixed; background: white; border: 1px solid black; right: 15px;">         <a style="cursor: pointer;" id="tiklat">Tıkla ve Zıpla</a>     </div>     <a class="zipla" id="1"></a>     <p style="height: 750px;">Lorem ipsum dolor sit amet...</p>     <a class="zipla" id="2"></a>     <p style="height: 350px">Lorem ipsum dolor sit amet...</p>     <a class="zipla" id="3"></a>     <p style="height: 750px">Lorem ips...

Elimizde bir form olduğunu varsayalım ve çeşitli bir neden dolayı, form nesnesinin gönderilmesini engelledik.  $(".deneme").click(function () {     $("#urunekle").submit(function (e) {         e.preventDefault();     }); }); Bu durumda herhangi bir input nesnesine submit ataması yapsak bile form bir kez engellendiği için çalışmayacaktır. Bu durumda forma bağladığımız submit fonksiyonunu unbind ile silerek yeniden gönderme yapmamız, bu durumu aşmamıza yeterli olacaktır. $("#gonderButon").click(function () {     $('#urunekle').unbind('submit').submit(); });

CSS dosyanız çok büyüdüğünde kendini tekrarlayan sınıfları bulmak zorlaşır. Gereksiz yere kendini tekrarlayan sınıfları silebilmek için CSS Purge kullanmanız en iyi çözüm olacaktır. Node.js'nin komut ekranını açın ve ilk başta CSS Purge yükleyin: npm install css-purge -g Arından temizlemek istediğiniz css dosyasını erişimi kolay bir klasöre alın. (Örneğin C:\NodeDosyam) Bu klasöre gidin ve Purge'ü çalıştırın: css-purge -i stilim.css -o stilim_temiz.css Yukarıdaki komutta input kısmına (-i) işlemek istediğiniz CSS dosyasının adını, output kısmına ise oluşturmak istediğiniz, temizlenmiş CSS dosyasının adını yazıyoruz. Not: Bu işlem CSS dosyanızın içerisindeki yorumları da silecektir...

Tüm style etiketlerini seç: style="[^\"]*" İki HTML etiketinin arasını seç: <lastmod>(.*?)</lastmod>

WOFF ve WOFF2 font dosyaları yerinde olmasına rağmen tarayıcı tarafından bulunaması, IIS Server'ın bu dosya tipini servis ederken yanlış deklerasyon kullanmasından kaynaklanmaktadır. Sorunun çözümü için sitenizin web.config dosyasını ilgili konfigürasyonu silip doğru bir şekilde seris etmesi için ayarlamanız gerekmektedir. Bunun için  system.webServer düğümüne aşağıdaki kodu eklemeniz yeterli olacaktır.     <staticContent>         <remove fileExtension=".woff" />         <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />         <remove fileExtension=".woff2" />         <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2" />     </staticContent> 

Sayfanın sonuna ulaşınca, yani scrollbar dipe gidince bir JavaScript event'i çalıştırmak istiyorsanız aşağıdaki kodu kullanabilirsiniz. document.addEventListener('scroll', function (event) {     if (document.body.scrollHeight ==  document.body.scrollTop +  window.innerHeight) {         alert("Sayfanın sonuna ulaştınız!");     } });

Bootstrap Modal kullanırken sıkılıkla karşılaşılan sorunlardan bir tanesi, Modal penceresinin iPhone'da açılmamasıdır. Kodunuz Masaüstü cihazlarda ve Android telefonlarda çalışırken iPhone'da çalışmamasının nedeni büyük ihtimalle HTML veya CSS kodunuzun cihaz tarafında validasyondan geçememesidir. Bu durum özellikle Modal nesnesini trigger eden elementiniz buton yerine a etiketi ise yaşanır. Birinci Yöntem: Prevent Default Buradaki ilk muhtemel çözüm a etiketinize href vermektir. Bu durumda ortaya linke tıklaınca belirli bir adrese yönlendirme sorunu oluşur. İlk çözüm linkiniz varsayılan davranış biçimini değiştirmektir. $("a.modalaktivasyon").click(function (e) { e.preventDefault(); }); İkinci Yöntem: Void Function İkinci çözüm olarak href ile belirtilen yol olarak boş bir JavaScript çalıştırılabilir. Bu durumda void (boş) olan output, return 0 gibi iş görür v...

Görüş ve Düşünce Yapısı Farklılıkları Teknik eleman dışında gelen tüm elemanların ekip ile uyum sağlama konusunda sorunlar yaşadağı aşikar. Teknik elemanlar her daim analitik düşünce yapısına sahip olup, özellikle iş üzerindeyken sonuç odaklar haraket ettiklerinden dolayı bir şekilde işi sonuca ulaştırıyorlar. Bunun pozitif etkisi sonuç almak iken, negatif etkisi ise takımdan koptuğu zaman bireysel haraket etmesi oluyor. Buna rağmen, aynı tutumdan biz teknik ekip olarak çok fazla etkilenmiyoruz. Mütemadiyen, x şahıs, bulunduğu ara konumda teknik ile iletişim kurmak konusunda zorlanıyor. Teknik ekip, sonuç odaklı düşünerek cevap verdiğinden dolayı, karşı tarafa açıklayıcı ve tatminkar, daha ziyadesiyle duygusal zekaya hitap eden cevap vermemesinden dolayı arada sürüncemede kalması, git gel yapması eninde sonunda yılmasına neden oluyor. Burada bizim üzerimize düşen kısım, daha açıklayıcı olmak ve karşı tarafın da açıklamalarını dinliyor olmaktan geçiyor. Sonuç odaklı olmak teknik ...

Bir dilin alfabesindeki tüm karakterleri içeren cümlelere Pangram adı verilir. Aşağıda bazı dillerde pangramlar verilmiştir. Başka dillerde de pangram istiyorsanız yorum atabilirsiniz. Pijamalı hasta yağız şoföre çabucak güvendi. - Türkçe A quick brown fox jumps over the lazy dog. - İngilizce Voix ambiguë d’un cœur qui au zéphyr préfère les jattes de kiwi. - Fransızca Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich. - Almanca Любя, съешь щипцы, — вздохнёт мэр, — Кайф жгуч! - Rusça Ma la volpe, col suo balzo, ha raggiunto il quieto Fido. - İtalyanca Benjamín pidió una bebida de kiwi y fresa; Noé, sin vergüenza, la más exquisita champaña del menú. - İspanyolca .صِف خَلقَ خَودِ كَمِثلِ الشَمسِ إِذ بَزَغَت — يَحظى الضَجيعُ بِها نَجلاءَ مِعطارِ - Arapça Flygande bäckasiner söka hwila på mjuka tuvor. - İsveçce IQ-løs WC-boms uten hørsel skjærer god pizza på xylofon. - Norveçce 視野無限廣 窗外有藍天 微風迎客，軟語伴茶. - Çince Geleneksel 中国智造，慧及全球 - Çince Basitleştirilmiş Høj bly gom vandt fræk...

Sorunla bizzat karşılaştım ve bir çok çözüm yöntemi denedim. Bu yöntemlerin başında: Chrome'u silip yeniden kurmak, Kullanıcı profilimi sıfırlamak, Java ve Flash eklentilerini devre dışı bırakmak vardı. Ne var ki hiç biri işe yaramadı. Kullandığım 3 bilgisayarın üçünde de Windows 8.1 var ve üçünde de aynı profili kullanmama rağmen bilgisayarlardan sadece birinde Chrome'a tıkladığım zaman önce açılacak gibi yanıyor ardından sönüyordu. Sonra ise açılması bazen 20 dakika bazen daha fazla sürüyor, aniden önüme geliyordu. Çözümü ise WindowsSocket bilgilerimi sıfırlamakta buldum. Böyle bir sorun yaşıyorsanız denemenizi şiddetle öneririm: Öncelikle Admin Yetkileriyle Komut İstemini Çalıştırın. (Win + X > Command Prompt (Admin)) Ardından system32'nin içerisinden "netsh" kütüphanesini çağırın. netsh içerisinde "winsock reset" komutunu girin. Bilgisayarınızı yeniden başlatın. Bu sayede hem Chrome'un sorununu çözmüş oluyor hem de tüm tar...

Elimizde çok uzun bir kaynak kod varsa ve kod içerisinde çok fazla istenmeyen yorum alanı varsa bunu Visual Studio sayesinde tek bir seferde temizleyebiliriz. Visual Studio, RegEx (Regular Expressions) desteklediği için bu yöntemi Bul/Değiştir fonksiyonunda da kullanmamız mümkün. Bunu yapmak için önce CTRL+H kısayolu ile Bul/Değiştir penceresini getiriyoruz. Ardından ALT+E tuş kombinasyonuna basarak Regular Expressions 'ı aktif ediyoruz. Buradan sonrası kullandığınız dile ve yorumlama syntaxına göre değişiklik gösterir. Örneğin "<!-- yorum -->" şeklinde olan HTML yorumlarını silmek için şu tabiri kullanabiliriz: <!--.*--> Bul kısmına yukarıdaki kodu yazarsak ve değiştir kısmını boş bırakırsak sayfa içerisindeki tüm HTML yorumlarını silecektir. "//" şeklindeki yorumlar için "//.*" yandaki şekil de kullanılabilir. Teknoloji için takipte kalın, sevgiler.

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...