Архив рубрики: Веб-разработка

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

Опубликовано автором
Добавить комментарий

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

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


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

Оптимизация HTML и CSS-кода для разных браузеров с помощью DOCTYPE или DTD

Опубликовано автором
Добавить комментарий

Бывает, что определенная связка HTML+CSS никак не хочет правильно (с точки зрения создателя кода, конечно) отображаться в некоторых браузерах. Использование своих таблиц стилей для отдельных браузеров уже стало классикой. Но можно ненароком забыть что первая строка HTML-файла, которая должна начинаться с <!DOCTYPE, может сильно повлиять на интерпретацию кода.
Описаний типа документа, или DTD, существует много, и браузер будет отображать код по разному, в зависимости от того, какой DOCTYPE выбран.

Например (строгий HTML 4.01):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

отличается от (переходной HTML 4.01):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

или от (HTML 5):

<!DOCTYPE html>

Так что если что то не ладится с кодом, попробуйте поиграть и этой строкой.

Hello world в jQuery AJAX

Опубликовано автором
Добавить комментарий

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

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

<!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:

$(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:

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

Запрет индексирования (noindex)

Опубликовано автором
Добавить комментарий

Иногда нужно сообщить поисковым машинам (роботам), что данную страницу индексировать не нужно. Для этого существует META-тэг:

<meta name="robots" content="noindex, nofollow" />

В данном случае «noindex» указывает на запрет индексации, а «nofollow», что на данной странице не надо обходить ссылки.

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

Опубликовано автором
Добавить комментарий

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

  1. В фаиле /administrator/components/com_virtuemart/classes/ps_cart.php, в функции add() закомментировал строки (отличается в разных версиях VirtueMart, но найти по смыслу можно): 
    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/ код: 
    <?php echo $product['product_name'] . $product['product_attributes'] ?>

    заменил на:

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