Turgut Arslan

Sidebar İçin Özet Metin Kutusu(Elipsisli-3 noktalı) HTML-CSS

Haber sitelerinde, ya da blog sayfalarının sidebar bölümünde kullanabileceğiniz metin kutusu. Genelde bir yazının özet kısmını göstermek için kullanılır. Eklediğinizi yazıyı belirli bir satıra kadar gösterir. Gerisini 3 nokta şeklinde kısaltır. Koddaki line-clamp özelliğini değiştirerek satır sayısını istediğiniz gibi ayarlayabilirsiniz. Kodlar şu şekildedir.

<style>

.listWrp{background:#f2f2f2;padding:2%;border: solid 1px #f2f2f2;border-radius:.8rem;-moz-border-radius:.8rem;-webkit-border-radius:.8rem;-o-border-radius:.8rem;max-width:40%;color:#717171;font-family:Arial;}

.listCont{border-left:solid 3px #ff0000;padding:0 0 0 3%;display:block;position:relative;font-size:.9rem;text-align:justify; }

.listInd{position:absolute;top:5%;left:-.38rem;padding:.3rem;background-color:#ff0000;z-index:10;}

.listTitle{color:#555;margin:1% 0;font-size:1.2rem;}

.listTxt{text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical;overflow:hidden;}

.listRMore{max-width:4rem;text-align:center;float:right;font-size:.7rem;color:#fff;font-weight:bold;padding:.5rem;background-color:#f00;border-radius:.3rem;-moz-border-radius:.3rem;-webkit-border-radius:.3rem;-o-border-radius:.3rem;line-height:.8rem;height:.8rem;display:block;cursor:pointer;text-decoration:none;}

.lstClear{clear:both;}

</style>

<h3 class="listTitle">Lorem ipsum dolor</h3>

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.

</div>

</div>

</div>

Berat Kandilimiz Mübarek Olsun

Klavyeden girilen sayıya kadar olan Fibonacci serisini yazdiran Javascript Programı

Evet Sayın okuyucu,
Bugün Fibonacci serisi üreten bir Javascript programı yapacağız. İtalyan matematikçi Leonardo Fibonacci'nin 12. yüzyılda keşfettiği gizemli Fibonacci serisi matematik ve yazılımla ilgilenlerin malumudur. Bir başlangıç değerinden itibaren her bir sayı bir önceki ile toplanarak bir sonraki sayı elde edilir ve bu ilginç seri bu şekilde sonsuza kadar gider.
Burada önemli bir noktayı belirtmek istiyorum. Fibonacci sayısı diye bir şey yoktur. Fibonacci serisi vardır. Burada esas olan yukarıda belirttiğimiz kurala uygun elemanların artarak sıralanmasıdır. Herhangi bir sayıdan başlayabilir. Asal sayılar ile karıştırılmamalıdır. Bu programda biz seriyi 1 den başlattık. Ama herhangi bir sayıdan başlayan versiyonunu yazmak da size kalmış.

Lütfen bir sayı girin ve enter tuşuna basın

Kodlar

var a = 1;

var b = 1;

var c = 0;

var i = 0;

var fibonacciDizisi = [];

var eleman = document.getElementById("sayiYaz");

eleman.addEventListener("keyup", function(event) {

if (event.keyCode === 13) {

document.getElementById("fibonacci").innerHTML = "";

while (i < parseInt(eleman.value)) {

if (i <= 1) {

fibonacciDizisi[i] = 1;

i++;

} else {

c = a + b;

if (c > eleman.value) {

break;

}

fibonacciDizisi[i] = c;

i++;

a = b;

b = c;

}

for (j = 0; j < fibonacciDizisi.length - 1; j++) {

document.getElementById("fibonacci").innerHTML += fibonacciDizisi[j] + ",";

}

});

</script>

Saygılarımla
Turgut Arslan

1'den N'ye kadar olan sayıların toplamını yapan JavaScript programı

Programı denemek için kutuya bir sayı yazın ve enter tuşuna basın.

Programın kodları aşağıdaki gibidir

var eleman = document.getElementById("sayiKutu");

eleman.addEventListener("keyup", function(event) {

if (event.keyCode === 13) {

var t = 0;

var x = 1;

while (x <= parseInt(eleman.value)) {

t = t + x;

x = x + 1;

}

document.getElementById("sonuc").innerHTML = t;

}

});

</script>

Saygılarımla...
Turgut ARSLAN

Sliderli Product Box Örneği

Sliderli Product Box Kodları :

<style>

.productBox{

display:block;

position:relative;

width:25%;

height:auto;

float:left;

box-sizing:border-box;

border:solid 1px #dedede;

border-radius:1rem;

padding:.3rem;

margin:.3%;

background:#fff;

}

.productImages{

position:relative;

width:100%;

height:auto;

display:block;

padding-bottom:100%;

box-sizing:border-box;

}

.productImage{

margin:auto;

max-width:85%;

height:auto;

display:none;

position:absolute;

z-index:1;

top:0;

left:0;

right:0;

bottom:0;box-sizing:border-box;}

.productImage:nth-child(1){display:block;}

.imageThumbs{display:flex;width:100%;justify-content: center;margin:0px auto;}

.imageThumbsItem{

display:block;

border:solid 1px #dedede;

width:1rem;

height:1rem;

border-radius:50%;

margin:1%;

box-sizing:border-box;

cursor:pointer;

}

</style>

window.addEventListener("load",function(){

var parent;

var imgOrd;

var upParent;

var allItems=document.getElementsByClassName("imageThumbsItem");

for(i=0;i<allItems.length;i++){

allItems[i].addEventListener("mouseover",function(){

parent = this.parentElement;

imgOrd=Array.prototype.indexOf.call(parent.children, this);

upParent=parent.parentElement;

var underImgs=upParent.getElementsByTagName('img');

for (j=0;j<underImgs.length;j++){

underImgs[j].style.display="none";

}

underImgs[imgOrd].style.display="block";

});

}

});

</script>

</div>

</div>

</div>

</div>

Saygılarımla...
Turgut ARSLAN

Babamı kaybedeli ne kadar zaman geçti?

Babamı 27 Ocak 2021 günü kaybetmiştim.

Salih Bey'in Ruhu için El Fatiha!

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>

function siraDegistir() {

var sira = 0;

var siraliste = [];

var i = 0;

var elemanlar = document.querySelectorAll(".eleman");

for (i = 0; i < elemanlar.length; i++) {

sira = Math.floor(Math.random() * (elemanlar.length)) + 1;

if (!siraliste.includes(sira)) {

siraliste.push(sira);

elemanlar[i].style.order = sira;

} else {

i--;

}

</script>

</div>

<div class="karistirButon" onclick="siraDegistir();">Sırayı Karıştır</div>

Bu kodların çalışır hali

Sırayı Karıştır

Saygılarımla...
Turgut ARSLAN