eğer mesajları gruplamadan böyle bir şey yapmak istersen html yapını şöyle düşünelim;
<div class="chat">
<div class="message me">
test message
<img src="https://gravatar.com/avatar/be2da7976e64ff4211a4ff7b22b10b58?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=80&version=0&width=80" alt="">
</div>
<div class="message me">
test message
<img src="https://gravatar.com/avatar/be2da7976e64ff4211a4ff7b22b10b58?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=80&version=0&width=80" alt="">
</div>
<div class="message me">
test message
<img src="https://gravatar.com/avatar/be2da7976e64ff4211a4ff7b22b10b58?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=80&version=0&width=80" alt="">
</div>
<div class="message">
test message
<img src="https://gravatar.com/avatar/be2da7976e64ff4211a4ff7b22b10b58?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=80&version=0&width=80" alt="">
</div>
<div class="message">
test message
<img src="https://gravatar.com/avatar/be2da7976e64ff4211a4ff7b22b10b58?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=80&version=0&width=80" alt="">
</div>
<div class="message me">
test message
<img src="https://gravatar.com/avatar/be2da7976e64ff4211a4ff7b22b10b58?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=80&version=0&width=80" alt="">
</div>
<div class="message">
test message
<img src="https://gravatar.com/avatar/be2da7976e64ff4211a4ff7b22b10b58?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=80&version=0&width=80" alt="">
</div>
<div class="message">
test message
<img src="https://gravatar.com/avatar/be2da7976e64ff4211a4ff7b22b10b58?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=80&version=0&width=80" alt="">
</div>
</div>
<div class="add-chat">
<input type="text" placeholder="Yeni mesaj ekle">
<label>
<input type="checkbox" value="1" name="me">
kendin olarak gönder
</label>
</div>
ufak bir css
.chat {
border: 1px solid #ddd;
padding: 15px;
}
.message {
padding: 10px;
background: #eee;
border-radius: 10px;
margin-bottom: 5px;
}
.message img {
display: none;
}
.message.me {
background: lime;
}
ve jquery tarafın şöyle olabilir
function setImages() {
$('.message img').hide();
$('.message.me + .message:not(.me)').prev('.message.me').find('img').show();
$('.message:not(.me) + .message.me').prev('.message:not(.me)').find('img').show();
$('.message:last').find('img').show();
}
setImages();
$('.add-chat input').on('keyup', function(e) {
if (e.key === 'Enter') {
$('.chat').append(`<div class="message${$(this).closest('.add-chat').find('input[type="checkbox"]').is(':checked') ? ' me' : ''}">
${$(this).val()}
<img src="https://gravatar.com/avatar/be2da7976e64ff4211a4ff7b22b10b58?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=80&version=0&width=80" alt="">
</div>`);
$(this).val('');
setImages();
}
});
demoyu görmek istersen: https://codepen.io/tayfunerbilen/pen/BaWGodP
sadece css ile yapmak istersen;
<ul>
<li tabindex="0">
Ders 1
<ul>
<li tabindex="0">
Ünite 1
<ul>
<li tabindex="0">
Konu 1
<ul>
<li tabindex="0">Kazanım 1</li>
<li tabindex="0">Kazanım 2</li>
<li tabindex="0">Kazanım 3</li>
<li tabindex="0">Kazanım 4</li>
</ul>
</li>
<li tabindex="0">Konu 2</li>
<li tabindex="0">Konu 3</li>
</ul>
</li>
<li tabindex="0">Ünite 2</li>
<li tabindex="0">Ünite 3</li>
</ul>
</li>
<li tabindex="0">Ders 2</li>
<li tabindex="0">Ders 3</li>
</ul>
<style>
li ul {
display: none;
}
li:focus-within > ul {
display: block;
}
</style>
bu yaklaşım bana çok doğru gelmiyor. her işlem için ajax çalıştırmak yerine bu kontrolleri client-side kontrol etmek çok daha mantıklı.
nasıl yapabilirim dersen zamanında çektiğim 2 video var, bunlardan birisi mutlaka bu işini çözecektir, incelemeni öneririm:
https://www.youtube.com/watch?v=Q4BS0vzU13g
https://www.youtube.com/watch?v=q9cV7Rfrlqc
bana pek mantıklı gelmedi bu şekilde değişkende tutmak yerine bir array ile basitçe dönülebilirdi. Ama bu yapıda şöyle bir şey kullanılabilir;
<?php
function getUsers($project) {
$users = [];
for ( $i = 1; $i <= 4; $i++ ){
if (isset($project['kisi' . $i]) && !empty($project['kisi' . $i])) {
$users[] = $project['kisi' . $i];
}
}
return implode(', ', $users);
}
?>
<div>
<?= $proje[$i]["p_adi"]; ?>
<?=getUsers($proje[$i])?>
</div>
basit bir tarih kontrolü aslında, örneğin;
function logo () {
$date = date('m-d');
switch( $date ) {
case '04-23':
return '23nisanlogo.png';
break;
case '05-19':
return '19mayislogo.png';
break;
default:
return 'logo.png';
break;
}
}
echo '<img src="' . logo() . '" />'
users[say] = row.id + " numaralı " + row.kadi + " adlı kullanıcı veritanında var"; yerine şöyle bir şey yapabilirsin
const sqlite3 = require("sqlite3").verbose();
var uyeler = new sqlite3.Database("db/uyeler.sqlite");
const users = [];
uyeler.each("SELECT * FROM user",function (err,row) {
users.push(row);
});
console.log(users);
teşekkürler berkay, gerekli düzenlemeleri yapıyorum yakında bir moderatör sistemi getireceğim ve güvenilir prototürk üyelerinin bazılarına moderatör yetkisi vereceğim en azından ben yokken bu gibi sorulara müdehale edebiliriz birlikte hızlıca.
arkadaşlar ne yazık ki böyle insanlar hep olacak, bir moderasyon sistemi hazırlıyorum güvenilir prototürk üyelerinin bazılarını moderatör yaparak bu gibi konulara daha hızlı müdehale etmeye çalışacağız, ben her zaman online olamıyorum en azından içimizden birileri hızlıca görüp bir çözüm üretebilir, kusura bakmayın bu eşek herifler adına ben özür diliyorum :)
eğer development ortamın devam ediyorsa ve ortaya bir ürün çıktıysa yani proje yayındaysa geliştirmeye devam etmek için webpack grunt ya da gulp gibi araçları kullanarak bu tarz işlemleri otomatize edebilirsin. Böylece bunları düşünmene gerek kalmaz, sıkıştırmak önemli ancak bütün kodları tek bir dosyaya sıkıştırmak değil muhabbet. Bazı işlemlerin sadece birkaç sayfaya özelse bunu genele koymanın hiçbir anlamı yok, sadece ilgili sayfada ayrı dosya olarak çağırmak çok daha mantıklı olacaktır.
bence en basit yol arkaplan rengini border'a vermek böylece görsel ile arasında bir çizgi çekilmiş gibi görünür. İlla iç tarafa farklı bir renk istersende o zaman box-shadow özelliğini ya da drop-shadow değerini kullanabilirsin.