Get number of NEXT sllide in Bootstrap Carousel

If we want find number of the next slide in Bootstrap carousel in handler of slide.bs.carousel event (not slid.bs.carousel, i.e. before animation start, not after) we can do it.

For do this we can use e.relatedTarget object in event handler (it'll be the next slide), than find it index in list of all slides.

The example of code below:

$('#bootstrap_carousel').on('slide.bs.carousel', function (e) {
    var nextItem = $(e.relatedTarget);
    var allItems = $(e.currentTarget).find('.item');

    var indexOfNextElement = allItems.index( nextItem );
});

P.S. Краткий перевод на русский: чтобы узнать индекс следующего слайда в карусели Bootstrap до начала анимации, можно в обработчике события slide.bs.carousel использовать объект e.relatedTarget, который и является следующим слайдом. Подробности - в коде выше.

Remove <br> tag from flow

Sometimes — on promo pages — we want to use tag <br> for neatly formatted text blocks "as in PSD" from designer. But using <br> isn't good, and on small screen of smartphone those blocks will have awkward views.

But we can use simple trick — set CSS  media query with breakpoint (say, for smartphone screens), and set rule for <br> tag property display with value none. That force browser to remove <br> tags from flow, and text will be shown properly.

See an example below — on wide screen (open example in separate window) text shown as preformatted with breaks, on narrow screen (768 px and narrowed) — without breaks. (I used red background only as indicator of without-br mode.)

See the Pen Remove tag
from flow by borshak (@borshak) on CodePen.

P.S. Краткий перевод на русский - если мы хотим использовать тег br, и в то же время не хотим, чтобы он портил текст на экранах сматрфонов, мы создать CSS-медиазапрос, и в нем прописать правило, которое заставит браузер на мелких экранах убирать тег br из потока. Подробности смотрите в коде примера.

[Pseudo] fallback for background-blend-mode in IE

As for now IE browser don't support CSS property background-blend-mode. But in simple cases (when we use blend mode multiply for toning background images with one color) we can use multiple background images for emulate blending.

The idea of fallback is simple:

• we prepare PNG image with alpha channel with color we need (with help of level of transparency in PGN we control level of final "blending", i.e. PNG with 25% of transparency will tint our background slightly, and 75% tint background greatly;
• size of PNG must be the same of size of
  where we use our fallback, or we can adjust size via CSS;
• then with help of JS or jQuery detect IE browser (I use function detectIE());
• if browser is IE we read URL of current image in CSS property background-image in;
• then we create string with two URLs, first for our transparent PNG, second for picture, that was used as background image in
  (our PNG must be first in list, otherwise it'll be lied under original background);
• write back this list to CSS property background-image.

And voila! IE placed our PNG over background, and we have some "blending".

In example below instead URL for PNG with transparency I used base64 encoded image, embedded right into JS.  Open this example in IE and Chrome for see the change in end result.

See the Pen [Pseudo] fallback for background-blend-mode in IE by borshak (@borshak) on CodePen.

P.S. Краткий перевод на русский - в браузере IE можно имитировать CSS-свойство background-blend-mode, добавляя в список фоновых картинок (первым в списке) полупрозрачный PNG с заливкой нужного цвета для тонировки основной фоновой картинки. Подробности смотрите в коде примера.