Kayıtlar

Ekim, 2018 tarihine ait yayınlar gösteriliyor

Basit JQuery Slider (Responsive)

Resim
JQuery ile basit bir slider çalışması yaptım. Bu çalışmamda birbiri üstüne absolute konumlu dizilen a ve img elemanları sırayla kullanıcılara gösteriliyor. Geçiş efekti olarak JQuery'nin fadeIn ve fadeOut fonksiyonlarını kullandım.  Sayfanın yüklenme anında resimKut id'li div elemanının içindeki a elemanlarını saydırıyor ve sırasıyla fadeIn-fadeOut efektlerini elemanlara uygulatarak slaytlar arasında geçişi sağlıyorum. a ve img elemanlarına sahip oldukları CSS'ler yine sayfanın yüklenme anında JQuery'nin css() fonksiyonuyla veriliyor. Böylece sliderı düzenlerken stil kodlarıyla uğraşmak zorunda kalmıyorsunuz. Slider'ı responsive olacak şekilde kodladım . Slider görselleri içinde bulundukları elemanın genişliğine göre otomatik olarak boyutlandırılıyor. Yine çalışma anında slider'da bulunan a'ların yükseklik değerini alıyor ve bunu resimKut id'li elemana atıyorum. Bunu yapma sebebim resimKut elamanını position değerinin relative, içindeki a
Yorum Gönder
Devamı

Javascript JSON Parsing Örnek 1

Resim
Javascript ile JSON formatında gelen verileri kolaylıkla parse edip bir tabloda okunaklı veriler haline getirebilirsiniz.. Örnek Kod <!DOCTYPE html> <html> <body>     <style>         .musteriTablo th, .musteriTablo tr, .musteriTablo td         {             padding: 5px;             border: solid 1px #f00;             color: #717171;             text-align: center;         }     </style>     <table id="tabloIcerik" class="musteriTablo" style="max-width: 800px; height: auto;         border: solid 1px #f00;" cellspacing="0" cellpadding="0">         <tr>             <th>                 Sipariş No             </th>             <th>                 Müşteri Adı Soyadı             </th>             <th>                 Sipariş Toplamı             </th>         </tr>     </table>     <script>         var musteriler
Yorum Gönder
Devamı

Javascript Büyüteç Uygulaması

Resim
Saf Javascript ve CSS kullanarak basit bir büyüteç programı yazdım. Javascript Büyüteç Kodları: HTML Kodu; <div id="resimKabi">   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzzIU2K83cIbm0r_wB8lrZ5m3iSKchB-WolIEDvxFCz3BuYLB-g2_keCJ6QxbpfXBJ9tYjOQtWTn3sEub5tOycXxKFx_gK99s3jsUZckLWCyFEA_lab-T0A5voDQcXy0fLxjJopxevCa4/s1600/lotr-ring.jpg" />   <div id="buyutec"></div> </div> CSS Kodu; #resimKabi {   width: 100%;   height: auto;   display: block;   position: relative;   overflow: hidden; } #resimKabi img {   display: block;   width: 100%;   height: auto; } #buyutec {   width: 100px;   height: 100px;   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzzIU2K83cIbm0r_wB8lrZ5m3iSKchB-WolIEDvxFCz3BuYLB-g2_keCJ6QxbpfXBJ9tYjOQtWTn3sEub5tOycXxKFx_gK99s3jsUZckLWCyFEA_lab-T0A5voDQcXy0fLxjJopxevCa4/s1600/lotr-ring.jpg);   background-repeat: no-repeat;   bor
Yorum Gönder
Devamı