CSS-based tabs, take 2

An earlier post detailed how we can build a 100% CSS-based tab layout. While pretty cool and somewhat usable it had some flaws.

  • Jumps back to the first tab when the mouse pointer leaves the area.
  • Depends on exact positioning of the content in relation to the tabs.
  • Not touch friendly.
  • Not keyboard friendly.

Most of this is a result of the usage of hover. This can be fixed by using the checkbox hack to activate the tabs. This technique is often used to create small screen friendly menus but is not limited to that. To do this we have to use label elements for the tabs and a corresponding radio button that will be hidden with CSS. The resulting HTML code looks like this:


<div class="cssv-widgets">

  <div class="cssv-widget">
    <input type="radio" name="widget" id="widget1" checked="checked" />
    <label for="widget1" class="caption" onclick>Widget #1 caption</label>
    <div class="content">
      <p>Widget #1 content</p>
    </div>
  </div>

  <div class="cssv-widget">
    <input type="radio" name="widget" id="widget2" />
    <h2 class="caption"><label for="widget2" onclick>Widget #2 caption</label></h2>
    <div class="content">
      <p>Widget #2 content</p>
    </div>
  </div>

  <div class="cssv-widget">
    <input type="radio" name="widget" id="widget3" />
    <label for="widget3" class="caption" onclick>Widget #3 caption</label>
    <div class="content">
      <p>Widget #3 content</p>
      </div>
  </div>

</div>

Note that we use radio buttons, not checkboxes. This is important because we want one and only one tab to be active at a time. And the first radio button has the checked attribute so the first tab is active by default. There are some browser problems to take care of later, but the basic CSS we will use for the checkbox hack is like this:


/* Hide the radio buttons */
.cssv-widget > input[type=radio] {
  position: absolute;
  left: -9999px;
}
/* Display content for the selected tab */
.cssv-widget > input[type=radio]:checked ~ .content {
  display: block;
}

This is a very specific combination of direct children and sibling selectors. This will, in combination with our html skeleton, ensure that nothing from the checkbox hack is applied to anything inside the .content containers.

Note: When clicking the label element, the corresponding radio button is checked and current Opera and Firefox versions (and possibly other browsers) will then try to scroll the page so we can see the radio button we checked. If we position the radio buttons off screen with top: -9999px; that will send us to the top of the page. So we will only use horisontal positioning to move the radio buttons off screen.

Note 2: The onclick attribute is recommended on the labels due to a bug in iOS < 6.0 . Most Apple device users are on 6.0 or newer these days but it doesn't seem to create any trouble.

Note 3: Due to a sibling selector/pseudo-class bug existent in Webkit < 535.3 (corresponding to Android <= 4.1.2) we need some magic code. Android <= 4.1.2 is currently most Android users and I don't know of any side effects from this so we will keep this hack.


body { 
  -webkit-animation: bugfix infinite 1s; 
}
@-webkit-keyframes bugfix { 
  from {padding:0;} 
  to {padding:0;} 
}

Source for note 2 and 3: Advanced Checkbox Hack by Tim Pietrusky.

After taking all this into consideration we end up with our tabs:

Widget #1 content

Widget #2 content

Widget #3 content

These tabs don't jump back to the first one when you leave the area, it is fully usable on a touch device and can be navigated via a keyboard. So 3 of the 4 problems mentioned in the beginning are solved and it is still 100% HTML/CSS. There is still absolute positioning involved so we need to set a fixed height with CSS to avoid crashing into content below, but we are no longer dependent on not having any room between the captions and the content. So it's still not perfect but it's almost there.

CSS code for this post

