Рандомные всплывающие окна при заходе на сайт
Всем здравствуйте. С JS особо не знаком, поэтому за проделанную работу готов немного заплатить.
Вообщем задача такая. Есть сайт. Нужно сделать всплывающие окна с рандомным содержимым. Например, заходим на сайт, через некоторое время (рандомно от 10 до 30 сек) открывается окошко, как уведомления в ВК, и показывается подготовленная рандомная запись. Через 5 секунд оно автоматически исчезает. Затем снова через 20-60 сек появляется следующая рандомная запись и так далее по кругу. Желательно, чтобы эти записи находились в отдельном документе (текстовом файле) и их легко можно было дополнять новыми записями. Может есть уже готовое решение, но в инете не нашел. Буду благодарен ответившим. |
Цитата:
Сколько это в цифрах? |
Работа на самом деле не сложная, можно докрутить какие-нибудь готовые скрипты. Поэтому в цифрах - 200 руб. на телефон, Qiwi-кошелек или Webmoney. ksa, возьметесь за работу?:)
|
Почти готовое решение https://github.com/cyberua/multiPopupJS
|
cyber, не совсем то, нет рандомности, модальное окно автоматически не скрывается. Сможете докрутить под мои нужды?
|
MrNix21, не, мне влом, мой скрипт почти реализует то что вам нужно, добавить рандомность и все)
|
Ну, 200р маловато. Если подчитывать записи из отдельного файла,нужно через ajax+PHP это организовать.
email: mshdn@rambler.ru skype: mshendn |
mshdn, почему php? Можно ведь просто создать txt файл с записями с уникальными идентификаторами и оттуда тянуть с помощью ajax
|
Цитата:
|
cyber, окей. Пусть записи будут в этом же документе. Задача от этого многократно облегчается. Ведь так?
|
Цитата:
|
cyber, может все таки возьметесь за оплачиваемую работу:)
|
Кстати можно сделать одна запись - один файл. Так ведь тоже не сложно. Например, делаем папку news, а там записи news1.txt, news2.txt и т.д. Но все равно без ajax не обойтись.
|
А в чём проблема сделать отдельным файлом? Всё JSON`ом сделать и получать через get запрос.
MrNix21, Какую систему модальных окон Вы используете?
(function() {
var data;
function rand(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
function start() {
setTimeout(showWindow, rand(1E3, 3E3));
};
function showWindow() {
var message = data[rand(0, data.length - 1)];
alert(message);
start();
};
$.get('myfile.json', function(json) {
data = JSON.parse(json);
start();
});
})();
myfile.json:
[
"Text 1",
"Text 2",
"Text 3",
"Text 4",
"Text 5"
]
|
Ruslan_xDD, как я понимаю, при таком способе будет появляться системное окошко, которому нельзя будет дать стили
|
MrNix21, да, а теперь замените его на тот скрипт что я дал или другой подобный и будет вам счастье
|
MrNix21, замените alert на вызов вашего модельного окна.
|
cyber, благодарю Вам за подсказки, но как я говорил еще в самом начале, особо не разбираюсь в JS. Поэтому и готов заплатить тому, кто сможет все это реализовать.
|
Ruslan_xDD, я не в силах это сделать)))))
|
MrNix21, ну тогда подождите того кто воземется, я дал почти рабочий пример его нужно не много подправить)
|
Цитата:
|
Нашел вот такой код, он работает. Осталось только рандомность для времени между показами и для самих записей добавить. Подскажете как?
$(document).ready(function(){
var i = 0;
function moddiv(){
i=1;
$('.moddiv:nth-child('+i+')').fadeIn(500).delay(7000).fadeOut(500);//В этой строчке в мс 500 - время анимации появления, 5000 - время задержки, 500 - время затухания уведомления соответсвенно
}
setTimeout(function(){
setInterval(
function(){
i=i+1;
if(i>10) i=1;//10 - количество уведомлений
$('.moddiv:nth-child('+i+')').fadeIn(500).delay(7000).fadeOut(500);//В этой строчке в мс 500 - время анимации появления, 5000 - время задержки, 500 - время затухания уведомления соответсвенно
},25000);//25000 - задержка в мс меду показами уведомлений
moddiv();
},10000);//10000 - задержка в мс перед показом первого уведомления
});
|
Цитата:
http://javascript.ru/Math.random |
ksa, благодарю. Использовал вот такую конструкцию, но не работает((((
$(document).ready(function(){
var i = 0;
function moddiv(){
i=Math.floor( Math.random() * (99 - 1 + 1) ) + 1;
$('.moddiv:nth-child('+i+')').fadeIn(500).delay(7000).fadeOut(500);//В этой строчке в мс 500 - время анимации появления, 5000 - время задержки, 500 - время затухания уведомления соответсвенно
}
setTimeout(function(){
setInterval(
function(){
i=i+1;
if(i>100) i=1;//100 - количество уведомлений
$('.moddiv:nth-child('+i+')').fadeIn(500).delay(7000).fadeOut(500);//В этой строчке в мс 500 - время анимации появления, 5000 - время задержки, 500 - время затухания уведомления соответсвенно
},Math.floor( Math.random() * (40000 - 20000 + 1) ) + 20000);//25000 - задержка в мс меду показами уведомлений
moddiv();
},Math.floor( Math.random() * (20000 - 10000 + 1) ) + 10000);//10000 - задержка в мс перед показом первого уведомления
});
|
Цитата:
i=<значение>; :D Цитата:
|
Цитата:
|
Цитата:
|
ksa, что поделаешь, такой уж я чайник :D Нашел то что работает, но не могу доделать под свои задачи
|
| Часовой пояс GMT +3, время: 18:19. |