Babamı kaybedeli ne kadar zaman geçti?
B Babamı 27 Ocak 2021 günü kaybetmiştim. Salih Bey'in Ruhu için El Fatiha!
Kayıtlar
JS ve CSS ile HTML Elemanlarının Sıralamasını Nasıl Değiştiririz?
HTML elemanlarının sıralarını değiştirebilmeniz için kapsayıcı elemanının display değerinin flex olması gerekmektedir. Sonrasında javascript ile verdiğiniz order değerine göre sıralanacaktır. Aşağıdaki kodlar butona basıldığında elemanların sırasının karışık olarak değişmesini sağlamaktadır. <style> .kapsayici { display: flex; display: -webkit-flex; flex-direction: column; max-width: 92px; height: auto; margin: 0px auto; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; } .eleman, .karistirButon { padding: 3%; border: solid 1px #f00; margin: 2px; max-width: 92px; text-align: center; } .karistirButon { background-color: red; color: #fff; margin: 0px auto; margin-top: 5px; cursor: pointer; display: block; padding: 1%; max-width: 92px; } </style> <script> function siraDegistir() { var sira = 0; var siraliste = [];
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
CSS Hazır Basit Product Box Kodu(Transition Efektli)
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
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
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