Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Почему CSS-стили не работают, если загружены с помощью AJAX 
V
    Опции темы
Тутанхамец
Дата 25.9.2007, 11:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 612
Регистрация: 10.10.2005
Где: в пирамидЕ!

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



Есть основная страница. Считываю в div другую. В этой другой хорошо бы использовать CSS. Но style="..." не работает. class="..." тоже. Как бы это сделать, а? Заранее благодарен. 
PM MAIL   Вверх
dstorm81
Дата 25.9.2007, 11:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


бездельник
***


Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

Репутация: 3
Всего: 39



Считываю в div другую - в смысле фреймы и ты с одной страницы (невидимой) берешь контент и перекидываешь в див через innerHTML?
это типа ajax?
если так то для начала присвой этому диву идентификатор и посмотри его innerHTML (получившийся)
по идее если ты своему диву назначил стиль то он и будет применяться ко всему контенту
а вообще пример твоего творчества не помешал бы


--------------------
на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

PM   Вверх
Тутанхамец
Дата 25.9.2007, 12:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 612
Регистрация: 10.10.2005
Где: в пирамидЕ!

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



Да, пардон. Надо было сразу с примером. Это AJAX. Я хочу сделать без фреймов, чтобы текст страницы менялся в одной ячейки таблицы, а кнопки навигации (которые меняют текст) - в другой ячейке. Кстати, в подчитанном тексте не работает не только CSS, но и тэг Img. :(

ВОт index.html: 

Код

<html>
<head>

  <style type="text/css">
    body { margin: 0; padding: 0; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; background-color: #96d7ff }
    table { font-size: 15px}
    a { text-decoration: none; font-size: 13px }
    a:link { color: #3E6ACD; text-decoration: none }
    a:visited { color: #3E6ACD; text-decoration: none }
    a:hover{ color: #3E6ACD; text-decoration: underline }
    #copyrights { color: #96d7ff; font-weight: 700; letter-spacing: 2px; font-size: 10px }
   
    .navlink{text-align: center; border-color: black; border-style: solid; border-width: 1px; background-color: #FA8072;    cursor: hand}
    

  </style>
  
  <title>Школа №12</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

   <script type="text/javascript" language="javascript">
         
    function sel(nam){
        var ob=window.event.srcElement;
            ob.style.backgroundColor="#FFFACD";
    }
    
    function desel(nam){
        var ob=window.event.srcElement;
            ob.style.backgroundColor="#FA8072";
    }
                                       
    function makeRequest(url) {
        var http_request = false;
        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');
            
            }
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }

        if (!http_request) {
            document.all.mainfr.innerHTML='Не удалось получить содержимое страницы. Возможно, Ваш браузер не поддерживает AJAX.';
            return false;
        }

        
        http_request.onreadystatechange = function() { alertContents(http_request); };
        http_request.open('GET', url, true);
        http_request.send(null);
    }
    
    function alertContents(http_request) {
        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
                document.all.mainfr.innerHTML=http_request.responseText;
            } else {
                document.all.mainfr.innerHTML='Не удалось получить содержимое страницы с помощью AJAX.';
            }
        }
    }
  </script>

</head>
<body onload="makeRequest('main.html')">

    
  <table width="100%" border=1 style="height: 100%">
  
    <tr style="height: 15%">
      <td style="background-image: url(); background-repeat: repeat-y;" bgcolor="#ff68a6" colspan=2></td>
    </tr>                 
    
    <tr valign=top>
      <td width="15%" bgcolor="#e06295">
           
           <!--Навигация-->
           
           <table width="100%">
               <tr>
                   <td id='main' class="navlink" onmouseover="sel('main')" onmouseout="desel('main')" class="navlink" onclick="makeRequest('main.html')">
                       Главная
                   </td>
               </tr>
               <tr>
                   <td id='school' class="navlink" onmouseover="sel('school')" onmouseout="desel('school')" class="navlink" onclick="makeRequest('school.html')">
                       О школе
                   </td>
               </tr>
               
               <tr>
                   <td id='kids' class="navlink" onmouseover="sel('kids')" onmouseout="desel('kids')" class="navlink" onclick="makeRequest('kids.html')">
                       Ученикам
                   </td>
               </tr>
               <tr>
                    <td id='parents' class="navlink" onmouseover="sel('parents')" onmouseout="desel('parents')" class="navlink" onclick="makeRequest('parents.html')">
                   Родителям
                   </td>               
               </tr>
               <tr>
               
               </tr>
           </table>
      </td>
      <td>
        <div id="mainfr" style="background-color: #96d7ff; background: url(fon3.jpg); background-attachment: fixed; padding: 10px; height: 100%; overflow-y: scroll;
          scrollbar-base-color: #FF89C3;
    scrollbar-face-color: #FFCEC3;
    scrollbar-darkshadow-color: #9D1E51;
    scrollbar-highlight-color: White;
    scrollbar-shadow-color: Black;
    scrollbar-track-color: #9D1E51;">
        </div>
      </td>
    </tr>
    
                                               
  </table>
  
</body>
</html>




А вот main.html, которую я читаю в div. 


Код


<style>
.address{color: blue;}
</style>

<table width="100%">
    <tr>
     <td>
            
            <img src="school_main.jpg">
            
        </td>
        <td>
            <p class="address">Адрес:<br>
            143900, г.о. Балашиха Московской области,

            
              </p>

        </td>
    </tr>
    
    




 

    
</table>


Это сообщение отредактировал(а) Тутанхамец - 25.9.2007, 12:06
PM MAIL   Вверх
dstorm81
Дата 25.9.2007, 12:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


бездельник
***


Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

Репутация: 3
Всего: 39



код ужасный
document.all.mainfr.innerHTML  all работает только ie  
лучшая замена
document.getElementById("mainfr").innerHTML

и вообще давай немного почисти код убрав все лишнее таблицы
второй текст синтаксически не верен, стили должны быть прописаны в самом верхнем документе, поскольку вставка будет ТУДА

Это сообщение отредактировал(а) dstorm81 - 25.9.2007, 12:17


--------------------
на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

PM   Вверх
Тутанхамец
Дата 25.9.2007, 12:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 612
Регистрация: 10.10.2005
Где: в пирамидЕ!

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



Насчет кода согласен.smile Спасибо за documentgetElementById("mainfr").innerHTML. С таблицами разберусь потом. Лишних таблиц там нет, просто я вырезал текст, не имеющий отношения к делу, иначе документ был бы очень длинный. 

Вставлять определения стилей   .address{color: blue;} в index.html я пробовал - результат тот же. Пробовал прописывать стили в тэге <p> - то же самое. Может надо с mime-заголовком запроса что-нибудь сделать? 



PM MAIL   Вверх
dstorm81
Дата 25.9.2007, 12:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


бездельник
***


Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

Репутация: 3
Всего: 39



в самом первом попробуй прописать
в стили добавить
#mainfr p.address{color:red}
#mainfr img{border:2px solid red}


измениться полюбому должен если скрипт хоть как-то работает


--------------------
на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

PM   Вверх
Тутанхамец
Дата 25.9.2007, 12:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 612
Регистрация: 10.10.2005
Где: в пирамидЕ!

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



Сделал, ничего не меняется :(

Мало того. Проверил такую штуку. Так qq он в документе тоже не пишет. По ходу он не обрабатывает всякую дрянь типа стилей и скриптов, если они подгружены аяксом. 

Код

<script language="vbscript">
document.writeln "qq"
</script>
<table width="100%">
    <tr>
     <td>
            
            <img src="school_main.jpg">
            
        </td>
        <td>
            <p class="address">Адрес:<br>
            143900, г.о. Балашиха Московской области,

            
              </p>

        </td>
    </tr>
</table>

PM MAIL   Вверх
dstorm81
Дата 25.9.2007, 12:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


бездельник
***


Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

Репутация: 3
Всего: 39



подожди подожди, скрипты от так просто обрабатывать не булет это точно
responseText что возвращает?


--------------------
на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

PM   Вверх
Тутанхамец
Дата 25.9.2007, 12:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 612
Регистрация: 10.10.2005
Где: в пирамидЕ!

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



Чорт. Всё заработало. По ходу в браузере не обновлялись файлы, которые я менял. Я нажимал f5, а он по ходу отображал страницы получасовой давности. Видимо, брал из кэша. Я перезапустил браузер - увидел, что стиль работает.  

Спасибо тебе. smile Плюс к репутации за мной. Может заодно скажешь, почему скрипты просто так не будут выполняться?
PM MAIL   Вверх
dstorm81
Дата 25.9.2007, 13:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


бездельник
***


Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

Репутация: 3
Всего: 39



<script language="vbscript">
document.writeln "qq"
</script>

во первых это не кроссбраузерно - только msie
во вторых document.writeln это запись в потоке, а док у тебя уже сформированный, отреднёддный ;-)
в третьих чтобы заработали подгружаемые функции их надо подключать через createElement("script")
(по правильному)
З.Ы. желательно вообщето чтобы весь функционал линковался к индексовой странице


--------------------
на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

PM   Вверх
Тутанхамец
Дата 25.9.2007, 13:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 612
Регистрация: 10.10.2005
Где: в пирамидЕ!

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



Понил. Пасиба. 

ЗЫ Насчет msie - знаю. Это я просто для проверки. 

Вопрос закрыт. 
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




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


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

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