Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Как вывести тэги в бегущую строку, Хотя она не совсем бегущая 
:(
    Опции темы
korob2001
Дата 25.3.2006, 00:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


Профиль
Группа: Комодератор
Сообщений: 2871
Регистрация: 29.12.2002

Репутация: нет
Всего: 61



Привет написал такую вот, усложнённую, бегущую строку:
Код

<html>
<head><title>Бегущая строка</title>
<script language="javascript" type="text/javascript">
<!--//

var obj = null;

function moveString(str, speed, id, step) {
    this.str = str;
    this.speed = speed || 100;
    this.element = (typeof(id) == "string") ? document.getElementById(id) : id;
    this.step = step || 1;
    this.pos = 0;
    this.len = str.length;
}

function startMove() {
    var nextChar = obj.str.charAt(obj.pos);
    if (nextChar == "<") {
        var buf = nextChar;
        while (true) {
            nextChar = obj.str.charAt(++obj.pos);
            buf += nextChar;
            if ( nextChar == ">" ) {
                obj.element.innerHTML += buf;
                obj.pos++;
                alert(buf);
                break;
            }
        }
    }
    obj.element.innerHTML += obj.str.charAt(obj.pos);
    //alert(obj.speed);
    if ((obj.pos + obj.step) <= obj.len) {
        obj.pos++;
    } else {
        return;
    }
    setTimeout("startMove()", obj.speed);
}

function go(str, speed, id, step) { 
    obj = new moveString(str, speed, id, step);
    startMove();
}
    
//-->
</script>
</head>
<body onload="go('This is a sample string only for test. This text show programm <b>JavaScript</b>', 10, 'scrolling', 2)">
<table width="50%" border="0" cellspacing="0" cellpadding="5">
<tr><td width="100%">

<div id="scrolling" style="width: 100%">&nbsp;</div>

</td></tr>
</table>
</body>
</html>

Прозьба не обижаться, я и сам понимаю, что данный эфект можно сделать гораздо проще, просто сегодня читал об объектах, потому решил попробовать заюзать ООП.

Проблема:
Если строка чистая (без тэгов), то она замечательно выводится, но если в строке есть тэги, то они тоже выводились как текст, разумеется без символа < (открывающей скобки).
Для для того, что бы тэг вставлять в HTML я я решил создать, так называемый, буфер, для сборки тега полностью. Т.е. когда получен симол <, то все последующие данные, в плоть до > и с ним включительно. сохряняются в этоту переменную.
Если была найдена закрывающая скобка >, буфер скидывается в <div>, но тэги почему-то не работают они просто исчезают. ;((((( Они верно сохраняются во временной переменной buf, это можно увидеть через alert, который показывает каждый тэг, который был собран. Проблема в том, что фрагмент текста, который был выделен тэгами <b></b> не выделяется жирным шрифтом.

Подскажите:
Почему теги не работают если их вставлять через innerHTML?
Как обойти эти грабли?

ЗЫ: код я потом оптимизирую, на сколько смогу. ;))))))

Это сообщение отредактировал(а) korob2001 - 25.3.2006, 01:02


--------------------
"Время проходит", - привыкли говорить вы по неверному пониманию. 
"Время стоит - проходите вы".
PM MAIL WWW ICQ MSN   Вверх
12345c
Дата 25.3.2006, 02:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101



Такова особенность innerHTML, что содержание тега трактуется весьма вольно и по-рзному в разных бр-рах. Видел, как переносы строк \n игнорировались в IE по странным законам. Видимо, незакрытый тег он просто убирает, считая неактуальным, если не хуже. Если немного переделать скрипт, выводя код из строки (сменить charAt на substring(0,obj.pos+1) ), заработает. (и += на = в строке 32)

Это сообщение отредактировал(а) 12345c - 25.3.2006, 02:37


--------------------
Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go
PM WWW   Вверх
korob2001
Дата 25.3.2006, 03:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


Профиль
Группа: Комодератор
Сообщений: 2871
Регистрация: 29.12.2002

Репутация: нет
Всего: 61



12345c - большое спасибо. Заменил лишь charAt на substr, в 28 строке ( в прошлом коде 32 строка ) и всё заработало. smile
Вот код:
Код

var obj = null;

function moveString(str, speed, id, step) {
    this.str = str;
    this.speed = speed || 100;
    this.element = (typeof(id) == "string") ? document.getElementById(id) : id;
    this.step = step || 1;
    this.pos = 0;
    this.len = str.length;
}

function startMove() {
    var nextChar = obj.str.charAt(obj.pos);
    if (nextChar == "<") {
        var buf = nextChar;
        while (true) {
            if ((obj.step + obj.pos) > obj.len) break;
            nextChar = obj.str.charAt(++obj.pos);
            buf += nextChar;
            if ( nextChar == ">" ) {
                obj.element.innerHTML += buf;
                obj.pos++;
                //alert(buf);
                break;
            }
        }
    }
    obj.element.innerHTML = obj.str.substr(0, obj.pos + 1);
    //alert(obj.speed);
    if ((obj.pos + obj.step) <= obj.len) {
        obj.pos++;
    } else {
        return;
    }
    setTimeout("startMove()", obj.speed);
}

function go(str, speed, id, step) { 
    obj = new moveString(str, speed, id, step);
    startMove();
}


Это сообщение отредактировал(а) korob2001 - 25.3.2006, 03:10


--------------------
"Время проходит", - привыкли говорить вы по неверному пониманию. 
"Время стоит - проходите вы".
PM MAIL WWW ICQ MSN   Вверх
korob2001
Дата 25.3.2006, 12:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


Профиль
Группа: Комодератор
Сообщений: 2871
Регистрация: 29.12.2002

Репутация: нет
Всего: 61



Извините, что не создал отдельный топик, просто смысла не вижу, тема та же, просто вопрос немного другой.
Подскажите, как избавиться от мерцания?
В IE всё работает как нужно, а в Fire Fox нормально выводится только первый елемент массива, :'(((( все остальные ужасно мерцают.

Вот код:
Код

<html>
<head><title>Бегущая строка</title>
<script language="javascript" type="text/javascript">
<!--//

var obj = null;

var messages = new Array(10);
messages[0] = "Это первое важное сообщение. В данном случае это просто текст.";
messages[1] = "Это второе важное сообщение. В данном сообщении есть тег &lt;i&gt;, следующий текст <i>наклонный</i>.";
messages[2] = "Это второе важное сообщение. В данном сообщении есть тег &lt;b&gt;, следующий текст <b>полужирный</b>.";
messages[3] = "Это второе важное сообщение. В данном сообщении есть тег &lt;u&gt;, следующий текст <u>Подчёркнутый</u>.";
messages[4] = "А в этом сообщении есть ссылка на <a href='title.html' class='small'>эту же страницу</a>.";
messages[5] = "В этом сообщении ссылки на 3 поисковика: <a href='http://yandex.ru' class='small'>Яндекс</a>, <a href='http://yahoo.com' class='small'>Yahoo</a>, <a href='http://rambler.ru' class='small'>Rambler</a>.";
messages[6] = "В этом сообщении есть изображение, вот оно <img src='img/pearl.gif' border='0' width='10' height='10'/>.";
messages[7] = "В этой строке используются стили CSS потому он буде <span style='text-decoration: line-through'>зачёркнут</span>";
messages[8] = "В этой строке с помощью стилей изменяем цвет текста на <span style='color: #ff0000'>красный</span>";
messages[9] = "Последнее сообщение. Это это ещё одна строка текста. Она здесь тоже для тестирования.";

function moveString(str, speed, id, step, size) {
    this.str = str;
    this.speed = speed || 100;
    this.element = (typeof(id) == "string") ? document.getElementById(id) : id;
    this.step = step || 1;
    this.pos = 0;
    this.len = str.length;
}

function startMove() {
    obj.element.innerHTML = "";
    var nextChar = obj.str.charAt(obj.pos);
    if (nextChar == "<") {
        var buf = nextChar;
        while (true) {
            if ((obj.step + obj.pos) > obj.len) break;
            nextChar = obj.str.charAt(++obj.pos);
            buf += nextChar;
            if ( nextChar == ">" ) {
                obj.element.innerHTML += buf;
                obj.pos++;
                break;
            }
        }
    }
    obj.element.innerHTML = obj.str.substr(0, obj.pos + 1);
    if ((obj.pos + obj.step) <= obj.len) {
        obj.pos++;
    } else {
        return;
    }
    setTimeout("startMove()", obj.speed);
}

function go(start, speed, id, step, delay) {
    if ((start >= messages.length) || (start < 0)) start = 0;
    obj = new moveString( messages[ start ], speed, id, step, messages[start].length );
    startMove();
    delete obj;
    start = ((start + 1) > messages.length) ? 0 : ++start;
    setTimeout("go(" + start + "," + speed + ",'" + [id] + "'," + step + "," + delay + ")", delay);
}
    
//-->
</script>
</head>
<body onload="go(0, 10, 'scrolling', 1, 5000)">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr><td width="100%">

<div id="scrolling" style="width: 100%">&nbsp;</div>

</td></tr>
</table>
</body>
</html>

