Leaderboard

Примерно так

http://jsfiddle.net/7sut76gy/

http://getpixels.ru/#{"margin":"1","width":"18","count":"30","color_margin":"#d9d9d9","color_defult_elements":"#ffffff","color_user_elements":"#ff0000","elements":{"_12_0":"#ff0000","_11_0":"#ff0000","_10_0":"#ff0000","_9_0":"#ff0000","_8_0":"#ff0000","_7_0":"#ff0000","_6_0":"#ff0000","_5_0":"#ff0000","_4_0":"#ff0000","_3_0":"#ff0000","_2_0":"#ff0000","_1_0":"#ff0000","_0_0":"#ff0000","_0_1":"#ff0000","_0_2":"#ff0000","_0_4":"#ff0000","_0_3":"#ff0000","_0_5":"#ff0000","_0_6":"#ff0000","_0_7":"#ff0000","_0_8":"#ff0000","_0_9":"#ff0000","_0_10":"#ff0000","_0_11":"#ff0000","_0_12":"#ff0000","_0_13":"#ff0000","_0_14":"#ff0000","_0_15":"#ff0000","_0_16":"#ff0000","_0_17":"#ff0000","_0_18":"#ff0000","_0_19":"#ff0000","_0_20":"#ff0000","_0_21":"#ff0000","_0_22":"#ff0000","_0_23":"#ff0000","_0_24":"#ff0000","_0_25":"#ff0000","_0_26":"#ff0000","_0_27":"#ff0000","_0_28":"#ff0000","_0_29":"#ff0000","_1_29":"#ff0000","_2_29":"#ff0000","_3_29":"#ff0000","_13_0":"#ff0000","_14_0":"#ff0000","_15_0":"#ff0000","_16_0":"#ff0000","_17_0":"#ff0000","_18_0":"#ff0000","_19_0":"#ff0000","_20_0":"#ff0000","_21_0":"#ff0000","_22_0":"#ff0000","_23_0":"#ff0000","_24_0":"#ff0000","_25_0":"#ff0000","_26_0":"#ff0000","_27_0":"#ff0000","_28_0":"#ff0000","_29_0":"#ff0000","_4_29":"#ff0000","_5_29":"#ff0000","_6_29":"#ff0000","_7_29":"#ff0000","_8_29":"#ff0000","_9_29":"#ff0000","_10_29":"#ff0000","_11_29":"#ff0000","_12_29":"#ff0000","_13_29":"#ff0000","_14_29":"#ff0000","_15_29":"#ff0000","_16_29":"#ff0000","_17_29":"#ff0000","_18_29":"#ff0000","_19_29":"#ff0000","_20_29":"#ff0000","_21_29":"#ff0000","_22_29":"#ff0000","_23_29":"#ff0000","_24_29":"#ff0000","_25_29":"#ff0000","_26_29":"#ff0000","_27_29":"#ff0000","_28_29":"#ff0000","_29_29":"#ff0000","_29_28":"#ff0000","_29_27":"#ff0000","_29_26":"#ff0000","_29_25":"#ff0000","_29_24":"#ff0000","_29_23":"#ff0000","_29_22":"#ff0000","_29_21":"#ff0000","_29_20":"#ff0000","_29_19":"#ff0000","_29_18":"#ff0000","_29_17":"#ff0000","_29_16":"#ff0000","_29_15":"#ff0000","_29_14":"#ff0000","_29_13":"#ff0000","_29_12":"#ff0000","_29_11":"#ff0000","_29_10":"#ff0000","_29_9":"#ff0000","_29_8":"#ff0000","_29_7":"#ff0000","_29_6":"#ff0000","_29_5":"#ff0000","_29_4":"#ff0000","_29_3":"#ff0000","_29_2":"#ff0000","_28_2":"#ff0000","_27_2":"#ff0000","_26_2":"#ff0000","_25_2":"#ff0000","_24_2":"#ff0000","_23_2":"#ff0000","_21_2":"#ff0000","_20_2":"#ff0000","_16_2":"#ff0000","_22_2":"#ff0000","_19_2":"#ff0000","_18_2":"#ff0000","_17_2":"#ff0000","_15_2":"#ff0000","_14_2":"#ff0000","_13_2":"#ff0000","_12_2":"#ff0000","_11_2":"#ff0000","_10_2":"#ff0000","_9_2":"#ff0000","_8_2":"#ff0000","_7_2":"#ff0000","_6_2":"#ff0000","_5_2":"#ff0000","_4_2":"#ff0000","_3_2":"#ff0000","_2_2":"#ff0000","_2_3":"#ff0000","_2_4":"#ff0000","_2_5":"#ff0000","_2_6":"#ff0000","_2_7":"#ff0000","_2_8":"#ff0000","_2_9":"#ff0000","_2_10":"#ff0000","_2_11":"#ff0000","_2_12":"#ff0000","_2_13":"#ff0000","_2_14":"#ff0000","_2_15":"#ff0000","_2_16":"#ff0000","_2_17":"#ff0000","_2_18":"#ff0000","_2_19":"#ff0000","_2_20":"#ff0000","_2_21":"#ff0000","_2_22":"#ff0000","_2_23":"#ff0000","_2_24":"#ff0000","_2_25":"#ff0000","_2_26":"#ff0000","_2_27":"#ff0000","_3_27":"#ff0000","_4_27":"#ff0000","_5_27":"#ff0000","_6_27":"#ff0000","_7_27":"#ff0000","_8_27":"#ff0000","_9_27":"#ff0000","_10_27":"#ff0000","_11_27":"#ff0000","_12_27":"#ff0000","_13_27":"#ff0000","_14_27":"#ff0000","_15_27":"#ff0000","_16_27":"#ff0000","_17_27":"#ff0000","_18_27":"#ff0000","_19_27":"#ff0000","_20_27":"#ff0000","_21_27":"#ff0000","_22_27":"#ff0000","_23_27":"#ff0000","_24_27":"#ff0000","_25_27":"#ff0000","_26_27":"#ff0000","_27_27":"#ff0000","_27_26":"#ff0000","_27_25":"#ff0000","_27_24":"#ff0000","_27_23":"#ff0000","_27_22":"#ff0000","_27_21":"#ff0000","_27_20":"#ff0000","_27_19":"#ff0000","_27_18":"#ff0000","_27_17":"#ff0000","_27_16":"#ff0000","_27_15":"#ff0000","_27_14":"#ff0000","_27_13":"#ff0000","_27_12":"#ff0000","_27_11":"#ff0000","_27_10":"#ff0000","_27_9":"#ff0000","_27_8":"#ff0000","_27_7":"#ff0000","_27_6":"#ff0000","_27_5":"#ff0000","_27_4":"#ff0000","_26_4":"#ff0000","_25_4":"#ff0000","_24_4":"#ff0000","_23_4":"#ff0000","_22_4":"#ff0000","_21_4":"#ff0000","_20_4":"#ff0000","_19_4":"#ff0000","_18_4":"#ff0000","_17_4":"#ff0000","_16_4":"#ff0000","_15_4":"#ff0000","_14_4":"#ff0000","_13_4":"#ff0000","_12_4":"#ff0000","_11_4":"#ff0000","_10_4":"#ff0000","_9_4":"#ff0000","_8_4":"#ff0000","_7_4":"#ff0000","_6_4":"#ff0000","_5_4":"#ff0000","_4_4":"#ff0000","_4_5":"#ff0000","_4_6":"#ff0000","_4_7":"#ff0000","_4_8":"#ff0000","_4_9":"#ff0000","_4_10":"#ff0000","_4_11":"#ff0000","_4_12":"#ff0000","_4_13":"#ff0000","_4_14":"#ff0000","_4_15":"#ff0000","_4_16":"#ff0000","_4_17":"#ff0000","_4_18":"#ff0000","_4_19":"#ff0000","_4_20":"#ff0000","_4_21":"#ff0000","_4_22":"#ff0000","_4_23":"#ff0000","_4_24":"#ff0000","_4_25":"#ff0000","_5_25":"#ff0000","_6_25":"#ff0000","_7_25":"#ff0000","_8_25":"#ff0000","_9_25":"#ff0000","_10_25":"#ff0000","_11_25":"#ff0000","_12_25":"#ff0000","_13_25":"#ff0000","_14_25":"#ff0000","_15_25":"#ff0000","_16_25":"#ff0000","_17_25":"#ff0000","_18_25":"#ff0000","_19_25":"#ff0000","_20_25":"#ff0000","_21_25":"#ff0000","_22_25":"#ff0000","_23_25":"#ff0000","_24_25":"#ff0000","_25_25":"#ff0000","_25_24":"#ff0000","_25_23":"#ff0000","_25_22":"#ff0000","_25_21":"#ff0000","_25_20":"#ff0000","_25_19":"#ff0000","_25_18":"#ff0000","_25_17":"#ff0000","_25_16":"#ff0000","_25_15":"#ff0000","_25_14":"#ff0000","_25_13":"#ff0000","_25_12":"#ff0000","_25_11":"#ff0000","_25_10":"#ff0000","_25_9":"#ff0000","_25_8":"#ff0000","_25_7":"#ff0000","_25_6":"#ff0000","_24_6":"#ff0000","_23_6":"#ff0000","_22_6":"#ff0000","_21_6":"#ff0000","_20_6":"#ff0000","_19_6":"#ff0000","_18_6":"#ff0000","_17_6":"#ff0000","_16_6":"#ff0000","_15_6":"#ff0000","_14_6":"#ff0000","_13_6":"#ff0000","_12_6":"#ff0000","_11_6":"#ff0000","_10_6":"#ff0000","_9_6":"#ff0000","_8_6":"#ff0000","_7_6":"#ff0000","_6_6":"#ff0000","_6_7":"#ff0000","_6_8":"#ff0000","_6_9":"#ff0000","_6_10":"#ff0000","_6_11":"#ff0000","_6_12":"#ff0000","_6_13":"#ff0000","_6_14":"#ff0000","_6_15":"#ff0000","_6_16":"#ff0000","_6_17":"#ff0000","_6_18":"#ff0000","_6_19":"#ff0000","_6_20":"#ff0000","_6_21":"#ff0000","_6_22":"#ff0000","_6_23":"#ff0000","_7_23":"#ff0000","_8_23":"#ff0000","_9_23":"#ff0000","_10_23":"#ff0000","_11_23":"#ff0000","_12_23":"#ff0000","_13_23":"#ff0000","_14_23":"#ff0000","_15_23":"#ff0000","_16_23":"#ff0000","_17_23":"#ff0000","_18_23":"#ff0000","_19_23":"#ff0000","_20_23":"#ff0000","_21_23":"#ff0000","_22_23":"#ff0000","_23_23":"#ff0000","_23_22":"#ff0000","_23_21":"#ff0000","_23_20":"#ff0000","_23_19":"#ff0000","_23_18":"#ff0000","_23_17":"#ff0000","_23_16":"#ff0000","_23_15":"#ff0000","_23_14":"#ff0000","_23_13":"#ff0000","_23_12":"#ff0000","_23_11":"#ff0000","_23_10":"#ff0000","_23_9":"#ff0000","_23_8":"#ff0000","_22_8":"#ff0000","_21_8":"#ff0000","_20_8":"#ff0000","_19_8":"#ff0000","_18_8":"#ff0000","_17_8":"#ff0000","_16_8":"#ff0000","_15_8":"#ff0000","_14_8":"#ff0000","_13_8":"#ff0000","_12_8":"#ff0000","_11_8":"#ff0000","_9_8":"#ff0000","_10_8":"#ff0000","_8_8":"#ff0000","_8_9":"#ff0000","_8_10":"#ff0000","_8_11":"#ff0000","_8_12":"#ff0000","_8_13":"#ff0000","_8_14":"#ff0000","_8_15":"#ff0000","_8_18":"#ff0000","_8_17":"#ff0000","_8_16":"#ff0000","_8_19":"#ff0000","_8_20":"#ff0000","_8_21":"#ff0000","_9_21":"#ff0000","_10_21":"#ff0000","_11_21":"#ff0000","_12_21":"#ff0000","_13_21":"#ff0000","_15_21":"#ff0000","_14_21":"#ff0000","_16_21":"#ff0000","_17_21":"#ff0000","_18_21":"#ff0000","_19_21":"#ff0000","_20_21":"#ff0000","_21_21":"#ff0000","_21_20":"#ff0000","_21_19":"#ff0000","_21_18":"#ff0000","_21_17":"#ff0000","_21_16":"#ff0000","_21_15":"#ff0000","_21_14":"#ff0000","_21_13":"#ff0000","_21_12":"#ff0000","_21_11":"#ff0000","_21_10":"#ff0000","_20_10":"#ff0000","_18_10":"#ff0000","_19_10":"#ff0000","_17_10":"#ff0000","_16_10":"#ff0000","_15_10":"#ff0000","_14_10":"#ff0000","_13_10":"#ff0000","_12_10":"#ff0000","_11_10":"#ff0000","_10_10":"#ff0000","_10_11":"#ff0000","_10_12":"#ff0000","_10_13":"#ff0000","_10_14":"#ff0000","_10_15":"#ff0000","_10_16":"#ff0000","_10_17":"#ff0000","_10_18":"#ff0000","_10_19":"#ff0000","_11_19":"#ff0000","_12_19":"#ff0000","_13_19":"#ff0000","_14_19":"#ff0000","_15_19":"#ff0000","_16_19":"#ff0000","_17_19":"#ff0000","_18_19":"#ff0000","_19_19":"#ff0000","_19_18":"#ff0000","_19_17":"#ff0000","_19_16":"#ff0000","_19_15":"#ff0000","_19_14":"#ff0000","_19_13":"#ff0000","_19_12":"#ff0000","_18_12":"#ff0000","_17_12":"#ff0000","_16_12":"#ff0000","_15_12":"#ff0000","_14_12":"#ff0000","_13_12":"#ff0000","_12_12":"#ff0000","_12_13":"#ff0000","_12_14":"#ff0000","_12_15":"#ff0000","_12_16":"#ff0000","_12_17":"#ff0000","_13_17":"#ff0000","_14_17":"#ff0000","_15_17":"#ff0000","_16_17":"#ff0000","_17_17":"#ff0000","_17_16":"#ff0000","_17_15":"#ff0000","_17_14":"#ff0000","_16_14":"#ff0000","_15_14":"#ff0000","_14_14":"#ff0000","_14_15":"#ff0000","_15_15":"#ff0000","_16_15":"#ff0000"},"user_elements":{}}

@ishurgaya, для класса top-art пропишите и удалите класс bottom-art .top-part { display:inline-block; width:150px;}

Что значит обернуть в jQuery? Поменяйте код который в script.js на тот, что я выше написала

Помогу, разместите код где-нибудь и дайте ссылку

Я даже заморочился. Если в оригинале картинка 2х2 пикселя, и все они чёрные, то и на выходе будет 2х2 пикселя и все они чёрные. У нас ничего кроме размера пикселя не меняется.

Самое простое: подключать скрипты в конце страницы, перед </body>

вау, ничего себе! Да ты крутой!я тоже одностраничник написал, только ты не выкладывай его, вдруг кто идею стырит: <!DOCTYPE html><html><head> <meta charset=utf-8" /></head><body>тру-ля-ля</body></html> ему уже на двух ресурсах об этом говорят, но д'артаньяну виднее) первое впечатление аналогичноеОзвучу простую истину: "посмотри правде в глаза: ты наговнокодил какую-то ерунду и при этом упираешься рогами в ворота, когда тебе матерые фронтендеры* в один голос указывают на недостатки и на то, что можно было бы улучшить" *себя к ним не отношу Какой же я добрый

Оригинальная мысль - хранить JSON в URL... Регистрируйте юзера, используя oAuth, и храните изображения в базе. Ну или хоть в base64 кодируйте, всё же короче получится.

