Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Помощь HTML

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

Открыть новую тему     Написать ответ в эту тему

IIOPTAJI

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ребят, я новичок в хтмл, и на этом форуме тоже, песочницу найти не мог.
Я создаю простой блокнот, пишу там всякие коды, которые нашел в интернете, и возник вопрос, как сделать фон чтобы не белый фон был, а какая нибудь картинка. Если что-то не то задал из вопросов, прошу прощения

Всего записей: 4 | Зарегистр. 05-07-2011 | Отправлено: 21:09 09-08-2013
D1D1D1D

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
для простого примера есть такой вариант: https://jsfiddle.net/xW7d8/
 
Добавлено:
Тот же пример проще: https://jsfiddle.net/scepn043/
 
Добавлено:

 
Левая часть получилась: https://jsfiddle.net/m9fvg74h/

Всего записей: 1473 | Зарегистр. 05-04-2010 | Отправлено: 21:30 25-02-2022
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
D1D1D1D
https://jsfiddle.net/45n3prds/

Всего записей: 15700 | Зарегистр. 20-09-2014 | Отправлено: 23:13 25-02-2022
D1D1D1D

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо! У меня недавно слишком громоздко получилось https://jsfiddle.net/v6gmsq5h/

Всего записей: 1473 | Зарегистр. 05-04-2010 | Отправлено: 23:44 25-02-2022
Vladsvn

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Добрый день!
 
Хочется сделать сервис комментариев под статьями, но никак не могу придумать, как сделать цитирование того поста, на который пишется отзыв. Хочется сделать вот так:
http://images.vfl.ru/ii/1646123426/e1ff5be2/38265608.jpg
 
Чтобы в цитате был ник цитируемого с имеющейся на нем ссылкой на его профайл. И сама ссылка в BLOCKQUOTE.  
 
Скриншот взят вот с этого сайта https://win10tweaker.ru/forum/topic/%d0%b3%d0%b4%d0%b5-%d0%b7%d0%b0%d0%b4%d0%b0%d1%82%d1%8c-%d0%b2%d0%be%d0%bf%d1%80%d0%be%d1%81-%d0%bf%d0%be-%d0%bf%d1%80%d0%be%d0%b3%d1%80%d0%b0%d0%bc%d0%bc%d0%b0%d0%bc?part=89
 
Хотел позаимствовать их код, но ничего в нем не понял.
 
Как сделать цитирование в WYSIWYG-редакторе?
 
(Редактор еще не выбран, хочется какой по проще)  
 
 

Всего записей: 351 | Зарегистр. 07-09-2016 | Отправлено: 11:40 01-03-2022
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Vladsvn

Цитата:
Как сделать цитирование в WYSIWYG-редакторе?

для начала - определеиться с редактором. и что то может быть в его API, но, в принципе, с помощью js определяется что выделено, в каком сообщении, на основе этого и создается код для цитирования.
опять же, общим будет только код именно определения места выделения и копирования содержимого по какому то событию (клик на кнопку), но это подстраивается под конкретный вариант, конкретный редактор.

Всего записей: 15700 | Зарегистр. 20-09-2014 | Отправлено: 23:50 01-03-2022
D1D1D1D

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Как правильно разместить текст из трёх блоков на одной строке — слева, в середине, справа?

Код:
<div width="100%" style="display:inline-block;">
<div style="float:left;">ТЕКСТ СЛЕВА&nbsp;</div>
<div style="float:center;">ТЕКСТ В СЕРЕДИНЕ&nbsp;</div>
<div style="float:right;">ТЕКСТ СПРАВА</div>
</div>

Всего записей: 1473 | Зарегистр. 05-04-2010 | Отправлено: 18:51 06-03-2022 | Исправлено: D1D1D1D, 18:52 06-03-2022
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
D1D1D1D
сделать дивам inline-block
https://jsfiddle.net/r62obut4/
 
либо через flex
https://css-tricks.com/equal-columns-with-flexbox-its-more-complicated-than-you-might-think/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 

Цитата:
float:center;

нет такого.

Всего записей: 15700 | Зарегистр. 20-09-2014 | Отправлено: 20:11 06-03-2022 | Исправлено: Mavrikii, 20:29 06-03-2022
D1D1D1D

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо!

