Sohbet baloncuğu

swatalk 1404 gün önce

575 defa görüntülendi ve 2 kişi tarafından değerlendirildi

Herkese merhaba resimdeki gibi sadece son mesajlar da profil foroğrafı göstermek istiyorum bunu php de foreach için de kullanacağım yada jquery $.each() fonksiyonu içinde de olabilir, sohbette sadece 2 kullanıcı var gonderen ve alan. css selectors ve jquery last selector ile denedim ama bütün konuşma içinde son mesajı seçiyor

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevap yaz

הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Cevaplar (4)

tayfunerbilen

1404 gün önce

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

#005435

swatalk

1403 gün önce

Çok teşekkür ederim aradığım tam da buydu sayenizde sonuca ulaştım. işinizin olmadığı bir gün gruplama örneği ile yapar mısınız acaba

<ul>

 <li class="him start">By Other User</li>
 <li class="him">By Other User</li>
 <li class="him end">By Other User</li>

 <li class="me start">By this User, first message</li>
 <li class="me">By this User, secondmessage</li>
 <li class="me">By this User, third message</li>
 <li class="me end">By this User, fourth message</li>

 <li class="him start">By Other User</li>
 <li class="him">By Other User</li>
 <li class="him end">By Other User</li>

 <li class="me start">By this User, first message</li>
 <li class="me">By this User, secondmessage</li>
 <li class="me">By this User, third message</li>
 <li class="me end">By this User, fourth message</li>

</ul>

#005436

rephp7

1404 gün önce

Rica etsem, istediğini başardığında kodları paylaşır mısın?

#005434

themonster

1404 gün önce

html cıktısını ve js cıktısını atarsanız daha rahat yardım edebiliriz fakat mantık gereği her mesaj attıktan sonra üst mesajlardaki resimleri kaldırıp son resimlere ekletmek gerekiyor

$(".user_img").remove();
$(".user_info:last").html('<img class="user_img"> ...');

#005432