Сомневаюсь, что в вас хоть какая логика присутствует

Хранить данные в ссылке, длина которой не известна заранее, не очень гуд. Вот почитайте https://github.com/dreikanter/paradigm.ru/blob/master/posts/2007-12-19_url-max-length.md И как минимум прикрутите к сайту какой-нибудь сервис сокращения ссылок типо https://goo.gl/

этот кусок в коде лишний ) else { $(this).text(textName); }

$(function () { $('.recall-text').each(function () { var textName = $(this).text() if (textName.length > 150) { newTextName = textName.slice(0, 150); $(this).text(newTextName + '...'); } else { $(this).text(textName); } });});Простейший код. Поставьте вместо 150 в двух местах нужное кол-во симоволов.

http://jsfiddle.net/6g61ewdL/

сейчас насоветуем человеку, что по плану ему нуна будет свою CMS написать =)

Что-то у меня ничего не рисуется там.

1. Неплохо бы реализовать рисование с зажатой клавишей мыши. 2. Когда быстро щелкаешь, значительная часть щелчков не отрабатывается ожидаемым образом 3. С выбором цвета вообще какая-то не понятная чехорда. Как работает совсем не понятно.

ты не один — вас таких море (чему я очень таки рад) мне всегда было достаточно http://getbootstrap.com и вряд ли найдётся более информативный сайт чем офф. документация

Потому что у картинок z-index: 2, сделайте z-index: 3 элементу .headerSpace