Сим-сим откройся или спрячем часть текста в сообщении.

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


Николай Носов Приключения Незнайки и его друзей 
КОРОТЫШКИ ИЗ ЦВЕТОЧНОГО ГОРОДА В одном сказочном городе жили коротышки. Коротышками их называли по- тому, что они были очень маленькие. Каждый коротышка был ростом с не- большой огурец. В городе у них было очень красиво. Вокруг каждого дома росли цветы: маргаритки, ромашки, одуванчики. Там даже улицы назывались именами цветов: улица Колокольчиков, аллея Ромашек, бульвар Васильков. А сам город назывался Цветочным городом. Он стоял на берегу ручья. Этот ручей коротышки называли Огурцовой рекой, потому что по берегам ручья росло много огурцов. За рекой был лес. Коротышки делали из березовой коры лодочки, переп- лывали через реку и ходили в лес за ягодами, за грибами, за орехами. Со- бирать ягоды было трудно, потому что коротышки ведь были крошечные, а за орехами и вовсе приходилось лазить на высокий куст да еще тащить с собой пилу. Ни один коротышка не смог бы сорвать орех руками - их надо было пилить пилой. Грибы тоже пилили пилой. Спилят гриб под самый корень, по- том распилят его на части и тащат по кусочкам домой. Коротышки были неодинаковые: одни из них назывались малышами, а дру- гие - малышками. Малыши всегда ходили либо в длинных брюках навыпуск, либо в коротеньких штанишках на помочах, а малышки любили носить платьица из пестренькой, яркой материи. Малыши не любили возиться со своими прическами, и поэтому волосы у них были короткие, а у малышек во- лосы были длинные, чуть не до пояса. Малышки очень любили делать разные красивые прически, волосы заплетали в длинные косы и в косы вплетали ленточки, а на голове носили бантики. Многие малыши очень гордились тем, что они малыши, и совсем почти не дружили с малышками. А малышки горди- лись тем, что они малышки, и тоже не хотели дружить с малышами. Если ка- кая-нибудь малышка встречала на улице малыша, то, завидев его издали, сейчас же переходила на другую сторону улицы. И хорошо делала, потому что среди малышей часто попадались такие, которые не могли спокойно пройти мимо малышки, а обязательно скажут ей что-нибудь обидное, даже толкнут или, еще того хуже, за косу дернут. Конечно, не все малыши были такие, но ведь этого на лбу у них не написано, поэтому малышки считали, что лучше заранее перейти на другую сторону улицы и не попадаться навстречу. За это многие малыши называли малышек воображульками - приду- мают же такое слово! - а многие малышки называли малышей забияками и другими обидными прозвищами. Некоторые читатели сразу скажут, что все это, наверно, выдумки, что в жизни таких малышей не бывает.Но никто ведь и не говорит, что они в жизни бывают. В жизни - это одно, а в сказочном городе - совсем другое. В сказочном городе все бывает. В одном домике на улице Колокольчиков жило шестнадцать малышей-коро- тышей. Самым главным из них был малыш-коротыш, по имени Знайка. Его прозвали Знайкой за то, что он знал очень много. А знал он много потому, что читал разные книги. Эти книги лежали у него и на столе, и под сто- лом, и на кровати, и под кроватью. В его комнате не было такого места, где бы не лежали книги. От чтения книг Знайка сделался очень умным. Поэ- тому все его слушались и очень любили. Одевался он всегда в черный кос- тюм, а когда садился за стол, надевал на нос очки и начинал читать ка- кую-нибудь книгу, то совсем становился похож на профессора. В этом же домике жил известный доктор Пилюлькин, который лечил коро- тышек от всех болезней. Он всегда ходил в белом халате, а на голове но- сил белый колпак с кисточкой. Жил здесь также знаменитый механик Винтик со своим помощником Шпунтиком; жил Сахарин Сахариныч Сиропчик, который прославился тем, что очень любил газированную воду с сиропом. Он был очень вежливый. Ему нравилось, когда его называли по имени и отчеству, и не нравилось, когда кто-нибудь называл его просто Сиропчиком. Жил еще в этом доме охотник Пулька


Если уже захотелось попробовать применить, копируем следующий код.

<center>
<div style="height: 250px; overflow-y: auto;"> ваш текст</div>
</center>

и в редакторе сообщений в режиме HTML вставляем в нужное место. Высоту height: можно поменять на своё значение, ну и естественно свой текст.