Всего записей: 1473 | Зарегистр. 05-04-2010 | Отправлено: 21:00 06-03-2022
D1D1D1D

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Как разделить col_5 вертикально на две ячейки?

Код:
<table>
<tr><td><b>col_1</b></td><td>col_2</td><td>col_3</td></tr>
<tr><td><b>col_4</b></td><td>col_5</td><td>col_6</td></tr>
</table>

Всего записей: 1473 | Зарегистр. 05-04-2010 | Отправлено: 09:24 08-03-2022
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
D1D1D1D

Цитата:
Как разделить col_5 вертикально на две ячейки?

создать таблицу с таким количеством ячеек, как в этой строке, и объединить две ячейки в col_2 в одну с помощью colspan
http://htmlbook.ru/html/td/colspan

Всего записей: 15700 | Зарегистр. 20-09-2014 | Отправлено: 09:34 08-03-2022 | Исправлено: Mavrikii, 09:45 08-03-2022
D1D1D1D

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
А как быть, если в первой и второй строке нужно по три ячейки, в третьей и четвертой — по четыре ячейки, а в последней — снова три ячейки? https://jsfiddle.net/e5tpr7ng/

Всего записей: 1473 | Зарегистр. 05-04-2010 | Отправлено: 20:11 08-03-2022
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
D1D1D1D

Цитата:
А как быть, если в первой и второй строке нужно по три ячейки, в третьей и четвертой — по четыре ячейки, а в последней — снова три ячейки?

нарисовать максимальное количество ячеек, а потом объединять где нужно и сколько нужно. главное не ошибиться в цифрах.
 
https://jsfiddle.net/6xt5yjou/

Всего записей: 15700 | Зарегистр. 20-09-2014 | Отправлено: 21:55 08-03-2022
D1D1D1D

Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
 
Спасибо! Не удаётся понять, как поступить в случае, когда надо разделить подряд две ячейки в одной строке. Тут выделил ячейку, которую хотелось бы разделить — https://jsfiddle.net/vc59xrsm/
 
Добавлено:
А-а, ясно - надо сверху так же colspan=2 прогнать

Всего записей: 1473 | Зарегистр. 05-04-2010 | Отправлено: 22:31 08-03-2022 | Исправлено: D1D1D1D, 22:31 08-03-2022
Vladsvn

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Добрый день!
 
Отыскал в сети готовый скрипт для создания комментариев на  сайте. Вот этот: https://age-dragon.com/scripts/36-komentaryi.html   И вот его демо: https://demo.age-dragon.com/komentary/  
В Демо видно, что если заносишь комментарий, то он тут же выводится на сайт, без перезагрузки страницы. Что мне и требуется.
 
Но у меня всё по другому: http://fh7929mi.bget.ru/1/1.php Использую браузер Хром, JS включены.
Почему так? Как добиться нормальной работы - непосредственного вывода комментария без перезагрузки как Демо?
 
Вот установленные файлы. Они такие же, как в статье по ссылке. Их три.
 
Файл 1.php
 
<?php include("connect.php"); ?>
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Мгновенная отправка сообщений при помощи Ajax</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
 
<style type="text/css">
.comment{
     border: 1px solid #666;
     margin: 10px;
     padding: 10px;
     font-family: Tahoma;
     font-size: 12px;
     border-radius: 4px;
     box-shadow: 2px 2px 2px #999;
}
</style>
 
 
<script type="text/javascript">
$(function() {
$("#send").click(function(){
  var author = $("#author").val();
  var message = $("#message").val();
  $.ajax({
  type: "POST",
  url: "sendMessage.php",
  data: {"author": author, "message": message},
  cache: false,
  success: function(response){
  var messageResp = new Array('Ваше сообщение отправлено','Сообщение не отправлено Ошибка базы данных','Нельзя отправлять пустые сообщения');
  var resultStat = messageResp[Number(response)];
  if(response == 0){
  $("#author").val("");
  $("#message").val("");
  $("#commentBlock").append("<div class='comment'>Автор: <strong>"+author+"</strong><br>"+message+"</div>");}
  $("#resp").text(resultStat).show().delay(1500).fadeOut(800);}});return false;});});
</script>
</head>
 
<body>
<h1>Пример вывода комментариев</h1>
<hr /><br><br><br><br>
<p>Комментарии к статье</p>
 
