×
HeadHunter and Superjob rezume updater on Ruby on Rails (21 авг 2017)

Практикуемся в написании кода под rails.

Идея Готовимся к Новому Году

Больше
4 года 10 мес. назад #1 от Arhitektorius
Arhitektorius создал эту тему: Готовимся к Новому Году
Как украсить свой сайт на Новый Год уже написано не мало, представляю вашему вниманию маленький скриптик на Java, который отсчитывает время до 2013 года. После наступления НГ он показывает поздравление. Скрипт выводит текст со стилями под мой сайт, так что применяйте в нем свои стили и элементы оформления.
Его можно встроить в mod_php, например, или применить другим удобным для Вас способом.
<script language="javascript">
    document.write('<span id="new_year" style="font-size: 19px; font-style: normal;line-height:26px;">До нового года</span>')
    function novy_god()
    {
		var today = new Date();

		var DayX = new Date("January 1, 2013");
		var Timer_NY = (DayX.getTime() - today.getTime());

		var DaysToGo = Timer_NY / 86400000;
		var DaysPr = Math.floor(DaysToGo);

		var HourToGo = (DaysToGo - DaysPr)*24;
		var HourPr = Math.floor(HourToGo);

		var MinutesToGo = (HourToGo - HourPr)*60;
		var MinPr = Math.floor(MinutesToGo);

		var SecondToGo = Math.floor((MinutesToGo - MinPr)*60);
		if (DayX.getTime() > today.getTime() )
			document.getElementById("new_year").innerHTML = 'Новый год наступит через:<b><br>'+DaysPr+'</b> дней, <b>'+HourPr+'</b> ч <b>'+MinPr+'</b> м <b>'+SecondToGo+'</b> с'
				else
					document.getElementById("new_year").innerHTML = '<span style="font-size: 22px; color: red;font-style: normal;line-height:26px;"><b>Подзравляем<br>с Новым 2013 Годом!!!</b></span>'
    }
    setInterval("novy_god()", 50)
</script>

Кому интересно, реализовал тут

Моё хобби стало моей проффесией ;)
www.BitFace.ru
Спасибо сказали: Marysia

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

Больше
4 года 10 мес. назад - 4 года 9 мес. назад #2 от Aleksej
Aleksej ответил в теме Готовимся к Новому Году

Arhitektorius пишет: Как украсить свой сайт на Новый Год уже написано не мало, представляю вашему вниманию маленький скриптик на Java, который отсчитывает время до 2013 года.


Хм, а кажется - совсем недавно мы поздравляли форумчан с наступающим 2012, помнишь? B)
Быстро летит время; кажется, это было вчера. Но... рассказать хочу не об этом.

Буквально на днях довелось спросить школьную приятельницу - как дела обстоят с новогодним настроением, оно уже есть или его еще покуда нет? И внезапно получил неожиданный ответ - новогоднее настроение последний раз приходило к ней "лет 10 назад", не менее.

Ужасно, правда? Вот и я так подумал. И еще ужаснее, что, подозреваю, таким образом дела обстоят у многих из нас. Спрашиваю дальше, натурально, само собой напрашивающееся "Почему???" - и получаю грустное известие о том, что годы летят (боги, подружке моей еще тридцати нет, она младше меня), и очень многое для нее - в прошлом, а не в будущем, как было когда-то... что-то вот такое.

Тема интересна. Возможно, постараюсь развить ее (уже после НГ) в Психологических изысках , сейчас же коротко (но твердо! :) ) сформулирую следующим образом: напрямую года ни при чем, здесь что-то иное... уверен, что свет из детства или юности может быть доступен для нас с вами в совершенно любом возрасте. Я неправ?

Да, Детство - тема очень серьезного взрослого разговора; сейчас, в предновогодней суматохе - таковому не время и не место... знаете что? Попробуйте для начала просто нарядить новогоднюю елку, как это было когда-то. Ок? А там посмотрим.

P.S. Новогодний скрипт всегда доступен по этой ссылке , установка на своем сайте (если понравилось) не вызовет у вас, думаю, никаких проблем. С наступающим!




