Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Zdanie od dużej litery!
Forum PHP.pl > Forum > Przedszkole
woxala123
19.03.2016, 13:10:31
Witam
Jak można zrobić w CSS by zdanie zaczynało się od dużej litery. Znam już te wszystkie triki typu text-transform: none|capitalize|uppercase|lowercase|initial|inherit;
Ale one nie zmieniaja pierwszej litery w zdaniu.
viking
19.03.2016, 13:14:48
http://www.hongkiat.com/blog/css-better-paragraph/
woxala123
19.03.2016, 14:00:37
Viking jaki selector zastosować?

to zrobiłem tak
p:first-letter {
text-transform:capitalize;
}

No tak ale jak zrobić by w polu gdy zaczynam pisac tekst zaczynał się od dużej litery.
com
19.03.2016, 14:01:16
Co masz na myśli mówiąc żeby zdanie? Masz tekst nie pisany poprawnie i chcesz w css to zmieniać?
woxala123
19.03.2016, 14:05:10
Masz formularz np: komentarza i chcesz by ktoś jak pisze zaczynał ten tekst automatycznie od dużej litery, mimi toze nie zaczynał tekstu od dużej litery.
com
19.03.2016, 14:17:50
No to zmiana w css nic Ci nie da bo to tylko wizualny efekt, a do bazy itak trafi jak napisał wink.gif
woxala123
19.03.2016, 14:23:38
Okey powiem tak jak dam takie coś text-transform:capitalize; to w polu owszem zaczyna się od dużej litery, tylko nie chcę by dalej pisał następny wyraz z duzej litery.
Star
19.03.2016, 15:14:12
To może tak komentarz przepuścić przez ucfirst? smile.gif
http://php.net/manual/en/function.ucfirst.php

No a po stronie klienta można to ogarnąć przez JS:
[HTML] pobierz, plaintext 
  1. var text = document.getElementById("id").value;
  2. text.charAt(0).toUpperCase();
[HTML] pobierz, plaintext
woxala123
19.03.2016, 15:31:20
No hfajnie a gdzie byś dopisał warunek w js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(document).on('submit', '#chatForm', function(){
var text = $.trim($("#text").val());
var username = $.trim($("#username").val());


if(text != "" && username != "") {
$.post('ChatPoster.php', {text: text, username: username}, function(data){
$(".chatMessages").append(data);

$(".chatMessages").scrollTop($(".chatMessages")[0].scrollHeight);
$("#text").val('');
});
} else {
alert("Musisz wpisac wiadomość!");
}
});



function getMessages() {
$.get('GetMessages.php', function(data){
var amount = $(".chatMessages li:last-child").attr('id');
$(".chatMessages").html(data);
var countMsg = data.split('<li').length - 1;
array = [countMsg, amount];
});
return array;
}


setInterval(function(){
var num = getMessages();
if(num[0] > num[1]) {
$(".chatMessages").scrollTop($(".chatMessages")[0].scrollHeight);
}
},1000);


});
</script>
Star
19.03.2016, 15:36:14
Wkleiles kod js, ja bym dodał zdarzenie onchange to INPUTa bądź TEXTAREA :

[PHP] pobierz, plaintext 
  1. <input type="text" name="komentarz" value="" onkeyup="this.value.charAt(0).toUpperCase();">
[PHP] pobierz, plaintext
woxala123
19.03.2016, 15:55:19
Cały kod wygląda tak
To gdzie byś to zdarzenie umieścił.

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


Usunalem kod PHP ,musisz dodac spowrotem

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