Моя онлайн шпаргалка: jQuery

Показ дописів із міткою jQuery. Показати всі дописи

Scroll для сайта landing page

Сайт типа landing page:

При прокрутке сайта > подсветка меню, при клике на пункт меню > прокрутка до нужного пункта... вижу это как-то так:

HTML:
header
nav.main-nav
a.active
a
a
a
a
a
main
section.class1
section.class2
section.class3
section.class4
section.class5
section.class6
footer

JS:

$(function() {

  $('.main-nav a').click(function() {
    $('.main-nav a').removeClass('active');    var target = $(this.hash);    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');    if (target.length) {
        $('html,body').animate({
            scrollTop: target.offset().top-$('header').height()
        }, 1000);        $(this).addClass('active');        return false;    }
  });

};

$( window ).scroll(function() {
    var winScroll = $(window).scrollTop();
        for(var i = 0; i < $('section').length; i++){
            var coorSection = $('section').eq(i).offset().top - $('header').innerHeight();            if( winScroll > coorSection){
                $('.main-nav a').removeClass('active');                $('.main-nav a').eq(i).addClass('active');            }
        }
});

П.С. header прижат к верху сайта (position:fixed)

Перехват адреса (url) java-script

Задача: вытянуть скриптом параметр какой передается в адресной строке(url) при переходе с другой страницы.

Url содержиться в переменной - location, точнее window.location, и имеет несколько параметов:

window.location.host skifcheg.blogspot.com:80
window.location.hostname skifcheg.blogspot.com
window.location.port 80
window.location.protocol http
window.location.pathname index.php
window.location.href http://skifcheg.blogspot.com:80/index.php#id
window.location.hash #id

Допустим нам нужно параметр id, берем и пишем что то типа var i = window.location.hash;
Но в i записалось " #id" а нам нужно id без решетки. тут поможет функция по обрезанию слов))) их есть несколько, возьмем например substring,

наша i = i.substring(1), и теперь i приняло значения id потому что мы отрезали первый символ, то есть начали записывать со второго символа, например "Вася".substring(1,2) = ас с второго символа по третий включно. всё отрезали.

как сделать многоколоночный текст

Есть два метода, css3 или скрипты
вариант 1:

.block{
  /* к-во колонок */
  column-count: 3;
  -moz-column-count: 3;
  -webkit-column-count: 3;

/* отступы между колонок */
  column-gap: 10px;
  -moz-column-gap: 10px;
  -webkit-column-gap: 10px;

/* ширина колонок */
  column-width: 200px;
  -moz-column-width: 200px;
  -webkit-column-width: 200px;

/* Разделительная линия между колонками */
  column-rule:  1px solid black;
  -moz-column-rule:  1px solid black;
  -webkit-column-rule:  1px solid black;
}

вариант 2:
Например вот такой скриптик: Columnizer jQuery Plugin

Адаптивная верстка (часть 1)

Расстановка блоков по всей ширине Метод построен, на изменении размера блока, можно также переделать что бы блоки были одной ширины а менялись отступы между блоками...

нтмл:


<ul class="column">
   <!-- повторяющийся элемент списка -->
   <li>
     <div class="block">
     <!-- контент -->
     </div>
   </li>
   <!-- конец повторяющегося элемента -->
</ul>

Цсс:


ul.column{
   width: 100%;
   padding: 0;
   margin: 10px 0;
   list-style: none;
}
 ul.column li {
   float: left;
   width: 200px; /* ширина колонки по умолчанию */
   padding: 0;
   margin: 5px 0;
   display: inline;
}
.block {
   height: 355px;
   font-size: 1em;
   margin-right: 10px; /* отступ между колонками */
   padding: 20px;
   background: #e3e1d5;
}

Скрипт:


function smartColumns() { //функция, подсчитывающая ширину колонок

   //сброс ширины строки до 100% после изменения размера экрана
   $("ul.column").css({ 'width' : "100%"});

   var colWrap = $("ul.column").width(); //определяем ширину строки
   var colNum = Math.floor(colWrap / 200); //определяем, сколько столбцов в 200px вместится в строку и округляем число до целого
   var colFixed = Math.floor(colWrap / colNum); //ширину строки делим на количество столбцов, округляем до целого числа, в результате получаем точную скорректированную ширину колонки

   $("ul.column").css({ 'width' : colWrap}); //ставим точную ширину строки в пикселях вместо использования % - это предотвратит возможные баги в разных браузерах при различных разрешениях экрана
   $("ul.column li").css({ 'width' : colFixed}); //ставим точную ширину измененным столбцам

}

 smartColumns(); //запускаем функцию после загрузки страницы

 $(window).resize(function () { //запускаем функцию после каждого изменения размера экрана
   smartColumns();
});

П.С. лень было набирать поэтому скопировал части кода тут

jQuery фиксировать блок при прокрутке окна

Блок b_fix пустой блок для определения координат низа екрана для него пишем стили:

.b_fix{
 height: 1px;
 background: transparent;
 bottom: 0;
 position: fixed;
}

а блок b_text это блок с текстом который будет ездить до определенных координат.

$(window).scroll(function() {
    var block_btn = $(".b_fix");
    var offset = block_btn.offset();
    if(offset.top >= 1490){
        $(".b_text")
             .css('position','relative')
             .css('padding-top','0');
    }
    else{
        $(".b_text")
             .css('position','fixed')
             .css('padding-top','112px');
    }
});

