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

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: 18.12.2025 - 23:08
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn