Tutorials

Viewing posts from the Tutorials category

Adaptive Backgrounds Color – picture element support

About a year ago we used a brilliant plugin Adaptive Backgrounds (http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/) on one of our projects – OceanWide Expeditions (http://www.oceanwide-expeditions.com/)

Site’s header on pages with hero images is semi-opaque. The script adds slight colored gradient so the page has nicer look and better header links readibility.

It was a great experience to use Adaptive Images on a container with background-image property. But with time past we needed to provide support for <picture> element.

Plugin didn’t support this element, as was searching only for background-image property. The other way it assumes that we have <img> element.

There’s no sense to add “background-image” property to <picture>, as we add one more useless big (remember it is a background for hero image) request on our page.

So, I read a bit further about <picture> , and how it deals with its <img> children.

Adaptive Images is based on RGBaster plugin, that takes <img> or full image URL as argument.

So we had a chance to use it with <picture>. How do we get image from <picture> element?

Its child <img> has an attribute currentSrc for active image from your <source> set. This property is not supported in Safari and IE (https://developer.mozilla.org/en/docs/Web/API/HTMLImageElement#Browser_compatibility)

Keeping this in mind, we create following image definition replacement for Adaptive Backgrounds script jquery.adaptive-backgrounds.js (line 51):

That’s all. Feel free to clone my fork from https://github.com/IgorUsoltsev/jquery.adaptive-backgrounds.js or maybe one day Adaptive Backgrounds authors would merge it into main repo.

NOTE: your <picture> element is required to have at least 1 <img> (it is the only valid markup for this element but still)

Bootstrap modal iOS momentum issue

Recently on one of the projects using Bootstrap 3 I encountered really weird bug – when the modal is opened, you can scroll the underlay.

In theory you have a backdrop over main body content, and only modal should be scrolled. No actions on page content itself.

In some cases it was not only aesthetic problem. My modal even stopped reacting on touch actions. The body was scrolled instead.

bootstrap-modal-issue

I have read tons of articles, and issue was using css property -webkit-overflow-scrolling: touch; on my Bootstrap modal.

If you don’t use this, you have really poor scrolling experience. The css rule applies so called infinite (or momentum) scrolling.

So, imagine you have this HTML:

Then, in your custom modal .less file add following lines:

Please, make sure that your modal has class .modal-open when it’s opened.

In my case, I had a modal with the height larger than mobile screen.

So, a pretty nice solution was to make modal full screen.

So that I have no scroll issues when I open modal – it should be always scrolled to top, and the page saved its scroll position when the modal is closed, I added few jQuery lines (as you are using Bootstrap jQuery is OK here):

Hope this will work for you!