Спонсор поста:

В этом блоге уже был пост про скругленные углы с jQuery, но есть и другой вариант.
Читать полностью »

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

Спонсор поста:Как быстро продать квартиру в
Москве со скидкой.

Источник.

Пример.

Я могу решить эту проблему в пять строк!

<img src="img/logo.gif" alt="Detached Designs" id="image">
<a href="#" id="scroll">Scroll</a>

Это наш пример html. Тут просто картинка и тег-якорь. Теперь перейдем к jQuery.

$(document).ready(function()
 {
  $("#scroll").click(function()
 {
 var theLeftAmount = $("#image").css("left");
 var theNumber = parseFloat(theLeftAmount, 10);
 theNumber += 25;
 var amountToShift = theNumber + "px";
 $("#image").css("left", amountToShift); });
 });

Теперь разберем код.

$(document).ready(function()
 {
  $("#scroll").click(function()

Когда документ готов, мы находим тег с id=”scroll” и вызываем функцию, когда по нему кликают.

var theLeftAmount = $("#image").css("left");
var theNumber = parseFloat(theLeftAmount, 10);
theNumber += 25;
var amountToShift = theNumber + "px";

Здесь мы делаем несколько переменных. Чтобы сдвинуть картинку, мы будем менять свойство “left” в CSS. Переменная “theLeftAmount” будет хранить текущее значение. Если в CSS задано “20px”, “theLeftAmount” будет эквивалентно “20px”.

Переменная “theNumber” хранит число без “px” в конце.

Следующим шагом мы добавим к номеру 25px. Мы создаем новую переменную “amountToShift” и помещаем значение, эквивалентное нашему “theNumber” плюс еденицу измерения “px”.

$("#image").css("left", amountToShift); });

Наконец мы меняем свойство нашей картинки на новое значение (amountToShift).

Обратите внимание, что все примеры, использующие css, добавляют стили непосредственно в документ. Я делаю это, чтобы было проще. В идеале Вы хотели бы добавлять стили напрямую и затем ссылаться на них, используя “addClass”.

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

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

Оригинал.

Пример.

Это очень легко! Давайте сделаем 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”).

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

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

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

Оригинал.

Пример.

На самом деле это очень просто. Для начала сделаем короткий 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 точкам и изменяем текст параграфа.

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

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

Оригинал

Как я могу увеличить или уменьшить текст с 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. Очень просто, правда?

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

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

Оригинал: 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”.

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

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

Гарантийный ремонт ноутбуков, ремонт мониторов в сервисном центре “Стаханов”

Источник

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

Это скользящее сверху меню создано с помощью jQuery. Меню работает с помощью кнопок “Открыть” и “Закрыть”, которые могут быть любым тегом с заданным классом.

Вы также можете использовать его как информационное окно, диалог входа и по-другому.

Посмотрите пример, как работает меню.

Делаем? Читать полностью »

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

Искал одно, но нашел другое. Как всегда =)

Плагин Drop Shadow требует в зависимости jquery.dimensions.js и позволяет делать тени почти ко всему.

Документация на плагин находится в самом тексте скрипта, что я считаю не очень правильно, т.к. увеличивает размер.
Использование очень простое:

$(селектор).dropShadow(опции);

Опции могут быть следующими:
left - смещение тени по горизонтали
top - смещение тени по вертикали
blur - задает размытие. Большие значения не интересны.
color - цвет тени
opacity - затененность
swap - меняет цвет предмета, от которого тень. Не понял предназначения данного элемента.

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

Так же можно перерисовать тень и убрать.
Например, перерисовать:

$(selector).redrawShadow();

или выключить:

$(selector).removeShadow();

Еще можно получить существующий id тени для дальнейших операций с ней:

$(selector).shadowId();

Пример использования опций, взятый с сайта автора:

$(".Title span").dropShadow({left: 12, top: 15, blur: 4, opacity: 0.4});

Домашняя страница, одновременно демонстрация возможностей: http://eyebulb.com/dropshadow/
Скачать плагин: jquery.dropshadow.js
Необходимая зависимость: jquery.dimensions.js

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

Как я уже писал раньше, сайт mnogonot.ru будет полезен читателям для обучения.

Я знаю три варианта и об одном из них сегодня расскажу:

У меня есть две формы на сайте. Одна “Добавить сайт”, вторая “Написать автору”. Возьму в качестве примера форму по добавлению сайта.
Читать полностью »

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

Пример, как определить систему с помощью javascript:

// смотрим какая система стоит                                                 
  usersystem = navigator.platform;                                              
 // определяем какая система                                                    
  x = usersystem.indexOf(' '); // определяем пробел                             
  if(x!=-1) {                                                                   
   l = usersystem.length;                                                       
   usersystem = usersystem.substr(1, x-1); // вырезаем нужную часть строки      
  }                                                                             
 // end: определили какая система

В usersystem у нас будет определение системы. Например, для Linux мы получим “inux”.

А вот как это можно сделать с помощью jQuery:

var linux = $.browser.linux(); // Linux
var mac   = $.browser.mac();   // Mac OS
var win   = $.browser.win();   // Microsoft Windows

Не забудьте подключить маленький плагин browser.

Правда, так гораздо проще?

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