Последнее редактирование: 4 года 9 мес. назад от Aleksej.
Спасибо сказали: Arhitektorius

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

Больше
4 года 9 мес. назад #3 от Marysia
Marysia ответил в теме Готовимся к Новому Году
А у меня почему то любой скрипт вставляемый в mod_php не работает. Даже с surce В чем может быть причина?
Спасибо сказали: Arhitektorius

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

Больше
4 года 9 мес. назад - 4 года 9 мес. назад #4 от serge
serge ответил в теме Готовимся к Новому Году

Marysia пишет: А у меня почему то любой скрипт вставляемый в mod_php не работает.


Попробуйте для той же цели использовать стандартный дефолтный mod_custom Joomla (HTML модуль), а код вставлять при помощи sourcerer . При этом обратите внимание - html, php или js лучше вставлять через sourcerer не куда попало, а именно в отведенное для того или иного кода место.

А я смогу! - А поглядим! - А я упрямый!
Последнее редактирование: 4 года 9 мес. назад от serge.
Спасибо сказали: Marysia

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

Больше
4 года 9 мес. назад #5 от Marysia
Marysia ответил в теме Готовимся к Новому Году
Спасибо, все заработало!!!

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

Больше
4 года 9 мес. назад #6 от Arhitektorius
Arhitektorius ответил в теме Готовимся к Новому Году

там в отсчете до Нового года слово Поздравление с опечаткой, а как в коде изменить цвет отсчета? и как ты вставил что на картинке показан отсчет?

Спасибо, Marysia.
Действительно я опечатался походу в спешке. Кто ставил себе, поправьте слово "Подзравляем"! :blush:
Чтобы поменять цвет отсчета, нужно вставить, например простой HTML в строчку вывода времени, или еще как вариант, применить Ваш "Суффикс модуля". Второй вариант рассматривать не буду, а вот пример 1 го варианта:
document.getElementById("new_year").innerHTML = 'Новый Год наступит через: <br><b><font color="#D91467">'+DaysPr+'</b> дней, <b>'+HourPr+'</b> ч <b>'+MinPr+'</b> м <b>'+SecondToGo+'</b> с</font>'
				else
					document.getElementById("new_year").innerHTML = '<span style="font-size: 22px; color: red;font-style: normal;line-height:26px;"><b>Поздравляем с Новым 2013 Годом!!!</b></span>'
Соответственно, меняем почти в самом конце строчки на эти и вставляем свой цвет вместо #D91467
А для поздравления ниже color: red меняем на свой цвет, font-size: 22px тоже меняем на нужный и т.п.
На картинке у меня отсчет (наскок я понял задний фон в виде стикера) - это встроенный в шаблон стиль модуля. А в общем, если охота сделать что-то наподобие, опять же можно применить
background-image:url(../путь/до/своей/картинки/img.jpg)

Моё хобби стало моей проффесией ;)
www.BitFace.ru
Спасибо сказали: Marysia

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

Больше
4 года 9 мес. назад - 4 года 9 мес. назад #7 от Aleksej
Aleksej ответил в теме Готовимся к Новому Году

Arhitektorius пишет: Как украсить свой сайт на Новый Год уже написано не мало...


Да мало написано, мало. Вот мне еще захотелось. :)

Правда, представленный скрипт не совсем новогодний... но уж больно понравился. Пригодится в любое время года, одним словом. Говоря словами всеми любимого Винни-Пуха - очень и очень полезный скрипт, не сомневайтесь. Представлен в блоге; welcome по ссылке . А здесь - небольшое пояснение.

Crumble
Страничка демки эффектного плагина содержит в точности вот этот код:

<link rel="stylesheet" href="crumble/css/grumble.min.css">
<link rel="stylesheet" href="crumble/css/crumble.css">
<link rel="stylesheet" href="crumble/css/style.css" />

