helpweb - статьи о програмировании и web-дизайе : Главная страница

Навигация

HTML [52]

CSS [77]

JQuery - фреймоврк [28]

Javascript - Window scrollTo() Method

Автор: hikaram
Просмотров: 28

Definition and Usage The scrollTo() method scrolls the content to the specified coordinates. Syntax scrollTo(xpos,ypos) Parameter Description xpos Required. The coordinate to scroll to, along the x-axis ypos Required. The coordinate to scroll to, along the y-axis
Подробнее	[29 декабря 2011] Комментариев: 0

Javascript - Javascript: Размеры клиентской части окна браузера

Автор: hikaram
Просмотров: 27

function screenSize() {
var w, h; // Объявляем переменные, w - длина, h - высота
w = (window.innerWidth ? window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.offsetWidth));
h = (window.innerHeight ? window.innerHeight : (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.offsetHeight));
return {w:w, h:h};
}
// Пример:
document.write(
"Длина = " + screenSize().w + "px " +
"Высота = " + screenSize().h + "px"
);

http://webew.ru/articles/152.webew

Подробнее

[29 декабря 2011] Комментариев: 0

CSS - Красивые выпадающие списки

Автор: hikaram
Просмотров: 15

<div class="articleContent">
Большенству веб-разработчиков, более или менее тесно общавшихся с разметкой известно, что выпадающие списки – <select> – как таковые невозможно отстилить. «Веб-разработчик – технарь, у него нет эстетического воображения» – подумает дизайнер и нарисует «красивые» селекты. Мало того, бизнес (заказчики или менеджеры) посмотрят и решат, что красиво – правильно. И вот стоишь ты один в поле и кручинишься, куда же тебя судьбинушка завела.
Сами селекты отстилить нельзя, зато можно сделать для них красивую обертку можно. Что нам для этого нужно:
<ol>
<li>Не самые глубокие познания в HTML</li>
<li>Advanced скилы в CSS</li>
<li>Немного JavaScript</li>
<li>Холодную голову</li>
<li>Крепкие нервы</li>
<li>Пол-литра пива</li>
</ol>
Есть, к примеру, дизайн страницы и в нем вот такое чудо, которое должно исполнять роль селекта:
<div style="text-align: center;"><img width="221" height="45" title="select_01" alt="" src="http://frontendblog.info/post-images/2010/08/select_01.png"></div>
Ну и предположим, что дизайна на саму выпадающую часть у нас нет – значит подойдет и стандартная. Дальше буду рассказывать про то как минимизировать труды с максимумом пользы.
Делаем красивую HTMLку, как нас просит дизайн, абсолютно-позицыонируем над ней селект и прячим селект. Ну хорошо, скажите Вы, и как же заставить всю эту громадину работать, если всем известно, что JavaScript‘ом селект не откроешь? Дочитай до конца и не лезь вперед батьки, отвечу я. Вот Вам селект, попробуйте в него покликать, в любое место, в любом браузере:
<div style="text-align: center;">
<select>
<option>————</option>
<option>11111111</option>
<option>22222222</option>
<option>22222222</option>
<option>22222222</option>
</select>
</div>
Удивительно, не правда ли? Он открывается куда бы в него ни кликнули. Вот на этом и построим весь принцып работы нашего красивого селекта. При этом все-таки можно задать ему размеры:
<pre><code class="html"><select style="width: 200px; height: 30px;"> <option>------------</option> <option>11111111</option> <option>22222222</option> <option>22222222</option> <option>22222222</option> </select> </code></pre>
<div style="text-align: center;">
<select style="width: 200px; height: 30px;">
<option>————</option>
<option>11111111</option>
<option>22222222</option>
<option>22222222</option>
<option>22222222</option>
</select>
</div>
Как всегда, первым делом HTML:
<pre><code class="html"><span class="select"> <span class="left"> <span class="button"> <span class="center"> <select> <option>------------</option> <option>11111111</option> <option>22222222</option> <option>22222222</option> <option>22222222</option> </select> </code></pre>
Здесь будет использоваться тот же принцип, что и в посте про <a class="mylink" href="/styles/prettiness/pretty-buttons/">кнопки</a>, и, самое главное, очень похожий спрайт:
<div style="text-align: center;"><img width="100" height="110" title="select_bg" alt="" src="http://frontendblog.info/post-images/2010/08/select_bg.png"></div>
Вы, наверное, заметили, что вместо излюбленных всеми дивов, я использовал здесь спаны. А сделал я это из простой лени. Как известно, великий и неповторимый IE7 не очень любит, когда нативно-блочные элементы принуждают быть инлайн-блочными, и игнорирует такое обращение с ними. Так что выхода остается 2 – либо некрасивый хак, либо красивый спан <img class="wp-smiley" alt=":)" src="http://frontendblog.info/wp-includes/images/smilies/icon_smile.gif"> Я за второе.
Давайте пока забьем на сам селект и по-быстрому набросаем его обложку. Стили там тоже не сложные, как и у кнопок:
<pre><code class="css">.select { display: inline-block; position: relative; /* основа для позиционирования селекта */ } .select span { background-image: url(/* здесь путь к спрайту */); display: block; /* применение бокс-модели */ cursor: pointer; height: 30px; /* высота части спрайта */ line-height: 30px; /* выравниваем текст по высоте */ } .select .left { background-position: 0px 0px; /* позиционируем спрайт */ padding-left: 10px; /* ширина соотв. части в спрайте */ background-repeat: no-repeat; } .select .button { background-position: right -80px; /* позиционируем спрайт */ padding-right: 30px; /* ширина кнопки в спрайте */ background-repeat: no-repeat; } .select .center{ background-position: left -40px; /* позиционируем спрайт */ background-repeat: repeat-x; width: 150px; } </code></pre>
 На этом этапе мы имеем вполне красивую и соответствующую дизайну непонятную штуку и селект:
<div style="text-align: center;"><img width="250" height="78" title="select_02" alt="" src="http://frontendblog.info/post-images/2010/08/select_02.png"></div>
Теперь надо расположить селект поверх нашего непойми чего и выровнять его размеры:
<pre><code class="css">.select select { position: absolute; width: 190px; height: 30px; left: 0px; top: 0px; }</code></pre>
А чтобы было проще с размерами определяться, сделаем селект маленько прозрачным:
<pre><code class="css">.select select { position: absolute; width: 190px; height: 30px; left: 0px; top: 0px; opacity: .2; filter: alpha(opacity=20); }</code></pre>
Получившийся результат посмотрим, пощелкаем покликаем……:
<style type="text/css">
.select select {
position: absolute;
width: 190px;
height: 30px;
left: 0px;
top: 0px;
opacity: .4;
filter: alpha(opacity=40);
}
.select select.transparent {
opacity: 0;
filter: alpha(opacity=0);
}
.select {
display: inline-block;
position: relative; /* основа для
позиционирования селекта */
}
.select span {
background-image: url(/post-images/2010/08/select_bg.png);
display: block; /* применение бокс-модели */
cursor: pointer;
height: 30px; /* высота части спрайта */
line-height: 30px; /* выравниваем текст по высоте */
text-align: left;
}
.select .left {
background-position: 0px 0px; /* позиционируем спрайт */
padding-left: 10px; /* ширина соотв. части в спрайте */
background-repeat: no-repeat;
}
.select .button {
background-position: right -80px; /* позиционируем спрайт */
padding-right: 30px; /* ширина кнопки в спрайте */
background-repeat: no-repeat;
}
.select .center{
background-position: left -40px; /* позиционируем спрайт */
background-repeat: repeat-x;
width: 150px;
}
</style>
<div style="text-align: center;">
 
<select>
<option>————</option>
<option>11111111</option>
<option>22222222</option>
<option>33333333</option>
<option>44444444</option>
</select>

</div>
Заметили? Именно!!! Вот так же я однажды сидел и выравнивал размеры селекта и обратил внимание, что даже если сам селект полупрозрачный его выпадающая част будет видна, а сам он остается кликабельным и активным в форме. И остается только сделать селект полностью прозрачным и прикрутить обработчик небольшой на клик и изменение у селекта:
<pre><code class="css"><select onclick="$(this).parent().find('.center') .html(this.options[this.selectedIndex].text)" onchange="$(this).parent().find('.center') .html(this.options[this.selectedIndex].text)" ></code></pre>
<div style="text-align: center;">
———— 
<select onclick="$(this).parent().find('.center').html(this.options[this.selectedIndex].text)" onchange="$(this).parent().find('.center').html(this.options[this.selectedIndex].text)" class="transparent">
<option>————</option>
<option>11111111</option>
<option>22222222</option>
<option>333333333</option>
<option>44444444</option>
</select>

</div>
Собственно, все.
</div>

Подробнее

[29 декабря 2011] Комментариев: 0

Javascript - window.open

Автор: hikaram
Просмотров: 12

Синтаксис
var newWin = window.open(strUrl, winName [, winParams])
Аргументы

strUrl
Адрес для загрузки в новое окно, любая адресная строка, которую поддерживает браузер
winName
Имя нового окна для использования в параметре target форм и ссылок
winParams
Необязательный список настроек, с которыми открывать новое окно

Подробнее

[29 декабря 2011] Комментариев: 0

Разное - Обновление www-файлов на сервере с использованием git

Автор: hikaram
Просмотров: 26

Для начала нам понадобится GIT.

Если вы работаете в ОС Linux, то можете собрать его из исходников или установить его средствами самой системы, например в RedHat, yum install git-all.
Если вы работаете в Windows, то необходимо скачать MSysGit. Тут вы можете скачать и файлы для самостоятельной сборки дистрибутива msysgit-(net|full)install.
Для пользователей MacOS есть своя разработка OSX Installer for Git.
В состав сборок Eclipse или входят модули для работы с Git или их можно установить из основного репозитария платформы (EGit и JGit).
В установке, я думаю, проблем не возникнет.
После установки вам необходимо произвести начальные настройки git.
git config --global user.name "Your Name"
git config --global user.email "your_email@whatever.com"

Подробнее

[26 декабря 2011] Комментариев: 0

SQL - Создание пользователя MySQL

Автор: hikaram
Просмотров: 52

Мне понадобилось создать пользователя MySQL с правами доступа к конкретной базе данных.
Название базы ysa

Для этого позключаемся к MySQL rootом:

dimon@server:~$ mysql -u root -p

Проверяем, на всякий случай, существует ли нужная наб база:

mysql> show databases;

Если базы нету, создадим ее:

mysql>create database ysa;
и теперь создаем нового пользователя с правами на работу с базой ysa с помощь команды GRANT

mysql> GRANT ALL PRIVILEGES ON ysa.* TO ysa@localhost IDENTIFIED BY 'user_pass';

Подробнее

[26 декабря 2011] Комментариев: 0

- Memcached и PHP

Автор: hikaram
Просмотров: 34

В интернете достаточно много информации на данную тему, но, несмотря на это, многие обходят её стороной. Цель данного поста, разъяснить на пальцах основы взаимодействия с Memcached.

Что такое Memcache и какое отношение он имеет к PHP?

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

Подробнее

[26 декабря 2011] Комментариев: 0

Разное - Настройка сервера на старой машине.

Автор: hikaram
Просмотров: 27

Конфигурация железа такова: Proc: AMD Duron 700 Мать: VIA RAM: 256 Mb Video: GeForce FX 5500, 128 Mb HDD: 1. 80 Gb swap 2 Gb ext3 75 Gb / 2. 40 Gb ext3 40 Gb /home Wan: Davicom DM9102AF Lan: rtl81390 Wi-Fi: ASUS WL-138G
Подробнее	[12 декабря 2011] Комментариев: 0

CMS - DLE 9 защита от спама

Автор: hikaram
Просмотров: 48

DLE 9 защита от спама
Благодаря следующей инструкции ненавистные спамеры не смогут:
1) Размещать комментарии с ссылками на свои "говносайты" от лица Гостей
2) Не смогут использовать второй вид спама, а именно Спама во вкладке профиля бота О себе

Подробнее

[6 декабря 2011] Комментариев: 0

CMS - Уникализация DLE шаблона

Автор: hikaram
Просмотров: 29

Уникализация DLE шаблона. Делаем шаблон уникальным для поисковиков.

Приветствую!
Сегодня я хочу рассказать своим читателям о том, как уникализировать шаблон для DataLife Engine (DLE). Наверняка многие, кто занимаются разработкой и продвижением сайтов не раз слышали, что поисковики лояльнее относятся именно к тем сайтам, у которых в наличии имеется уникальный шаблон. Наличие уникального шаблона необычайно важно и для качественного варезника. Ведь, согласитесь, что тому же Яндексу абсолютно не нужен сайт с не уникальным контентом, да ещё и с не уникальным шаблоном. Уникализация DLE шаблона не займёт много времени, но покажет поисковикам, что это действительно годный сайт, а не очередное уг. И так, в этой статье я даю подробную инструкцию, как уникализировать DLE шаблон.

Подробнее

[24 ноября 2011] Комментариев: 0

[1] 2 3 4 5 6 ... 36 37 38 39 далее »

Поиск по сайту

Перед началом эротического массажа рекомендуется принятие совместной ванны или душа. . percocet 10mg from online pharmacy