Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [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
rad11
post
Post #2





Grupa: Zarejestrowani
Postów: 1 270
Pomógł: 184
Dołączył: 7.10.2012
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

$(window) i scrollTop
Go to the top of the page
+Quote Post
woxala123
post
Post #3





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

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

to scrollTop i window zastosować ?
Go to the top of the page
+Quote Post
rad11
post
Post #4





Grupa: Zarejestrowani
Postów: 1 270
Pomógł: 184
Dołączył: 7.10.2012
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

No skoro chcesz zescrollowac do jakiegoś elementu lub do jakiejś pozycji to tak.
Go to the top of the page
+Quote Post
woxala123
post
Post #5





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

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

to jak to zastosować w tym kodzie czyli element rozumiem chatMessages .
Go to the top of the page
+Quote Post
rad11
post
Post #6





Grupa: Zarejestrowani
Postów: 1 270
Pomógł: 184
Dołączył: 7.10.2012
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

http://stackoverflow.com/questions/5846595...-div-to-the-top
Go to the top of the page
+Quote Post
woxala123
post
Post #7





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

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

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.
Go to the top of the page
+Quote Post
rad11
post
Post #8





Grupa: Zarejestrowani
Postów: 1 270
Pomógł: 184
Dołączył: 7.10.2012
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

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

Ten post edytował rad11 10.04.2016, 19:19:18
Go to the top of the page
+Quote Post
woxala123
post
Post #9





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
rad11
post
Post #10





Grupa: Zarejestrowani
Postów: 1 270
Pomógł: 184
Dołączył: 7.10.2012
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
woxala123
post
Post #11





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

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

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
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

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