Выезжающая панель на CSS3 с iframe внутри

[Richard_Ferlow]

Ух ты, все бы примеры были на таких крутых сайтах =)

[limon_spb]

Ахахa! Спасибо! Делал этот сайт для себя, чтобы разобраться в javascript и canvas!

[limon_spb]

Совсем уж «письки», простите, выпускать на свет не буду =)
И похоже хабраэффект делает свое грязное дело =)

[Richard_Ferlow]

Это кстати был я =)

В свое время такой скрипт привлек внимание tutorialzine.com/2011/04/jquery-webcam-photobooth/

[limon_spb]

ай-яй-яй вам! ))

Интересная штука по ссылке!

[art_tk]

Ещё похожий thesinglelanesuperhighway.com

[limon_spb]

Да, меня как раз он вдохновил на изучение canvas и js! Вы меня раскрыли!!! Но у меня зато получаешь e-mail, когда прошел модерацию, и можно потом найти свой вагон поиском, а так же отправлять сообщения другим вагонам. А еще у меня сайт классно глючит, если много запросов к нему!
В целом что это я, топик не об этом =)

[zandroid]

А я именно из-за того, не о чём топик, плюс поставил, порадовали под вечер, спасибо автору и всем кто рисовал

[limon_spb]

Да! Спасибо народу, кто рисует! У меня настроение на весь следующий год теперь! Прямо модерирую ваши рисунки и сообщения к ним и ржунемогу, уж простите за такой язык! ))

[IkaR49]

Делал около полумесяца назад что-то подобное, но всплывал не iframe, а куча прочей чепухи.
Но меня заинтересовало:
>> Chrome — да
>> Safari — да
>> Opera — панель всплывает не плавно, а рывком
У меня было наоборот, опера исполняла выезд прекрасно, а вебкитовские браузеры нещадно тупили.

P.S. В итоге я забил на выезжающую панель и сделал её статичной.

[limon_spb]

Хм… странно! А как вы делали выезжание вы не припомните?

[IkaR49]

Что я могу сказать точно, я указывал в transition: all 0.3s ease-in-out.

Сейчас постараюсь найти те черновики и посмотреть, были ли ещё различия.

[IkaR49]

Нашёл, разница была ещё в том, что вы меняли значение margin, а я использовал transform: translateX().

[limon_spb]

Хм, получается опера с transition margin не дружит, а остальные — наоборот…

[Carzil]

Порадовало =)

[limon_spb]

дада, и главное — ни имени не оставил, ни е-mail'a =)
Видать — крик души у человека!

[germn]

Политика и сиськи на Хабре! :D

[kafeman]

С border-radius и transition можно смириться.

border-radius можно сделать и в IE. Пруф.

[limon_spb]

Оо, спасибо, пригодиться!

[limon_spb]

добавил ваш совет в топик!

[Softlink]

1) за сайт +
2) так и не понял зачем iframe нужен, разве не получится форму без фрейма вставить? Или я чего-то не уловил?
3) вместо margin и position можно оставить только position, вот так

[Softlink]

эх, поспешил чуток, неправильно для фф и оперы написал. Здесь работает во всех браузерах jsfiddle.net/Softlink/RD3rZ/1/embedded/result/

[limon_spb]

Спасибо за +!
Если вставлять форму без фрейма, то при отправке данных будет обновляться вся страница, чего не всегда хочется. А тут — обновляется только кусок. Можете попробовать.
Можно, естественно сделать все через AJAX, но я им пока что не очень владею, надо разбираться с тем, как быть с капчей, сессиями и т.п. Проще — сделать отдельную страничку для фидбэка и вставить её в айфрейм.
по 3 пункту — согласен. С удовольствием посмотрю ваш пример, когда jsfiddle перестанет глючить:
по вашей ссылке jsfiddle.net/Softlink/RD3rZ/1/embedded/result/ выдается только пустая страничка с заголовком.

