Beyondtheclouds Oct 27 2011 at 11:28

Сказка о Box2D, Canvas,Twitter, и о том, как все это черт возьми связано

9 min

2.3K

Website development*

From sandbox

+40

Comments 16

theOnlyBoy Oct 27 2011 at 11:44

Интересно смотрится, но как этим пользоваться? Все скачет, мельтешит, текст меняется, читать не успеваешь… какое-то минимальное практическое применение должно все-таки быть.

theOnlyBoy Oct 27 2011 at 11:54

Спустя полчаса выясняю следующее: Хром некорректно работает с элементом у которого height:100%...
Эту проблему можно решить более красиво и просто: position: absolute, left/top/right/bottom: 0 ;)

SLIDERWEB Oct 27 2011 at 12:17

Прикольно, но как это употребить?
Предлагаю поставить таймаут смены твитов на экране около 5-8 секунд. А при нажатии на тег менять твит на экране, выбирая рандомно из соответсвующего тега. Тогда будет боле-менее употребимо. Я б даже себе как стартовую поставил…

Beyondtheclouds Oct 27 2011 at 18:16

окей я попробую так сделать. Основная идея насамом деле была какраз показать насколько быстро на сколько быстро мелькают твиты, и насколько бесполезно пытаться за всем этим следить. Ну плюс из падающих слов можно проследить какбы общее настроение общую тему чтоли. например когда недавно была грустная история у эппл там все пестрило словами в духе R.I.P

SLIDERWEB Oct 27 2011 at 12:18

простите, хотел ответить Beyondtheclouds. промахнулся

Beyondtheclouds Oct 27 2011 at 19:36

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
     html
     {
         height: 100%
     }
     body
     {
         height: 100%;
     }
     div
     {
         height:100%;
         width: 250px;
         float: left;
     }
    </style>
</head>
<body>
<div style="background-color:red">123</div>
<div style="background-color:green">234</div>
<div style="background-color:blue">345</div>
</body>
</html>

а с position: absolute это будет не так удобно. я наверно что-то упускаю из вида?

Beyondtheclouds Oct 27 2011 at 19:36

блин нетуда ответил :(

theOnlyBoy Oct 27 2011 at 19:43

Без проблем. Просто подход с abs-pos позволяет как бы размещать элементы по точным координатам без всяких padding-margin проблем. Т.е. есть viewport, есть элементы. Если это 3 столбца во всю высоту (top: 0, bottom: 0) и с фикс. шириной (width: 250px), то:
div1 left: 0, div2 left: 250px, div3 left: 500px и т.п.
Если по правому краю, то: div1 right: 0, div2 right: 250px, etc.
В общем, всё элементарно, основы.

Beyondtheclouds Oct 27 2011 at 19:53

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

{
   height: 100%;
   float: left;
   width:250px;
}

выглядит несокльо элегантнее чем

{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 250px;
}

хотя возможно я потом пойму чем подход с abs-pos лучше :)

TheShock Oct 27 2011 at 12:27

У меня в Хроме никаких кружков. Только слова. В консоли ошибок нету

theOnlyBoy Oct 27 2011 at 12:34

Вам повезло, текст читабельнее, ничего не пестрит :)

bazzilic Oct 27 2011 at 12:59

Хром 15, Убунту, история такая же.

habrastorage.org/storage1/3f8e09a4/00463ebd/6c947502/777942ac.png

TheShock Oct 27 2011 at 13:00

Интересно, у меня тоже kUbuntu. Может ли быть дело в этом?

bazzilic Oct 27 2011 at 13:04

Ну, всё возможно, хотя странно — js движок там вроде свой и одинаковый для всех версий (вин, мак, лин).

Beyondtheclouds Oct 27 2011 at 18:19

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

romantik Oct 29 2011 at 00:26

Задействовали бы акселерометр, например как в проекте Google Gravity. Было бы круче :)

Show the best of all time