Develop Reference

Why won't justify-content center my React component that uses display:flex?

Hi I am working on a React project and found a sliding pane library on NPM that I am customizing for my use. I want to center the pane horizontally so I tried adding "justify-content: center" to the flexbox but my component will still not center. I also tried "align-items: center" but that only moves everything inside the panel to the center instead of the panel itself, I tried doing "margin: 0 auto" but that doesn't work either but "margin-left: 50px" does move it. Does anyone know what is preventing it from centering? Here is the CSS and the .js code:
/*custom version of css file found in the react-sliding-pane library*/
.slide-pane {
display: flex;
flex-direction: column;
justify-content: center; /*Why wont this work?!?!*/
background: #fff;
opacity: 0.8;
width: 100%;
max-width: 1200px;
height: 100%;
box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5);
transition: transform 0.5s ease;
will-change: transform;
}
.slide-pane:focus {
outline-style: none;
}
.slide-pane_from_right {
margin-left: auto;
transform: translateX(100%);
}
.slide-pane_from_right.ReactModal__Content--after-open {
transform: translateX(0%);
}
.slide-pane_from_right.ReactModal__Content--before-close {
transform: translateX(100%);
}
.slide-pane_from_left {
margin-right: auto;
transform: translateX(-100%);
}
.slide-pane_from_left.ReactModal__Content--after-open {
transform: translateX(0%);
}
.slide-pane_from_left.ReactModal__Content--before-close {
transform: translateX(-100%);
}
.slide-pane_from_bottom {
/* height: 90vh; */
/* margin-top: 10vh; */
transform: translateY(100%);
}
.slide-pane_from_bottom.ReactModal__Content--after-open {
transform: translateY(0%);
}
.slide-pane_from_bottom.ReactModal__Content--before-close {
transform: translateY(100%);
}
.slide-pane__overlay {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0, 0, 0, 0);
}
.slide-pane__overlay.ReactModal__Overlay--after-open {
background-color: rgba(0, 0, 0, 0.5);
transition: background-color 0.5s;
}
.slide-pane__overlay.ReactModal__Overlay--before-close {
background-color: rgba(0, 0, 0, 0);
}
.slide-pane__header {
display: flex;
flex: 0 0 64px;
align-items: center;
background: #ebebeb;
height: 64px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.slide-pane__title-wrapper {
display: flex;
flex: 1;
flex-direction: column;
margin-left: 32px;
min-width: 0;
}
.slide-pane .slide-pane__title {
font-size: 18px;
font-weight: normal;
max-width: 80%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
padding: 0;
}
.slide-pane__close {
margin-left: 24px;
padding: 16px;
opacity: 0.7;
cursor: pointer;
}
.slide-pane__close svg {
width: 12px;
padding: 0;
}
.slide-pane__content {
position: relative;
overflow-y: auto;
padding: 24px 32px;
flex: 1 1 auto;
}
.slide-pane__subtitle {
font-size: 16px;
margin-top: 2px;
}
// Custom version of https://www.npmjs.com/package/react-sliding-pane
import React from "react";
import PropTypes from "prop-types";
import Modal from "react-modal";
var CLOSE_TIMEOUT = 500;
function ReactSlidingPane(_ref) {
var isOpen = _ref.isOpen,
title = _ref.title,
subtitle = _ref.subtitle,
onRequestClose = _ref.onRequestClose,
onAfterOpen = _ref.onAfterOpen,
children = _ref.children,
className = _ref.className,
overlayClassName = _ref.overlayClassName,
// closeIcon = _ref.closeIcon,
_ref$from = _ref.from,
from = _ref$from === void 0 ? "right" : _ref$from,
height = _ref.height,
// marginTop = _ref.marginTop,
shouldCloseOnEsc = _ref.shouldCloseOnEsc;
var directionClass = "slide-pane_from_".concat(from);
return /*#__PURE__*/ React.createElement(
Modal,
{
ariaHideApp: false,
className: "slide-pane "
.concat(directionClass, " ")
.concat(className || ""),
style: {
content: {
height: height || "auto",
position: "absolute",
bottom: "0px",
},
},
overlayClassName: "slide-pane__overlay ".concat(overlayClassName || ""),
closeTimeoutMS: CLOSE_TIMEOUT,
isOpen: isOpen,
shouldCloseOnEsc: shouldCloseOnEsc,
onAfterOpen: onAfterOpen,
onRequestClose: onRequestClose,
contentLabel: 'Modal "'.concat(title || "", '"'),
},
/*#__PURE__*/ React.createElement(
"div",
{
className: "slide-pane__header",
},
// /*#__PURE__*/ React.createElement(
// "div",
// {
// className: "slide-pane__close",
// onClick: onRequestClose,
// },
// closeIcon || /*#__PURE__*/ React.createElement(IconClose, null)
// ),
/*#__PURE__*/ React.createElement(
"div",
{
className: "slide-pane__title-wrapper",
},
/*#__PURE__*/ React.createElement(
"h2",
{
className: "slide-pane__title",
},
title
),
/*#__PURE__*/ React.createElement(
"div",
{
className: "slide-pane__subtitle",
},
subtitle
)
)
),
/*#__PURE__*/ React.createElement(
"div",
{
className: "slide-pane__content",
},
children
)
);
}
ReactSlidingPane.propTypes = {
isOpen: PropTypes.bool.isRequired,
title: PropTypes.any,
subtitle: PropTypes.any,
onRequestClose: PropTypes.func,
onAfterOpen: PropTypes.func,
children: PropTypes.any.isRequired,
className: PropTypes.string,
overlayClassName: PropTypes.string,
from: PropTypes.oneOf(["left", "right", "bottom"]),
width: PropTypes.string,
// closeIcon: PropTypes.any,
shouldCloseOnEsc: PropTypes.bool,
};
// function IconClose() {
// return /*#__PURE__*/ React.createElement(
// "svg",
// {
// xmlns: "http://www.w3.org/2000/svg",
// viewBox: "0 0 13 22",
// },
// /*#__PURE__*/ React.createElement("path", {
// fill: "currentColor",
// fillRule: "evenodd",
// d:
// "M4 11l8 8c.6.5.6 1.5 0 2-.5.6-1.5.6-2 0l-9-9c-.6-.5-.6-1.5 0-2l9-9c.5-.6 1.5-.6 2 0 .6.5.6 1.5 0 2l-8 8z",
// })
// );
// }
export default ReactSlidingPane;

If I've understood correctly from your picture and description, it sounds like what you're after is a row-formatted flex-box and justify-content: center on the parent container of .slide-pane.
Giving an element a display: flex property does not allow you to position that element, only it's children, which you seem to understand already:
I also tried "align-items: center" but that only moves everything inside the panel to the center

element.innerHTML is not a function and option with an object value

Hi I'm trying to do the following in javascript, basically, I have an input that I will get the input text from an array, and I need each option to have an object as a value so I can use some attributes of my object
const data = [
{
name: "SIMPLES NACIONAL – MEI",
funcionarioIncrease: 49.99,
socioIncrease: 0,
FATURAMENTO: [
{
name: "ATÉ 30.000,00",
value: 49.99,
},
{
name: "De 30.001,00 a 50.000,00 ",
value: 99.99,
},
],
},
{
name: "SIMPLES NACIONAL – SERVIÇOS",
funcionarioIncrease: 25,
socioIncrease: 25,
FATURAMENTO: [
{
name: "ATÉ 30.000,00",
value: 149.99,
},
{
name: "De 30.001,00 a 50.000,00 ",
value: 199.99,
},
],
},
];
const Modes = () => {
if (data instanceof Array) {
return data.map((value) => {
return {
name: value.name,
funcionarioIncrease: value.funcionarioIncrease,
socioIncrease: value.socioIncrease,
faturamento: value.FATURAMENTO,
};
});
} else {
return null;
}
};
let results = function () {
const modes = Modes();
let selectHeader = document.querySelectorAll(".select__header");
let selectItem = document.querySelectorAll(".select__item");
modes.map((value) => {
let element = document.createElement("div");
element.classList.add("select__item");
element.innerHTML(value.name);
});
selectHeader.forEach((item) => {
item.addEventListener("click", selectToggle);
});
selectItem.forEach((item) => {
item.addEventListener("click", selectChoose);
});
function selectToggle() {
this.parentElement.classList.toggle("is-active");
}
function selectChoose() {
let text = this.innerText,
select = this.closest(".select"),
currentText = select.querySelector(".select__current");
currentText.innerText = text;
select.classList.remove("is-active");
}
};
results();
.select {
position: relative;
width: 100%;
}
.select.is-active .select__body {
display: block;
}
.select__header {
border: 1px solid #ccc;
cursor: pointer;
display: flex;
}
.select__current {
font-size: 18px;
line-height: 24px;
padding: 8px;
}
.select__icon {
align-items: center;
display: flex;
flex-shrink: 0;
justify-content: center;
height: 40px;
margin-left: auto;
text-align: center;
width: 40px;
}
.select__body {
border: 1px solid #cccccc;
border-top: 0;
display: none;
left: 0;
position: absolute;
right: 0;
top: 100%;
}
.select__item {
cursor: pointer;
font-size: 16px;
line-height: 24px;
padding: 8px;
}
.select__item:hover {
background-color: #f2f2f2;
}
<div class="service_mode flex">
<div class="select is-active">
<div class="select__header">
<span class="select__current">Value 1</span>
<div class="select__icon">×</div>
</div>
<div class="select__body"></div>
</div>
</div>
for some reason, I am not able to map my array and add its inner HTML as the attribute name of my object and I am also not finding a way to link the option to that object.

As it says element.innerHTML is not a function. Instead of element.innerHTML(value.name);, write element.innerHTML = value.name;
So your code looks like:
modes.map((value) => {
let element = document.createElement("div");
element.classList.add("select__item");
element.innerHTML = value.name;
});

Try this below:
element.innerHTML = value.name;

How to add a css style change when a button on different html page is clicked?

I have made some quizzes in javascript. When my users click the complete button at the end of the quiz I then want to make the box on the home page have a green outline around it so they know they have completed that quiz. The complete button is on the challenge1.html page and the item I want to put the outline round is the item in the grid on home.html. Would anyone be able to give me some advice on how to do this?
Files: home.html, challenge1.html, home.css, challenge1.css and quiz.js
home.html
<div class="grid-container">
<div class="grid-item item1">1. Discover HTML Basics and Tags</div>
<div class="grid-item item2">2. Styling HTML with Tags</div>
<div>3. Creating Links and Images</div>
<div class="grid-item item4">4. Building Features</div>
<div class="grid-item item5">5. Building Lists</div>
</div>
challenge1.html
<div class="container">
<div id="question-container" class="hide">
<div id="question">Question</div>
<div id="answer-buttons" class="btn-grid">
<button class="btn">Answer 1</button>
<button class="btn">Answer 2</button>
<button class="btn">Answer 3</button>
<button class="btn">Answer 4</button>
</div>
</div>
<div class="controls">
<button id="start-btn" class="start-btn btn">Start</button>
<button id="next-btn" class="next-btn btn hide">Next</button>
<button id="complete-btn" class="complete-btn btn hide">Complete</button>
</div>
</div>
home.css
.grid-container {
display: grid;
margin-top: 30px;
grid-gap: 10px;
background-color: #FFFFFF;
padding: 10px;
}
.grid-container3 {
display: grid;
margin-top: 30px;
grid-gap: 10px;
background-color: #FFFFFF;
padding: 10px;
margin-bottom: 100px;
}
.grid-item {
background-color: #E26CBA;
padding: 20px;
font-size: 20px;
border-radius: 20px;
font-family: 'Poppins', sans-serif;
color: #3F0068;
}
.item3 {
grid-column: 1 / span 2;
grid-row: 2;
}
challenge.css
*, *::before, *::after {
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
:root {
--hue-neutral: 200;
--hue-wrong: 0;
--hue-correct: 145;
}
body {
--hue: var(--hue-neutral);
padding: 0;
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
background-color: hsl(var(--hue), 0%, 100%);
}
body.correct {
--hue: var(--hue-correct);
}
body.wrong {
--hue: var(--hue-wrong);
}
.container {
width: 800px;
max-width: 80%;
background-color: white;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(2, auto);
padding: 10px;
margin: 20px 0;
}
.btn {
--hue: var(--hue-neutral);
border: 1px solid hsl(var(--hue), 100%, 20%);
background-color: hsl(var(--hue), 84%, 73%);
border-radius: 5px;
padding: 10px 10px;
margin:10px;
color: white;
outline: none;
}
.btn:hover {
border-color: black;
}
.btn.correct {
--hue: var(--hue-correct);
color: black;
}
.btn.wrong {
--hue: var(--hue-wrong);
}
.start-btn, .next-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
}
.complete-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
--hue: var(--hue-correct);
}
.controls {
display: flex;
justify-content: center;
align-items: center;
}
.hide {
display: none;
}
quiz.JS
$(document).ready(function() {
const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const completeButton = document.getElementById('complete-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const answerButtonsElement = document.getElementById('answer-buttons')
let shuffledQuestions, currentQuestionIndex
startButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
currentQuestionIndex++
setNextQuestion()
})
function startGame() {
startButton.classList.add('hide')
shuffledQuestions = questions.sort(() => Math.random() - .5)
currentQuestionIndex = 0
questionContainerElement.classList.remove('hide')
setNextQuestion()
}
function setNextQuestion() {
resetState()
showQuestion(shuffledQuestions[currentQuestionIndex])
}
function showQuestion(question) {
questionElement.innerText = question.question
question.answers.forEach(answer => {
const button = document.createElement('button')
button.innerText = answer.text
button.classList.add('btn')
if (answer.correct) {
button.dataset.correct = answer.correct
}
button.addEventListener('click', selectAnswer)
answerButtonsElement.appendChild(button)
})
}
function resetState() {
clearStatusClass(document.body)
nextButton.classList.add('hide')
while (answerButtonsElement.firstChild) {
answerButtonsElement.removeChild(answerButtonsElement.firstChild)
}
}
function selectAnswer(e) {
const selectedButton = e.target
const correct = selectedButton.dataset.correct
setStatusClass(document.body, correct)
Array.from(answerButtonsElement.children).forEach(button => {
setStatusClass(button, button.dataset.correct)
})
if (shuffledQuestions.length > currentQuestionIndex + 1) {
nextButton.classList.remove('hide')
} else {
completeButton.innerText = 'Complete'
completeButton.classList.remove('hide')
}
}
function setStatusClass(element, correct) {
clearStatusClass(element)
if (correct) {
element.classList.add('correct')
} else {
element.classList.add('wrong')
}
}
function clearStatusClass(element) {
element.classList.remove('correct')
element.classList.remove('wrong')
}
const questions = [
{
question: 'What does HTML stand for?',
answers: [
{ text: 'Hyperlinks and Text Markup Language', correct: true },
{ text: 'Hyper Text Markup Language', correct: false },
{ text: 'Home Tool Markup Language', correct: false }
]
},
{
question: 'Which character is used to indicate an end tag?',
answers: [
{ text: '<', correct: false },
{ text: '*', correct: false },
{ text: '/', correct: true },
{ text: ';', correct: false }
]
},
{
question: 'Who is making the Web standards?',
answers: [
{ text: 'Google', correct: false },
{ text: 'Mozilla', correct: false },
{ text: 'Microsoft', correct: false },
{ text: 'The World Wide Web Consortium', correct: true }
]
},
{
question: 'What is the correct HTML for making a text input field?',
answers: [
{ text: '<input type="textfield">', correct: false },
{ text: '<input type="text">', correct: true },
{ text: '<textfield>', correct: false },
{ text: '<textinput type="text">', correct: false }
]
},
{
question: 'Choose the correct HTML element for the largest heading:',
answers: [
{ text: '<head>', correct: false },
{ text: '<h6>', correct: false },
{ text: '<heading>', correct: false },
{ text: '<h1>', correct: true }
]
}
]
});

As Steve mentioned in the comment above, sessionStorage (or localStorage) might be what you need. For instance, when the user completes the quiz, you can trigger the following action:
window.sessionStorage.setItem("challengeCompleted", "true")
Then, in your home.html page, you add something like:
let challengeCompleted = window.sessionStorage.getItem("challengeCompleted")
if (challengeCompleted !== null && Boolean(challengeCompleted)):
// Handle your css change here
let btn = document.getElementById("your-btn-id");
btn.style["border-color"] = "green";
Something along these lines. I didn't check the code and just wrote it quickly from memory so could have a mistake, but this is the idea.
Lastly, use localStorage if you want the webpage to always remember the user's performance and sessionStorage if performance resets every time the user comes into the website again.

Get specific data from an jQuery $(this) object

I have a node tree and want to fetch certain data attributes from these nodes when clickin on them.
I can't figure out how to get the right data from the object recived when clicking on it.
var simple_chart_config = {
chart: {
container: "#tree"
},
nodeStructure: {
text: {
name: "King Miro",
title: "King"
},
children: [{
text: {
name: "King Randor",
title: "King"
},
children: [{
text: {
name: "He-Man",
title: "Master of the Universe"
},},{
text: {
name: "She-Ra",
title: "Princess"
},
}]
}, {
text: {
name: "Skeletor",
title: "Lord of Destruction"
},
}, ]
}
}
var my_chart = new Treant(simple_chart_config);
$('body').on('click', '.Treant .node', function() {
alert($(this).attr("title"));
console.log($(this));
});
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }
body { background: #fff; }
/* optional Container STYLES */
.chart { height: 600px; margin: 5px; width: 900px; }
.Treant > .node { padding: 3px; border: 1px solid #484848; border-radius: 3px; }
.Treant > .node img { width: 100%; height: 100%; }
.Treant .collapse-switch { width: 100%; height: 100%; border: none; }
.Treant .node.collapsed { background-color: #DEF82D; }
.Treant .node.collapsed .collapse-switch { background: none; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/treant-js/1.0/Treant.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/treant-js/1.0/Treant.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>
<div id="tree">
</div>
So now I'm trying to fetch the name: and title:
I tried with many different versions of $(this).attr("") and val(). Trying to fetch via div class and similar.
I'm stuck right now.

You can use your build DOM to take the correct text that you need : $(this).find(".node-name") and $(this).find(".node-title")
var simple_chart_config = {
chart: {
container: "#tree"
},
nodeStructure: {
text: {
name: "King Miro",
title: "King"
},
children: [{
text: {
name: "King Randor",
title: "King"
},
children: [{
text: {
name: "He-Man",
title: "Master of the Universe"
},},{
text: {
name: "She-Ra",
title: "Princess"
},
}]
}, {
text: {
name: "Skeletor",
title: "Lord of Destruction"
},
}, ]
}
}
var my_chart = new Treant(simple_chart_config);
$('body').on('click', '.Treant .node', function() {
alert($(this).find(".node-name").text());
alert($(this).find(".node-title").text());
console.log($(this));
});
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }
body { background: #fff; }
/* optional Container STYLES */
.chart { height: 600px; margin: 5px; width: 900px; }
.Treant > .node { padding: 3px; border: 1px solid #484848; border-radius: 3px; }
.Treant > .node img { width: 100%; height: 100%; }
.Treant .collapse-switch { width: 100%; height: 100%; border: none; }
.Treant .node.collapsed { background-color: #DEF82D; }
.Treant .node.collapsed .collapse-switch { background: none; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/treant-js/1.0/Treant.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/treant-js/1.0/Treant.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>
<div id="tree">
</div>

Getting the x and y position of each li' in a list with Angular

I have to list with some users in it. Now via angular i am trying to get the position (x and y) of each user in the list. Not sure how to start, any help is welcome
If i type this directly into the console I get the positions of my li's:
$(".circular").each(function(){
console.log(this.offsetTop);
});
But when I do it via a function in my app.js i get nothing -> http://gyazo.com/32a17fec94625aadc52d2a61a9d7c966
To get a visual, check out my code pen -> http://codepen.io/GY22/pen/bdKxee
html code:
<!-- START SIDEBAR -->
<div id="sidebar" ng-app="DragDrop" ng-controller="AppCtrl">
<ul>
<li ng-repeat="user in users" class="circular">
<p class="initials">{{user.initials}}</p>
</li>
</ul>
</div>
<!-- END SIDEBAR -->
css:
#sidebar {
position: fixed;
width: 120px;
height: 100%;
background-color: #f00;
z-index: 33;
margin-top: 0px;
overflow-y: scroll;
overflow-x: hidden;
margin-bottom: 100px
}
#userList {
padding-bottom: 10px !important;
}
ul li {
margin-left: -22px;
list-style-type: none;
}
.circle {
border-radius: 50%;
width: 25px;
height: 25px;
background-color: hotpink;
}
.initials {
margin-left: 25px;
padding-top: 30px;
font-weight: bold;
font-size: 18px;
}
app.js:
var contentEditor = angular.module("DragDrop", []);
contentEditor.controller('AppCtrl', function($scope) {
$scope.users = [{
initials: 'GY'
}, {
initials: 'XX'
}, {
initials: 'KK'
}, {
initials: 'TT'
}, {
initials: 'AA'
}, {
initials: 'QQ'
}, {
initials: 'PP'
}, {
initials: 'SS'
}, {
initials: 'MM'
}, {
initials: 'RS'
}, {
initials: 'KL'
}, {
initials: 'CJ'
}, {
initials: 'RT'
}, {
initials: 'DJ'
}, {
initials: 'XG'
}, {
initials: 'XX'
}];
});

Use this directive
contentEditor.directive('custom', function() {
return {
restrict: 'E',
link: function(scope, element, attrs) {
console.log(element);
element.append("<p>y: "+element[0].offsetTop+" x: "+element[0].offsetLeft+"</p>");
}
}
});
your p tag will be
<p class="initials" ><custom></custom>{{user.initials}}</p>
working pen http://codepen.io/anon/pen/doKqrP
pen that test the offset http://codepen.io/anon/pen/WvyaLL