[Softlink]

А, понял. Я сильно глубоко думать начал(искал сакральный смысл), когда увидел фрейм.

[alexbeep]

docs.jquery.com/Post

[limon_spb]

АХАХ )) Простите затупил, что jsfiddle не работает. Не увидел панельки внизу! Симпотишно!

[brainerazer]

> Выезжающия

[limon_spb]

Спасибо! Вот это неудача. Простите. Перечитывал раза три топик, а про заголовок забыл.

[red_pilot]

Если сделаете поддержку iOS/Android в рисовалке, будет просто суперкруто!!! Прикручивать поддержку 10-30 минут.
Хочу нарисовать что-то, а не могу… волею судеб, нет у меня ничего кроме планшета и телефона :(
PS: правда, мне бы больше подошла версия без модерации ;)

[limon_spb]

Да я тоже с телефона пробовал — и никак. Огорчился.
Но под айфон и андройд никогда ничего не писал. Хотите я вам дам все права, вы сами добавите, если вам это и вправду так легко? Творческие люди Хабра будут вам благодарны :)

А без модерации — некоторые отправляют просто пустые картинки.
### уже пришлось раз 5 отклонить.
Сиськи пускай будут =)

[Wott]

На помощь приходит небольшой скрипт на JS + JQuery, который надо включить, если браузер — IE

Бритва Оккама мне посоветовала не выпендриваться и сделать все на jQuery :)

[alexbeep]

Зачем вам всякая хренота типа iFrame? Грузите в контейтер через $('...').load…
Зачем заголовок в DIV? Для него есть Hx…
position:fixed, круглые углы и прочее работают через PIE, как уже сказали выше.
CSS и JS может быть в несколько раз меньше.
Что делает пост на главной — непонятно

[limon_spb]

Да, спасибо за вопрос. Знаю, что можно было сделать кучей других способов. Но для меня с iframe — самый простой. Тут уж кому — как, простите.

[Yakud]

Все хотят знать, что будет если сунуть лом в туалет в поезде?? Попробуем? Авось получится?

[limon_spb]

Кхе кхе, вот из-за какого вагона возникает 503! ))

[FAT]

Вагончик undefined. При наведении на него появляется надпись «undefined» и пропадают все вагочики за ним.

[limon_spb]

дада, это в мой мааленький сайт с самым паршивым тарифом ломится определенное количество людей и «дидосят» его =) Уж простите =) Но все равно спасибо!

[artzub]

у меня вообще велогонка =)

[artzub]

если в search вести название и ткнуть на кнопку много раз.

[limon_spb]

Вы меня напужали, что это глюк очередной из-за DDOS'a

[artzub]

да не какой там DDOS. Это просто так видимо у вас и задумано чтоб работал. очень прикольно получается =)

[limon_spb]

АХАХАХА мдя, sweb никак не хотят повысить количество копий apache. А как оптимизировать — не пойму. Сейчас получается, что каждый юзер запрашивает раз в 3 секунды новый вагон. И этого получается слишком много для моего тарифа.

[termi]

Сайт открытый в Google Chrome 17.0.963.12 dev-m выжирает ~2.5Gb оперативки и вешает систему начисто. При этом в диспетчере задач за процессы Chrome'а занимают ~350Mb оперативки и ~20% ЦПУ. В FF & Opera всё хорошо. Win7x64
видео: www.screenr.com/ynQs (После 1:02 статическая картинка — система висит). Через минут 20ть chrome упал.
~3Gb памяти очищается после закрытия Chrome (не вкладки, а приложения)

[limon_spb]

хм… спасибо большое за наблюдение! Мне кто-то и в фибдэк написал про гугл хром:
Please, fix obj.js:286. It logs Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1 in Chrome 16. It is annoying

