Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Спускающаяся за скролем кнопка. go Back or go Top of page 
:(
    Опции темы
t77
Дата 11.3.2009, 12:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 459
Регистрация: 27.7.2008

Репутация: нет
Всего: нет



Доброе время суток.
Имеется HTML страничка с нескольким десятком линков якорей в верхней части. При нажатии на один из линков, страничка прокручивается до определенного места. К этому делу очень просится возможность вернутся в верхнюю часть страницы из любого места(BACK). Каким образом это лучше всего реализовать ? Я конечно понимаю, что каждый выбирает то, что ему нравится...Допустим мне не хотелось бы выставлять линк возврата(BACK) по всем частям страницы или только в конце страницы.Хочется что то прикольное и не сильно закрученное. Первое, что пришло на ум это кнопка(BACK), которая будет спускатся при каждой прокрутки страницы но при этом не маячить перед глазами а так находится с краю страницы. Честно говоря, даже не знаю с чего начать и как вообще это делать...
Как это реализовать ?
PM MAIL   Вверх
Samotnik
Дата 11.3.2009, 13:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Super star !
****


Профиль
Группа: Awaiting Authorisation
Сообщений: 7192
Регистрация: 4.11.2006
Где: Минск City

Репутация: нет
Всего: 191



t77,  сделай кнопочку и туда 
Код

onclick="scroll(0,0); return false;"


Добавлено через 1 минуту и 35 секунд
если не хочешь кнопочку, то можно  поставить картиночку маленькую (в виде стрелочки) и на нее  a href поставить 
PM MAIL   Вверх
t77
Дата 11.3.2009, 13:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 459
Регистрация: 27.7.2008

Репутация: нет
Всего: нет



сделать кнопку не проблема... И задать ей onclick="scroll(0,0); тоже понятно. 
Но как сделать кнопку, именно в том месте, которое находится в центре внимания пользователя после того как страничка прокрутилась ?

PM MAIL   Вверх
Samotnik
Дата 11.3.2009, 13:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Super star !
****


Профиль
Группа: Awaiting Authorisation
Сообщений: 7192
Регистрация: 4.11.2006
Где: Минск City

Репутация: нет
Всего: 191



Цитата(t77 @  11.3.2009,  12:28 Найти цитируемый пост)
Но как сделать кнопку, именно в том месте, которое находится в центре внимания пользователя после того как страничка прокрутилась ?

Код

position: fixed

 smile

Добавлено через 21 секунду
а для IE6 эмуляция через expression
PM MAIL   Вверх
t77
Дата 11.3.2009, 14:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 459
Регистрация: 27.7.2008

Репутация: нет
Всего: нет



Слушайте Samotnik, я что то не понимаю как и где и что...
Можно немножечко поподробнее. smile 
PM MAIL   Вверх
Samotnik
Дата 11.3.2009, 15:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Super star !
****


Профиль
Группа: Awaiting Authorisation
Сообщений: 7192
Регистрация: 4.11.2006
Где: Минск City

Репутация: нет
Всего: 191



Цитата(t77 @  11.3.2009,  12:28 Найти цитируемый пост)
Но как сделать кнопку, именно в том месте, которое находится в центре внимания пользователя после того как страничка прокрутилась ?

Код

<button style="position: fixed;" onclick="scroll(0,0); return false;">ЙА КНОПКО</button>


PM MAIL   Вверх
t77
Дата 11.3.2009, 16:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 459
Регистрация: 27.7.2008

Репутация: нет
Всего: нет



У меня кнопка не хочет рисоватся никак! smile 
Вроде сделал как вы посоветовали но ничего не выходит.

Верхняя часть страницы. Здесь создаются якоря(линки)
Код

<xsl:for-each select="$currentDtdPath/ELEMENT[*/PARAM/@name = 'name']">

<xsl:variable name="elemID">                                <xsl:value-of select="@elementId"/>
</xsl:variable>

<xsl:if test="$currentItemPath/*[local-name() = $nodeName]/@showlink = 'true'">
<a href="#" onclick="ScrollTo({$elemID});">                        <xsl:value-of select="$elementName"/>
</a>
</xsl:if>

</xsl:for-each>


Код

/*Функция, которая устанавливает прокручиваемость страницы до определенного уровня*/
function ScrollTo(objId)
{    
try
{                                                                        
document.getElementById('anchor_' + objId).scrollIntoView(true);
                                        createBackButton();
}
catch(e)
{                                            //ничего не далай и не ругайся...
}    
}

//Вот здесь я создаю кнопку, но она не рисуется почему то !
function createBackButton()
{
//debugger;
               var input = document.createElement("input");
                                        input.type = "button";
                                        input.name = "goTop";
                                        input.id = "goTop";
                                        input.style.position = "fixed";
                                        input.style.zIndex = "30";
                                        input.onclick = "scroll(0,0); return false;";
                                    }


Кстати обсолютно не обязятельно вникать в вышеприведенный код. Все работает как положено, за исключением создания кнопки, о которой шла речь раньше.

Может я делаю что то не так ?

PM MAIL   Вверх
Samotnik
Дата 11.3.2009, 16:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Super star !
****


Профиль
Группа: Awaiting Authorisation
Сообщений: 7192
Регистрация: 4.11.2006
Где: Минск City

Репутация: нет
Всего: 191



дык
кнопку то ты создал, а где код, в котором ты ее помещаешь на страничку ? 
PM MAIL   Вверх
t77
Дата 11.3.2009, 17:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 459
Регистрация: 27.7.2008

Репутация: нет
Всего: нет



Опсс... Прошу прощения недосмотрел. Спасибо!
После того как я добавил кнопку на страницу, она рисуется, только не там где нужно. Кнопка рисуется в нижней части странички под линками.
И это вроде логично так как иерархия моей HTML странички следующая:
Код

<DIV id="viewModeContainerDiv">
<DIV id="anchorDivId">
<!-- Здесь находятся линки(якоря) -->
</DIV>
<!--Здесь находится весь контекст страницы-->
</DIV>

Но это совершенно не то, что нужно было. Так вот, возвращаясь к ранее заданному вопросу...;
Как же мне нарисовать кнопку именно в том месте, которое находится в поле зрения пользователя ?

Добавлено через 2 минуты и 29 секунд
Вот моя функция после небольших исправлений:
Код

function createBackButton()
{

                var input = document.createElement("input");
                                        input.type = "button";
                                        input.name = "goTop";
                                        input.value = "Go to Top";
                                        input.id = "goTop";
                                        input.style.position = "fixed";
                                        input.style.zIndex = "30";
                                        input.onclick = "scroll(0,0); return false;";
                                        
                var   anchorDiv = document.getElementById("viewModeContainerDiv");
                                        anchorDiv.appendChild(input);
}

PM MAIL   Вверх
Samotnik
Дата 11.3.2009, 17:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Super star !
****


Профиль
Группа: Awaiting Authorisation
Сообщений: 7192
Регистрация: 4.11.2006
Где: Минск City

Репутация: нет
Всего: 191



Цитата(t77 @  11.3.2009,  16:09 Найти цитируемый пост)
Как же мне нарисовать кнопку именно в том месте, которое находится в поле зрения пользователя ?

вот этим кодом (твоим же )
Код

var   anchorDiv = document.getElementById("viewModeContainerDiv");
anchorDiv.appendChild(input);

т.е. тебе нужно взять id того div на котором находится юзер и вставить туда эту кнопку.
Реализовать в твоем случае можно так : 
повставлять пустые div после каждого якоря. 
Затем, как юзер нажимает на якорь - нужно передать id в какую нибудь функцию, которая и будет рисовать/добавлять кнопочку в тот див
PM MAIL   Вверх
t77
Дата 11.3.2009, 18:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 459
Регистрация: 27.7.2008

Репутация: нет
Всего: нет



Я понимаю что вы имеете ввиду.Боюсь в моем случае это не реально, так как содержание страницы рисуется каким то XSL файлом, к которому у меня нет доступа. Очень жаль... Так что вынужден искать другие пути. Можно ли сделать это как-нибудь по другому ? Ну например, чтоб при нажатии на линк и прокрутке странички, появлялась кнопка где то в уголке но в поле зрения...
Всем знаком тот случай, когда бывает, заходишь на сайт какой-нибудь а там небольшое окошко с рекламкой ходит за тобой вниз и вверх и всегда перед глазами.
Вот, что то подобное только с кнопкой. Как это сделать ?
PM MAIL   Вверх
Samotnik
Дата 12.3.2009, 09:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Super star !
****


Профиль
Группа: Awaiting Authorisation
Сообщений: 7192
Регистрация: 4.11.2006
Где: Минск City

Репутация: нет
Всего: 191



Цитата(t77 @  11.3.2009,  17:27 Найти цитируемый пост)
Всем знаком тот случай, когда бывает, заходишь на сайт какой-нибудь а там небольшое окошко с рекламкой ходит за тобой вниз и вверх и всегда перед глазами.
Вот, что то подобное только с кнопкой. Как это сделать ? 

я же уже говорил  position: fixed это делается.  И div всегда будет перед тобой, по центру. 
Цитата(t77 @  11.3.2009,  17:27 Найти цитируемый пост)
при нажатии на линк и прокрутке странички, появлялась кнопка где то в уголке но в поле зрения...

дык в чем проблема ? 
Делай создание кнопки /помещение  после этого события  smile 
PM MAIL   Вверх
t77
Дата 13.3.2009, 12:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 459
Регистрация: 27.7.2008

Репутация: нет
Всего: нет



Цитата

дык в чем проблема ? Делай создание кнопки /помещение  после этого события


Я же вам объясняю, что кнопка появляется в самом низу странички и никак не в поле зрения.
Посмотрите пожалуйста, вид сверху
Код

<DIV id="viewModeContainerDiv">
<DIV id="anchorDivId">
<!-- Здесь находятся линки(якоря) -->
</DIV>
<!--Здесь находится весь контекст страницы-->
</DIV>


Функция, которая устанавливает якоря
Код


function ScrollTo(objId)
{    
try
{                                                                     
   
document.getElementById('anchor_' + objId).scrollIntoView(true);

//функция для создания кнопки в поле зрения(возврат на верх страницы)
createBackButton();
}
catch(e)
{                                    
}    
}


Очень важно отметить, что все содержимое страницы поделено на строки(TR) таблички -HTML.
ID-каждой строки является - anchor_число. Тоесть первый обзац текста находится в строке, ID, которого anchor_1. Второй абзац в строке anchor_2, ну и так далее...
Исходя из этого я подумал, а что если создавать кнопку внутри определеной строки. Получается, что после того как строка
Код

document.getElementById('anchor_' + objId).scrollIntoView(true);

прокрутила страничку на необходимые коордигаты, в данный момент строка, находящаяся в поле зрения является -'anchor_' + objId. И как раз в эту строку я хочу вставить новоиспеченную кнопку.
Передаю функции создающей кнопку параметр - ID строки:
Код

createBackButton('anchor_' + objId);

Ну и собственно сама функция:
Код

function createBackButton(currTR)
{
                var input = document.createElement("input");
                                        input.type = "button";
                                        input.name = "goTop";
                                        input.value = "Go to Top";
                                        input.id = "goTop";
                                        input.style.position = "fixed";
                                        input.style.zIndex = "30";
                                        input.onclick = "scroll(0,0); return false;";
                                        
                var   anchorDiv = document.getElementById(currTR);
                                        anchorDiv.appendChild(input);
}

Вроде все достаточно тривиально на первый взгляд но на деле работать не хочет. smile 
Что я делаю не так? В чем проблема ?



PM MAIL   Вверх
arkady347
Дата 23.3.2009, 13:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 11
Регистрация: 23.3.2009

Репутация: нет
Всего: нет




Модератор: Сообщение скрыто.

PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »


 




[ Время генерации скрипта: 0.1139 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.