Ivan Bogachev

Примеры реализации анимации от 'display': 'block' к 'display': 'none'?

Вам нужно загуглить отличия display: none от visibility: hidden и от opacity: 0. Это сильно не одно и то же.

Общее решение вопроса в одну строчку. Да, вычислительная сложность получается немаленькая, но на 50 элементов это не страшно.

А почему бы не использовать :only-of-type?

Можно прямо в CSS, можно в селекторе jQuery если это необходимо

Вот вам пример наглядного представления этого дерева.

Изменить это контекстное меню просто так нельзя. В том же хроме (для примера) для работы с ним нужны соответствующие права. Их можно дать расширению для браузера, но простой странице - нет. Аттрибут contextmenu, добавленный в html5 позволяет только добавлять туда свои пункты, но не удалять. Да и работает от только в Firefox (пример). У вас остается только вариант, предложенный Дмитрий - запретить это меню и создать свое. Но ничто не помешает любопытному пользователю посмотреть ваш код или ресурсы, которые вы подгружаете.

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

Как говорят на w3cschools,

The Browser Object Model (BOM) allows JavaScript to "talk to" the browser.

Это такой мягкий намек на то, что вообще-то говоря Javascript может жить и вне браузера - на ум сразу приходит nodejs: там у вас изначально есть только консоль - ни о какой работе с HTML или браузером речи не идет. Можно сказать, что браузер предоставляет нам эдакое "дополнение" к тому, что знает интерпретатор о языке на момент исполнения кода. Реализаций интерпретаторов, разумеется, больше одной - если интересно какие сейчас в моде - можно посмотреть на википедии. Собственно в самом интерпретаторе и заложено то, что вы назвали "местом, где язык описан". А "описан" он там в соответствии со стандартом языка.

Сам по себе Javascript (диалект ECMAScript) - достаточно сложный язык, его врят ли получится исполнять "читая строки по порядку" (вспомним хотя бы "поднятие" переменных), поэтому интерпретируется он несколько сложнее, чем кажется. Очень не лишним будет посмотреть вот такой парсер. И вдвойне не лишним будет познакомиться с LISP перед тем как погружаться в дебри интерпретации (это покажется странным, по практически все идеи, которые сейчас используются в Javascript, были уже очень и очень давно и там, где вы их меньше всего ожидали увидеть. Да и мозг заметно вправляет такое знакомство). На хабре люди не раз уже писали свои интерпретаторы для разных языков, так что начало для понимания внутренней кухни там можно получить.

Возвращаясь к теме - если после ознакомления с вышеупомянутым парсером (который строит синтаксическое дерево) вы посмотрите на ваши BOM/DOM свежим взглядом, то заметите, что в то самое "дерево всего, что есть" браузер добавляет "дерево DOM" и "дерево BOM" с которыми вы, разумеется, можете работать - в коде они будут соответствовать объектам document и window. (звучит, конечно, немного грубо - но вы сами просили на пальцах). Для того, чтобы в этом убедиться, можно воспользоваться инструкцией по построению синтаксического дерева для Javascript

Пока элемент #shortstory не будет создан, ваше $("#shortstory") не сработает. Поэтому код заворачивают в $(document).ready(), чтобы он начинал выполняться только после формирования элементов на странице.

VanillaJS

На мобильных устройствах лучше использовать не click а touch события - посмотрите какие они бывают. Или используйте Touche.js - эта штука подменит ваши click на touch там, где это необходимо

У вас скрипт выполняется раньше, чем создаются кнопки. Уберите его в конец body или заверните в

$( document ).ready(function() {
    // Your code
});

или любой аналог этого на чистом JS (без jQuery)