Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
Социальная инженерия и социальные хакеры. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель PHP 5 / 6 (3 издание). Авторы: Кузнецов М.В., Симдянов И.В. PHP 5/6. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. PHP Puzzles. Авторы: Кузнецов М.В., Симдянов И.В. Объектно-ориентированное программирование на PHP. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Изменение размеров документа после создания и при изменении размеров браузера
 
 автор: Sfinks   (17.02.2012 в 10:41)   письмо автору
5.3 Кб
 
 

Уф. Ну вот и сюда добрался )
Упрощаю исходный код до минимума, т.к. ток учусь и не получаются, уверен, элементарные вещи.
Ман по ссылке http://msdn.microsoft.com/en-us/library/ms123401.aspx не помогает.
<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="ru">
<head>
<script type="text/javascript">
  function r2(){
    var x = document.getElementById('mid');
    if( x ){  // если закомментировать этот if, то хром пишет ошибку (см.вложение)
      var y = x.getElementsByTagName('p');   // соотв. дальше ниче не выполняется
      for(var i = 0, s = ''; i < y.length; i++){
        s += y[i].getPropertyValue( marginLeft );
      }
      document.write(s);   // это просто чтоб посмотреть что получается
    }                      // но даже этого я еще пока не видел
  }
  window.onresize = r2();
</script>
</head>
<body>
<div class="body">
  <div id="mid">
    <p class="h1">тра</p>
    <p class="desc">трата!</p>
    <p><a href="#"><img src="/img/thumbs/34384.jpg" alt="" /></a></p>
    <p><a href="#"><img src="/img/thumbs/34385.jpg" alt="" /></a></p>
    <p><a href="#"><img src="/img/thumbs/34386.jpg" alt="" /></a></p>
    <div class="clearfloat"></div>
  </div>
</div>
</body>
</html>

(вопрос в камментах в скрипте)
______
P.S. Ошибку переводить не нужно. Нужно получить доступ к <p> вложенным в <div id="mid">

  Ответить  
 
 автор: ЯСА   (17.02.2012 в 11:24)   письмо автору
 
   для: Sfinks   (17.02.2012 в 10:41)
 

Круглые скобки не нужны
window.onresize = r2()

  Ответить  
 
 автор: Sfinks   (17.02.2012 в 11:41)   письмо автору
 
   для: ЯСА   (17.02.2012 в 11:24)
 

Спасибо. Теперь функция выполняется 4 раза. Вернее если окно развернуть/свернуть, то 2 раза, а если менять размер перетягивая границу окна, то 4 раза:
<script type="text/javascript">
  function r2(){
    var x = document.getElementById('mid');
    var y = x.getElementsByTagName('p');
    alert(y.length);
    for(var i = 0; i < y.length; i++){
      alert(y[i].className);
    }
  }
  window.onresize = r2;
</script>
___
А как вы пишите перечеркнуто? Чет я не наблюдаю такого тега в редактировании сообщения.

  Ответить  
 
 автор: Sfinks   (17.02.2012 в 14:46)   письмо автору
 
   для: Sfinks   (17.02.2012 в 11:41)
 

Почему-то такая ерунда происходит только в хроме :-/

  Ответить  
 
 автор: Sfinks   (17.02.2012 в 11:48)   письмо автору
 
   для: ЯСА   (17.02.2012 в 11:24)
 

и почему
      if( y[i].className == '' ){
        alert(y[i].style.width);
      }
выводит пустую строку?

  Ответить  
 
 автор: ЯСА   (17.02.2012 в 11:56)   письмо автору
 
   для: Sfinks   (17.02.2012 в 11:48)
 

alert (y [i].currentStyle.width)

  Ответить  
 
 автор: Sfinks   (17.02.2012 в 12:15)   письмо автору
 
   для: ЯСА   (17.02.2012 в 11:56)
 

> cannot read property 'width' of undefined

  Ответить  
 
 автор: Sfinks   (17.02.2012 в 12:25)   письмо автору
 
   для: ЯСА   (17.02.2012 в 11:56)
 

Опережая дальнейшее гадание:
alert(y[i].style.getPropertyValue('width')); //выводит null
alert(y[i].currentStyle.getPropertyValue('width')); // cannot call method 'getPropertyValue' of undefined

  Ответить  
 
 автор: ЯСА   (17.02.2012 в 12:40)   письмо автору
 
   для: Sfinks   (17.02.2012 в 12:25)
 

if (navigator.userAgent.indexOf ('MSIE') > 0) alert (y [i].currentStyle.width);
else alert (document.defaultView.getComputedStyle (y [i], null).getPropertyValue ('width'));

  Ответить  
 
 автор: Sfinks   (17.02.2012 в 13:32)   письмо автору
 
   для: ЯСА   (17.02.2012 в 12:40)
 

