Каждому своё… [jQuery, Linux, Perl]

Как сделать ссылку “Прочитать дальше”, которая развернет оставшийся текст.

Спонсор поста: Круглые светильники из хрусталя.

Оригинал.

Пример.

Это очень легко! Давайте сделаем html пример.

<p>
 This is some text. This is some text. This is some text. This is some text. This
 is some text. This is some text. This is some text. This is some text. This is some
 text. This is some text. This is some text. <span class="readMore">Read More</span>
</p>
<p>
 This is some text. This is some text. This is some text. This is some text. This
 is some text. This is some text. This is some text. This is some text. This is some
 text. This is some text. This is some text. This is some text. This is some text.
</p>

Это только некоторый текст с двумя параграфами. Мы также имеем span с классом “readMore”. Когда по span кликнули, мы должны его убрать.

$(document).ready(function()
 {
  $('p:eq(1)').hide();
  $('span.readMore').css({"cursor" : "pointer", "color" : "blue", "font-size" : ".8em"}).click(function()
 {
  $('p:eq(1)').fadeIn("slow");
  $(this).fadeOut("normal");
});
});

$(document).ready(function()
{
$(‘p:eq(1)’).hide();
$(‘span.readMore’).css({“cursor” : “pointer”, “color” : “blue”, “font-size” : “.8em”}).click(function()
{
$(‘p:eq(1)’).fadeIn(“slow”);
$(this).fadeOut(“normal”);
});
});

Здесь мы собираемся спрятать второй параграф (p:eq(1)). Помните, что javascript использует 0 как первое число. Соответсвенно “1” будет эквивалентно второму параграфу.

$('span.readMore').css({"cursor" : "pointer", "color" : "blue", "font-size" : ".8em"}).click(function()

Следующим шагом задаем span с классом “readMore” некоторый CSS. Мы поменяем курсор на указатель для того, чтобы пользователи могли увидеть, что этот span кликабельный. Далее мы поменяем цвет, чтобы выделить, и немного уменьшим размер текста. Далее запустим функцию, когда кликнут по span.

$('p:eq(1)').fadeIn("slow");
$(this).fadeOut("normal");

Когда кликнут, мы собираемся найти второй параграф и медленно показать его. Затем “this” (span, по которому кликнули) будет “растворяться” в течении 0.4 секунды (“normal”).

Это всё, что надо сделать!

Популярность: 5%

• None Found

31

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

Патрик Форсайт “Делу - время”

Книги Патрика Форсайта:
Руководство по выживанию в компании
Маркетинг в книгоиздании
Консалтинг. Как основать консалтинговое агентство и добиться успеха
Успешные переговоры
Голая правда о… маркетинге
Мастерство продажи

Популярность: 2%

• None Found

Как увеличить картинку, когда на неё кликают

Спонсор поста: Поможем осуществить срочный выкуп квартир.

Оригинал.

Пример.

На самом деле это очень просто. Для начала сделаем короткий html.

<img src="img/logo.gif" alt="Logo" id="image">
 <p>
  Click To Zoom In
 </p>

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

$(document).ready(function()
    {
    $("#image").css("width", "100px");
        $("#image").toggle(function()
            {
                $(this).animate({width: "300px"}, 1000);
                $('p').text("Click To Zoom Out");
                
            }, function(){
                $(this).animate({width: "100px"}, 1000);
                $('p').text("Click To Zoom In");
            });
    });

Шаг за шагом:

$(document).ready(function()
    {
    $("#image").css("width", "100px");

$(document).ready(function()
{
$(“#image”).css(“width”, “100px”);

Когда документ готов, мы задаем ширину элемента с id=”image” равную 100 пикселям.

$("#image").toggle(function()
 {
  $(this).animate({width: "300px"}, 1000);
  $('p').text("Click To Zoom Out");

Когда картинку кликнули, мы запускаем метод toggle. Используя “toggle”, мы можем задать две функции. Первая будет запущена, когда картинку кликнули первый раз. Вторая - когда второй раз кликнули по картинке. Это наилучшее при использовании расширяющихся/уменьшающихся элементов.

Когда картинка кликнута первый раз, мы собираемся взять “this” (картинка, по которой кликнули) и анимировать её. Мы изменим ширину картинки до 300 точек и раздвинем её в течении секунды.

}, function(){
 $(this).animate({width: "100px"}, 1000);
$('p').text("Click To Zoom In");

Когда картинку кликнули во второй раз, мы изменяем ширину картинки назад к 100 точкам и изменяем текст параграфа.

Популярность: 11%

• 3D Анимация в JavaScript
• Как сделать ссылку “Прочитать дальше”, которая развернет оставшийся текст.
• Скользящее сверху меню с jQuery
• Как я могу увеличить или уменьшить текст.
• “Строка всегда наверху”

30

Деловые встречи, переговоры, контакты с другими людьми съедают львиную долю времени большинства руководителей. Вот почему их следует серьезно обдумывать и тщательно планировать.

Патрик Форсайт “Делу - время”

Книги Патрика Форсайта:
Руководство по выживанию в компании
Маркетинг в книгоиздании
Консалтинг. Как основать консалтинговое агентство и добиться успеха
Успешные переговоры
Голая правда о… маркетинге
Мастерство продажи

Популярность: 4%

• None Found

Как я могу увеличить или уменьшить текст.

Спонсор поста: Большие ортопедические матрасы для кроватей.

Оригинал

Как я могу увеличить или уменьшить текст с jQuery?

Посмотрите пример.

Есть несколько путей, которыми вы можете достичь этой цели. Мы покажем только одну. Сначала давайте сделаем простую страничку.

<div>  
    <p id="text">  
     This is some text. This is some text. This is some text. This is some text. This  
     is some text. This is some text. This is some text. This is some text. This is some  
     text. This is some text. This is some text. This is some text. This is some text.  
     This is some text. This is some text. This is some text. This is some text. This  
     is some text. This is some text.  
    </p>  
    <a href="#" id="smallerTextLink">Smaller Text</a>  
    <a href="#" id="largerTextLink">Larger Text</a>  
  </div>

Здесь мы сделали некоторый текст и две ссылки. Когда кликаются ссылки, мы смотрим, что текст надо увеличить или уменьшить. Теперь давайте посмотрим на jQuery:

$(document).ready(function()
{
$('a').click(function()
{
    var theElement = $("#text").css("font-size");
    var textSize = parseFloat(theElement, 10);
    var unitOfMeasurement = theElement.slice(-2);

    if ( (this).id == "largerTextLink")
    {
	textSize += 2;
    }
    else
    {
	 textSize -= 2;
    };

    $('p').css("font-size",  textSize + unitOfMeasurement);

    return false;
    });
});

Как всегда рассмотрим код шаг за шагом.

$(document).ready(function()
        {
            $('a').click(function()

Когда документ готов, мы смотрим на все теги “а” и запускаем функцию.

var theElement = $("#text").css("font-size");
var textSize = parseFloat(theElement, 10);
var unitOfMeasurement = theElement.slice(-2);

Здесь мы сделали несколько вариантов. “theElement” найдет параграф с id=”text” и возьмет его размер шрифта из CSS. Когда мы добавляем свойство в круглых скобках, мы говорим jQuery получить размер шрифта параграфа. Этот параметр может быть возвращен как номером, так и параметром (то есть 20px). Нам необходимо их разделить.

Переменная “textSize” использует метод “parseFloat”. Этот метод просмотрит все значения и уберет нецифровые символы. В этом случае мы разбираем свойство font-size, чтобы избавиться от “px”. “10” обозначает, что мы работаем с базовым шрифтом десятого размера.

“unitOfMeasurement” берет едеиницу измерения шрифта путем получения последних двух символов (px). Нам это необходимо, чтобы добавить новое значение.

if ( (this).id == "largerTextLink")
{
	textSize += 2;
}
else
{
	textSize -= 2;
};

This if statement is checking to whether the anchor tag that was clicked has an id of “largerTextLink”. If it does, then we’re going to add 2px to the textSize. This is the same as writing - textSize = textSize + 2 -. If it is not, the user must have clicked the “smallerTextLink” anchor tag. In that case, we’ll decrease the textSize by 2px.

Это выражение проверяет, был ли кликнут тэг с id=”largerTextLink”. Если был, тогда мы собираемся добавить 2px к textSize. Если нет, значит пользователь кликнул “smallerTextLink”. В этом случае мы уменьшаем textSize на 2px.

$('p').css("font-size",  textSize + unitOfMeasurement);
return false;

Наконец мы собираемся задать параграфу новое значение. Font-size будет задано новое значение textSize плюс unitOfMeasurement. Очень просто, правда?

Популярность: 15%

• Сброс CSS
• jQuery UI
• Что такое jQuery?
• Вышла новая версия jQuery - 1.2
• Новая версия jQuery - 1.2.2

29

Управлять временем не научишься до тех пор, пока не станешь правильно и грамотно классифицировать вид своих занятий.

Патрик Форсайт “Делу - время”

Книги Патрика Форсайта:
Руководство по выживанию в компании
Маркетинг в книгоиздании
Консалтинг. Как основать консалтинговое агентство и добиться успеха
Успешные переговоры
Голая правда о… маркетинге
Мастерство продажи

Популярность: 6%

• None Found

Солянка апокалиптическая

Что-то почитал я Давыдова, послушал РБК и всерьез задумался о кризисе. Точнее их два, но один связан с другим непосредственно.
Первый кризис - экономический.
Это будет последствия всемирного кризиса, который начался в США, как в самой гнилой стране =). Об экономическом кризисе хорошо пишет Дмитрий Давыдов.
Второй кризис - энергетический.
Нефть заканчивается. Газ тоже закончится. Но альтернативной энергии на всех не хватит. Россия мало строит ветряков, солнечных электростанций и прочее. (Интересно, а вообще хоть что-нибудь строит?)
А Вы знаете, что еще в начале автомобилестроения человечество выбрало простой, но смертельный путь - бензиновый двигатель? Когда-то на машинах были паровые двигатели, бензиновые и электрические. Ну от паровых отказались по понятным причинам. А вот от электрических отказались только из-за того, что в те времена не было развито электроснабжение. В результате мы имеем загразненную атмосферу, заканчивающуюся нефть, землетрясения из-за движения земной коры. Глобальное потепление и наводнения и т.д. и т.п.
Когда-то читал книжку. Не помню, как называется и кто автор. В ней параллельные миры находились на параболе. И героям надо было попасть на другую ветку, надо было пройти все миры. И вот они попали в мир, где природа агонизировала из-за того, что люди там пошли по пути развития паровых двигателей, работающих на угле. А уголь один из самых вредных природных ископаемых, т.к. при его горении сжигается больше всего кислорода.

Как выжить в кризисы? У меня есть только одна мысль: поиметь домик в теплой части суши с кусочком земли. Некоторые говорят, что лучше в Восточной Сибири, но я думаю о районах южнее. Дом поможет спастить от некоторой непогоды. Земля сможет прокормить. Но не все могут работать на земле. Мы привыкли сидеть в офисах, давить кнопки. Добывать продукты в магазинах… Печально =( Те, кто работает на земле, как раз и смогут выжить. Они и будут этим 0,01%, которому гарантируется выживание.

А Вы знаете, что календарь Майа заканчивается в Декабре 2012 года? Сейчас у нас заканчивается “Пятое солнце”. Т.е. пятый этап жизни человечества на земле. Обидно, что мало осталось, а еще столько добрых дел не сделано!
Более подробно о цивилизации Майа можете почитать тут.

Кстати, это последние выходные первого полугодия. Можно подвести итоги, что сделано, а что еще не сделано из плана. Чего добились, а что упустили. Посмотреть, оценить и за оставшееся полугодие доделать, чтобы новый год начать с нового плана успеха.
У меня наметилось глобальное отставание. Но это и понятно. У меня не было опыта содержания маленьких детей. То время, которое раньше тратил на себя, трачу на общение и занятия с сыном.

Мало кто из моих читателей знает обо мне всё. Вот небольшой шанс немного узнать обо мне:

как я бросил курить

.

Чем люди только не увлекаются! Оказывается, даже создают сайты про верблюдов! (О верблюде надо знать всё. Скоро они к нам придут в связи с глобальным потеплением). Вот здесь можно посмотреть фото верблюдов и ознакомиться с их ТТХ =)

Популярность: 8%

• None Found

28

Только те, кто предпринимает абсурдные попытки, смогут достичь невозможного.

Альберт Эйнштейн

Популярность: 8%

• None Found

Загрузка данных с другой страницы с помощью jQuery

Спонсор поста: Частичное окрашивание волос в салоне красоты.

Оригинал: Load Data From Other Pages With jQuery

В этом руководстве мы возьмем данные из одной страницы и отобразим их на другой. Сейчас Вы можете скачать пример и посмотреть в действии.

В этом примере Вы должны сделать две странички. Первая будет называться “loadData.htm” и вторая - “theOtherPage.htm”.

Страница с данными
Для начала сделаем пример данных в нашей странице с названием “theOtherPage.htm”. Ради простоты я сделал список, который содержит мои любимые фильмы.

<ul id="favoriteMovies">
<li style="font-weight: bold; list-style-type: none;">My Favorite Movies</li>
<li>Contact</li>
<li>Shawshank Redemption</li>
<li>Napoleon Dynamite</li>
<li>Back To The Future</li>
<li>The Goonies</li>
<li>Cinderella Man</li>
<li>Apollo 13</li>
</ul>

Здесь нет ничего сложного. Главное - задать у списка id “favoriteMovies”.

Страница для получения данных
Следующим шагом сделаем страницу “loadData.htm”.

<div id="container">
 <a href="#" id="loadData">Click This Link To Load My Favorite Movies</a>
</div>

Это, в некотором роде, наша главная страница. Здесь у нас есть ссылка, которая содержит id “loadData”. Когда пользователь кликает по ссылке, запускается некоторый код, который заберет данные со страницы “theOtherPage.htm”.

jQuery

$(document).ready(function()
 {
  $("#loadData").click(function()
   {
    $(this).text("...One Moment Please...");
     $("#container").append('<div id="favoriteMovies"></div>')
                    .children("#favoriteMovies").hide()
                    .load("theOtherPage.htm ul#favoriteMovies", function()
                     {
                      $("#loadData").remove();
                      $("#favoriteMovies").slideDown("slow");
                     });
   return false;
   });
});

Разберем код сначала: когда документ будет готов, мы находим тег с id равным “loadData”. Затем, когда тэг “кликнули”, мы запускаем функцию. Сначала мы изменим свойство тэга, чтобы сказать пользователю, что информация загружается. Затем мы находим наш “container” и добавляем новый div как его потомка. Мы называем новый div “favoriteMovies”. Далее мы прячем этот див до тех пор, пока данные не загрузятся полностью.

Метод LOAD()
Метод .load загружает данные для нас. Здесь мы определяем в скобках путь. Путь указывает напрямую на страницу “theOtherPage.htm”. Затем находит список с id “favoriteMovies” и забирает эти данные. После загрузки данных вызывается функция. Она просто удаляет тэг, т.к. нам он больше не нужен, и раскрывает новый div “favoriteMovies”.

Вы можете посмотреть пример в действии и скачать пример.

Популярность: 28%

• Небольшая презентация
• Tips: загрузка контента
• jQuery UI
• Один из вариантов сохранять формы с помощью jQuery
• Что такое jQuery?

27

Как бы Вы ни работали с документами, какую бы систему не взяли на вооружение, главное - научиться всё обдумывать заранее. Пусть это войдет у вас в привычку, и Вы никогда не пожалеете об этом.

Патрик Форсайт “Делу - время”

Книги Патрика Форсайта:
Руководство по выживанию в компании
Маркетинг в книгоиздании
Консалтинг. Как основать консалтинговое агентство и добиться успеха
Успешные переговоры
Голая правда о… маркетинге
Мастерство продажи

Популярность: 10%

• None Found