6 comments

  1. XEvilNop

    As you can see, XRumer + XEvil successfully broke any anti-bots measures on your website.
    Oh yes, XEvil 4.0 can solve Google ReCaptcha-2 too. Without any problem – just do check the videos about XEvil in YouTube.

    And you can use XEvil for your website! Increase popularity and make money, as other happy XEvil owners ;)

    Good luck!

  2. JamesUrgew

    Лохоброкер Esperio. Обзор и отзывы клиентов
    Esperio лохотрон, мошенники, жуликиEsperio (esperio.org) представляется надежным и проверенным брокером, который обеспечивает высококачественное обслуживание и выгодные торговые условия. Сомнительная контора сыплет лживыми заявлениями о торговле без риска, оперативном выводе прибыли и заманчивых перспективах. Однако за красивыми сказками анонимных жуликов маскируется довольно опасный скам-проект. Создатели скам-сервиса утверждают, что предоставляют услуги более 10 лет и обслуживают множество довольных клиентов. Однако не торопитесь верить на слово записным лжецам. Позитивные отзывы об этой конторе написаны явно по заказу. Подобные методы продвижения могут использовать только мошенники. Рассказываем, почему сотрудничество с данной организацией это дорога в никуда.

    Esperio лохотрон, мошенники, жулики

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

    Esperio лохотрон, мошенники, жулики

    Сайт брокера – это своего рода визитная карточка. Оформление ресурса стоковыми рисунками может сделать его презентабельнее, но сегодня такого можно добиться даже бесплатно. Специализированный сервис оценил старания разработчиков esperio.org примерно в 70$. Это явно не те деньги, которые должен стоит сайт серьезной финансовой организации.

    Мошенники, похоже, рассчитывают на долгосрочную перспективу. Каждый раздел сайта тщательно продуман. Целевая аудитория скам-проекта — новички. Опытный трейдер знает как отличить фальшивку, и смотрит на важные «мелочи». Несмотря на все попытки казаться респектабельной организацией, перед нами обычная офшорная кухня, созданная для развода наивных буратин.

    Esperio лохотрон, мошенники, жулики

    Esperio, помимо брокерских услуг, рекламирует два вида инвестиционных портфелей: «Первые шаги» и «Оптимальный». Сроки вложений 12 месяцев. Прогнозируемая прибыль 40,5 и 87,7%! Кто может гарантировать доход в условиях нестабильного рынка? Только мошенники и банкиры. Но последние предлагают куда более адекватные цифры – 1-2% в год в твердой валюте. Обещания сверхприбыли без особых усилий — это удел аферистов.

    Лохоброкер предлагает 4 типа счетов. Низкие спреды, минимальные комиссии, торговля на МТ4 – все это хорошо. Смущает только огромное кредитное плечо до 1:1000. С таким коэффициентом любой депозит можно слить за пару часов. Лицензированный брокер строго ограничивает леверидж максимум до 1:30.

    Esperio лохотрон, мошенники, жулики

    Отдельно разберем бонусы, это сугубо мошенническая тема. По условиям трейдеру придется переформатировать бонус в настоящие деньги. Период отработки бонуса Double Empower составляет 90 дней с момента начисления. Расчёт торгового оборота осуществляется по следующей формуле: 1 лот совершенных операций переводит 3 доллара бонусных средств в реальные. Например, денежный эквивалент бонуса в $600/3=200 лотов!!! Выполнить такое на полностью подконтрольном мошенникам терминале практически невозможно. Заканчивается погоня за отработкой быстрым сливом счета.

    Раздел «Образование» создали для привлечения наивных энтузиастов. Попутно жулики лелеют надежду на то, что с новичков можно будет срубить денег за оплату так называемых курсов. Информации об онлайн-обучении нет фактически никакой. Имена и квалификация преподавателей не раскрыта. Минимальная стоимость курса для начинающих составляет $250 за 45 часов занятий, для продвинутых $500 за 30 часов, для профи $50 за 1 занятие. Это форменное разводилово.

    Esperio лохотрон, мошенники, жулики

    Наличие партнерской программы дает возможность заработать на привлечении лохов. На самом деле жулики стремятся расширить клиентскую базу за счет сарафанного радио. Оплата щедрая. За каждого вновь поступившего зазывала получит 20$ единоразово. А если клиент будет активен, обещают задонатить аж 500$. То, что реальные деньги до лоховода не дойдут, он узнает позже. Вопрос в следующем. За чей счет столь невиданная щедрость? Легальный брокер подобной благотворительостью не занимается.

    Esperio лохотрон, мошенники, жулики

    В разделе «О компании» размещено обширное сочинение о великой миссии, будущих свершениях, преимуществах и безупречной репутации нашего «героя». По легенде глобальный «брокер» Esperio предоставляет доступ к торговле на финансовом рынке с 2011 года. За время трудовой деятельности компания якобы завоевала доверие более 10 тысяч трейдеров. Более 1 000 000 000$ — торговый оборот клиентов. Все это, конечно же, вранье.

    Esperio лохотрон, мошенники, жулики

    Проверка возраста сайта подтверждает — представители «брокера» врут. Доменное имя EspeRio.org было зарегистрировано в июле, но к активной “обработке” жертв жулики приступили с сентября 2021 года. На территории РФ сайт аферистов уже заблокирован по распоряжению Генпрокуратуры.

    Контактные и юридические данные

    Раздела «Контакты» на сайте нет. Связаться со службой техподдержки можно только через форму обратной связи либо онлайн-чат. Ни телефоны, ни адреса представительств, ни даже мейл жулики опубликовать не удосужились. Страница Facebook Esperio была создана не 11 лет назад, а 17 августа 2021 года. Лохотрон явно не пользуется популярностью. Под публикациями обсуждений нет. Подписано на паблик всего 157 ботов.

    Esperio лохотрон, мошенники, жулики

    Если верить сайту, наш «герой» зарегистрирован на далеком офшорном острове Сент-Винсент и Гренадины. В Соглашении заявлено, что договор заключается от имени компании OFG Cap. Ltd., зарегистрированной якобы по адресу: First Floor, First St. Vincent Bank Ltd Building, James Street, Kingstown, St. Vincent and the Grenadines. Свидетельства об инкорпорации на сайте нет. Судя по всему, такой компании юридически вообще не существует. О лицензии жулики не упомянули ни разу. А знаете, почему? Потому что деятельность этой конторы никто не контролирует. Сотрудничество с подобной помойкой — это вершина глупости!

    Шарлатаны только начали раскручивать свое «детище». Отдельные помойные сайты не стесняются пиарить эту лоховозку, размещая позитивно-мотивирующие обзоры. Также в сети можно найти довольно много ВАУ!-отзывов, расхваливающих Эсперио. Это проплаченное творчество служит одной цели – повлиять на неокрепший разум потенциального клиента. Реальные комментарии от пострадавших кардинально отличаются от сказки.

    Esperio (esperio.org) – это красиво замаскированный лохотрон. Как бы мошенники не пыжились, но без официальной регистрации и лицензии весь этот маскарад выглядит нелепо. Возможно за счет красивого и правдоподобного сайта шарлатанам удастся облапошить большее число новичков. Не стоит поддаваться эмоциям и верить аферистам!

    Если вы имели опыт общения с этой лоховозкой, своими впечатлениями и телефонами жуликов вы можете поделиться в комментариях. Это, возможно, поможет не наделать глупостей потенциальным жертвам этого скам-проекта.

  3. digital marketing Libre

    digital marketing services companies Technology Tools is a very competent wont web site growth and digital marketing company. We accept grown along with our clients. We are a sumptuously known musician in the bazaar, because we be in sympathy with our client’s requirement the best. For us, our clients happen first and always. We possess solutions for all: individual, midget responsibility as coolly as socking corporate. Our peerless way of doing trade has helped us earn a slues of accolades. Our clients communicate after us. We have a passion in what we do, and we do it the best.

Post a comment

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>