Polylang Snippet: Automatically get id of translated page

I’m currently working on a multi-language WordPress site project and while I’m trying to build everything without having to rely on specific page id’s, it happens from time to time.

I’m using Polylang to achieve the multi-lang capability and this plugin is great. Thanks for the recommendation goes out to Nils.

Let’s say our default language is german and you need the title of a specific page and this page has the id of 52. This is how you would normally do it:

Read Article …

Force repaint of an element with Javascript

Today I had a pretty nasty situation in which Safari on OSX would render an element in a place where it doesn’t belong. It was clearly a rendering bug/issue because when highlighting the element in the web inspector the place where the element should have been rendered was highlighted.

I tried adding transform: translate3d(0,0,0); to push the element on it’s own layer to increase rendering performance, but that didn’t help. I thought that if I could bring the browser to repaint the element, I’d be fine, even though it’s probably not the nicest solution. I dug around the internet and found a solution to force the repaint of an element with Javascript:

/**
 * Force Repaint of Header because of
   OSX Safari Rendering Bug
 */
var siteHeader = document.getElementById('header');

siteHeader.style.display='none';
siteHeader.offsetHeight; // no need to store this anywhere, the reference is enough
siteHeader.style.display='block';

But be careful when you execute this code. You don’t want to repaint an element more often than you absolutely have to.

Show content on top of YouTube video

I just ran into the problem that I needed a YouTube video to play in the background and have some other content covering it. Worked fine in all major browsers out of the box but for IE (all versions) you need to add wmode=opaque at the end of the src attribute like that:

<iframe width="640" height="480" src="http://www.youtube.com/embed/9B7te184ZpQ&wmode=opaque" frameborder="0" allowfullscreen></iframe>

Snippet: Smooth scrolling on iOS

Let’s assume you have a container in which you need to scroll. You just set a specific height and width and set it to overflow-y: scroll; No big deal, eh? But if you try to scroll within this container on your iOS device you’ll notice that it doesn’t scroll very smoothly and it doesn’t bounce at the top and end. But you can change this very simply:

.my-container {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

Snippet: clearfix

For the longest time I just used a div with the class of clear with just clear: both; but it turns out the following is better and these days the modern way (IE8 and up) to go. You can just apply the class clearfix to any element that has floating stuff inside and needs to be cleared. Works perfect and doesn’t need any additional markup.

.clearfix {
    &:after {
        content: '';
        display: table;
        clear: both;
    }
}

In case you’re wondering what this confusing syntax is all about, have a look at SASS/SCSS.

Snippet: Styling HTML5 Placeholder

You are using the HTML5 placeholder="Your name" attribute but don’t know how to style it? Here is how you do it:

.my-input::-webkit-input-placeholder {
    color: #555;
}

.my-input:-moz-placeholder {
    color: #555;
}

.my-input:-ms-input-placeholder {
    color: #555;
}

Make sure you don’t comma separate the selectors because browsers stop interpreting the whole list if they don’t understand one selector in it.