А теперь смастерим самый простой спойлер. В переводе с английского слово spoil (спойлер ) означает портить, отравлять. Ну , а в нашем случаи, мы просто спрячем в него (сим- сим откройся) нажимаем ниже-

смотрим:

Жил-был поп, Толоконный лоб. Пошел поп по базару Посмотреть кой-какого товару. Навстречу ему Балда Идет, сам не зная куда. "Что, батька, так рано поднялся? Чего ты взыскался?" Поп ему в ответ: "Нужен мне работник: Повар, конюх и плотник. А где найти мне такого Служителя не слишком дорогого?" Балда говорит: "Буду служить тебе славно, Усердно и очень исправно, В год за три щелка тебе по лбу, Есть же мне давай вареную полбу". Призадумался поп, Стал себе почесывать лоб. Щелк щелку ведь розь. Да понадеялся он на русский авось. Пон говорит Балде: "Ладно. Не будет нам обоим накладно. Поживи-ка на моем подворье, Окажи свое усердие и проворье". Живет Балда в поповом доме, Спит себе на соломе, Ест за четверых, Работает за семерых; До светла все у него пляшет. Лошадь запряжет, полосу вспашет, Печь затопит, все заготовит, закупит, Яичко испечет да сам и облупит. Попадья Балдой не нахвалится, Поповна о Балде лишь и печалится, Попенок зовет его тятей: Кашу заварит, нянчится с дитятей. Только поп один Балду не любит, Никогда его не приголубит. О расплате думает частенько: Время идет, и срок уж близенько. Поп ни ест, ни пьет, ночи не спит: Лоб у него заране трещит. Вот он попадье признается: "Так и так: что делать остается?" Ум у бабы догадлив, На всякие хитрости повадлив. Попадья говорит: "Знаю средство, Как удалить от нас такое бедство: Закажи Балде службу, чтоб стало ему невмочь; А требуй, чтоб он ее исполнил точь-в-точь. Тем ты и лоб от расправы избавишь Н Балду-то без расплаты отправишь". Стало на сердце попа веселее, Начал он глядеть на Балду посмелее. Вот он кричит: "Поди-ка сюда, Верный мой работник Балда. Слушай: платить обязались черти Мне оброк но самой моей смерти; Лучшего б не надобно дохода, Да есть на них недоимки за три года. Как наешься ты своей полбы, Собери-ка с чертей оброк мне полный". Балда, с попом понапрасну не споря, Пошел, сел у берега моря; Там он стал веревку крутить Да конец ее в море мочить. Вот из моря вылез старый Бес: "Зачем ты. Балда, к нам залез?" -- "Да вот веревкой хочу море морщить Да вас, проклятое племя, корчить". Беса старого взяла тут унылость. "Скажи, за что такая немилость?" -- "Как за что? Вы не плотите оброка, Не помните положенного срока; Вот ужо будет нам потеха, Вам, собакам, великая помеха". -- "Балдушка, погоди ты морщить море. Оброк сполна ты получишь вскоре. Погоди, вышлю к тебе внука". Балда мыслит: "Этого провести не штука!" Вынырнул подосланный бесенок, Замяукал он, как голодный котенок: "Здравствуй, Балда-мужичок; Какой тебе надобен оброк? Об оброке век мы не слыхали, Не было чертям такой печали. Ну. так и быть -- возьми, да с уговору, С. общего нашего приговору -- Чтобы впредь не было никому горя: Кто скорее из нас обежит около моря, Тот и бери себе полный оброк, Между тем там приготовят мешок". Засмеялся Балда лукаво: "Что ты это выдумал, право? Где тебе тягаться со мною, Со мною, с самим Балдою? Экого послали супостата! Подожди-ка моего меньшего брата". Пошел Балда в ближний лесок, Поймал двух зайков да в мешок. К морю опять он приходит, У моря бесенка находит. Держит Балда за уши одного зайку: "Попляши-тка ты под нашу балалайку; Ты, бесенок, еще молоденек, Со мною тягаться слабенек; Это было б лишь времени трата. Обгони-ка сперва моего брата. Раз, два, три! догоняй-ка". Пустились бесенок и зайка: Бесенок по берегу морскому, А зайка в лесок до дому. Вот, море кругом обежавши, Высунув язык, мордку поднявши, Прибежал бесенок задыхаясь, Весь мокрешенек, лапкой утираясь, Мысля: дело с Балдою сладит. Глядь -- а Балда братца гладит, Приговаривая: "Братец мой любимый, Устал, бедняжка! отдохни, родимый". Бесенок оторопел, Хвостик поджал, совсем присмирел, На братца поглядывает боком. "Погоди,-- говорит,-- схожу за оброком". Пошел к деду, говорит: "Беда! Обогнал меня меньшой Балда!" Старый Бес стал тут думать думу. А Балда наделал такого шуму, Что все море смутилось И волнами так и расходилось. Вылез бесенок: "Полно, мужичок, Вышлем тебе весь оброк -- Только слушай. Видишь ты палку эту? Выбери себе любимую мету. Кто далее палку бросит, Тот пускай и оброк уносит. Что ж? боишься вывихнуть ручки? Чего ты ждешь?" -- "Да жду вон этой тучки: Зашвырну туда твою палку, Да и начну с вами, чертями, свалку". Испугался бесенок да к деду, Рассказывать про Балдову победу, А Балда над морем опять шумит Да чертям веревкой грозит. Вылез опять бесенок: "Что ты хлопочешь? Будет тебе оброк, коли захочешь..." -- "Нет,-- говорит Балда,-- Теперь моя череда, Условия сам назначу, Задам тебе, враженок, задачу. Посмотрим, какова у тебе сила. Видишь: там сивая кобыла? Кобылу подыми-тка ты, Да неси ее полверсты; Снесешь кобылу, оброк уж твой; Не снесешь кобылы, ан будет он мой". Бедненький бес Под кобылу подлез, Понатужился, Понапружился, Приподнял кобылу, два шага шагнул. На третьем упал, ножки протянул. А Балда ему: "Глупый ты бес, Куда ж ты за нами полез? И руками-то снести не смог, А я, смотри, снесу промеж ног". Сел Балда на кобылку верхом Да версту проскакал, так что пыль столбом. Испугался бесенок и к деду Пошел рассказывать про такую победу. Черти стали в кружок, Делать нечего -- собрали полный оброк Да на Балду взвалили мешок. Идет Балда, покрякивает, А поп, завидя Балду, вскакивает, За попадью прячется, Со страху корячится. Балда его тут отыскал, Отдал оброк, платы требовать стал. Бедный поп Подставил лоб: С первого щелка Прыгнул поп до потолка; Со второго щелка Лишился поп языка, А с третьего щелка Вышибло ум у старика. А Балда приговаривал с укоризной: "Не гонялся бы ты, поп, за дешевизной"

Для того , чтобы установить его скопируйте следующий код

<div style="margin: 5px 20px 20px;">
<div style="margin-bottom: 2px;">
<b>смотрим</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Open-Close" /> <br />
<br /></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

<здесь вставляем ваш текст или код ,или картинку>

</div>
</div>
</div>
Вставляем его в редакторе сообщений в режиме  HTML в то место, где хотим скрыть текст или код.

Где выделено красным можете написать своё- spoiler, нажимаем - как вам нравиться.
Вот такие простые способы оформления текста в сообщении.
Буду рада, если это вам пригодится.


хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :


7 комментариев:

  1. Добрый жень!! Нашла ваш блог очень полезным!! Вопрос -

    div
    Это вставлять после всего текста, который хочешь скрыть? (По аналогии с жж)?

    ОтветитьУдалить
  2. Ольга,я с ЖЖ не совсем знакома. Закрывающийся тег div прописывают после фрагмента текста, который который хотим скрыть. Типа так-привет (тут код-скрытый текст - закрывающийся div - и снова любой текст.

    ОтветитьУдалить
  3. У меня получилась очень красивая прокрутка текста. Пока сделала только на тестовом блоге "БиблиоИрина". Получилось ЗДОРОВО! СПАСИБО, ВИКТОРИЯ!

    ОтветитьУдалить
    Ответы
    1. Ну Ирина, Вы молодец. Приятно слышать когда результат радует.

      Удалить
  4. Я сделала чудесную прокрутку текста сегодня на блоге "Волшебный фонарик". Немножко изменила высоту текста и поставила по левому краю. У Вас center, у меня - left.

    ОтветитьУдалить
  5. Дельная штука. Надо срочно утащить к себе.

    ОтветитьУдалить
    Ответы
    1. Я у себя в блоге длинные коды оформляю именно как первый вариант. Тащите Дима, мне не жалко.

      Удалить

Пользовательский поиск
Foto Saya
My Photo