Форум

cyber · #1 (**permalink**) 24.04.2012, 18:30

вот написал такой скрипт который обезает опеределленное кол-во текста
а по нажатию на ссылку отображает его.
но вот в чем проблема если используется тег <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()

cyber · #2 (**permalink**) 25.04.2012, 15:50

неужели ни кто не поможет?

bes · #3 (**permalink**) 25.04.2012, 22:03

Лично я не понял, чего вы хотите добиться и причём здесь тег <p> (вообще имеет ли смысл осуществлять все эти операции?), если можно поподробнее и оставьте код только по сути проблемы.

cyber · #4 (**permalink**) 26.04.2012, 00:00

вот тут пример кода
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>

как решить эту проблему?

Pavel M. · #5 (**permalink**) 26.04.2012, 12:14

можно так

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

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

а при клике на ссылке Смотреть полностью ... скрывайте короткую версию и отображайте полное исходное содержимое div.sliceText

bes · #6 (**permalink**) 26.04.2012, 12:56

В innerHTML входит всё внутреннее содержимое тега, включая внутренние теги.
Вырезая кусок этого содержимого (делая его невидимым, убирая из потока), могут остаться незакрытыми некоторые внутренние теги (что приведёт к перераспределению содержимого страницы, так и произошло, тег <p> остался незакрытым).
Функция sliceText() вставляет блочный контейнер div, поэтому "Судя" у вас осталось на своей строке, а скрытое содержимое потом отобразилось с новой строки.
Для данного примера решением может стать замена div на span в sliceText() и FullText(), но остающиеся незакрытые теги при применении sliceText() это всё равно проблема, поэтому надо искать другое решение.

bes · #7 (**permalink**) 26.04.2012, 14:08

Сообщение от Pavel M.

очистите содержимое div.sliceText от тегов

Получится не универсально, а если среди этих тегов будут необходимые теги для форматирования текста.
Для простых случаев, конечно, можно вообще хранить два экземпляра текста (как вы и сказали, короткий и полный), тогда вообще можно не заморачиваться с динамическим выводом.
А так пока не видится универсального решения (возможно оно и существует) вырезки части содержимого страницы (придётся подстраиваться под каждое содержимое), можно, конечно, попробовать замутить с overflow: hidden.

cyber · #8 (**permalink**) 26.04.2012, 14:36

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 · #9 (**permalink**) 26.04.2012, 18:21

неужели неукого нет вариантов?=(
все идеи что приходят мне в голову ,довольно сильно будут грузить страниицу(для такого скрипта).
или кто то подскажит как правильно расчитать высоту текста для определенного кол-ва текста (чтоб использовать overflow: hidden )

bes · #10 (**permalink**) 26.04.2012, 21:47

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

Форум

Справочник

Discord чат

Курсы javascript