<div id="commentBlock">
<?php
$result = mysql_query("SELECT * FROM messages",$db);
$comment = mysql_fetch_array($result);
do{echo "<div class='comment'>Автор: <strong>".$comment['author']."</strong><br>".$comment['message']."</div>";
}while($comment = mysql_fetch_array($result));
?>
</div>
 
<form action="sendMessage.php" method="post" name="form">
<p>Автор:<br> <input name="author" type="text" id="author"></p>
<p>Текст сообщения:<br><textarea name="message" rows="5" cols="50" id="message"></textarea></p>
<input name="js7777" type="hidden" value="no" id="js">
<p><input name="button" type="submit" value="Отправить" id="send"> <span id="resp"></span></p>
</form>
 
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
 
</body>
</html>
 
Файл sendMessage.php
 
<?php include("connect.php");
header("Content-type: text/html; charset=UTF-8");
 
//**********************************************
if(empty($_POST['js'])){
    if($_POST['message'] != '' && $_POST['author'] != ''){
 
        // $author = iconv("UTF-8", "windows-1251", $_POST['author']);
        $author = $_POST['author'];
        $author = addslashes($author);
        $author = htmlspecialchars($author);
        $author = stripslashes($author);
        $author = mysql_real_escape_string($author);
 
        // $message = iconv("UTF-8", "windows-1251", $_POST['message']);
        $message = $_POST['message'];
        $message = addslashes($message);
        $message = htmlspecialchars($message);
        $message = stripslashes($message);
        $message = mysql_real_escape_string($message);
 
        $date = date("d-m-Y в H:i:s");
        $result = mysql_query("INSERT INTO messages (author, message, date) VALUES ('$author', '$message', '$date')");
        if($result == true){
            echo 0; //Ваше сообшение успешно отправлено
        }else{
            echo 1; //Сообщение не отправлено. Ошибка базы данных
        }
    }else{
        echo 2; //Нельзя отправлять пустые сообщения
    }
}
 
//**************************************** Если отключен JavaScript ************************************
 
if($_POST['js'] == 'no'){
    if($_POST['message'] != '' && $_POST['author'] != ''){
 
        $author = $_POST['author'];
        $author = addslashes($author);
        $author = htmlspecialchars($author);
        $author = stripslashes($author);
        $author = mysql_real_escape_string($author);
 
        $message = $_POST['message'];
        $message = addslashes($message);
        $message = htmlspecialchars($message);
        $message = stripslashes($message);
        $message = mysql_real_escape_string($message);
 
        $date = date("d-m-Y в H:i:s");
        $result = mysql_query("INSERT INTO messages (author, message, date) VALUES ('$author', '$message', '$date')");
        if($result == true){
            echo "Ваше сообшение успешно отправлено"; //Ваше сообшение успешно отправлено
        }else{
            echo "Сообщение не отправлено. Ошибка базы данных"; //Сообщение не отправлено. Ошибка базы данных
        }
    }else{
        echo "Нельзя отправлять пустые сообщения"; //Нельзя отправлять пустые сообщения
    }
}
?>
 
 
Файл connect.php
 
<?php
 
$db = mysql_connect("localhost","VladNikS","ххххххх");
mysql_select_db("age-dragon",$db);
mysql_query("SET NAMES utf8");
 
?>
 
 
 

Всего записей: 351 | Зарегистр. 07-09-2016 | Отправлено: 14:52 10-03-2022
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Vladsvn

Цитата:
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
 

Должен быть загружен ДО его использования.
 
