v2.5.2
Giriş yap

Javascript ile div'lerin sıralamasını değiştirme

r00t
356 defa görüntülendi

Selamlar,
Sitemin anasayfasında aşağıya doğru sıralanan divler mevcut.
Örnek vermek gerekirse;

<div id="tr">
  // Türkiye ile ilgili div kutusu ve içerikleri  
</div>

<div id="fr">
  // Fransa ile ilgili div kutusu ve içerikleri  
</div>

<div id="br">
  // Brezilya ile ilgili div kutusu ve içerikleri  
</div>

<div id="ca">
  // Kanada ile ilgili div kutusu ve içerikleri  
</div>

Site açıldığında, PHP ile kullanıcının IP adresini API ile sorgulatıp, ülke kodunu cookie'ye ekliyorum.
*** Yapmak istediğim şey aslında şu; siteye giren ziyaretçinin ülke kodu her ne ise, onun ülkesiyle eşleşen div en başta olsun. Örneğin, Fransa'dan giren bir kullanıcı, ilk başta Türkiye div'ini görmek yerine, Fransa Div'ini en üste taşıyayayım, sıralama buna göre şekillensin istiyorum.

Bunu çeşitli cachelerden dolayı backend'te yapamam sanırım. Dolayısı ile her bir ziyaretçi için frontend tarafında bu ayrımı cookie kontrolüyle yapmalıyım galiba.
Aklıma farklı bir yöntem gelmedi. Varsa öneriniz, dinlerim.
Ama mevcut aklıma gelen yöntemde dedğim gibi, benim belirttiğim div id'si ile cookie ile eşleşen div'i, en üste taşıyayım. Nasıl yapabilirim?

Cevap yaz
Cevaplar (5)
r00t
337 gün önce

@erkanagri tekrar selam; bu kodu şu şekilde revize etmek istiyorum;
bir js arrayde ["tr", "fr", "de"] gibi sıralama yapmak istiyorum; belirliten sıralamaya uygun olacak şekilde hangileri mevcut ise (mesela tr ve de ile ilgili divler var sadece; o zaman başta tr, sonra de olan div gelsin; gerisi normal sırasında olsun) gibi bir şey yapabilir miyiz?
senin örnekte, sadece belirtilen div 1. sıraya geliyordu.
benim istediğim, 1-2-3-4-5 ... gibi belirttiğim ülkelerle eşleşenleri sıraya soksun çoklu olarak. nasıl yaparız?

erkanagri
371 gün önce

@aspava Sayfayı görüntüleyen cihazın mobil veya desktop olduğunu useragent içeriğinden saptanabiliyor. Buna göre çalışan javascript kodları mevcut.
https://codepen.io/erkanagri/pen/zYepOQy

İlk sayfa görüntüleme / yenileme sırasında yukarıdaki kodlar sana bilgi verecektir. Koşul bloğunu kendine göre uyarlayabilirsin.

aspava
371 gün önce

@erkanagri eline sağlık bunu mobil görünüme geçince uygulatmak istersek ne yapabiliriz mobile geçince istediğimiz divlerin yerini değiştirmek mesela

r00t
372 gün önce

@erkanagri eline sağlık teşekkür ederim

erkanagri
372 gün önce

Aşağıdaki örneği yaptım, kendi sitene uyarlayabilirsin:
https://codepen.io/erkanagri/pen/bGzoJvN