Рубрики
Мысли Программирование

Быстрый переход наверх страницы, как вконтакте

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

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

Ссылка на демо (откроется в новом окне)

Не представляю, как я жил без этой кнопки раньше, если её нет на сайте, а прокрутка большая, то меня ломает:)

Вот как это выглядит (для тех, кто ещё не видел демо):

Нажатием на серую область слева, браузер «отскролит» нас наверх.

Инструменты: html, javascript, jquery.

Алгоритм:
1. Берем нужный шаблон джумлы, вордпресса или страницу сайта
2. Добавляем на страницу область-кнопку

Здесь надо оговориться, что показывается размещение кнопки только для вёрстки, где есть свободное место слева, не менее 30 пикселей, чтобы пользователь мог по нему попасть. Это остаётся на ваше усмотрение.

Я добавил div перед закрывающим тегом элемента wrap (на моей странице wrap имеет фиксированную ширину и выровнен посередине).

<div id="up-button" >
	<div>Наверх<div>
<div>

И стили для области перехода (пояснения в комментариях):

<style type="text/css">
/*Left fast top scroll*/
#up-button
{
/*
позиция элемента - фиксированная на странице, в левом верхнем углу;
так же задаём 100% высоту и получаем область на всю 
левую часть экрана шириной 100px
*/
position: fixed; 
top: 0; 
left: 0; 
width:100px; 
height:100%; 
background: #D1D1D1; 
display: none;/*скрываем область по умолчанию*/
}

#up-button div
{
/*элемент с подписью названия области*/
font-weight: bold;
font-size: 14px;
width:50px;
margin: 5px auto;
color: #636363;
}
</style>

3. Добавляем на страницу javascript для своевременного отображения области и реакции на клик

<script type="text/javascript">
//высота в пикселях, при прокрутке на которую, появится область для быстрого возврата слева
var scrollButtonLimit = 300;

//фукнция для инициализации решения
function InitScrollNavigation() {
	//применён jQuery
	//получаем область быстрого возврата наверх (div) в переменную
	var upButton = $("#up-button");

	//навешиваем реакцию на каждое событие скрола от пользователя
	$(window).scroll(function (e) {
		var scrollTop = $(window).scrollTop();//получаем значение прокрутки
		if (scrollTop > scrollButtonLimit) {//значение больше заданной константы - показываем кнопку
		  $(upButton).show();
		  return;
		}
		if (scrollTop <= scrollButtonLimit) {//значение меньше заданной константы - скрываем кнопку
		  $(upButton).hide();
		  return;
		}
	});
	
	//навершиваем реакцию на событие при клике на область, скролим пользователя наверх 
	$(upButton).click(function (e) {
		$(window).scrollTop(0);
	});
}

$(document).ready(function() {
	//навешиваем обработчики при загрузке страницы
	InitScrollNavigation();	
});
</script>

Вот наша область быстрого перехода и готова!
Прокручиваем вниз, появляется кнопка слева, щёлкаем, переходим наверх.

Возможно, кому-то достаточно и этого для покрытия задач.

Но мы всё равно переходим к созданию меню:)

4. Помечаем нужные «якори» — теги <a name=»your-anchor-name»>your-element-name</a>, на которые мы хотим переходить на странице.

Ключевым для нас является атрибут name, о нём ещё будет сказано дальше (он может реализовать стандартный механизм переходов html).

Например, такая вёрстка:

<p><strong><a name="brod-artisti">Бродячие артисты</a></strong></p>
<p style="color: #4E76C2;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus ac arcu sollicitudin lacinia ac ac risus.
</p>
<p><strong><a name="veselo-tancuut">Весело танцуют</a></strong></p>
<p style="color: #C2544E;">
Aliquam tempor enim aliquet nisl ultrices pellentesque. Maecenas ultrices nulla et eros euismod pellentesque. Nam mattis mattis mi sit amet semper. Nam aliquam leo lacus. ...
</p>

4. Добавляем меню

<ul id="video-menu" >
	<li><a onclick="return ScrollToTarget(this);" href="#brod-artisti">Бродячие артисты</a></li>
	<li><a onclick="return ScrollToTarget(this);" href="#veselo-tancuut">Весело танцуют</a></li>
</ul>

Функцией ScrollToTarget по окончании действий возвращается значение false, что не даёт браузеру перейти по ссылке.

5. Добавляем реакцию по клику на пункт меню для перехода на конент

<script type="text/javascript">
//функция, которая будет вызываться при клике на ссылку в меню
function ScrollToTarget(element) {
	//получем ссылку, выбираем из неё всё, что после # - название элемента a, куда мы хотим перейти
	var elHref = $(element).attr('href');		
	var name = elHref.substring(elHref.lastIndexOf('#') + 1, elHref.length);

	//получаем позицию скрола элемента, на который должен быть осуществлён переход
	var targetTop = $("#video-content").find("a[name='" + name + "']").offset().top;

	//скролим пользователя на элемент (чуть выше элемента - для эргономики)
	$(window).scrollTop(targetTop - 5);
	
	return false;
}
</script>

Меню готово! Щёлкаем на одном из пунктов — переходим на него на странице.

Возвращаясь к тегу <a/> с атрибутом name, этот атрибут позволяем делать ссылки внутри страницы (якори) на нужные элементы. Если убрать из тега меню <a onclick=»return ScrollToTarget(this);» href=»#brod-artisti»>Текст ссылки</a> функцию на onclick, отработает стандартный механизм, который модифицирует ссылку (что нам не нужно); но механизм перехода наверх всё равно будет работать.

Спасибо за внимание!
Удачи и до новых встреч на просторах сети!

P.S. Надо добавить описанный скрол в блог:)

Рубрики
Мысли Стиль программирования

Узнать район по адресу — очень просто!

Любой, кто хоть раз пытался узнать район города по адресу, знает, что это не так просто, даже с помощью поисковика и карты… Для таких случаев, я написал небольшой сервис — raionpoadresu.ru. Я пользуюсь, мне нравится.

Рубрики
.NET Framework Программирование Стиль программирования

Подключить сервис сокращения ссылок bit.ly к ASP.NET сайту

Недавно столкнулся с интересной задачей, нужно было прикрутить короткие ссылки к ASP.NET сайту. Использовал один из самых известных сервисов коротких ссылок — bit.ly Документация к API на английском.

Как это работает: bit.ly создаёт короткую ссылку на нашу ссылку. Таким образом, идёт запрос к bit.ly, а bit.ly «перекидывает» пользователя на наш адрес.

Алгоритм такой:

1. Регаемся на bitly.com

2. Для запросов на короткие ссылки, нам понадобится авторизация, чтобы сервис мог вести квоты по запросам. Я использовал «api key», то есть передавал логин и ключ в get-запросе прямо в ссылке. Узнаём свой api key по адресу http://bitly.com/a/your_api_key.

3. Будем использовать ссылку /v3/shorten (описание). Теперь нам нужно всего лишь создать get-запрос (можно прямо через браузер) вида:

http://api-ssl.bitly.com/v3/shorten?format=xml&longUrl=_longurl_&login=_login_&apiKey=_apikey_

Здесь нужно подставить login — получен на шаге 1, apiKey — получен на шаге 2, longUrl — ссылка, которую хотим укоротить (начиная с http://).
Мы указали format=xml для получения результата в этом формате.

4. Проверили, всё работает через браузер. Теперь нужно создать программный запрос. Вот класс, в нём запрограммировано, как это сделать:

public static class BitlyApi
    {
        private const string HttpStatusOk = "200";
        private const string ApiSslUrl = "http://api-ssl.bitly.com/v3/shorten";
        private const string Login = "ваш_логин";
        private const string ApiKey = "ваш_ключ";

        public static string GetShortenedUrl(string longUrl)
        {
            string url = string.Format("{0}?format=xml&longUrl={1}&login={2}&apiKey={3}",
                                       ApiSslUrl, HttpUtility.UrlEncode(longUrl), Login, ApiKey);
            XDocument resultXml = XDocument.Load(url);

            if (resultXml.Descendants("status_code").FirstOrDefault().Value == HttpStatusOk)
            {
                XElement shortUrlElement = resultXml.Descendants("data").Elements("url").FirstOrDefault();
                if (shortUrlElement != null)
                {
                    //всё в порядке, возвращаем короткую ссылку
                    return shortUrlElement.Value;
                }
            }

            //что-то пошло не так - возвращаем, исходную длинную ссылку
            return longUrl;
        }
    }

Использован метода XDocument.Load(string url), который создаёт XDocument из полученного в ответе на запрос xml-файла. Проверяется пришедший в xml status_code и если всё нормально, идёт небольшой разбор, получение значения нужной ветки файла и возвращается коротка ссылка!