Отправляет email-рассылки с помощью сервиса Sendsay

Как сделать популярный сайт.

  Все выпуски  

Как сделать популярный сайт. ~~~~~ Оживлялка для объектов ~~~~~


Добрый день,
уважаемые читатели рассылки
"Как сделать популярный сайт"
Выпуск 178.
~~~~~ Оживлялка для объектов ~~~~~
Внимание! Если ваша почтовая программа не отображает корректно рисунки или тексты, то
Нажмите здесь :: http://kocby.ru/post/webmaster/text/issue178.html



Оживлялка для объектов

Если Вы не популярны,
Значит, Вас как бы и не существует...



Сделано в kocby.ru
Оживлялка для объектов - так я назвал функцию .animate из библиотеки jQuery. Основной смысл использования этой функции на данном занятии - повторная проверка работоспособности библиотеки jQuery на вашем сайте, в вашем браузере, на вашей рабочей станции. Небольшое пояснение о том, как надо излагать свои проблемы, чтобы вас поняли и смогли помочь.
© Перепечатка разрешается с установкой ссылки на ресурс http://kocby.ru/.



Уважаемые дамы и господа!

В нашем последнем выпуске...

Библиотека "jQuery" для "JavaScript" :: http://kocby.ru/post/webmaster/text/issue177.html

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

Вот как раз вопрос по прошлому выпуску.

~~~~~~~~~~~~

квери
не работает нив рассылке ни на сайте

~~~~~~~~~~~~

Прочитал я это письмо и задумался. Понял я только, что квери = jQuery.

Остальной текст вызвал массу вопросов.

Во-первых, в самой рассылке никаких работающих скриптов быть не может. В рассылке могут быть только ссылки на примеры, которые выложены на сайт.

Во-вторых, проблему следует описывать ясно и подробно.

Примерно так.

~~~~~~~~~~~~

На страничке (и дается ссылка на страничку) вы описываете пример использования jQuery, который находится здесь (и ссылка на пример).

Вы утверждаете, что пример должен отработать так-то и так-то (цитируется, что там утверждает автор примера).

Но на самом деле на моей рабочей станции этот пример отработал вот так и вот так (описывается, как отработал пример).

~~~~~~~~~~~~

И даются ссылки на скриншоты, либо эти скриншоты вкладываются в письмо.

Важное примечание. Примеры, как правило, лично я тестирую на двух браузерах: IE и FireFox. Я понимаю, что у нас есть еще Opera, Chrom, а также множество других браузеров, но нельзя обнять всех подряд, потому предлагаю ограничиться двумя упомянутыми. Наверное, этого вполне достаточно.

А сегодня, давайте, чтобы закрепить предыдущий урок, а также выяснить наверняка, работает ли ок в вашем браузере на вашей рабочей станции библиотека jQuery, выполним еще один контрольный пример, немного более сложный и наглядный.

А заодно посмотрим в работе одну из функций библиотеки jQuery - .animate (оживлялка для объектов).

Example: The first button shows how an unqueued animation works. It expands the div out to 90% width while the font-size is increasing. Once the font-size change is complete, the border animation will begin. The second button starts a traditional chained animation, where each animation will start once the previous animation on the element has completed.

Оригинальный текст к примеру немного неточен. На самом деле первая кнопка "Animate Block1" расширяет объект 1 на 90% ширины окна, в то время, как увеличивается размер фонта. Как только увеличение размера фонта заканчивается, начинается анимация границы (увеличение ширины с одной стороны). Подобный эффект делает вторая кнопка "Animate Block2" по отношению к нижнему объекту. Кнопка "Animate Both" запускает классическую цепную анимацию, когда каждая анимация стартует после окончания предыдущей. Кнопка "Reset" возвращает объекты в исходное состояние.

---------------------------------- начало кода примера ----------------------------------

<!DOCTYPE html>
<html>
<head>
  <style>
div {
  background-color:#bca;
  width:200px;
  height:1.1em;
  text-align:center;
  border:2px solid green;
  margin:3px;
  font-size:14px;
}
button {
  font-size:14px;
}
</style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  <button id="go1">&raquo; Animate Block1</button>
<button id="go2">&raquo; Animate Block2</button>
<button id="go3">&raquo; Animate Both</button>
 
<button id="go4">&raquo; Reset</button>
<div id="block1">Block1</div>
<div id="block2">Block2</div>
<script>
 
$( "#go1" ).click(function(){
  $( "#block1" ).animate( { width: "90%" }, { queue: false, duration: 3000 })
     .animate({ fontSize: "24px" }, 1500 )
     .animate({ borderRightWidth: "15px" }, 1500 );
});
 
$( "#go2" ).click(function(){
  $( "#block2" ).animate({ width: "90%" }, 1000 )
     .animate({ fontSize: "24px" }, 1000 )
     .animate({ borderLeftWidth: "15px" }, 1000 );
});
 
$( "#go3" ).click(function(){
  $( "#go1" ).add( "#go2" ).click();
});
 
$( "#go4" ).click(function(){
  $( "div" ).css({ width: "", fontSize: "", borderWidth: "" });
});
 
</script>
 
</body>
</html>


---------------------------------- конец кода примера ----------------------------------

Я немного изменил код выше (хотя особой нужды в этом не было).

Вот эту строчку:
http://code.jquery.com/jquery-1.5.js

Заменил на эту:
http://kocby.ru/post/webmaster/jquery/lib/jquery-1.5.min.js

И еще два тега подправил (добавил) следующим образом:
<html lang="ru">
<meta charset="utf-8">

Мою версию этого теста вы можете смотреть здесь:
http://kocby.ru/post/webmaster/jquery/test04/

Начальное положение:

Начальное положение - не видно? Нажмите здесь!

Положение после нажатия кнопки "Animate Both":

Положение после нажатия кнопки "Animate 

Both" - не видно? Нажмите здесь!

Сообщайте, насколько успешно удалось повторить все указанные шаги на своем сайте и на следующем занятии пойдем дальше.

Вот и все на сегодня. Приглашаю всех желающих стать успешным самому и сделать более успешной систему Матрица путем участия в ее бета тестировании. Кстати, по состоянию на сейчас Матрицу мучают: 200 альфа тестеров и 293 бета тестер.

Спасибо за внимание.

 
~~~~~ Обратная связь ~~~~~
 

У вас есть два способа реагирования на данный выпуск.

На форуме...

"Как сделать популярный сайт" на форуме :: http://kocby.ru/b/viewforum.php?f=5

Написать лично мне.

Данные для связи на контактной страничке :: http://kocby.ru/contact.html

Ниже дан мой работающий емейл, но доставка через форму на указанном урле надежнее, ее вероятность является почти 100%.

::::::::::::::::::::::::
::: Vladimir Abramov :::
::: va@sumat.ru ::::::::
::: http://sumat.ru/ :::
::::::::::::::::::::::::


### Конец выпуска.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Информационная безопасность Информация, как сделать популярный сайт Как сделать популярный сайт. Думаем. Пробуем. Критикуем. 

Анализируем. Джава. Ява. Java. Уроки Фотошопа онлайн
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~



В избранное