<ol id="tour" style="display:none;">
<li data-target="h1 span">Добро пожаловать в Crumble! Кликни, чтобы продолжить.</li>
<li data-target="h3">Идем дальше</li>
<li data-target="h4">Взгляни детальную документацию плагина</li>
<li data-target=".link">Это демо экскурсии. Думаю, вы поняли?</li>
<li data-target=".twitter" data-angle="20">Твитни разрабу! :)</li>
</ol>

<h1><span>Это плагин Crumble!</span></h1>
<h3>Это - причудливый интерактивный тур для посетителей вашего сайта!</h2>
<p>Crumble позволяет быстро и легко устроить небольшое турне в пределах вашего сайта при помощи небольших симпатичных пузырьков. :)</p>
<p>Пузырьки (the bubbles) визуально интересны и обращают на себя внимание. Старайтесь только быть кратким ввиду их совсем небольших размеров.</p>
<h4>Ключевые пункты предпринимаемой таким образом экскурсии определяются попросту нумерованным списком вашего HTML.</h4>
<p>Для того, чтобы лучше понять принцип работы Crumble - взгляните его <a href="https://github.com/tommoor/crumble#crumble">документацию</a></p>
<h3>Download</h3>
<p>Crumble всегда доступен в <a href="https://github.com/tommoor/crumble" class="link">репозитории on github.</a></p>
<p>Crumble ссылается на grumble.js для генерации пузырей.... :) вы можете <a href="https://github.com/jamescryer/grumble.js">загрузить его здесь</a></p>
<h3>Контакты</h3>
<p>Пожалуйста, используйте github, если вдруг у вас появятся вопросы по Crumble. Либо - вы всегда можете выразить восхищение его создателю в твиттере: <a href="http://twitter.com/tommoor" class="twitter">@tommoor</a></p>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="crumble/js/jquery.grumble.min.js"></script>
<script src="crumble/js/jquery.crumble.min.js"></script>

<script>
$(function(){
$('#tour').crumble();
});
</script>

Ну и еще скрипты плагина подгружаются с сервака, разумеется. А прикол вот в чем: текст каждого элемента списка становится одним из пунктов тура. Возможны следующие параметры, обязательным среди них является лишь один (data-target):
  • data-target: A selector that tells the tour which element on the page to point at. (required)
  • data-angle: An override for the angle of the bubble between 0-360 (optional)
  • data-options: A list of options that will be passed to grumble seperated by semicolons. (optional)

А если попросту - при каждом шаге указатель Crumble принимает именно то направление, которое вы указали - data-target - в упорядоченном списке, видите - h1, h2, p, .link или .twitter:

<ol id="tour" style="display:none;">
<li data-target="h1 span">Добро пожаловать в Crumble! Кликни, чтобы продолжить.</li>
<li data-target="h2">Идем дальше</li>
<li data-target="p">Это демо экскурсии. Думаю, вы поняли?</li>
<li data-target=".link">Взгляни детальную документацию плагина</li>
<li data-target=".twitter" data-angle="20">Твитни разрабу! :)</li>
</ol>

Вот и вся премудрость.. все гениальное, как давно известно - просто. С наступающим!
Последнее редактирование: 4 года 9 мес. назад от Aleksej.
Спасибо сказали: Arhitektorius

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

Больше
4 года 9 мес. назад #8 от Arhitektorius
Arhitektorius ответил в теме Готовимся к Новому Году

Да мало написано, мало. Вот мне еще захотелось. :)

Ну тогда еще добавлю! :blush:
Открыточку сделал для фирмы, ибо надоели эти статичные сдернутые из яндекс картинок открытки.
Использовал скрипт отсюда , немного переделав и подшаманив... вот что вышло:
Смотреть открытку

Моё хобби стало моей проффесией ;)
www.BitFace.ru

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

Больше
4 года 9 мес. назад #9 от savage
savage ответил в теме Готовимся к Новому Году
Здравствуйте, спасибо за скрипт, а откуда снег на открытке, если не секрет?

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

