Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][AJAX][PHP]Scroll na dole!
Forum PHP.pl > Forum > Przedszkole
woxala123
10.04.2016, 18:36:13
Witam!
Mam zrobiony czat i chciałbym jak ktoś wejdzie na chat to od razu pokazywała się ostatnia wiadomość na dole tzn by scroll znajdował się na dole a nie na górze. po wpisaniu tekstu owszem scroll przeskakuje w dół. Próbowałem już w wartościach w style ale coś nie wychodzi.

[PHP] pobierz, plaintext 
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <style> 
  6. p:first-letter {
  7.    text-transform:capitalize;
  8. }
  9. </style>
  10. <title>Chat</title>
  11. <link rel="stylesheet" type="text/css" href="reset.css" media="screen">
  12. <style type="text/css">
  13. 	body {
  14.     font-family: 'Open Sans';
  15.  }
  16.  
  17.  * {
  18.     box-sizing: border-box;
  19.  }
  20.  
  21.  .chatContainer {
  22.     width: 100%;
  23.     height: 550px;
  24.     border: 3px solid #eee;
  25.  }
  26.  
  27.  .chatContainer > .chatHeader {
  28.     width: 100%;
  29.     background: #fff;
  30.     padding: 5px;
  31.     border-bottom: 1px solid #ddd;
  32.  }
  33.  
  34.  .chatContainer > .chatHeader h3 {
  35.     font-weight: 400;
  36.     color: #666;
  37.  }
  38.  
  39.  .chatContainer > .chatMessages {
  40.     height: 470px;
  41.     border-bottom: 1px solid #ddd;
  42.     overflow-y: scroll;
  43.  }
  44.  
  45.  .chatContainer > .chatBottom form input[type="submit"] {
  46.     padding: 6px;
  47.     background: #fff;
  48.     border: 1px solid #ddd;
  49.     cursor: pointer;
  50.  }
  51.  
  52.  .chatContainer > .chatBottom form input[type="text"] {
  53.     width: 85%;
  54.     padding: 8px;
  55.     padding-left: 12px;
  56.     border: 1px solid #ddd;
  57.     border-radius: 5px;
  58.     margin: 5px;
  59.     height: 30px;
  60.  }
  61.  
  62.  .chatMessages li:nth-child(2n) {
  63.     background: #eeeeee;
  64.  }
  65.  
  66.  .msg {
  67.     list-style: none;
  68.     border-bottom: 1px solid #ddd;
  69.     padding: 5px;
  70.     color: #222222;
  71.  }
  72. </style>
  73. <body>
  74.  
  75. <div class="chatContainer">
  76. 	<div class="chatHeader">
  77. 			<h3>Witaj  <?php echo ucwords($username); ?></h3>
  78. 	</div>
  79. 	<div class="chatMessages"></div>
  80. 	<div class="chatBottom">
  81. 			<form action="#" onSubmit='return false;' id="chatForm">
  82. 					<p class="chatBottom p">
  83. 					  <input type="hidden" id="username" value="<?php echo $username; ?>"/>
  84. 					  <input type="text" username="text" id="text" value="" placeholder="Wpisz wiadomość" />
  85. 					  <input type="submit" username="submit" value="Wyślij" />
  86. 			  </p>
  87. 			</form>
  88. 	</div>
  89. </div>
  90.  
  91.  
  92.  
  93. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  94. <script>
  95. 	$(document).ready(function(){
  96. 		$(document).on('submit', '#chatForm', function(){
  97. 			var text = $.trim($("#text").val());
  98. 			var username = $.trim($("#username").val());
  99.  
  100.  
  101. 			if(text != "" && username != "") {
  102. 				$.post('ChatPoster.php', {text: text, username: username}, function(data){
  103. 					$(".chatMessages").append(data);
  104.  
  105. 					$(".chatMessages").scrollTop($(".chatMessages")[0].scrollHeight);
  106. 					$("#text").val('');
  107. 				});
  108. 			} else {
  109. 				alert("Musisz wpisac wiadomość!");
  110. 			}
  111. 		});
  112.  
  113. 		$(document).on('keyup', '#text', function(){
  114. 			var text = $("#text").val();
  115. 			String.prototype.ucfirst = function()
  116. 			{
  117. 				return this.charAt(0).toUpperCase() + this.substr(1);
  118. 			}
  119. 			$("#text").val(text.ucfirst());
  120.  
  121. 		});
  122.  
  123. 		function getMessages() {
  124. 			$.get('GetMessages.php', function(data){
  125. 				var amount = $(".chatMessages li:last-child").attr('id');
  126. 				$(".chatMessages").html(data);
  127. 				var countMsg = data.split('<li').length - 1;
  128. 				array = [countMsg, amount];
  129. 			});
  130. 			return array;
  131. 		}
  132.  
  133.  
  134. 		setInterval(function(){
  135. 		var num =	getMessages();
  136. 		if(num[0] < num[1]) {
  137. 				$(".chatMessages").scrollTop($(".chatMessages")[-1].scrollHeight);
  138. 		}
  139. 	},1000);
  140.  
  141.  
  142. 	});
  143. </script>
  144. </body>
  145. </html>
  146.  
[PHP] pobierz, plaintext


Widzę że ciężki temat!

Czyli musiał by gdzieś dopisać w skrypcie wartości na wysokość położenia scrolla przy otwieraniu strony z chatem. Tylko gdzie?

Czy jest ktoś w stanie się tym zainteresować. Bo męcze się z tym już drugi dzień.

I jak to zrobić?
rad11
10.04.2016, 18:45:02
$(window) i scrollTop
woxala123
10.04.2016, 18:49:02
to scrollTop i window zastosować ?
rad11
10.04.2016, 18:50:59
No skoro chcesz zescrollowac do jakiegoś elementu lub do jakiejś pozycji to tak.
woxala123
10.04.2016, 18:56:39
to jak to zastosować w tym kodzie czyli element rozumiem chatMessages .
rad11
10.04.2016, 19:07:58
http://stackoverflow.com/questions/5846595...-div-to-the-top
woxala123
10.04.2016, 19:13:28
RAd tskich przykłądów jest dużo w internecie i stosowałem różne już elementy tej ukłądanki ale proszę o podpowiedź do tego kodu.
rad11
10.04.2016, 19:18:14
Podpowiedź już dostałeś teraz czas na analizę, wdrożenie i testy niestety Ja i nikt inny tego za Ciebie nie zrobi. Jak używałes np tej podpowiedzi to chociaż wysilil byś się go wprowadzić do swojego kodu i to podał wraz z tym co Ci nie działa
woxala123
10.04.2016, 19:24:19
OKEY ROZUMIEM ŻE NIE UMIESZ TEGO ZROBISZ. choć jeden przykłąd tu napisany by móc to sobie przeanalizować.
Jesteśmy na tym etapie że jak wpiszę tekst w polu to scroll przeskakuje w dół ale nie wiem dokłądnie która cześc funkcji odpowiada za to. JAk zrobić by anjpierw jak otwieram chat od razu pokazywałą się ostatnia wiadomość na dole.
rad11
10.04.2016, 19:28:07
Jak na razie to Ty masz problem nie Ja. Kończę ta dyskusję i chyba rozumiem dlaczego nikt nie chciał Ci pomóc. Pzdr i życzę powodzenia
woxala123
10.04.2016, 19:38:47
Ja Ciebie też pozdrawiam. Dyskusja z Tobą była przyjemnością dla mnie. Ale nie feruj wyroków za wczasów że nikt nie chce pomóc. po pierwsze nie użyłem tutaj słowa pomoc. BAy Bay
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.