Архивы: Апрель 2011

Как изменить внешний вид checkbox

Наверняка многие знают, что такие элементы формы как select, file, checkbox, radio не поддаются стилизации средствами CSS. Но как же быть, если нерадивый дизайнер в макете дизайна нарисовал поле checkbox в форме стилизировным под общий дизайн сайт, а заказчик на отрез не хочет принимать дизайн без формы ввода данных идентичной макету дизайна.

Вот здесь и пригодиться описанный ниже метод. Суть метода состоит в том, что элемент checkbox делается невидимым, но невидимым не простым присвоением display:none, а через свойство opacity:0.

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

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

/*---------- Стили классов -----------*/
input {
margin:0;padding:0;
opacity:0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
.checkboxOn {
background:url(f_logincheckbox_on.png) no-repeat 0 3px;
}
.checkboxOff {
background:url(f_logincheckbox_off.png) no-repeat 0 3px;
}

/*---------- Скрипт изменения класса-----------*/

function logincheckboxCheck () {
  if (document.getElementById("checkbox1").checked) {
	document.getElementById("checkboxDiv").className="checkboxOn";
   }
	else {
	 document.getElementById("checkboxDiv").className="checkboxOff";
	}
}

/*---------- Верстка-----------*/

<div id="checkboxDiv">
	<input type="checkbox" id="checkbox1" onclick="logincheckboxCheck();" checked="checked"/> <label for="checkbox1">Запомнить меня</label>
</div>

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

Ресайз изображений Bitrix

Ресайз изображений Bitrix

Встала задача делать миниатурки из изображений загруженных в анонсе и изображений загруженных в дополнительное свойство PHOTO.
В этом нам поможет CFile::ResizeImageGet. Синтаксис у него таков

array CFile::ResizeImageGet(
    mixed file,
    array arSize,
    const resizeType = BX_RESIZE_IMAGE_PROPORTIONAL,
    bool bInitSizes = false
);

file — сомо изображение
arSize — массив с размерами для изображения
resizeType — тип масштабирования:
—— BX_RESIZE_IMAGE_EXACT — масштабирует в прямоугольник $arSize без сохранения пропорций
—— BX_RESIZE_IMAGE_PROPORTIONAL — масштабирует с сохранением пропорций, размер ограничивается $arSize
—— BX_RESIZE_IMAGE_PROPORTIONAL_ALT — масштабирует с сохранением пропорций, размер ограничивается $arSize, улучшенна обработка вертикальных картинок.

Пример работы на свойстве PHOTO

$e=CIBlockElement::GetProperty($arResult["IBLOCK_ID"],$arResult['ID'],array(),array("CODE"=>"PHOTO"));
while($xx=$e->Fetch())
{	if($x=CFile::GetFileArray($xx['VALUE']))
	{	$y=CFile::ResizeImageGet(
			$xx['VALUE'],
			array("width" => 150, "height" => 150),
			BX_RESIZE_IMAGE_EXACT,
			false
		);
		$k=$xx["DESCRIPTION"];
		echo'<a href="'.$x['SRC'].'"><img src="'.$y["src"].'" alt="'.$k.'" title="'.$k.'"/></a>';
	}
}

Привер на превьюшке из анонса

$renderImage = CFile::ResizeImageGet($arElement["PREVIEW_PICTURE"], Array("width" => 114, "height" => 114), BX_RESIZE_IMAGE_EXACT, false);
echo '<img title="'.$arElement["NAME"].'" alt="'.$arElement["NAME"].'" src="'.$renderImage["src"].'" />';

Создание сайта Mac OS

Вчера все таки руки дошли до простого, написание скрипта для поднятия сайта на mac os, дабы как то надоело ручками прописывать в конфигах. Вот и собственно сам скрипт

# -*- coding: utf-8 -*-
import sys, os

server_name = raw_input('ServerName --> ')
if(not server_name):
	print 'Введите имя хоста'
	sys.exit(1)

doc_root_default = '/Users/%s/Sites/%s' % (os.getlogin(), server_name)
doc_root = raw_input('DocumentRoot ('+doc_root_default+') --> ')
if(not doc_root):
	doc_root = doc_root_default

file_httpd = '/etc/apache2/extra/httpd-vhosts.conf'
file_hosts = '/etc/hosts'

config_A = '''
########### START HOST %s #############
NameVirtualHost *:80
<Directory />
    Options ExecCGI FollowSymLinks
    AllowOverride all
    Allow from all
</Directory>
<VirtualHost *:80>
    DocumentRoot "%s"
    ServerName %s
</VirtualHost>
########### END HOST %s #############
''' % (server_name, doc_root, server_name, server_name)

config_H = '127.0.0.1 %s\n' % (server_name)

open_file_config = open(file_httpd, 'a')
open_file_config.write(config_A)

open_file_host = open(file_hosts, 'a')
open_file_host.write(config_H)

os.mkdir(doc_root)
create_index = open(doc_root+'/index.php', 'a')
create_index.write('<?php phpinfo();?>')

os.system('chown '+os.getlogin()+':staff '+doc_root)
os.system('chown '+os.getlogin()+':staff '+doc_root+'/index.php')
os.system('apachectl restart')

Это чудо запускаем от привилегированного пользователя, как ни как конфиги правим =)

>> sudo creaty_site.py

Выпадающее меню на wordpress

Реализовать выпадающее меню на wordpress довольно таки просто. Я буду показывать как реализовано на моем блоге. Блог сверстан на html5.

В файл header.php оформляем меню в соответствующем виде

<nav id="nav">
    <ul>
        <li>
            <a href="<?php echo home_url() ?>" rel="home"><?php echo __('Home') ?></a>
        </li>
        <?php wp_list_pages('title_li=') ?>
        <li class="rss">
            <a href="<?php bloginfo('rss_url') ?>" rel="alternate"><?php echo __('RSS') ?></a>
        </li>
    </ul>
</nav>

В style.css добавляем стили для меню

/* НАВИГАЦИЯ */
#nav {
    float: right;
    margin-top: 1em
}
    #nav ul {
    }
        #nav ul a:hover{
            color:#333;
        }
        #nav ul li {
            list-style: none;
            float:left;
        }
            #nav ul li a {
                display: block;
                text-decoration: none;
                margin:0 10px;
                letter-spacing: 0.2em;
            }
                #nav ul .children {
                    display:none;
                    margin: 0;
                    padding: 0;
                    position: absolute;
                    border-left:1px solid #DFDFDF;
                    border-right:1px solid #DFDFDF;
                    background:url(/wp-content/themes/ghostwriter/images/bg-body.png) no-repeat;
                }
                    #nav ul .children li{
                        float: none;
                        display: inline;
                    }
        #nav .rss {
        }
        #nav .rss a {
            display: block;
            background: url(images/icon_rss.png) no-repeat 100% 50%;
            padding-right: 22px
        }

В head страницы добавляем обработку меню на jQuery

<script type='text/javascript' src='http://yandex.st/jquery/1.5.2/jquery.js'></script>
<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery("#nav li").hover(
            function(){
                jQuery(this).find('ul').show('slow');
            },
            function(){
                jQuery(this).find('ul').hide();
            }
        );
    });
</script>


Грамотный бизнес [Точка зрения]

Я завожу небольшую рубрику под названием [Точка зрения]. В ней я буду описывать мои точки зрения (взгяды) на разные вещи.

Первый мой взгяд падает на бизнес в моей сфере, а точнее web разработка.
Что нужно для грамотного построения работы для получения взаимной выгоды для всех кто в этом участвует. Оказывается все просто=) Просто найти сотрудников которые хотят работать и зарабатывать, а с другой стороны это опять таки и является проблемой. А разве трудно???? Нужен менеджер, который будет продавать и получать за это деньги, аналогично с программистом и дизайнеров. Ну и конечно же они должны знать что не поработав не покушаешь. В итоге можно самому работать=) Надо просто делать небольшую накруточку в карман.
По мне этого достаточно, чтобы бизнес в web сфере шел.