Больше
4 года 9 мес. назад - 4 года 9 мес. назад #10 от Arhitektorius
Arhitektorius ответил в теме Готовимся к Новому Году
Savage, скрипт падающего снега честно не помню откуда - скопировал с простор инета. Там их туча подобных! Написан на Java. Именно этот понравился из-за того, что он ненавязчивый, он же стоит у меня на сайтах. Его особенность заключается в том, что снег летит только на первом экране, т.е. если прокручивать страницу сайта вниз - снега не будет. ИМХО так лучше и глаза не сильно мозолит.
Код привожу ниже. Если у Вас сайт Joomla - втыкается опять же в mod_php или подобные... Ну или добавляем в "тело" сайта - кому как удобнее. Скрипт с подробными комментами, поэтому правьте под себя!
<SCRIPT type="text/javascript">
// Количество снежинок на странице (Ставьте в границах 30-40, больше не рекомендую)
var snowmax=35;
 
// Установите цвет снега, добавьте столько цветов сколько пожелаете
var snowcolor=new Array("#C5E0F5","#7fc7ff","#ccccff")
 
// Поставьте шрифты из которых будет создана снежинка ставьте столько шрифтом сколько хотите
var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS");
 
// Символ из какого будут сделаны снежинки (по умолчанию * )
var snowletter="*";
 
// Скорость падения снега (рекомендую в границах от 0.3 до 2)
var sinkspeed=0.6; 
 
// Максимальный размер снежинки
var snowmaxsize=22;
 
// Установите минимальный размер снежинки
var snowminsize=8;
 
// Устанавливаем положение снега
// Впишите 1 чтобы снег был по всему сайту, 2 только слева 
// 3 только по центру, 4 снег справа
var snowingzone=1;
 
 
/*
//   * ПОСЛЕ ЭТОЙ ФРАЗЫ БОЛЬШЕ НЕТ КОНФИГУРАЦИИ*
*/
 
// НИЧЕГО НЕ ИЗМЕНЯТЬ
 
var snow=new Array();
var marginbottom;
var marginright;
var timer;
var i_snow=0;
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent;
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/);
var ns6=document.getElementById&&!document.all;
var opera=browserinfos.match(/Opera/);
var browserok=ie5||ns6||opera;
function randommaker(range) {
	rand=Math.floor(range*Math.random());
	return rand;
}
function initsnow() {
	if (ie5 || opera) {
		marginbottom=document.body.clientHeight;
		marginright=document.body.clientWidth;
	}
	else if (ns6) {
		marginbottom=window.innerHeight;
		marginright=window.innerWidth;
	}
	var snowsizerange=snowmaxsize-snowminsize;
	for (i=0;i<=snowmax;i++) {
		crds[i]=0;
		lftrght[i]=Math.random()*15;
		x_mv[i]=0.03+Math.random()/10;
		snow[i]=document.getElementById("s"+i);
		snow[i].style.fontFamily=snowtype[randommaker(snowtype/length)];
		snow[i].size=randommaker(snowsizerange)+snowminsize;
		snow[i].style.fontSize=snow[i].size+"px";
		snow[i].style.color=snowcolor[randommaker(snowcolor.length)];
		snow[i].sink=sinkspeed*snow[i].size/5;
		if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
		if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
		if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
		if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
		snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size);
		snow[i].style.left=snow[i].posx+"px";
		snow[i].style.top=snow[i].posy+"px";
	}
	movesnow();
}
function movesnow() {
	for(i=0;i<=snowmax;i++) {
		crds[i]+=x_mv[i];
		snow[i].posy+=snow[i].sink;
		snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+"px";
		snow[i].style.top=snow[i].posy+"px";
		if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])) {
			if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
			if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
			if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
			if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
			snow[i].posy=0;
		}
	}
	var timer=setTimeout("movesnow()",50);
}
for (i=0;i<=snowmax;i++) {
	document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"px;'>"+snowletter+"</span>");
}
if (browserok) {
	window.onload=initsnow;
}
</SCRIPT>

Моё хобби стало моей проффесией ;)
www.BitFace.ru
Последнее редактирование: 4 года 9 мес. назад от Arhitektorius.
Спасибо сказали: savage

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