Слайдер на jQuery (методом fadeIn) с управлением

HTML:

⟨div⟩
⟨a class="item_prev"⟩PREV⟨/a⟩
⟨a class="item_next"⟩NEXT⟨/a⟩
⟨/div⟩
⟨div class="item"⟩
Слайд 1
⟨/div⟩
⟨div class="item"⟩
Слайд 2
⟨/div⟩
...
⟨div class="item"⟩
Слайд N
⟨/div⟩

SCRIPT:

$(document).ready(function(){

var sub_num = 0;
$('.item_prev').click(function() {
var sub = $(this).parent().parent('li').children('.item');
var sub_sum = $(sub).length-1;
console.log(sub_num);
if(sub_num > 0){
sub_num--;
}
else{
sub_num=sub_sum;
}
$(sub).fadeOut().removeClass('active');
$(sub).eq(sub_num).fadeIn().addClass('active');
});
$('.item_next').click(function() {
var sub = $(this).parent().parent('li').children('.item');
var sub_sum = $(sub).length-1;
if(sub_num < sub_sum){
sub_num++;
}
else{
sub_num=0;
}
$(sub).fadeOut().removeClass('active');
$(sub).eq(sub_num).fadeIn().addClass('active');
return sub_num;
});

});

определения порядкового номера элемента в jQuery

есть такой код:
<li><a>1</a></li>
<li><a class="active">2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>

как определить какой по порядку li выбран? вот такое я нашел решения.

$(function() {
var i = $('.menu a.active').parent('li');
var j = $('.menu li').index(i);
});

Скрипт для меню типа акардеона

$(document).ready(function(){
$(".menu h6").click(function () {
$(this).next(".sub_menu").slideToggle("slow");
if($(this).is(".open")){
$(this).removeClass("open").addClass("close");
}
else {
$(this).removeClass("close").addClass("open");
}
});
});

Выборка по атребутам

$('img[width=300]') Выбирает все картинки с заданой шириной 300
$('a[href^=http]') Выбирает все ссылки которые начинаются с http
$('a[href*=ru]') Выбирает все ссылки в адресе которых есть ru
$('a[href$=ru]') Выбирает все ссылки которые заканчиваються на ru

Поиск в контенте методами jQuery

$('div:has(strong)') - находит все DIV в которых есть тег STRONG
$('div:contains(текст)') - находит все DIV в которых есть слово ТЕКСТ

Отправка по клику формы

Если кнопку в форме делать блоком или линком, то по нажатию кнопки "enter" ничего не происходит, обидно...

Вот так можно исправить:
$("body, form, input, textarea").keypress(function(e){
if(e.which == 13){
$("form").submit();
}
});

выпадающее меню

вот как-то так:
$(document).ready(function(){
$('li.menu').hover(
function() { $('ul', this).css('display', 'block'); },
function() { $('ul', this).css('display', 'none'); });
});

при наведении мыши на элемент, список появляется, а при забирании мыши срабатывает вторая функция и список исчезает

Задержка для скрипта

$(function(){
 $('.block').animate({width:$('.block').width()},2000,
 function()
  {
          $('.photo').show('slow'); 
  })
 });

Идея простая, скрипт берет блок(любой можно задать) высчитывает его ширину и ему же присваивает,

тоесть посути ничего не меняет, и делает это 2000 миллисекунд (2секунды), а после этого уже

запускается функция, которая делает что то полезное, например показывает фото :))

Вот такая задержка на 2 сек, перед выполнением скрипта.

Смена прозрачности на jQuery

Простой скрипт, для плавного изменения
прозрачности, при наведении мышью:

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

нашел на http://css-school.ru

слайдер на js(JQuery)

Задача. Сделать слайд шоу….

Ну всё вроде просто: есть контент (текст, или фото), и нужно просто через интервал времени показывать блоки по очереди…

Есть список:
<ul id=sliders> <li class=active>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>

В каждом теге списка есть какой-то контент… ЦСС-гламур делать не буду, напишу просто функционал скрипта.

В стилях скрываем список, и показываем только первый блок, можно конечно скрыть все и показывать блок методом яваскрипта, но вдруг скрипты у юзера будут выключены, а так хоть что-то видно :)
<style>

#sliders li{
display: none;
}
#sliders li.active{
display: block;
}

</style>

Подключаем библиотеку jquery, в <head>.
<script type="text/javascript" src="jquery.js"></script>

Теперь скрипт:

<script type="text/javascript">

             
/* начальный номер блока который показывать */
var i = 2; 

var func_sliders = function(){ 
/* прячет все блоки */
$("#sliders li").hide(); 
/* Показывает следующий попорядку */
$("#sliders li").eq(i-1).fadeIn("slow"); 

/* количество li */
var max = $("#scroller li").size(); 
/* если показали последний блок, то начинаем с начала */ 
if (i < max) { i++; } else i=1; 
};
 
/* функция повторяется с интервалом 2000 миллисекунд(2сек.) */       
timer = window.setInterval(func_sliders, 2000);

</script>

Вот и всё, должно работать, примитивно конечно, но вполне рабочий вариант…

Работать нужно с умом, а не до ночи.