Цитата:
$(function()

 
Атрибут type в html5 не нужен.

Всего записей: 15700 | Зарегистр. 20-09-2014 | Отправлено: 17:57 10-03-2022
Vladsvn

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Спасибо, теперь заработало!
 

Цитата:
Атрибут type в html5 не нужен.
Вы имели в виду во это?  
<style>
.comment{
     border: 1px solid #666;
     margin: 10px;
     padding: 10px;
     font-family: Tahoma;
     font-size: 12px;
     border-radius: 4px;
     box-shadow: 2px 2px 2px #999;
}
</style>
 
<script src="jquery-3.6.0.min.js"></script>
 
<script>
Так правильно?
 
Скрипт составлен автором в 2012 году. По тем временам, script в браузерах у многих не работал, но сейчас его редко отключают.
 
Может быть, есть смысл убрать часть скрипта, предназначенную для браузеров с неработающими JS ?
Вы в своих работах как делаете?
 

Всего записей: 351 | Зарегистр. 07-09-2016 | Отправлено: 19:26 10-03-2022
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Vladsvn
просто проверяйте валидность кода тут  
https://validator.w3.org/
 

Цитата:
Так правильно?

да
 

Цитата:
Может быть, есть смысл убрать часть скрипта, предназначенную для браузеров с неработающими JS  

https://developer.mozilla.org/ru/docs/Web/HTML/Element/noscript
в современном мире это не так важно.

Всего записей: 15700 | Зарегистр. 20-09-2014 | Отправлено: 23:50 10-03-2022 | Исправлено: Mavrikii, 23:51 10-03-2022
Vladsvn

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Если я верно понял, то здесь переменные author и message из формы перехватывает скрипт
 
<script>
$(function() {
$("#send").click(function(){
  var author = $("#author").val();
  var message = $("#message").val();
  $.ajax({
  type: "POST",
  url: "sendMessage.php",
  data: {"author": author, "message": message},
  cache: false,
  success: function(response){
  var messageResp = new Array('Ваше сообщение отправлено','Сообщение не отправлено Ошибка базы данных','Нельзя отправлять пустые сообщения');
  var resultStat = messageResp[Number(response)];
  if(response == 0){
  $("#author").val("");
  $("#message").val("");
  $("#commentBlock").append("<div class='comment'>Автор: <strong>"+author+"</strong><br>"+message+"</div>");}
  $("#resp").text(resultStat).show().delay(1500).fadeOut(800);}});return false;});});
</script>
 
А этот скрипт напрямую выводит введенное сообщение в браузер.  
 
И тут возникает один нюанс: в переменной message желательно прежде вставить перевод строк nl2br для того, чтобы введенные посетителем абзацы не сливались.
 
А в идеале, обе переменные (author и message) желательно прежде обработать соответствующими РНР функциями для исключения всяких инъекций. То есть, их надо из формы превратить в РНР переменные, потом обработать и уже потом занести в этот скрипт.  
 
Как это можно сделать?
 
 

Всего записей: 351 | Зарегистр. 07-09-2016 | Отправлено: 23:15 11-03-2022
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Vladsvn

Цитата:
прежде вставить перевод строк nl2br для того, чтобы введенные посетителем абзацы не сливались

ну и сделайте замену \n на <br>
message = message.replace(/\n/g,"<br>");
и аналогичное на серверной стороне, если нужно.
 

Цитата:
обе переменные (author и message) желательно прежде обработать соответствующими РНР функциями для исключения всяких инъекций

зачем? обрабатывайте их отдельно в php для использования там.
тут же, если у вас форма не заполняется автоматически, без разницы. ведь вставка идет у того же клиента, у которого и открыта страница, а остальные получат данные из php.
 
можете вырезать теги, если есть такое желание, а можно использовать .text() для вставки именно как текст, а не html код.

Всего записей: 15700 | Зарегистр. 20-09-2014 | Отправлено: 23:22 11-03-2022
Vladsvn

Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
К сожалению, получается так, что скрипт по этому алгоритму мало пригоден для того, что хотелось бы сделать. Я предполагал оснастить его дополнительными функциями, что бы он был таким, как формы комментариев на vc.ru:  http://fh7929mi.bget.ru/1-komm.jpg
 
Чтобы посетитель мог ответить на комментарий и его ответ был бы смещен в сторону от основного, что бы мог вставить в ответ картинку, чтобы был рейтинг комментариев и что бы он мог редактировать или удалить свой ответ. На эти функции есть отработанные типовые решения либо их нетрудно создать, но в  моей форме http://fh7929mi.bget.ru/1/1.php все это пришлось бы делать с помощью скрипта. А было бы гораздо проще, если бы алгоритм работы был другим: сначала вся введенная их формы информация отправляется на сервер, где обрабатывается и заносится в базу, а потом возвращается на страницу (без перезагрузки страницы).
 
Можно ли реализовать такой алгоритм?

Всего записей: 351 | Зарегистр. 07-09-2016 | Отправлено: 11:39 12-03-2022
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

Компьютерный форум Ru.Board » Интернет » Web-программирование » Помощь HTML


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru