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

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

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

 Версия для печати • ПодписатьсяДобавить в закладки

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

lynceus

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
В моей теме о комментарии к каждому абзацу (http://www.forum.ru-board.com:9000/topic.cgi?forum=24&topic=11030#1) речь шла о сайте с текстом в три колонки.  
Задача такова, чтобы человек мог копировать текст одной колонки. Любой(то есть не нужно дисейблить).
 
Описание задачи. Допустим есть сайт со стихами Пушкина. Страница стиха имеет три столбца - в первом оригинал, во втором перевод на английский, и в третьем - комментарии к каждой строке(там, где что-то надо уточнить, допустим это академический проект).
Надо сделать так, чтобы человек мог выделить столько строк оригинала(или наоборот - перевода), сколько ему надо. Но при этом чтобы не выделялся текст перевода. То есть выделение шло только по вертикали.  
 
Прошу заметить что при использовании дивок сложно добиться чтобы строки не поехали, если например перевод будет избыточней оригинала. И уж тем более при использовании табличной верстки выделение происходит строками, а не столбцами.
 
Если трудно представить что надо, представьте себе таблицу Эксель. Мышью выделяем ячейки по вертикали, и копируем в буфер. Надо то же самое от сайта. Можете поглядеть сайт Нотабеноида - там примерно нужный функционал. Но выделить мышью только столбец перевода не получится.

Всего записей: 179 | Зарегистр. 27-12-2009 | Отправлено: 06:04 11-01-2014
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
lynceus
а давайте вы не будете дублировать вопросы в разных темах??
"как сделать" обсуждается в соседнем разделе, здесь ищутся только готовые реализации.
более того, где то я все это слышал и мне кажется, что вы уже задавали подобные вопросы на форуме
 

Цитата:
Надо сделать так, чтобы человек мог выделить столько строк оригинала(или наоборот - перевода), сколько ему надо. Но при этом чтобы не выделялся текст перевода. То есть выделение шло только по вертикали.  

что сложного то??
http://jsfiddle.net/65MCb/

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 06:44 11-01-2014 | Исправлено: Cheery, 06:54 11-01-2014
lynceus

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Это не дубль вопроса, а совсем другой вопрос. В первом вопросе речь шла о комментарии. Тут о выделении по вертикали.
Смотрите(а ведь я об этом писал): http://jsfiddle.net/65MCb/2/

Всего записей: 179 | Зарегистр. 27-12-2009 | Отправлено: 07:00 11-01-2014
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
lynceus

Цитата:
В первом вопросе речь шла о комментарии. Тут о выделении по вертикали

но все же относится к одному и тому же?

Цитата:
Смотрите(а ведь я об этом писал)

на что смотреть и что писали?
это?  

Цитата:
Прошу заметить что при использовании дивок сложно добиться чтобы строки не поехали,

ну так формулируйте внятно.. для начала - предложите как оно должно вообще выглядеть, когда разное количество строк.. появятся вертикальные пробелы? иначе я не представляю.
а с ними вам придется использовать javascript для "подгонки".

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 07:06 11-01-2014
lynceus

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Вот почему Вам кажется вопрос знакомым: http://www.forum.ru-board.com:9000/topic.cgi?forum=31&bm=1&topic=19166#1
Там Вы же ответили о Вордпрессе.
Тут мало того что не о том вопрос(хотя речь о такой же задаче, только уже другой стайт), но и четко уже говорю что речь о сайте без БД. Чтобы снова не получить что-то вроде "ставь Джумлу и не парься".
 
Добавлено:

Цитата:
но все же относится к одному и тому же?  

Две разные задачи!

Цитата:
на что смотреть и что писали?  
это?  

Да.

Цитата:
ну так формулируйте внятно.. для начала - предложите как оно должно вообще выглядеть, когда разное количество строк.. появятся вертикальные пробелы? иначе я не представляю.

И об этом уже писал - предпоследнее предложение первого поста.

Цитата:
а с ними вам придется использовать javascript для "подгонки".

Можете подсказать в какую сторону копать?

Всего записей: 179 | Зарегистр. 27-12-2009 | Отправлено: 07:06 11-01-2014
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
lynceus

Цитата:
Можете подсказать в какую сторону копать?

так все - как должно выглядеть, если перевод длиннее? пример покажите.
если речь о сайте - давайте ссылку
 
ps: http://jsfiddle.net/65MCb/3/
 

Код:
<div id='original' style='width: 32%; float: left; border: 1px solid black;'>
    <div>Оригинал 1</div>
    <div>Оригинал 2</div>
    <div>Оригинал 3</div>
    <div>Оригинал 4</div>
    <div>Оригинал 5</div>
    <div>Оригинал 6</div>
</div>
<div id='translation' style='width: 32%; float: left; border: 1px solid black;'>
    <div>Примерный литературный перевод оригинала</div>
    <div>Перевод 2</div>
    <div>Перевод 3</div>
    <div>Перевод 4</div>
    <div>Перевод 5</div>
    <div>Перевод 6</div>
</div>
<div id='comments' style='width: 32%; float: left; border: 1px solid black;'>
    <div>Коммент 1</div>
    <div>Коммент 2</div>
    <div>Коммент 3</div>
    <div>Коммент 4</div>
    <div>Коммент 5</div>
    <div>Коммент 6</div>
</div>
 

 

Код:
$(document).ready(function(){
   var o = $('#original div'), t = $('#translation div'), c = $('#comments div');
    o.each(function(i){
        var ho = $(this).height(), ht = $(t.get(i)).height(), hc = $(c.get(i)).height();
        h = Math.max(ho, ht, hc);
        $(this).height(h);
        $(t.get(i)).height(h);
        $(c.get(i)).height(h);
    });                                                  
});


----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 07:18 11-01-2014 | Исправлено: Cheery, 07:51 11-01-2014
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Другого варианта и не видится, так как для вертикального выравнивания все три колонки должны быть объединены, но тогда и выделение текста будет по горизонтали.
 
ps: отписался отдельно, чтобы тема появилась в списке.. бывает такое при переносе из раздела в раздел.

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 00:14 12-01-2014 | Исправлено: Cheery, 00:14 12-01-2014
Открыть новую тему     Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » Web-программирование » Как сверстать страницу чтобы выделялись мышью столбцы


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

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

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru