Знаю что есть специальные библиотеки для jquery для асинхронной загрузки файлов, но все же решился написать статью на эту тему. В методе про который сейчас расскажу будет использован только чистый javascript. Сама же загрузка файла будет происходить через iframe.
Вам понадобится сама html страница на который должна быть такая форма 

<form id="my_form" method="post" action="" enctype="multipart/form-data" onsubmit="file_send()">
	<input type="file" name="file" />;
	<input type="submit" value="отправить"/>
</form>

Далее рассмотрим работу js скрипта выполняющего всю работу по ajax загрузке файла  читать далее »

Смена картинок на jquery

07/13/2010, автор admin, категории Web-разработка

Достаточно часто видел такое же бесконечное слайдшоу выполненное на flash, а я решил найти простое решение, с возможностью изменения картинок с админки сайта.
Для того чтобы сделать такого рода смену картинок на javascript c использованием jquery потребуется совсем не много знаний. И это займет не более 15 минут. В <div> в котором будут менятся изображения вставим два тега <img>, как это сделано ниже <div id="photos"><img style="position: absolute; z-index: 200; display: block;" src="" alt="" id="photo1"><img style="position: absolute; z-index: 100; display: none;" src="" alt="" id="photo2"></div> Далее тут же или при загрузке страницы указываем массив картинок (я формировал его с помощью php для возможности смены через админку) читать далее »

Сегодня взялся добавить кнопки социальных закладок. Сначала решил поставить кнопку «Cохранить Вконтакте» вставил как и сказано скрипт в head <script type="text/javascript" src="http://vkontakte.ru/js/api/share.js?9" charset="windows-1251"></script> а другой скрипт в то место где должна размещаться кнопка <script type="text/javascript"><!--
document.write(VK.Share.button(false,{type: "custom", text: "<img src=\"http://vk.com/images/vk32.png?1\" />"}));
<script type="text/javascript"><!--document.write(VK.Share.button(false,{type: "custom", text: "<img src=\"http://vk.com/images/vk32.png?1\" />"}));
читать далее »

Постраничный вывод данных на аякс очень выгоден, т.к. не нужно каждый раз грузить всю страницу при перелистывании, а будет загружаться только нужная нам информация.
Для работы будем использовать jquery, чтоб было проще работать с аякс и дом элементами.
Сперва напишем функцию на php, которая будет выводить данные в зависимости от номера страницы.

Допустим надо выводить из таблицы content_data в бд mysql.
<?
define('NUM_IN_PAGE', '10');//количество записей на странице
function get_data($page){
  $query = mysql_query("SELECT * FROM content_data LIMIT".($page*NUM_IN_PAGE).", ".NUM_IN_PAGE);
  while($query_res = mysql_fetch_assoc($query)){
    echo $query_res['id'].'::'.$query_res['content'].'<br>';//выводим необходимые данные
  }
}
?>
читать далее »

Как узнать zoom браузера

07/08/2010, автор admin, категории Web-разработка

Конечно не часто заказчики смотрят на то как выглядит сайт при различных уровнях зума браузера, а мне довелось повстречать таких. И что же вы думаете? Конечно же между некоторыми картинками возникает небольшой зазор в 1px, но это еще пол беды jquery да и вообще javascript почему то неккоректно определяет размеры блоков и двигающиеся слайды уезжают слишком далеко при прокрутке. Конечно зная какой zoom имеет тот или иной браузер opera, firefox, safari или какой либо другой эту проблему можно решить.
Все бы было хорошо если бы существовала единная функция для всех браузеров, что нибудь универсальное типа getZoom или getScale, но к сожалению такого еще не придумали. читать далее »

Удаление папок .svn

07/07/2010, автор admin, категории Ubuntu, Web-разработка

У каждого начинающего или даже опытного веб-программиста использующего subversion рано или поздно возникала потребность рекурсивного удаления папок .svn. Кончено же ничего не надо было бы удалять если бы правильно пользовались программой контроля версий. Для создания рабочей версии сайта все же нужно использовать команду svn export и тогда никаких уязвимостей из за папок .svn у вас не будет, ну а если же по счастливой случайности вы все таки забыли про эту команду то можно воспользоваться функцией рекурсивного удаления find . -name .svn -print0 | xargs -0 rm -rfили
find . -name .svn -exec rm -rf {} \;
А еще можно просто закрыть эту дыру в безопасности для apache в httpd.conf вписать<Directory ~ ".*\.svn">
  Order allow,deny
  Deny from all
  Satisfy All
</Directory>

 

Закраска стран – google maps

07/05/2010, автор admin, категории Google maps

Задача была такой: «закрасить на карте гугл в каких странах побывал пользователь сайта». На выполнение этой задачи в действующем проекте потребовалось около недели. Начинал конечно же с изучения самого вопроса, и поиском готовых решений, попадались то на флеше, то просто были прорисованы контуры нескольких стран которые благополучно накладывались на карту, но ни одной с использованием только функций google maps api и работающей на всех масштабах карты.
И уже отчаявшись наткнулся на интересный зарубежный пост наглядно показывающий что решение возможно. читать далее »

Погода по широте и долготе

07/04/2010, автор dimaz, категории Google maps

Имеем сайт использующий google maps. Нужно прикрутить погоду, чтобы она определялась по широте и долготе центра карты.
Нашел сервис, который выдает xml с подробной информацией о погоде по широте и долготе. Например http://api.wunderground.com/auto/wui/geo/WXCurrentObXML/index.xml?query=55.75200000000000000,37.6160000000000. Остается делать запросы =).

Пишем функцию, которая будет у нас вытаскивать нужные данные из принятого xml. читать далее »

Теги:  

Google spellchecker

07/02/2010, автор dimaz, категории Web-разработка

Хоть и есть во всех современных браузерах встроенная проверка ввода, но бывает нужно прикрутить свой спелчекер. В инете нашел один хороший спелчекер www.spellify.com, использующий сервис от гугл.

Сделал все по ману. Все равно чекер отказывался работать. Да и все скрипты, написанные на jQuery отвалились. Проблема была в том, что чекер написан на prototype js library, который конфликтует с jQuery. Решение этой проблемы нашел. Надо было подключать jQuery в режиме noconflict, и использовать $j вместо функции $. Но переделывать весь jQuery код было лень, да и не удобно будет другим программистам. Решение было одно – переписывать код чекера с prototype на jQuery. В основном был код на js, так что переписывать много не пришлось.
читать далее »

Теги:  

Настройка Notepad++

02/18/2010, автор dimaz, категории Web-разработка

После вынужденного перехода на винду, я искал замену простого и удобного редактора для программирования, сравнимый с Gedit.И я наткнулся на бесплатный текстовый редактор с подсветкой синтаксиса Notepad++. Настройки по умолчанию нормальные, но можно сделать редактор еще удобнее. Во первых можно включить auto-completion, доступен он в версиях старше 5.0. Для этого заходим Settings-> Preferences, во вкладке Buckup/Auto-Completion отмечаем «Enabled auto-completion» on each input. И можно поставить через сколько символов он будет включаться. читать далее »