Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.04.2012, 18:30
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

скрытие текста
вот написал такой скрипт который обезает опеределленное кол-во текста
а по нажатию на ссылку отображает его.
но вот в чем проблема если используется тег <p> то скрипт от туда вырезает но всавляет после тега.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<script type="text/javascript">
function createStyleCSS(CssParam){
	var head,tagStyle;
	head=document.getElementsByTagName("head")[0];
	//head.getElementsByTagName("style");
	tagStyle=document.createElement("style");
	tagStyle.setAttribute("type","text/css");
	tagStyle.innerHTML=CssParam;
	head.appendChild(tagStyle);
	}
	
function sliceText(){
	
	createStyleCSS(".notVisible {display:none;}");//функциия задает переданные css свойства
    var lengthArray,endLen,resultText,findEndSymols,fullLink,AllClass;
	// i love IE
if(typeof document.getElementsByClassName != 'function')AllClass=browserIE('sliceText');
	//--------------
else AllClass=document.getElementsByClassName("sliceText");
	
	
	for(var i=0;i<AllClass.length;i++)
    {
		
        lengthArray=AllClass[i].innerHTML.length;//длина текстовой строки
    if(lengthArray>200){
		//-------------------------------------
    fullLink=document.createElement('a');
    //создание ссылки на полный текст
    fullLink.setAttribute("href"," ");
    fullLink.setAttribute("onclick","Fulltext(this);return false;");
    fullLink.innerHTML="Смотреть полностью...";
		//-------------------------------------
        /*выводится только 40% текста */
        endLen=(lengthArray/100)*40; 
        //--------------------
        findEndSymols=AllClass[i].innerHTML.slice(endLen);
        findEndSymols=findEndSymols.indexOf(" ");
        endLen=endLen+findEndSymols;//вырезать начиная с пробела
        //-------------------- 
	    resultText=AllClass[i].innerHTML.slice(0,endLen)+"  <div class='notVisible'>"+AllClass[i].innerHTML.slice(endLen)+"</div>";
		AllClass[i].innerHTML=resultText+"  ";
        AllClass[i].appendChild(fullLink);
         
        }
     
     
    }
}

function Fulltext(obj){
	var element; 
var ALLspan=obj.parentNode.getElementsByTagName("div");
for(var i=0;i<ALLspan.length;i++){
	if(ALLspan[i].className=="notVisible"){
		ALLspan=ALLspan[i];
		break;
		}
	}
if(ALLspan.nodeType == 1){
    ALLspan.style.display="inline";
	obj.parentNode.removeChild(obj);
}
else alert("Проблема при обработке span");
}
// ДЛЯ ИЕ вместо document.getElementsByClassName
function browserIE(FindClass){
	//ie6 test
	var Tagbod=document.getElementsByTagName('body')[0];
	var allSpan=Tagbod.getElementsByTagName('*');
	var arrElements=[],g=0;
	for(var i=0;i<allSpan.length;i++){
		
		if(allSpan[i].className==FindClass){
		arrElements[g]=allSpan[i];
		g++;
		}
		
		}
	return arrElements;
	
	//---------------------------------------
	}


</script>
<style type="text/css">
.text {
	margin-top:20px;
	overflow:hidden;
}

</style>
</head>

<body onload="sliceText();">
<div  class="sliceText">
Legend of Grimrock — это ролевая игра от студии Almost Human Games, которая также выступила и издателем. Проект вышел 11 апреля и стал самым продаваемым в Steam на прошлой неделе, при этом разработчики говорят, затраты на ее разработку уже окупились

</div>
<div  class="sliceText">
Десятка самых продаваемых игр прошлой недели: 1. Legend of Grimrock 2. Wargame: European Escalation 3. The Elder Scrolls V: Skyrim 4. Max Payne 3 5. Sins of A Solar Empire: Rebellion 6. Call of Duty: Modern Warfare 3 7. Might

</div>
<div class="sliceText">
Namco Bandai показывает немного геймплея кооперативной игры Star Trek от студии Digital Extremes (Bioshock 2, Unreal Tournament, Dark Sector, The Darkness 2).

</div>
<div class="sliceText">
<p>Namco Bandai показывает немного геймплея кооперативной игры Star Trek от студии Digital Extremes (Bioshock 2, Unreal Tournament, Dark Sector, The Darkness 2).</p>

<p>Судя по видео, в Star Trek будет очень много экшена: бега, перестрелок, полетов в космосе и не только, и даже альпинизм.</p>

<p>Напомним, Star Trek выйдет в начале 2013 года на PC и консоли, а здесь вы увидите минуту пре-альфа геймплея игры годичной давности.</p>

</div><br>


</html>

тут можно его запустить http://learn.javascript.ru/play/V3HZ8b .
помогие исправить или подскажите алгоритм написания (готовых скриптов не надо).
и почему не работает в ИЕ функция createStyleCSS()
Ответить с цитированием
  #2 (permalink)  
Старый 25.04.2012, 15:50
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

неужели ни кто не поможет?
Ответить с цитированием
  #3 (permalink)  
Старый 25.04.2012, 22:03
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Лично я не понял, чего вы хотите добиться и причём здесь тег <p> (вообще имеет ли смысл осуществлять все эти операции?), если можно поподробнее и оставьте код только по сути проблемы.
Ответить с цитированием
  #4 (permalink)  
Старый 26.04.2012, 00:00
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

вот тут пример кода
http://learn.javascript.ru/play/75j98b
там добавали кнопку slice чтоб было наглядней видно, посмотрите как выглядит 4й блок с верху до нажатия на кнопку и после т.е (вместо ставить на место оно добавляет абзац)
изначально структура блока такая
<p>Namco Bandai показывает немного геймплея кооперативной игры Star Trek от студии Digital Extremes (Bioshock 2, Unreal Tournament, Dark Sector, The Darkness 2).</p>

