Стрелочные часы на javascript (с помощью спрайтов)

Часы на сайт — один из скриптов, который может показаться бесполезным, так как у всех есть системные часы. Однако некоторые хотят поставить такие часы как элемент дизайна. Но эффект эксклюзивности будет достигнут, только если эти часы будут уникальными, сделанными в цветовой гамме и стиле сайта. Поэтому копировать готовые часы у кого-то чаще всего будет неуместно, лучше сделать свои. Способов довольно много:

  1. Можно сделать часы во flash, но не у всех есть среда разработки flash (вариант использования не лицензионной программы не рассматриваем).
  2. А можно сделать с помощью javascript. Правда если речь идет о стрелочных часах, то стрелки часто делаются с помощью рисования линий или точек, что не всегда красиво.
  3. Есть еще SVG — на мой взгляд за этим форматом будущее. К сожалению c кроссбраузерностью этого решения пока не все гладко.
  4. Ну и еще вариант — использовать javascript и стрелки отображаемые с помощью спрайтов. Его и рассмотрим. Способ тоже не без минусов — получается довольно большой объем файлов стрелок (3 стрелки в приведенном ниже примере занимают чуть больше 100 кбайт). Хорошо что интернет сейчас быстрый у многих 🙂 Результат изображен ниже.


Используется 5 графических элементов. Фон, логотип для часов, и 3 стрелки. Другими словами, можно легко сделать любой внешний вид стрелок и фона, используя лишь графический редактор.
Исходники примера можно скачать здесь.
С изменением фона и логотипа все просто, а как быстро и без рутины подготовить спрайты для своих уникальных стрелок, можно прочитать в посте про клонирование объектов в векторном редакторе. Впрочем, подсказка есть в исходниках — там можно заметить два файла SVG — один с одиночными стрелками, другой с клонированными (наклон с шагом 6 градусов). Для создания стрелок использовал векторный редактор Inkscape 0.48.

Hello world в jQuery AJAX

Начать использовать jQuery очень просто, а вместе с ним и AJAX, который также становится очень простым в этой связке. Смотрите пример ниже. Для простоты библиотека jQuery берется с сайта googleapis.com, но вы можете разместить ее и локально. Обратите внимание, что все файлы должны быть в кодировке UTF-8.

Итак, листинг ajax.html (это файл, который необходимо вызвать в браузере):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
  <div id="content"></div>
  <input id="show_btn" type="button" value="Показать"/>
  <input id="close_btn" type="button" value="Закрыть"/>
  <input id="pos_id" type="hidden" value="5"/>
  <script src="ajax.js" type="text/javascript"></script>
</body>
</html>

Далее листинг ajax.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function(){ 
  $('#show_btn').click(function(){ 
    $.ajax({ 
      url: 'ajax_servlet.php', 
      data: 'id='+$('#pos_id').val(), 
      cache: false, 
      success: function(html){ 
        $('#content').html(html); 
      } 
    }); 
  }); 
  $('#close_btn').click(function(){ 
    $('#content').html(''); 
  });
});

Ну и наконец файл, отвечающий на AJAX-запрос на стороне сервера, ajax_servlet.php:

1
2
3
4
5
6
<?php
echo
  "Привет мир!<br/>".
  "Скрытый параметр id=".$_GET['id']
;
?>

Средствами PHP посмотреть адрес страницы созданный sh404SEF

Чтобы узнать адрес страницы, который, к примеру сгенирировал sh404SEF, воспользуйтесь переменной $_SERVER[‘REDIRECT_URL’].
А не-SEF ссылка содержится в более часто упоминаемой переменной $_SERVER[‘REQUEST_URI’].

Совет: Для того, чтобы добавить этот товар в Вашу корзину Вы должны выбрать свойства товара на странице с его описанием

Это сообщение может появится в интернет-магазине VirtueMart на Joomla в случае использования подтоваров, плюс если у родительского товара есть свои свойства. Стоит попытаться положить подтовар в корзину и вы увидите это сообщение, а товар в корзину не попадет.У меня проблема решилась следующим образом:

  1. В фаиле /administrator/components/com_virtuemart/classes/ps_cart.php, в функции add() закомментировал строки (отличается в разных версиях VirtueMart, но найти по смыслу можно):
    1
    2
    3
    4
    5
    6
    7
    
    if ( ($result["attribute_given"] == false && !empty( $result["advanced_attribute_list"] ))
     || ($multiple_products == 1 && ($result["custom_attribute_given"] == false && !empty( $result["custom_attribute_list"] ))) ) {
      $_REQUEST['flypage'] = ps_product::get_flypage($product_id);
      $GLOBALS['page'] = 'shop.product_details';
      $vmLogger->tip( $VM_LANG->_('PHPSHOP_CART_SELECT_ITEM',false) );
      return true;
    }
  2. Чтобы в списке товаров в корзине не вылезли свойства родительской позиции, во всех файлах php в папке /components/com_virtuemart/themes/default/templates/basket/ код:
    1
    
    <?php echo $product['product_name'] . $product['product_attributes'] ?>

    заменил на:

    1
    2
    3
    4
    5
    
    <?php
    $brPos = strpos($product['product_name'], "<br />");
    if ($brPos !== false) $product['product_name'] = substr($product['product_name'], 0, $brPos);
    echo $product['product_name'];
    ?>

Перехват вывода в Joomla

Бывает что на сайте, сделанном на Joomla, нужно сделать небольшие изменения, и при этом не хочется разбираться в дебрях стандартных и сторонних шаблонов. В этом случае может помочь перехват и частичная замена стандартного вывода. Для этого меняем в корне сайта файл index.php. В его конце нужно заменить код:

1
echo JResponse::toString($mainframe->getCfg('gzip'));

на:

1
2
3
$iBuffer = JResponse::toString($mainframe->getCfg('gzip'));
require_once ('intercept.php');
echo $iBuffer;

А в файле intercept.php как раз можно произвести необходимые замены в выводе, находящемся в данном случае в переменной $iBuffer.
Кстати этот подход можно применить практически к любому движку.