Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript][AJAX][PHP]Scroll na dole!
woxala123
post
Post #1





Grupa: Zarejestrowani
Postów: 361
Pomógł: 12
Dołączył: 9.01.2010

Ostrzeżenie: (10%)
X----

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ć?

Ten post edytował woxala123 10.04.2016, 12:31:55
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
woxala123
post
Post #2





Grupa: Zarejestrowani
Postów: 361
Pomógł: 12
Dołączył: 9.01.2010

Ostrzeżenie: (10%)
X----

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.

Ten post edytował woxala123 10.04.2016, 19:27:23
Go to the top of the page
+Quote Post

Posty w temacie
- woxala123   [JavaScript][AJAX][PHP]Scroll na dole!   10.04.2016, 18:36:13
- - rad11   $(window) i scrollTop   10.04.2016, 18:45:02
- - woxala123   to scrollTop i window zastosować ?   10.04.2016, 18:49:02
- - rad11   No skoro chcesz zescrollowac do jakiegoś elementu ...   10.04.2016, 18:50:59
- - woxala123   to jak to zastosować w tym kodzie czyli element ro...   10.04.2016, 18:56:39
- - rad11   http://stackoverflow.com/questions/5846595...-div-...   10.04.2016, 19:07:58
- - woxala123   RAd tskich przykłądów jest dużo w internecie i sto...   10.04.2016, 19:13:28
- - rad11   Podpowiedź już dostałeś teraz czas na analizę, wdr...   10.04.2016, 19:18:14
- - woxala123   OKEY ROZUMIEM ŻE NIE UMIESZ TEGO ZROBISZ. choć jed...   10.04.2016, 19:24:19
- - rad11   Jak na razie to Ty masz problem nie Ja. Kończę ta ...   10.04.2016, 19:28:07
- - woxala123   Ja Ciebie też pozdrawiam. Dyskusja z Tobą była prz...   10.04.2016, 19:38:47

« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 30.12.2025 - 04:13
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn