Preface

As the title says, let’s see the demo below:

Main

<label id="cont" contentEditable>
   label should be focused
</label>
<button id="focus">make label focus</button>

#cont {
  display: block;
  background: pink;
  width: 150px;
  height: 40px;
}

$('#focus')[0].onclick = () => {
  $('#cont')[0].focus()
}
$('#cont')[0].onfocus = event => {
  console.log(event.type)
}

function $(selector) {
  return Array.from(document.querySelectorAll(selector))
}

Suppose that you are using chrome, after loaded please press F12 and open the console and then click the button. label#cont should be focused after clicking the button.So, there will be word focus at the console.

However, firefox wouldn’t do that until you click the label. Anyway, I have posted a bug. Let’s see what will happen.

Preface

Recently, I need to make a smooth scroll. Of course, I think of setTimeout. However, I was thinking if there is a better way or API. So, here is the result of my research.

Main

• scrollTo

You can use it like:

window.scrollTo({
  top: 1000,
  behavior: 'smooth'
});

It works in Chrome and Firefox. However, IE and Edge doesn’t support. Code above will run like

window.scrollTo(0, 0);

Similar API also exists like scrollIntoView or scrollBy. The compatibility is the key problem.

• requestAnimationFrame

I would suggest this API instead of setTimeout. However, the process of implementation is not so easy like an existing API. Well, a little more complicated than setTimeout. However, compared with setTimeout, requestanimationframe has higher performance. Want to know more? Check the reference and SO. Also, here is the demo:

let animationFrameId = 0;
function smoothScoll(targetScrollTop) {
  let speed = 0.1;
  let startTime = 0;
  let timeLimit = 2000;
  window.cancelAnimationFrame(animationFrameId);
  animationFrameId = window.requestAnimationFrame(step);
  function step(timestamp) {
    startTime = startTime || timestamp;
    let interval = timestamp - startTime;
    let distance = targetScrollTop - getWinScrollTop();
    let stepSize = speed * distance;
    switch (Math.ceil(stepSize)) {
      case 0:
        stepSize = -1;
        break;
      case 1:
        stepSize = 1;
        break;
    }
    if (distance !== 0 && interval < timeLimit) {
      window.scrollTo(0, getWinScrollTop() + stepSize);
      animationFrameId = window.requestAnimationFrame(step);
    }
  }
  function getWinScrollTop() {
    return window.scrollY || window.pageYOffset;
  }
}

The latest version can be found in my github smoothScroll.

However, the compatibility is not good enough because of IE<10 and Opera Mini.

• Other solution

Code for setTimeout is similar with requestAnimationFrame but I won’t talk about it. Except that, jQuery has provided an API like:

$("a[href='#top']").click(function() {
  $('html, body').animate({ scrollTop: 0 }, 'slow');
  return false;
});

Ending

Anyway, use requestAnimationFrame if possible. And if not, use setTimeout as shim.

Reference

Why is requestAnimationFrame better than setInterval or setTimeout

Preface

As the title says, what I want is like image below:

Is that Possible, ha?

Steps

At the first, I thought that was impossible with css only. But I find an answer in SO. Here is the code:

<div class="par">
  <span class="child child1">box box box box box </span>
  <span class="child child2">box box</span>
  <span class="child child3">box box box box</span>
</div>

* {
  margin: 0;
  padding: 0;
}
.par {
  background: pink;
  width: 100px;
  text-align: left;
}
.par .child {
  display: inline-block;
  text-align: center;
}
.par .child1 {
  background: lightblue;
}
.par .child2 {
  background: yellowgreen;
}
.par .child3 {
  background: orange;
}

That is magic!

Because inline-blocks is an inline-level element. So, it will be in the left of the container .par built because of text-align:left. The width of inline-block is determined by the content which is only one line. So, text-align:center on the .child doesn’t work because the width of .child is equal to the width of one line content in the .child.

Also, the inline-block is a block container. When there is more than one line, the width of inline-block will be equal to the width of .par. In this case, text-align:center will work on the last line because the width of last line is less than the width of the inline-block.

Ending

Anyway, this solution is awesome. Thanks to the reference.

Reference

how-can-i-use-text-align-last-except-when-i-have-only-one-line-of-text