<p>Судя по видео, в Star Trek будет очень много экшена: бега, перестрелок, полетов в космосе и не только, и даже альпинизм.</p>

<p>Напомним, Star Trek выйдет в начале 2013 года на PC и консоли, а здесь вы увидите минуту пре-альфа геймплея игры годичной давности.</p>

после выполнения скрипта она становится такая
<p>Namco Bandai показывает немного геймплея кооперативной игры Star Trek от студии Digital Extremes (Bioshock 2, Unreal Tournament, Dark Sector, The Darkness 2).</p>

<p>Судя  </p><div class="notVisible"> по видео, в Star Trek будет очень много экшена: бега, перестрелок, полетов в космосе и не только, и даже альпинизм.<p></p>

<p>Напомним, Star Trek выйдет в начале 2013 года на PC и консоли, а здесь вы увидите минуту пре-альфа геймплея игры годичной давности.</p>

</div>  <a href=" " onclick="Fulltext(this);return false;">Смотреть полностью...</a></div>

как решить эту проблему?
Ответить с цитированием
  #5 (permalink)  
Старый 26.04.2012, 12:14
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

можно так

когда делаете короткую версию текста, то сначала очистите содержимое div.sliceText от тегов и потом обрезайте

полную версию не меняйте, просто скройте

а при клике на ссылке Смотреть полностью ... скрывайте короткую версию и отображайте полное исходное содержимое div.sliceText
Ответить с цитированием
  #6 (permalink)  
Старый 26.04.2012, 12:56
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

В innerHTML входит всё внутреннее содержимое тега, включая внутренние теги.
Вырезая кусок этого содержимого (делая его невидимым, убирая из потока), могут остаться незакрытыми некоторые внутренние теги (что приведёт к перераспределению содержимого страницы, так и произошло, тег <p> остался незакрытым).
Функция sliceText() вставляет блочный контейнер div, поэтому "Судя" у вас осталось на своей строке, а скрытое содержимое потом отобразилось с новой строки.
Для данного примера решением может стать замена div на span в sliceText() и FullText(), но остающиеся незакрытые теги при применении sliceText() это всё равно проблема, поэтому надо искать другое решение.
Ответить с цитированием
  #7 (permalink)  
Старый 26.04.2012, 14:08
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Сообщение от Pavel M.
очистите содержимое div.sliceText от тегов
Получится не универсально, а если среди этих тегов будут необходимые теги для форматирования текста.
Для простых случаев, конечно, можно вообще хранить два экземпляра текста (как вы и сказали, короткий и полный), тогда вообще можно не заморачиваться с динамическим выводом.
А так пока не видится универсального решения (возможно оно и существует) вырезки части содержимого страницы (придётся подстраиваться под каждое содержимое), можно, конечно, попробовать замутить с overflow: hidden.
Ответить с цитированием
  #8 (permalink)  
Старый 26.04.2012, 14:36
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

overflow: hidden и span - пройденый этап.
overflow: hidden - у меня не получилось расчитать нужную высоту для определенного кол-во текста.
span - расмотрим на томже примере как отработает span
<div class="sliceText">
<p>Namco Bandai показывает немного геймплея кооперативной игры Star Trek от студии Digital Extremes (Bioshock 2, Unreal Tournament, Dark Sector, The Darkness 2).</p>

<p>Судя  <span class="notVisible"> по видео, в Star Trek будет очень много экшена: бега, перестрелок, полетов в космосе и не только, и даже альпинизм.</span></p>

<p>Напомним, Star Trek выйдет в начале 2013 года на PC и консоли, а здесь вы увидите минуту пре-альфа геймплея игры годичной давности.</p>

  <a href=" " onclick="Fulltext(this);return false;">Смотреть полностью...</a></div>

т.е спан закроется внутри того же тега p.

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

Цитата:
очистите содержимое div.sliceText от тегов
не вариант

Последний раз редактировалось cyber, 26.04.2012 в 14:53.
Ответить с цитированием
  #9 (permalink)  
Старый 26.04.2012, 18:21
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

неужели неукого нет вариантов?=(
все идеи что приходят мне в голову ,довольно сильно будут грузить страниицу(для такого скрипта).
или кто то подскажит как правильно расчитать высоту текста для определенного кол-ва текста (чтоб использовать overflow: hidden )
Ответить с цитированием
  #10 (permalink)  
Старый 26.04.2012, 21:47
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Задача, конечно, имеет место быть, но пока не видно пользы цели, чтобы достигать её такими средствами.
Если вы просто хотите автоматизировать скрытие в списке статей части информации, не проще ли представить всю информацию в виде двух блоков - вводная часть статьи (про что), и, собственно, статья.
Автоматизацию скрытия собственно статей как раз не сложно осуществить, при этом у вас не будет дублирования информации (раз вы так за это переживаете), и скрипт простейший (ваш занимает не меньше места, чем вводные части от нескольких статей, и к тому же грузит процессор).
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как запретить отмену выделения текста от клика мышью? Маэстро Internet Explorer 0 03.04.2012 21:21
Чудеса математики js при padding borovik Элементы интерфейса 6 09.07.2011 22:02
Получение позиции текста по координатам traa Events/DOM/Window 20 08.02.2011 14:19
Скрытие текста на странице за ссылкой Vlad44 Общие вопросы Javascript 2 13.01.2009 18:02
Firefox: перехватить соббытие при перетаскивании текста no_alex Общие вопросы Javascript 9 21.08.2008 18:02