И такой вопрос: Мне нужно сделать, что бы этот массив messages инициализировался из файла на сервере. Это может быть текстовый или XML файл. Можно ли это как-то сделать средствами JavaScript? Например: как этьо делает Flash. Можно было бы конечно, генерировать этот код из серверного приложения и инициализировать массив во время его генерации, но я хочу вынести этот код в отдельный .js файл, а не вставлять его прямо в HTML. Просто подскажите, о чём нужно почитать.

Это сообщение отредактировал(а) korob2001 - 25.3.2006, 12:56


--------------------
"Время проходит", - привыкли говорить вы по неверному пониманию. 
"Время стоит - проходите вы".
PM MAIL WWW ICQ MSN   Вверх
Ciber SLasH
Дата 25.3.2006, 20:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67



Цитата(korob2001 @ 25.3.2006, 12:40 Найти цитируемый пост)
а в Fire Fox нормально выводится только первый елемент массива, :'(((( все остальные ужасно мерцают.

У меня всё нормально, FF 1.5.0.1

Цитата(korob2001 @ 25.3.2006, 12:40 Найти цитируемый пост)
Мне нужно сделать, что бы этот массив messages инициализировался из файла на сервере.

Вынеси весь скрипт в файл script.js, и пропиши в странице после <HEAD>:
Код
<script type='text/javascript' src='script.js'></script>

PM   Вверх
korob2001
Дата 26.3.2006, 00:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


Профиль
Группа: Комодератор
Сообщений: 2871
Регистрация: 29.12.2002

Репутация: нет
Всего: 61



Цитата

У меня всё нормально, FF 1.5.0.1

У меня FF 1.7.12.
Когда код был отдельно на странице, был этот глюк. Посмотри вот здесь:
http://antonium.org/dsn/scroller.html

Когда я вставил его в конечную страницу, то вродебы мерцания прекратились, но теперь мерцают часы. Посмотреть можно здесь:
http://antonium.org/dsn/title5.html

Цитата

Вынеси весь скрипт в файл script.js, и пропиши в странице после <HEAD>:

smile Да это я знаю. Меня интересует текстовый файл, например такого формата:
Код

Строка1
Строка2
Строка3
Строка4
......

В этот файл добавляются строки Perl программой на сервере, а считываться строки должны JavaScript программой. Именно ими и должен быть заполнен массив. Вобщем я хочу отделить информацию от кода.

Это сообщение отредактировал(а) korob2001 - 26.3.2006, 00:44


--------------------
"Время проходит", - привыкли говорить вы по неверному пониманию. 
"Время стоит - проходите вы".
PM MAIL WWW ICQ MSN   Вверх
Ciber SLasH
Дата 26.3.2006, 01:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67



Цитата(korob2001 @ 26.3.2006, 00:38 Найти цитируемый пост)
В этот файл добавляются строки Perl программой на сервере

Ясно, тогда просто генерируй Перлом не просто строки, а загоняй их сразу в массив для JS и сохраняй в файле *.js. Типа:
text = ["1111111", "22222222"];
дальше подключай этот файл к странице и у тебя будет глобальная переменная text.
PM   Вверх
korob2001
Дата 26.3.2006, 03:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


Профиль
Группа: Комодератор
Сообщений: 2871
Регистрация: 29.12.2002

Репутация: нет
Всего: 61



Ciber SLasH - Предлагаешь хранить массив в отдельном js файле? Но это мне понадобится каждый раз, когда генерируется страница, гнерить и js файл ;(((( Я как-то слышал, что из js, можно открыть XML файл и считать с него информацию. Только вот не могу найти, где именно я видел эту тему.
Добавлено @ 03:18
Кстати, можно на сервере сразу сохранять текст не в текстовый файл, а в js файл, в виде массива, как ты предложил. Тогда нужно будет обновлять js файл, с массивом, только тогда, когда будет добавляться новая запись.


--------------------
"Время проходит", - привыкли говорить вы по неверному пониманию. 
"Время стоит - проходите вы".
PM MAIL WWW ICQ MSN   Вверх
Ciber SLasH
Дата 26.3.2006, 03:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67



Цитата(korob2001 @ 26.3.2006, 03:16 Найти цитируемый пост)
Я как-то слышал, что из js, можно открыть XML файл и считать с него информацию.

Это делается с помощью XmlHttpRequest.
PM   Вверх
korob2001
Дата 26.3.2006, 03:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


Профиль
Группа: Комодератор
Сообщений: 2871
Регистрация: 29.12.2002

Репутация: нет
Всего: 61



Ciber SLasH - БОЛЬШОЕ СПАСИБО. Сейчас почитаю об этом, если не подойдёт, то буду генерить js при добавлении новой записи.


--------------------
"Время проходит", - привыкли говорить вы по неверному пониманию. 
"Время стоит - проходите вы".
PM MAIL WWW ICQ MSN   Вверх
Ciber SLasH
Дата 26.3.2006, 03:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67



На здоровье smile
PM   Вверх
korob2001
Дата 28.3.2006, 05:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


Профиль
Группа: Комодератор
Сообщений: 2871
Регистрация: 29.12.2002

Репутация: нет
Всего: 61



Вобщем почитал немного. Честно говоря, он мне уже все мозги выпарил, этот XMLHttpRequest. smile
Написал такой код:
Код

var request = null;
var newString = "";
var element = null;
var obj = null;

function loadXMLDoc(url) {
    request = null;
    if (window.XMLHttpRequest) {
        request = new XMLHttpRequest();
        request.onreadystatechange = processReqChange;
        request.open("GET", url, true);
        request.send(null);
    } else if (window.ActiveXObject) {
        request = new ActiveXObject("Microsoft.XMLHTTP");
        if (request) {
            request.onreadystatechange = processReqChange;
            request.open("GET", url, true);
            request.send();
        }
    }
}

function processReqChange() {    
    if (request.readyState == 4) {
    if (request.status == 200) {
            newString = request.responseText;
        } else {
            newString = "Добро пожаловать на сайт Perl Anatomy: " + request.statusText + "[+]0";
        }
    }  
}

function getNextString(url, oldString) { loadXMLDoc(url + "?old=" + oldString) };

function moveString(str, speed, id, step, size) {
    this.str = str;
    this.speed = speed || 100;
    this.element = (typeof(id) == "string") ? document.getElementById(id) : id;
    this.step = step || 1;
    this.pos = 0;
    this.len = str.length;
}

function startMove() {
    obj.element.innerHTML = "";
    var nextChar = obj.str.charAt(obj.pos);
    if (nextChar == "<") {
        var buf = nextChar;
        while (true) {
            if ((obj.step + obj.pos) > obj.len) break;
            nextChar = obj.str.charAt(++obj.pos);
            buf += nextChar;
            if ( nextChar == ">" ) {
                obj.element.innerHTML += buf;
                obj.pos++;
                break;
            }
        }
    }
    obj.element.innerHTML = obj.str.substr(0, obj.pos + 1);
    if ((obj.pos + obj.step) <= obj.len) {
        obj.pos++;
    } else {
        return;
    }
    setTimeout("startMove()", obj.speed);
}

function runString(x, speed, id, step, delay) {
    getNextString('/cgi-bin/runtext/getnext.pl', x) || "";
    var arr = new Array(2);
    arr = newString.split('[+]',2);
    obj = new moveString( arr[0], speed, id, step, arr[0].length );
    startMove();
    delete obj;
    ++arr[1];
    setTimeout("runString(" + arr[1] + "," + speed + ",'" + [id] + "'," + step + "," + delay + ")", delay);
}

Всё вроде ничего, но почему-то глючит он в FireFox smile , а именно записи из файла выводятся по 2 раза. Сначала я думал грабли в функции processReqChange(), которая прицеплена к событию request.onreadystatechange, т.е. изначально я там создавал таймер, для вызова метода abort, объекта request. Код был таким:
Код

function processReqChange() {    
    var abort = window.setTimeout("request.abort();", 5000);
    if (request.readyState == 4) {
        clearTimeout(abort);
    if (request.status == 200) {
            newString = request.responseText;
        } else {
            newString = "Fuck: " + request.statusText + "[+]0";
        }
    }  
}

Для того, что бы оборвать соединение, если оно не было установлено в течении 5 секунд. С другой стороны у меня в функции runString(), тоже запускается таймер и он так же срабатывает каждые 5 секунд. Я думал глюк где-то здесь, потому попробовал убарть таймер из функции processReqChange() и это помогло, но не до конца. В IE вроде бы всё работает нормально, но не всегда, в FF почему-то глючит конкретно.

Подскажите, что не так?

PS: В работе этот код можете посмотреть его на этой странице: http://antonium.org/dsn/title6.html
После того, как в IE попадаешь на страницу через ссылку, то сразу же нарываюсь на глюк, когда сообщения начинают выводиться по 2 раза. Как только обновляю страницу, то код начинает нормально работать, но опять же, только в IE. ;(((

Это сообщение отредактировал(а) korob2001 - 28.3.2006, 05:26


--------------------
"Время проходит", - привыкли говорить вы по неверному пониманию. 
"Время стоит - проходите вы".
PM MAIL WWW ICQ MSN   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.0566 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.