Вверх на страницу

Главные вкладки

Аватар пользователя Funtik44 Funtik44 25 мая 2011 в 20:24

Подскажите, как добавить на страницу ссылку "Вверх", чтобы пользователи не крутили её а нажав сразу попадали на верх страницы?

Я так понимаю, что нужно добавить в page.tpl.php что-то, только вот что?

Комментарии

Аватар пользователя Funtik44 Funtik44 25 мая 2011 в 20:56

Нашел, где-то на форуме. Но как сделать так, чтобы этот переход был плавным?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<body>
 
 
<a name="top"></a>
 
...
<a href="#top">Наверх</a>
 
</body>
</html>
Аватар пользователя Супрун Иван Супрун Иван 27 августа 2011 в 16:58

Вот как сделал я, правда без плавного перехода:

  1. создал новый блок
  2. разместил его в регионе под нодой: содержимое
  3. в блок вставил код:
<?php

<a href="#" title="К началу страницы"><img alt="" src="/sites/default/files/loop.png" style="width: 60px; height: 60px; " /></a>

?>

Все что красным цветом замените своими данными: /sites/default/files/loop.png — адрес вашего изображения; width, height — его ширина и высота; ну и текст, который будет отображаться при наведении мышкой на значок: К началу страниы — тоже можно заменить)

кстати, "#top".... — не работает в мазиле, убрал "top" и все заработало и в мазиле. Вот как это работает у меня

Аватар пользователя Супрун Иван Супрун Иван 27 августа 2011 в 22:50

мучаюсь уже пол дня)
не сочтите это за наглость:
вот мой page.tpl.php
<?php.....решил удалить, и не захламлять форум), жалко некоторые коменты удалить нельзя)?>

Аватар пользователя Супрун Иван Супрун Иван 27 августа 2011 в 22:52

нашел статью где пишется как добавить кнопку плавно переносящую читателя в верх, но она не плавающая, и в статье говорится, что будет там, где ее вставить

вот ее код:
<a onclick="$('body').scrollTo('0px',800, {axis:'y'})" href="javascript://">Наверх</a>

но я не знаю куда и именно в какое место его впихнуть
вот заумные друпалисты, выложил кода, ну что впадло тупо сказать что и куда впихнуть?, нет, за то статью найти не лень было, в которой прочитал:

В info-файл скрипты и css подключаются таким образом:

JavaScript
scripts[] = скрипт.js

CSS
stylesheets[all][] = style.css

Аватар пользователя drupby drupby 27 августа 2011 в 20:40

"Супрун Иван" wrote:
вот заумные друпалисты, выложил кода, ну что впадло тупо сказать что и куда впихнуть?, нет, за то статью найти не лень было, в которой прочитал:

В info-файл скрипты и css подключаются таким образом:

JavaScript
scripts[] = скрипт.js

CSS
stylesheets[all][] = style.css


а ты сделал ,как там написано было - 100%,что нет .

Аватар пользователя Супрун Иван Супрун Иван 27 августа 2011 в 21:07

"drupby" wrote:
а ты сделал ,как там написано было - 100%,что нет .

я так понял, весь смысл статьи и того что в ней написано нужно сделать заключается в следующих строчках, которые я уже выше скопировал:

В info-файл скрипты и css подключаются таким образом:
JavaScript
scripts[] = скрипт.js
CSS
stylesheets[all][] = style.css

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

Вот прочитал в белорусском ресурсе поддержки друпал:

Drupal - сообщество которое постоянно развивается во всём цивилизованном мире, целью которого является привлечение, обучение и развитие его основных концепций CMS в России и СНГ всего-лишь инструмент для зарабатывания денег при использовании наработанных технологий Запада (в принципе удивлятся нечего - мы давно так живем). Благодаря этому русскоязычные сайты так называемой "поддержки" содержат объявления, ссылки на платные сборки и невразумительные сбивчивые дебаты на форумах об устаревших модулях. К примеру на Joomla ,больше возможностей новичку взять "быстрый старт". Конечно Joomla корявенькая и большинство нормальных модулей там платные, но благодаря нормальному русскоязычному описанию она более популярна у новичков. Выход один изучать английский, но на это могут уйти годы, а зная английский язык человек может вообще отказаться от идеи Web дизайнера и програмиста. Исходя из этого развитие Drupal в России и СНГ, как и всё остальное, отстанет лет так на 50. Будут конечно однотипные поверхностные сайты новичков и дорогие платные проекты единиц профессионалов, но будущее конечно мутное.
Большое спасибо отдельным людям, которые всё-таки разрабатывают авторские руководства по использованию Drupal и соблюдают основные концепции по развитию этой CMS, однако таких руководств пока явно недостаточно и почти все из них просто начаты и недописаны.
Drupal действительно лучшая CMS c богатыми постоянно развивающимися наработками, вот только участие русскоязычных пользователей в этом сообществе ни на что не влияет и ничего не развивает.
Уважаемые Друпалисты не думайте столько о деньгах - подумайте об инструменте, который вам эти деньги приносит, прочитайте основные положения сообщества и создайте наконец полноценный сайт для поддержки новичков. По одиночке ничего хорошего не получится!

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

а вот действительно вывод: чаще человеку на много проще тратить время, продолжать пустой разговор, сначала дав вроде бы умный ответ типа "это решается с помощью цсс" а потом тыкать, спрашивающего носом в его невежестве в вопросах программирования, или как тут правильнее все это назвать)))

Аватар пользователя kalabro kalabro 27 августа 2011 в 21:58

Так начинайте делать это сообщество лучше прямо со следующего комментария! Smile
От задающего вопрос требуется четко сформулировать вопрос, чтобы людям не пришлось читать 200 строк разметки с целью понять, что хочет человек.
Тогда и помощь придет быстрее. Если она всё-таки не приходит, значит вопрос либо не в тему/глупый, либо непонятный, либо слишком сложный и уникальный, который можно решить уже в рамках контракта.

Аватар пользователя Супрун Иван Супрун Иван 27 августа 2011 в 22:22

Я хочу разместить на сайте плавающую кнопку, при нажатии на которую пользователь будет плавно возвращаться в верх страницы

вот нашел понравившийся мне вариант, в статье есть кода и скрипты, с помощью которых это все делается

мой вопрос: в какие файлы их вставлять нужно, а точнее, куда именно вставлять в этих файлах нужно вставлять эти скрипты

может вы знаете, другой способ реализовать плавающую кнопку возврата в верх?

Аватар пользователя kalabro kalabro 27 августа 2011 в 23:31

Ну вам всё правильно подсказали, всё работает. Только вы не забудьте, что у вас в стилях стоит margin-left: -150px; так что вы можете просто не видеть добавленную кнопку, потому что она «за левым бортом».

  1. В своей теме создаёте файлы js/scroll.js и css/scroll.css. Наполняете их тем, что описано в статье. Если вы используете Drupal 7, не забудте обернуть в (function ($) { //... })(jQuery);.
  2. Вставляете в свой page.tpl.php html-код в самый низ например. Это уже к верстальщикам за подробностями.
  3. В .info-файл добавляете
    stylesheets[all][] = css/scroll.css
    scripts[] = js/scroll.js

Можете кеш сбросить.
Если у вас всё равно не работает, то это уже не в друпале точно проблемы

Аватар пользователя Супрун Иван Супрун Иван 27 августа 2011 в 23:54

большое спасибо за ответ по пунктам, я и тысячи других друпалистов Вас не забудут, читая это пост)
пробую, потом отпишу о результатах

Аватар пользователя kalabro kalabro 28 августа 2011 в 11:17

Значит вы недостаточно подкованы в азах веб-разработки: html, css, js. Вам нужно обращаться к специалисту, чтобы он вас либо научил, либо сделал сам. А наезды на сообщество вам в этом точно не помогут Smile

Аватар пользователя Alexei91 Alexei91 28 августа 2011 в 12:51

Quote:
Можете кеш сбросить.
Если у вас всё равно не работает, то это уже не в друпале точно проблемы

Зачем? Я просто деактивирую тему в админке, потом снова активирую и всё пашет.

Супрун Иван
Статья у автора явно спи...на непонятно откуда. И он явно мягко говоря не в курсе о чём пишет. Чего стоят эти фразы:

Quote:
в файлы index.php, single.php, page.php, archive.php, author.php, category.php, tag.php вашей темы после цикла loop прописать следующее:

В WordPress нихрена не надо вписывать код кнопки "Вверх" в каждый файл. Достаточно вписать, например в footer.php.
Quote:
Итак, для подключения библиотеки jQuery в файл header.php нужно вставить следующую строку:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>


В Кодексе рекомендуется подключать через wp_enqueue_script (безопасный способ добавления JavaScripts для WordPress сгенерированной странице). В 90% freeware шаблонах этого нет.
P.S.
Каюсь: когда об этом не знал, у себя на сайте верстал шаблоны с обычным <script type="text/javascript">
И ещё.
CSS-хаки вида:

       
-webkit-border-radius: 15px;
-moz-border-radius: 15px;

использовать не рекомендуется, - валидацию не пройдёте.

Аватар пользователя drupby drupby 28 августа 2011 в 20:34

"Alexei91" wrote:
В Кодексе рекомендуется подключать через wp_enqueue_script (безопасный способ добавления JavaScripts для WordPress

А мы ничего не путаем ,при чем здесь вообще "JavaScripts для WordPress"?
вы явно ошиблись адресами .
вам ru.wordpress.org

Аватар пользователя Funtik44 Funtik44 2 сентября 2011 в 10:56

"drupby" wrote:
http://www.net-kit.com/7-scroll-to-top-jquery-solutions/[/quote]
Перешел по ссылке и решил установить первый объект jQuery (http://davidwalsh.name/jquery-top-link), проделал следующие действия:

1. В файле моей темы "themename.info" добавил следующую строчку:

scripts[] = js/scrollup.js

2. Создал файл scrollup.js со следующим кодом:

//plugin
jQuery.fn.topLink = function(settings) {
  settings = jQuery.extend({
    min: 1,
    fadeSpeed: 200
  }, settings);
  return this.each(function() {
    //listen for scroll
    var el = $(this);
    el.hide(); //in case the user forgot
    $(window).scroll(function() {
      if($(window).scrollTop() >= settings.min)
      {
        el.fadeIn(settings.fadeSpeed);
      }
      else
      {
        el.fadeOut(settings.fadeSpeed);
      }
    });
  });
};

//usage w/ smoothscroll
$(document).ready(function() {
  //set the link
  $('#top-link').topLink({
    min: 400,
    fadeSpeed: 500
  });
  //smoothscroll
  $('#top-link').click(function(e) {
    e.preventDefault();
    $.scrollTo(0,300);
  });
});

3. На странице page-front.tpl.php вверху, добавил следующий тег:
<a href="#top" id="top-link">Top of Page</a>

4. В файл "style.css" моей темы, добавил следующие стили:

#top-link  { display:none; position:fixed; right:5px; bottom:5px; color:green; font-weight:bold; text-decoration:none; border:1px solid green; background:Lightgreen; padding:10px; }

Итог: При заходе на главную страницу после прокрутки вниз, появляется кнопочка "Top of Page", всё как надо, но при нажатии ничего не происходит! Где я накосячил, подскажите?

Вот ссылка на сайт - http://multitrip.ru

Аватар пользователя Funtik44 Funtik44 2 сентября 2011 в 13:32

Всё исправил, правда для этого использовал другой плагин jQuery - http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm

На всякий случай напишу, что я сделал, может кому пригодится:

1. Скачал скрипт вот отсюда - http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm
2. Внес изменение в скрипт (я просто решил вывести текст вместо картинки, которая прилагается к скрипту):

setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="up.gif" style="width:24px; height:24px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:15, offsety:15}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

Вместо <img src="up.gif" style="width:24px; height:24px" /> вставил <div cass="scrolltop">Наверх</div>

3. Скрипт положил в папку "js" моей темы.
4. В файле моей темы "themename.info" добавил следующую строчку:

scripts[] = js/scrolltopcontrol.js

Внимание: Я сначала лоханулся и переименовал скрипт, этого делать не нужно)))

5. В page.tpl.php после блока "Header" вставил вот этот незатейливый тег:
<a href="#top"></a>

6. Сбросил кэш, хотя и без этого все работало.

PS Если нет результата, посмотрите FireBug'ом возможно бэкграунд у вас белый и текст белый - соответственно сливаются. Ну или просто косяк с CSS.

Вот результат - http://multitrip.ru

Аватар пользователя didan didan 25 ноября 2011 в 19:19

все получилось, только не показывает картинку (я оставил код как есть)
Картинку up.png положил туда где и скрипт.
....правильно прописанный путь к картинке все исправил...