ЖЭСТЬ! =(((((
А где справочник найти по подобным различиям?
____
Работает, конечно. Спасибо!

  Ответить  
 
 автор: cheops   (17.02.2012 в 14:39)   письмо автору
 
   для: Sfinks   (17.02.2012 в 13:32)
 

>А где справочник найти по подобным различиям?
Из-за наличия библиотек вроде jQuery, которые сглаживают различия браузеров сейчас даже не очень такие справочники и выпускают... раньше, когда браузеров было по сути два и менялись они с частотой 2-3 года их еще выпускали, а сейчас когда их пяток и меняются они раз в пол года, все переползают на jQuery.

  Ответить  
 
 автор: Sfinks   (17.02.2012 в 15:11)   письмо автору
 
   для: cheops   (17.02.2012 в 14:39)
 

Мило.
Т.е. можно с JS и не начинать разбираться? Сразу переходить в jQuery и тупо юзать не вдаваясь в подробности? Ведь на сколько я понимаю jQuery - это что-то типа класса-надстройки над JS?
Тогда может подскажите хороший самоучитель для совсем начинающих, типа как у вас тут Учебник ПХП?

  Ответить  
 
 автор: cheops   (17.02.2012 в 15:54)   письмо автору
 
   для: Sfinks   (17.02.2012 в 15:11)
 

>Т.е. можно с JS и не начинать разбираться?
Ну зависит от ваших потребностей, я бы стал разбираться. Вообще лучше знать и JavaScript и jQuery - в реальной работе потребуется оба стиля, тем более jQuery - это JavaScript-библиотека, в нем может быть сложно разобраться если уж совсем JavaScript не знать. Язык далеко не простой, с элементами функционального программирования.

>Ведь на сколько я понимаю jQuery - это что-то типа класса-надстройки над JS?
Это JavaScript-библиотека, обертка. Упор в ней направлен на то, что вам приходится меньше иметь дела с абстрактной моделью документа "в голове" конкретного браузера, а больше с реальной разметкой, которую видите глзами. Вы отбираете элементы, составляя CSS 3 (sic!) выражения и применяете действия (изменить CSS-свойства, добавить элементы, повесить обработчики и т.п.) к ним, хоть к одному элементу, хоть сразу к массе - без всяких циклов, как это и принято в CSS. Т.е. вы получаете в руки виртуальный браузер с поддержкой CSS 3, а библиотека сама заботится о том, чтобы все ваши действия корректно работали во всех современных браузерах, включая IE 6.0. Минус - вам нужно к странице прикрепить здоровую JS-библиотеку, чуть не 100Кб (умельцы умудряются прикреплять еще и расширений мегабайта на три). Плюс - вы можете просто забыть о существовании различий браузеров как о страшном сне и можете начинать использовать свои знания CSS 3 на практике и с пользой. Ну и мелочи, например, она предоставляет методы вроде in_array() для проверки существования элемента в массиве или data() для хранения данных (библиотека сама выбирает либо cookie, либо хранилище в зависимости от возможностей текущего браузера). Microsoft просто заявляет: у нас тут с IE чего-то не заладилось, самим IE 6 надоел как грязь - ждать не дождемся, когда его использовать перестанут, поэтому рекомендуем разработчикам пользоваться jQuery.

Книг хороших можно сказать что нет, у меня стойкое желание переписать любую прочитанную книгу по jQuery. Однако, в первую очередь следует обратить внимание на jQuery. Подробное руководство по продвинутому JavaScript. После неё можно вполне комфортно читать официальное руководство (а читать его стоит, постоянно что-то новое появляется - в этом плане не удобно, jQuery находится в стадии большого взрыва, как PHP лет 5-7 назад).

  Ответить  
 
 автор: Sfinks   (17.02.2012 в 17:16)   письмо автору
 
   для: cheops   (17.02.2012 в 15:54)
 

Спасибо за книгу, по возможности приобрету обязательно. Хотя с куда большим удовольствием приобрел бы книгу написанную вами. Книга это хорошо, но медленно! А мне нужно взять и пользоваться. Ну может пол дня почитать, и пользоваться. С поисками нужных функций, спотыканиями, переспрашиваниями тут на форуме, но писать. Поэтому я имел ввиду ОНЛАЙН самоучитель, типа вашего Учебника PHP. Я им тогда начал пользоваться не имея ни малейшего представления ВООБЩЕ О WEB-программировани и внутренностях сети. Ни протоколов, ни форматов передачи данных, НИЧЕГО ВООБЩЕ! Поэтому смею думать, что сейчас уж, имея такой справочник, с каким-то там jQuery )) как-нибудь справился бы ))))

> вполне комфортно читать официальное руководство
И на него тоже ссылочка не помешала бы =) Я такие вещи люблю =) CSS2, например изучал чисто по спецификации с W3C на английском )

  Ответить  
 
 автор: cheops   (17.02.2012 в 17:36)   письмо автору
 
   для: Sfinks   (17.02.2012 в 17:16)
 

CHM-справочник по jQuery можно взять тут http://charupload.wordpress.com/2007/12/07/jquery-documentation-chm/. При изучении онлайн наверное лучше всего начать с учебных пособий на официальном сайте http://docs.jquery.com/Tutorials.

  Ответить  
 
 автор: Sfinks   (17.02.2012 в 17:48)   письмо автору
 
   для: cheops   (17.02.2012 в 17:36)
 

Во! То что надо! Спасибо =) Ныряю =)

  Ответить  
 
 автор: Sfinks   (17.02.2012 в 14:38)   письмо автору
 
   для: ЯСА   (17.02.2012 в 12:40)
 

И еще вопрос на эту же тему:
в IE9 появился document.defaultView, поэтому в нем нужно вторую строку использовать. А в более ранних первую. Как разделить?

  Ответить  
 
 автор: 0987654321   (18.02.2012 в 04:01)
 
   для: Sfinks   (17.02.2012 в 14:38)
 

currentStyle поддерживается и в 9-й версии.
Поэтому ничего "разделять" не требуется.

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования