|
Появляющийся плавающий блок
|
|
|
2013-11-07Дата: Четверг, 07.11.2013, 00:39 | Сообщение # 1 |
Сержант
Группа: Проверенные
Статус: Offline
|
Здравствуйте меня интересует как сделать Появляющийся плавающий блок как на этой странице сайта www.tourister.ru/world/america/united-states/city/miami#block_12
Там он не сдвигается с определенного места при прокрутке а именно появляется визу, когда сайт бар заканчивается. Желательно помогите разобрать способ именно как сделано на том сайте.
Заранее спасибо за ответ.
| | |
|
|
2013-11-07Дата: Четверг, 07.11.2013, 02:20 | Сообщение # 2 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
TokyoZero, Здравствуйте меня интересует как сделать Появляющийся плавающий блок как на этой странице сайта
Добрый.
Что-то я не очень наблюдаю там какие либо блоки появляющиеся при прокрутке страницы до конца..
Но суть подобных везде одинакова - сравнивается высота прокрутки с высотой страницы (или с положением заданного элемента), как только она равна или больше второго аргумента, вызывается функция которая, частенько с различными эффектами, но это не суть, показывает скрытый блок.
Иногда вешают и обратку - как только высота прокрутки меньше второго аргумента, блок снова скрывают.
А фиксированным его с помощью стилей - есть такое свойство - position:fixed; - у позиционируемых элементов.
Вот в принципе и все.
На том же принципе сделаны очень многие скрипты, например кнопочка [вверх] на данном и на других сайтах - при прокрутке - показывается, в топе скрывается.
..
Желательно помогите разобрать способ именно как сделано на том сайте.
Внешний осмотр страницы по ссылке визуально не выявил никаких блоков - честно крутил страницу и вверх и вниз, и туда и сюда, но нет... печалька(
И почти на 100% - если вообще правильно понял о чем речь - уверен, сделано именно по данному принципу что описал, отличия могут быть лишь в эффектах и в стилевом оформлении, о чем я кстати, вообще не написал )) - ибо к самому скрипту это мало как относится.
| | |
|
|
2013-11-09Дата: Суббота, 09.11.2013, 23:49 | Сообщение # 3 |
Сержант
Группа: Проверенные
Статус: Offline
|
У меня есть (приложил скриншот) . Правда с Японской рекламой так как я в Токио живу возможно из за этого у вас рекламы нет. А хотя сайт то 1н. Просто у них прикольно сделано что блок не съезжает в низ когда страница до него доходит а появляется на определенном месте а при прокрутки вверх до правых блоков сам исчезает.
| | |
|
|
2013-11-10Дата: Воскресенье, 10.11.2013, 06:04 | Сообщение # 4 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
TokyoZero, Просто у них прикольно сделано что блок не съезжает в низ когда страница до него доходит а появляется на определенном месте а при прокрутки вверх до правых блоков сам исчезает.
Я же объяснил - просто сравнивается высота прокрутки с фиксированной величиной и по результатам - показывают или скрывают фиксированный блок.
Типа:
Код $(document).ready(function () {
var top = $(document).height()-$(window).height()-500;
$(window).scroll(function() {
var y = $(this).scrollTop();
if (y > 500 && y < top) {
$('#stikBox').fadeIn(500,function(){
$('#stikBox').addClass('fixed');
});
} else{
$('#stikBox').fadeOut(500,function(){
$('#stikBox').removeClass('fixed');
});
}
});
});
Где:
Код if (y > 500 && y < top) {
500 - позиция при которой показывать, можно вычесть в % от высоты прокрутки, например:
- покажется на 1/3 прокрутки.
Здесь:
Код var top = $(document).height()-$(window).height()-500;
500 - когда скрывать от низа. скроется при прокрутке 500 до низа.
..
☑ http://likbezz.ru/_example/_rest/stickBox/stickBox_v1.html
| | |
|
|
2013-11-10Дата: Воскресенье, 10.11.2013, 10:32 | Сообщение # 5 |
Сержант
Группа: Проверенные
Статус: Offline
|
Спасибо большое, очень помогли.
| | |
|
|
2013-12-01Дата: Воскресенье, 01.12.2013, 18:40 | Сообщение # 6 |
Генерал-майор
Группа: Проверенные
Статус: Offline
|
TokyoZero, как у вас там в японии?
| | |
|
|
2013-12-02Дата: Понедельник, 02.12.2013, 08:49 | Сообщение # 7 |
Сержант
Группа: Проверенные
Статус: Offline
|
Вопрос не уточненный true 
Если погода то снега нет +15 ночью холоднее, хотя девчонки юбки как носили так и носить будут даже когда будет +6-8 в начале января:)
Как говорится жизнь ключом бабло ручьем, вот пытаюсь освоить дзень по программированию:)
Но суть не в этом...
Я тут поставил плавающий блок, но есть 1на проблема при входе на страницу он сверху висит чуть вниз сдвину страницу
он исчезает а потом как надо появляется но он не должен проявляться сверху страницы, подскажите где косяк в коде?
Код <script type="text/javascript">
$(document).ready(function () {
var top = $(document).height()-$(window).height()-500;
$(window).scroll(function() {
var y = $(this).scrollTop();
if (y > 1500 && y < top) {
$('#stikBox').fadeIn(500,function(){
$('#stikBox').addClass('fixed');
});
} else{
$('#stikBox').fadeOut(500,function(){
$('#stikBox').removeClass('fixed');
});
}
});
});
</script>
Зарание спасибо Добавлено (01.12.2013, 23:09)
---------------------------------------------
Все проблема решена всего то забыл добавить в стилях 
Добавлено (02.12.2013, 08:49)
---------------------------------------------
Кстати такой вопрос, как сделать кнопку что бы пользователь мог свернуть блок но при обновлении странице или новом заходе он появлялся вновь?
Заранее спасибо
| | |
|
|
2013-12-02Дата: Понедельник, 02.12.2013, 08:56 | Сообщение # 8 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
TokyoZero, Кстати такой вопрос, как сделать кнопку что бы пользователь мог свернуть блок но при обновлении странице или новом заходе он появлялся вновь?
Заранее спасибо
Плавное сворачивание / разворачивание блока. jQuery
Или вот так:
сворачивание+блока
| | |
|
|
2013-12-21Дата: Суббота, 21.12.2013, 20:45 | Сообщение # 9 |
Сержант
Группа: Проверенные
Статус: Offline
|
Спасибо большое likbezz как обычно выручаешь
Добавлено (21.12.2013, 20:16)
---------------------------------------------
Пытался сделать сворачивание/разворачивание плавающего блока, что то не получается, где ошибся?
При нажатии на кнопку свернуть, плавающий блок почему то просто отскакивает на самый верх страницы ну и исчезает. А не сворачивается на месте и все.
Заранее спасибо
Вот код: stikBox это плавающее окно а вот stikBox_in это элемент который нужно сначало свернуть при нажатии на кнопку а потом развернуть.
Код <div id="stikBox"> <div class="show_link" href="#">свернуть</div> <div id="stikBox_in"> <div class="opt"></div> <div class="opt"></div> <div class="opt"></div> <div class="opt"></div> </div></div> </div> <script type="text/javascript"> $(function(){ $('.show_link').click(function(){ $('#stikBox_in').hide("normal"); }) $('.show_link').click(function(){ $('#stikBox_in').show("normal"); }) } </script>
А вот код самого плавающего блока. Который появляется и исчезает на определенном участке страницы.
Код
<script type="text/javascript">
$(document).ready(function () {
var top = $(document).height()-$(window).height()-500;
$(window).scroll(function() {
var y = $(this).scrollTop();
if (y > 2400 && y < top) {
$('#stikBox').fadeIn(500,function(){
$('#stikBox').addClass('fixed');
});
} else{
$('#stikBox').fadeOut(800,function(){
$('#stikBox').removeClass('fixed');
});
}
});
});
</script>
Я если честно не понимаю почему блок просто отскакивает на верх при нажатии на кнопку свернуть а не сворачивается внутри плавающего блока.Добавлено (21.12.2013, 20:45)
---------------------------------------------
Все решил вопрос следующим кодом:
Код <div id="stikBox"> <a class="show_link" href="#">Свернуть</a> <div id="stikBox_in"> <div class="opt"></div> <div class="opt"></div> <div class="opt"></div> <div class="opt"></div> </div></div> </div> <script type="text/javascript"> $('.show_link').toggle(function(){ $('#stikBox_in').slideUp(2000); }, function(){ $('#stikBox_in').slideDown(2000); }); </script>
Осталось только непонятно как поменять слово Свернуть после сворачивания на развернуть. Не подскажите?
Сообщение отредактировал TokyoZero - Суббота, 21.12.2013, 20:27 | | |
|
|
2013-12-21Дата: Суббота, 21.12.2013, 21:32 | Сообщение # 10 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
TokyoZero, Осталось только непонятно как поменять слово Свернуть после сворачивания на развернуть. Не подскажите?
Все просто:
Код <script type="text/javascript">
$('.show_link').toggle(function(){
$('#stikBox_in').slideUp(2000);
$(this).html('Развернуть');
}, function(){
$('#stikBox_in').slideDown(2000);
$(this).html('Свернуть')
});
</script>
http://likbezz.ru/_example/_rest/stickBox/stickBox_v2.html
| | |
|
|
2013-12-22Дата: Воскресенье, 22.12.2013, 06:40 | Сообщение # 11 |
Сержант
Группа: Проверенные
Статус: Offline
|
Спасибо большое
| | |
|
|
2014-03-03Дата: Понедельник, 03.03.2014, 23:16 | Сообщение # 12 |
Подполковник
Группа: Проверенные
Статус: Offline
|
Здравствуйте. А можно сделать так, чтоб в миничате высвечивалось не время, когда было поставлено сообщение, а дата?
| | |
|
|
2014-03-03Дата: Понедельник, 03.03.2014, 23:23 | Сообщение # 13 |
Волшебница
Группа: VIP
Статус: Offline
|
чтоб в миничате высвечивалось не время, когда было поставлено сообщение, а дата?
заменить
title="$DATE$">$TIME$
на
title="$DATE$">$DATE$
Сообщение отредактировал Tina - Понедельник, 03.03.2014, 23:24 | | |
|
|
2014-03-04Дата: Вторник, 04.03.2014, 02:06 | Сообщение # 14 |
Подполковник
Группа: Проверенные
Статус: Offline
|
спасибки! 
| | |
|
|
2014-03-04Дата: Вторник, 04.03.2014, 11:23 | Сообщение # 15 |
Волшебница
Группа: VIP
Статус: Offline
|
Удачи!
| | |
|
