Исправим это!

Рассмотрим сам код:

$(".chimg").click(function () {
var img = $(this).find("img");
var hid = $(this).find("input");
var src = img.attr("src");
var tmp = hid.val();
$(this).fadeOut("slow", function () {
img.attr("src", tmp);
});
$(this).fadeIn("slow");
hid.val(src);
});

Код html для смены картинок:

<p class="chimg"><img src="1.gif" border="0" alt="" />
<input type="hidden" value="2.gif" /></p>

Немного пояснений. На все элементы с классом chimg «навешивается» обработчик click (в нашем примере это <p>). Теперь при нажатии на такой элемент ищется img (наша картинка) и скрытое поле hidden (где мы храним путь к второй картинке). Далее в переменные src и tmp мы сохраняем путь текущей видимой картинки и путь к картинке которую нужно отобразить. Затем запускается эффект fadeOut который плавно скрывает картинку после чего перезаписывает ее путь на путь к новой с ранее сохраненной переменной и запускается эффект fadeIn который плавно показывает уже новую картинку и в скрытое поле hidden заносим путь старой картинки для дальнейшего использования.

p.s. Простите, если пояснение вышло уж сильно дотошным…

Проще, как всегда посмотреть пример «Плавной смены картинок в нескольких местах»

Для наглядной демонстрации приведем два элемента <select>: select1 с фруктами и select2 с месяцами.

Рассмотрим список элементов select1:

<select id="select1" multiple="multiple">
<option>Апельсин</option>
<option>Мандарин</option>
<option selected="selected">Яблоко</option>
<option>Груша</option>
<option selected="selected">Вишня</option>
</select>

На select1 навешиваем обработчик событий OnChange с помощью jQuery:

 $(function () {
$("#select1").change(function () {
chek_option(this,'#rez1');
}).change();
});

Который при изменении select1 будет вызывать внешнюю функцию chek_option и передавать ей два параметра: this - ссылка на наш объект, в данном случае это select1, и второй параметр это id контейнера в который выводить результат.

А вот и наша функция:

function chek_option(item,name) {
var str = "";
$(item.children).each(function () {
if(this.selected) str += $(this).val() + " ";
});
$(name).html('Выбран элемент: ' + str);
}

Суть ее работы очень проста, получаем объект, находим всех его потомков (в данном случае это элементы option) и проверяем, если элемент выбран, то заносим его в переменную. После чего выводим переменную в контейнер, id которого мы передали.

Ну а на select2 навешиваем обработчик событий OnChange с помощью атрибута HTML:

<select id="select2" onchange="chek_option(this,'#rez2')" multiple="multiple">
<option>Март</option>
<option>Апрель</option>
<option selected="selected">Май</option>
<option>Август</option>
<option selected="selected">Январь</option>
</select>

Который также при изменении select2 будет вызывать туже функцию chek_option и передавать ей те же два параметра.

По сути, эти два обработчика работают одинаково, основное отличие лишь в том, что после загрузки страницы, благодаря функции jQuery change() один раз запускается событие на select1, по этому сразу и видно результат выбора элементов.

Если убрать функцию .change() строка 4, то работа двух представленных обработчиков OnChange будет одинаковой.

Иногда это полезно. А иногда нет смысла подгружать целую библиотеку jQuery. Решать Вам!

Пример события OnChange HTML и jQuery

Например, у нас есть несколько картинок с одинаковым классом.

<img class="myimg" alt=" " src="1.png" width="95" height="95"/>
<img class="myimg" alt=" " src="2.png" width="95" height="95"/>
<img class="myimg" alt=" " src="3.png" width="95" height="95"/>
<img class="myimg" alt=" " src="4.png" width="95" height="95"/>

При наведении мышки на одну из этих картинок она должна, немного, увеличится, а остальные уменьшиться.

Для решения этой задачки в jQuery можно написать следующее:

var imgid;
$(".myimg").mouseenter(function(){
imgid = this.id;
$(".myimg").each(function(){
if(this.id==imgid) $(this).stop(false,true).animate({width: "100px",height: '100px'}, 300 );
else $(this).stop(false,true).animate({width: "90px",height: '90px'}, 300 );
});
});

В результате, при наведении мышки на картинку, мы сохраняем ее id во временную переменную и затем циклом проходим по всем картинкам с классом myimg. Если текущий id картинки в цикле равен id который во временной переменной то увеличиваем размеры картинки, иначе – уменьшаем.

Одним из достоинств есть его вес в упакованном виде - всего 2кб.

Подключаем так:

<script src="jquery.pngFix.js" type="text/javascript"></script>

И используем на страничке так:

 <script type="text/javascript">
$(document).ready(function(){
$(document).pngFix();
});

После этого png картинки в IE начнут отображаться корректно.

Например, у нас имеется простенький <select id=”my_select” name=”my_select”> с id=”my_select”

<select id="my_select" name="my_select">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>

1) Самое простое – получить значение выбранного элемента

$("#my_select option:selected").val();
сокращенно:
$("#my_select :selected").val();
или:
$("select#my_select").val();

2) Получаем текст того же выбранного элемента

$("#my_select :selected").html();
или:
$("#my_select :selected").text();

3) Сделать <select> недоступным

$("#my_select").attr("disabled","disabled");

4) Разблокировать <select>

$("#my_select").attr("disabled","");

5) Удалить выбранный элемент

$("#my_select :selected").remove();

6) Удалить первый элемент

$("#my_select :first").remove();

7) Удалить последний элемент

$("#my_select :last").remove();

8) Удалить элемент, у которого value='2'

$("#my_select option[value='2']"). remove();
сокращенно:
$("#my_select [value='2']"). remove();

9) Очистить весь список <select>

$("#my_select").empty();

10) Перебрать все элементы списка <select>

$('#my_select option').each(function(){
alert(this.text);
});

11) Сделать выбранным последний элемент

$("#my_select :last").attr("selected", "selected");

12) Сделать выбранным второй элемент

$("#my_select :nth-child(2)").attr("selected", "selected");

13) Сделать выбранным элемент, содержащий текст 'two'

$("#my_select :contains('two')").attr("selected", "selected");
или:
$("#my_select").find("option:contains('two')").attr("selected", "selected");
или только первое вхождение:
$("#my_select :contains('two')").first().attr("selected", "selected");
или:
$("#my_select").find("option:contains('two')").first().attr("selected", "selected");

14) Сделать выбранным элемент, value которого = 2

$("#my_select [value='2']").attr("selected", "selected");

15) Добавить элемент в начало списка <select>

$("#my_select").prepend( $('<option value="0">zero</option>'));

16) Добавить элемент в конец списка <select>

$("#my_select").append( $('<option value="4">four</option>'));

17) Добавить новый элемент после второго

$("#my_select option:nth-child(2)").after($('<option value="22">twotwo</option>'));

18) Количество элементов option в списке <select>

$("select[id=my_select] option").size();

19) Проверяем, выбран ли элемент в списке <select>

if($("#my_select").val())

20) Сделать все элементы в списке <select> не выбранными

$('#my_select option:selected').each(function(){
this.selected=false;
});

На этом пока все.

Если что-то не упомянул, пишите в комментариях!

Подключаем jQuery и плагин со стилями:

<script src="js/jquery.js" type="text/javascript"></script> <script src="js/colorpicker.js" type="text/javascript"></script>

Скрипт:

$(document).ready(function(){

$('#colorpickerHolder').ColorPicker({flat: true});

$('#colorpickerField').ColorPicker({
onSubmit: function(hsb, hex, rgb) {
$('#colorpickerField').val(hex);
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
}
})
.bind('keyup', function(){
$(this).ColorPickerSetColor(this.value);
});

$('#colorSelector').ColorPicker({
color: '#0000ff',
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
$('#colorSelector div').css('backgroundColor', '#' + hex);
}

});

Строка 02 – обычный вызов палитры в DIV контейнере.
Строка 03-13 – привязка к элементу input по id c обработчиками для задания выбранного цвета с value.
Строка 14-26 – вывод в контейнере DIV c эффектами onHide и onShow

HTML:

<div id="colorpickerHolder"></div>

<input id="colorpickerField" type="text" value="00ff00" />

<div id="colorSelector"></div>

Для корректной работы в IE предлагаю подключать плагин прозрачности png файлов для jQuery (о нем чуть позже).

Посмотреть пример работы палитры цветов.

Скачать пример.

$('img').error(function() {
$(this).remove();
});

Удаление таким образом не загрузившихся картинок избавит вас от лишних неудобств!

Но, к сожалению, этот метод .live() плохо "дружит" с Ajax и не всегда работает корректно. По этому приходится использовать один замечательный плагин Live Query.

Преимущество Live Query в том, что он при обновлении дерева DOM автоматически связывает элементы с обработчиком событий и нормально работает с новыми DOM элементами, полученными через Ajax.

Подключается плагин как и все:

<script type="text/javascript" src="jquery.livequery.js"></script>

Использовать тоже не сложно.
Например, нам нужно получить value пункта в списке <OPTION> из контейнера <SELECT> с id=”myselect”, где сам список подгружается с помощью Ajax.

Делается это так:

$("#myselect").livequery(function(){
$(this).change(function() {
alert(this.value);
});
});

Или более изящней:

$("#myselect").livequery("change", function() {
alert(this.value);
});

В результате при выборе одного пункта из списка <SELECT> появится сообщение с его значением value.

Пример 2. При наведении курсора (mouseover) на элемент с id=”alert” вывести сообщение: "Получил курсор!". А после того, как уберем курсор (mouseout), вывести: "Потерял."

Решение:

$("#alert").livequery(function(){
$(this).hover(function() {
alert("Получил курсор!");
}, function() {
alert("Потерял.");
});
});

Так что если у вас не работает onchange в Internet Explorer (IE) или какие-то проблемы с элементами полученными через Ajax, пользуйтесь Live Query!

Посмотреть пример работы Live Query.

Скачать пример с плагинов Live Query.

Плагин умеет прокручивать текст как по нажатию на стрелочки, по вращению скролла так и по нажатию клавиши Enter.

Подключаем:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.scrollable.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>

Сам скрипт:

<script type="text/javascript">
jQuery(function( $ ){
var emptyLinkTarget = (window.opera) ? "#" : "javascript:function(){return}";
$('.scrollable.js').scrollable({
size:3,
horizontal:false,
duration:1000,
items:'#items',
prev:'.prev',
next:'.next'
});
});
</script>

где строка 03 - хак для оперы, строка 05 - количество выводимых новостей, строка 06 - длительность, 07 - id контейнера <ol>, 08 и 09 - названия классов кнопок прокрутки.

Сам контейнер с новостями:

<div class="scrollable js">
<a class="more-link" href="#">Еще новости</a>
<ol>
<li><div><a href="#">….</a></div></li>
....
<li><div><a href="#">….</a></div></li>
</ol>
</div>

Более подробно смотрите пример прокрутки новостей на jQuery.

Или скачайте архив с примером.

При наведении курсора на DIV (в данном примере) c классом "opacity", плавно меняется свойство стиля opacity с 0,7 на 0,9. Все достаточно просто:

<script type="text/javascript">
$(document).ready(function() {
var opacity = 0.7, toOpacity = 0.9, duration = 250;
$('.opacity').css('opacity',opacity).hover(function() {
$(this).fadeTo(duration,toOpacity);
}, function() {
$(this).fadeTo(duration,opacity);
}
);
});
</script>

И походу в коде:

<div style="opacity: 0.7;" class="opacity">
…
</div>

Более подробно смотрите пример плавного изменения прозрачности фона на jQuery.

Или скачайте архив с примером.