Подозреваю, что это может быть как-то связано…
Однако у меня в хроме локально в денвере такого не наблюдается… а не локально не проверить — сайт задидосен намертво.
Но я далеко не гуру пока что в JS, все писал в notepad++. Кто подскажет, как фиксить такие ошибки, которые, например, только в хроме? В какую сторону копать?

[termi]

Возможно проблема в том, что вы не проверяете что у вас в объекте this.img, в функции draw, в строке:
var dy = Math.sin(this.curT/100 + this.deltatime);
ctx.drawImage(this.img,(this.x),this.y+dy,this.sizex,this.sizey);
Просто нужно поставить элементарную проверку if(!this.img.width){/*Картинка не загрузилась*/}

[limon_spb]

Спасибо! Отписал в личку!

[easterism]

Поезд поехал быстрее, чем дорога построилась :))
А по существу, мне всплавание фидбэка по наведению показалось не очень удачной идеей. Интуитивно кликаешь, а под клик попадает кнопка Send

[limon_spb]

Интересное замечание! Легко исправить, если что. В CSS вместо hover — focus
и нельзя забыть tabindex
тогда открывается по клику, но кроссбраузерность надо проверять. Наверняка есть подводные камни!

[Softlink]

1) тогда вместо дива надо использовать ссылку, т.к. :focus работает только для полей форм и ссылок
2) у фокуса есть одна, не всегда полезная, особенность — стоит кликнуть(промазать например) мимо тултипа и все, он скроется с точно такой же скоростью и красотой, как и раскрылся.

[limon_spb]

Если у дива не выставлен tabindex, то focus действительно не работает.
А если выставлен — у меня работает. Показал бы на другом моем сайте, но т.к. он находится на том же хостинге, что и wild-train.com — он тоже висит под хабраэффектом =)

[Softlink]

Вот это круто. Честно, не знал. И всегда думал, что работает только для ссылок с формочками. Ну что ж, одним полезным открытием(по крайней мере для меня) стало больше. Стало быть, для фокуса не так важен элемент, как наличие tabindex. У меня заработал :focus даже для kbd :)

[limon_spb]

Очень рад, что оказался кому-то полезен! =)
Но вы посмотрите поаккуратней, возможно какой-нибудь IE про :focus думает иначе, нежели мы с вами! Я проверял только в более-менее современных браузерах FF, Safari, Chrome, Opera, IE9

[psywalker]

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

[limon_spb]

Конечно!
html:

<div class="figure" tabindex="1"><img src="images/faq/cp.jpg"></div>

css:

div.figure {
  width: 100px;
  float: none;
}
div.figure img {
  width: 100%; 
}
div.figure:hover {
}
div.figure:focus {
  outline: none;
  -webkit-transform: scale(3.5);
  -moz-transform: scale(3.5);
  -o-transform: scale(3.5);
  -ms-transform: scale(3.5);
  transform: scale(3.5);

  z-index: 9999;
}

результат — при нажатии на картинку — она увеличится в 3.5 раза.
Не забудьте <!DOCTYPE html>

[psywalker]

Спасибо большое, а вы не могли бы поподробнее пояснить, почему с tabindex эта штука работает, а без него нет?

[limon_spb]

Я думаю, что div, как элемент на странице, по умолчанию не получает фокуса. Попробуйте с помощью TAB перемещаться по div'aм, как по input'ам — не выйдет.
А свойство tabindex как раз сообщает браузеру, что именно этот div должен уметь получать фокус.
Пожалуйста, знающие люди, поправьте меня, если я ошибаюсь!

[psywalker]

Спасибо вам, ребята. Жаль, не могу ставить плюсики, не дорос ещё.

[Softlink]

И, чуется мне, что это могло быть связано с WAI-ARIA. Других причин упорядочивать «скакание» по сайту и по всем блокам(не только ссылкам) не вижу.

[limon_spb]

Хабралюди, спасибо за вагоны и ваши сообщения через обратную связь!!!
Есть некоторые, которые особенно поднимают настроение: