скрытие текста
вот написал такой скрипт который обезает опеределленное кол-во текста
а по нажатию на ссылку отображает его. но вот в чем проблема если используется тег <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() |
неужели ни кто не поможет?
|
Лично я не понял, чего вы хотите добиться и причём здесь тег <p> (вообще имеет ли смысл осуществлять все эти операции?), если можно поподробнее и оставьте код только по сути проблемы.
|
вот тут пример кода
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> как решить эту проблему? |
можно так
когда делаете короткую версию текста, то сначала очистите содержимое div.sliceText от тегов и потом обрезайте полную версию не меняйте, просто скройте а при клике на ссылке Смотреть полностью ... скрывайте короткую версию и отображайте полное исходное содержимое div.sliceText |
В innerHTML входит всё внутреннее содержимое тега, включая внутренние теги.
Вырезая кусок этого содержимого (делая его невидимым, убирая из потока), могут остаться незакрытыми некоторые внутренние теги (что приведёт к перераспределению содержимого страницы, так и произошло, тег <p> остался незакрытым). Функция sliceText() вставляет блочный контейнер div, поэтому "Судя" у вас осталось на своей строке, а скрытое содержимое потом отобразилось с новой строки. Для данного примера решением может стать замена div на span в sliceText() и FullText(), но остающиеся незакрытые теги при применении sliceText() это всё равно проблема, поэтому надо искать другое решение. |
Цитата:
Для простых случаев, конечно, можно вообще хранить два экземпляра текста (как вы и сказали, короткий и полный), тогда вообще можно не заморачиваться с динамическим выводом. А так пока не видится универсального решения (возможно оно и существует) вырезки части содержимого страницы (придётся подстраиваться под каждое содержимое), можно, конечно, попробовать замутить с overflow: hidden. |
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. если хранить и краткую копию текста , то сделать это легко даже учитывая теги. но как то нехочится хранить один и тот же текст дважды,текста на странице может бы много в блоках (много блоков и текста в них), по этому так делать не хочется Цитата:
|
неужели неукого нет вариантов?=(
все идеи что приходят мне в голову ,довольно сильно будут грузить страниицу(для такого скрипта). или кто то подскажит как правильно расчитать высоту текста для определенного кол-ва текста (чтоб использовать overflow: hidden ) |
Задача, конечно, имеет место быть, но пока не видно пользы цели, чтобы достигать её такими средствами.
Если вы просто хотите автоматизировать скрытие в списке статей части информации, не проще ли представить всю информацию в виде двух блоков - вводная часть статьи (про что), и, собственно, статья. Автоматизацию скрытия собственно статей как раз не сложно осуществить, при этом у вас не будет дублирования информации (раз вы так за это переживаете), и скрипт простейший (ваш занимает не меньше места, чем вводные части от нескольких статей, и к тому же грузит процессор). |
несовсем понял.
вы предлагает сделать один блок в нем сокращенный текст,а во втором полный? если да то реализовать раз плюнуть=) кстати везде где видел похожие скрипты так и реализовано |
Код:
<div> |
таk проще на пхп написать, когда вывод из базы делаеш + ajax
|
Цитата:
есть текст (большого обьема), выводится 30%(текста к примеру) а остальное скрывается скриптом. |
Цитата:
|
да
|
Тогда тут должна подключиться тяжелая техника - профессора
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 23:26. |