Наверх
Хорошенько перемешать
27.09.2011 - ,

Пока делаешь сайт приходится решать некоторые, по сути простые задачи, но так лень писать какой-то код самому.

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

Просидел я почти часа два ничего не делая, видимо голова сегодня плохо варит на такое. Решил поискать решения в интернете, и нашел простенький микроплагин для jQuery. Называется он просто jQuery shuffle, работает ещё проще =) Кому интересно, вот демо.

Подключаем плагин в хеде документа строчкой:

<script type="text/javascript" src="путь/к/плагину/jquery.shuffle.js"></script>

К примеру у нас есть список телефонов которые необходимо перемешать:

<ul id="Phones">
<li>(234) 12-23-34</li>
<li>(234) 12-23-35</li>
<li>(234) 12-23-36</li>
</ul>

Теперь перемешиваем его:

$('ul#Phones').shuffle();

Так же есть другой вариант, есть необходимость перемешать просто готовый массив:

var arr = [1,2,3,4,5,6];
arr = $.shuffle(arr);

Затем при необходимости просто выводим полученные значения.
Работает все очень просто. А вот ссылка на демо и так же на сам плагин

Теги: ,
Комментарии [1]
Скрипт изменения вывода в таблице
15.07.2011 - ,

Уже не в первый раз меня заказчики просили увеличить вывод товаров в магазине PHPShop. В PHPShop в зависимости от версии скрипта максимальный вывод товаров в строку варьируется от 2 до 4.

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

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

Скрипт работает в IE 6-8, Safari, Chrome, Opera, FF. Это в тез которых мы проверяли. Максимальное количество товаров при котором не лагает пока не узнавал, но будет проверено чуть позже.

И так, сам скрипт:

var k = 0;
var tds = new Array();
$(".panel_t").each(function(){ //создаем массив всех ячеек таблицы
   tds[k] = $(this).html();
   k++;
});
var width = screen.width; //узнаем разрешение монитора
if(width<1280) { //при разных разрешениях у нас разное количество столбцов
   // по умолчанию, ничего не меняем.
} else {
   if(width<1600) {
      var d = 4; //Можно поменять на свое, в зависимости от ширины вывода блока каждого товара
   } else {
      var d = 5;
   }
   var leng = tds.length; //скока в массиве элементов
   var strokse = leng/d; //расчитываем количество необходимых строк в зависимости от того сколько будет стобцов. округляем до большего
   strokse = Math.ceil(strokse);
   var all = strokse*d; //Сколько всего будет ячеек в таблице(строк*столбцов)
   if(all>leng) { // Товаров меньше чем ячеек в таблице?
      for(h=all;h>=leng;h--) {
         tds[h]=" ";//заполняем пустые ячейки
      }
   }
   var sumEl = leng-1; //массив считается с нуля, поэтому -1
   var tableM = ""; //пустая переменная для таблицы
   var l = d+(d-1); //цифра для colspan
   k=0; //обнуляем к
   for(i = 0; i < strokse; i++) { //первый цикл, формирует строки
      tableM += "<tr><td colspan=\""+l+"\"></td></tr><tr>"; //строка для сетки, и начало второй строки с товаром
         for(c=0;c<d;c++){//цикл второй формируем каждую строку
            if(c!==(d-1)) {//если не последняя ячейка в таблице то
               tableM += "<td>"+tds[k]+"</td><td class=\"setka\"></td>";
            }else{//если ячейка последняя
               tableM += "<td>"+tds[k]+"</td>";
            }
            k++;//прибавляем ячейку
         }
      tableM += "</tr>";//закрываем строку
   }
   $("#ThisMainTable").empty().append(tableM);
}

На идеал этот скрипт не тянет, всегда есть что и куда улучшать. Есть идеи как улучшить скрипт? Отписываемся =)

Теги: ,
Комментарии
Скрипт добавления статьи в социальные закладки и сервисы
24.07.2010 - ,

После прочтения статейки Dimox’a о его новом скрипте добавления в различные сервисы статей, решил что тоже пора бы добавить на сайт подобные кнопочки. Да только вот его вариант к сожалению мне не подходил. Пришлось переделать скрипт под себя, что я в принципе и сделал.

Скрипт весит меньше 3-х килобайт, плюс несколько строчек в ваших css стилях. К тому же легко встраивается в ваш сайт. Ссылочка на скрипт в конце статьи, а сейчас поговорим как…

Вставить скрипт на сайт

Первым делом берем картинки из папки images и копируем их в нужную папку на сервере. Теперь открываем файл social.js блокнотом и редактируем следующую строчку:

var f = 'images/';

Лучше всего указать полный путь к папке. Переходим ко вставке кода в шаблон. Подключаем jQuery(если он у вас не подключен) и сам скрипт, следующим кодом, между тегами <head> </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="путь_до_папки_со_скриптом/social.js"></script>

Теперь выбираем место куда будет выводиться наш блок с кнопочками. и вписываем туда:

<script type="text/javascript">
social(encodeURIComponent('ссылка на статью'),encodeURIComponent('Заголовок статьи'))
</script>

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

Для Textpattern так:

<script type="text/javascript">
social(encodeURIComponent('<txp:permlink />'),encodeURIComponent('<txp:title />'))
</script>

Для Wordpress так:

<script type="text/javascript">
social(encodeURIComponent('<?php the_permalink() ?>'),encodeURIComponent('<?php the_title(); ?>'))
</script>

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

Для горизонтального вывода:

.social {
	position:absolute;
	padding: 8px 0px 8px 8px;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	background:#fff;
}
.social a {
	display:inline-block;
	margin: 0 7px 6px 0;
}
.soc2 {
	visibility:hidden;
}

И для вертикального вывода:

.social {
	position:absolute;
	margin-top:10px;
	padding:8px 8px 0;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}
.soc1 {
	float:right;
	margin-left:6px;
}
.soc1 a {
	display:block;
	padding: 0px 8px 8px 0;
}
.soc2 a {
	display:block;
	padding: 0px 0px 8px 0;
}
.soc2 {
	float:left;
	visibility: hidden;
}

Ну вот и всё, со вставкой мы закончили. Так же можете корректировать положение блоков если это понадобится, добавлением к стилю .social параметров margin.

Скачать скрипт.

Скачать скрипт Социализации

Параметры у скрипта те же что и у Dimox’a. А именно, цитирую (= :
Работает кроссбраузерно (за минусом IE6). Проверял в Opera, FireFox, Chrome, Safari (есть косячок), IE8, IE7.

Теги: ,
Комментировать

Верстаю

Занимаюсь версткой, дизайнов любой сложности. Натягиваю шаблоны на CMS: TextPattern, Joomla, WordPress, PHPShop, ShopCMS. Делаю долго, но качественно, верстка с любыми параметрами.

Связаться




(*) Все поля обязательны для заполнения.