Hi i'm looking for drag step for each drag item, let say 200px
below image is demonstrating it:
i have searched a lot but did not find any solution related to that.
Question: The imaginary drag box step should be set to 200px, in other words it should jump to 200px
Full view codepen: https://codepen.io/eabangalore/pen/GaPzJw?editors=1000
Below snippet is not working please see codepen above
<!--
Copyright (c) 2006-2013, JGraph Ltd
Dynamic toolbar example for mxGraph. This example demonstrates changing the
state of the toolbar at runtime.
-->
<html>
<head>
<title>Toolbar example for mxGraph</title>
<!-- Sets the basepath for the library if not in same directory -->
<script type="text/javascript">
mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';
function setGraphData(){
var graphState = {"tagName":"mxGraphModel","children":[{"tagName":"root","children":[{"tagName":"mxCell","attributes":{"id":"0"}},{"tagName":"mxCell","attributes":{"id":"1","parent":"0"}},{"tagName":"mxCell","attributes":{"id":"2","style":"","vertex":"1","parent":"1"},"children":[{"tagName":"mxGeometry","attributes":{"x":"400","y":"130","width":"100","height":"40","as":"geometry"}}]},{"tagName":"mxCell","attributes":{"id":"3","style":"","vertex":"1","parent":"1"},"children":[{"tagName":"mxGeometry","attributes":{"x":"661","y":"101","width":"100","height":"40","as":"geometry"}}]}]}]};
localStorage.setItem('graphState',JSON.stringify(graphState));
}
function html2json(html){
if(html.nodeType==3){
return {
"tagName":"#text",
"content":html.textContent
}
}
var element = {
"tagName":html.tagName
};
if(html.getAttributeNames().length>0){
element.attributes = html.getAttributeNames().reduce(
function(acc,at){acc[at]=html.getAttribute(at); return acc;},
{}
);
}
if(html.childNodes.length>0){
element.children = Array.from(html.childNodes)
.filter(
function(el){
return el.nodeType!=3
||el.textContent.trim().length>0
})
.map(function(el){return html2json(el);});
}
return element;
}
function json2html(json){
var xmlDoc = document.implementation.createDocument(null, json.tagName);
var addAttributes = function(jsonNode, node){
if(jsonNode.attributes){
Object.keys(jsonNode.attributes).map(
function(name){
node.setAttribute(name,jsonNode.attributes[name]);
}
);
}
}
var addChildren = function(jsonNode,node){
if(jsonNode.children){
jsonNode.children.map(
function(jsonChildNode){
json2htmlNode(jsonChildNode,node);
}
);
}
}
var json2htmlNode = function(jsonNode,parent){
if(jsonNode.tagName=="#text"){
return xmlDoc.createTextNode(jsonNode.content);
}
var node = xmlDoc.createElement(jsonNode.tagName);
addAttributes(jsonNode,node);
addChildren(jsonNode,node);
parent.appendChild(node);
}
addAttributes(json,xmlDoc.firstElementChild);
addChildren(json,xmlDoc.firstElementChild);
return xmlDoc;
}
</script>
<!-- Loads and initializes the library -->
<script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script>
<!-- Example code -->
<script type="text/javascript">
// Program starts here. Creates a sample graph in the
// DOM node with the specified ID. This function is invoked
// from the onLoad event handler of the document (see below).
function main()
{
setGraphData();
// Checks if browser is supported
if (!mxClient.isBrowserSupported())
{
// Displays an error message if the browser is
// not supported.
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// Defines an icon for creating new connections in the connection handler.
// This will automatically disable the highlighting of the source vertex.
mxConnectionHandler.prototype.connectImage = new mxImage('images/connector.gif', 16, 16);
// Creates the div for the toolbar
var tbContainer = document.createElement('div');
tbContainer.style.position = 'absolute';
tbContainer.style.overflow = 'hidden';
tbContainer.style.padding = '2px';
tbContainer.style.left = '0px';
tbContainer.style.top = '0px';
tbContainer.style.width = '24px';
tbContainer.style.bottom = '0px';
document.body.appendChild(tbContainer);
// Creates new toolbar without event processing
var toolbar = new mxToolbar(tbContainer);
toolbar.enabled = false
// Creates the div for the graph
var container = document.createElement('div');
container.style.position = 'absolute';
container.style.overflow = 'hidden';
container.style.left = '24px';
container.style.top = '0px';
container.style.right = '0px';
container.style.bottom = '0px';
container.style.background = 'url("editors/images/grid.gif")';
document.body.appendChild(container);
// Workaround for Internet Explorer ignoring certain styles
if (mxClient.IS_QUIRKS)
{
document.body.style.overflow = 'hidden';
new mxDivResizer(tbContainer);
new mxDivResizer(container);
}
// Creates the model and the graph inside the container
// using the fastest rendering available on the browser
var model = new mxGraphModel();
var graph = new mxGraph(container, model);
// Enables new connections in the graph
graph.setConnectable(true);
graph.setMultigraph(false);
// Stops editing on enter or escape keypress
var keyHandler = new mxKeyHandler(graph);
var rubberband = new mxRubberband(graph);
var addVertex = function(icon, w, h, style)
{
var vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
vertex.setVertex(true);
var img = addToolbarItem(graph, toolbar, vertex, icon);
img.enabled = true;
graph.getSelectionModel().addListener(mxEvent.CHANGE, function()
{
var tmp = graph.isSelectionEmpty();
mxUtils.setOpacity(img, (tmp) ? 100 : 20);
img.enabled = tmp;
});
};
addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/rectangle.gif', 100, 40, '');
addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/rounded.gif', 100, 40, 'shape=rounded');
addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/ellipse.gif', 40, 40, 'shape=ellipse');
addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/rhombus.gif', 40, 40, 'shape=rhombus');
addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/triangle.gif', 40, 40, 'shape=triangle');
addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/cylinder.gif', 40, 40, 'shape=cylinder');
addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/actor.gif', 30, 40, 'shape=actor');
// read state on load
if(window.localStorage.graphState){
var doc = json2html(JSON.parse(localStorage.graphState));
var dec = new mxCodec(doc);
dec.decode(doc.documentElement, graph.getModel());
}
// save state on change
graph.getModel().addListener('change',function(){
var codec = new mxCodec();
window.localStorage.graphState = JSON.stringify(html2json(codec.encode(
graph.getModel()
)));
});
}
}
function addToolbarItem(graph, toolbar, prototype, image)
{
// Function that is executed when the image is dropped on
// the graph. The cell argument points to the cell under
// the mousepointer if there is one.
var funct = function(graph, evt, cell, x, y)
{
graph.stopEditing(false);
var vertex = graph.getModel().cloneCell(prototype);
vertex.geometry.x = x;
vertex.geometry.y = y;
graph.addCell(vertex);
graph.setSelectionCell(vertex);
}
// Creates the image which is used as the drag icon (preview)
var img = toolbar.addMode(null, image, function(evt, cell)
{
var pt = this.graph.getPointForEvent(evt);
funct(graph, evt, cell, pt.x, pt.y);
});
// Disables dragging if element is disabled. This is a workaround
// for wrong event order in IE. Following is a dummy listener that
// is invoked as the last listener in IE.
mxEvent.addListener(img, 'mousedown', function(evt)
{
// do nothing
});
// This listener is always called first before any other listener
// in all browsers.
mxEvent.addListener(img, 'mousedown', function(evt)
{
if (img.enabled == false)
{
mxEvent.consume(evt);
}
});
mxUtils.makeDraggable(img, graph, funct);
return img;
}
</script>
</head>
<!-- Calls the main function after the page has loaded. Container is dynamically created. -->
<body onload="main();" >
</body>
</html>
Changed how value is set to the graph state:
function generateData(x1, y1, x2, y2){
var graphState = {"tagName":"mxGraphModel","children":[{"tagName":"root","children":[{"tagName":"mxCell","attributes":{"id":"0"}},{"tagName":"mxCell","attributes":{"id":"1","parent":"0"}},{"tagName":"mxCell","attributes":{"id":"2","style":"","vertex":"1","parent":"1"},"children":[{"tagName":"mxGeometry","attributes":{"x": x1,"y": y1 ,"width":"100","height":"40","as":"geometry"}}]},{"tagName":"mxCell","attributes":{"id":"3","style":"","vertex":"1","parent":"1"},"children":[{"tagName":"mxGeometry","attributes":{"x": x2,"y": y2,"width":"100","height":"40","as":"geometry"}}]}]}]};
return graphState;
}
function setGraphData(){
var graphState = generateData("400", "130", "661", "101");
localStorage.setItem('graphState',JSON.stringify(graphState));
}
Refresh the data after page load:
if(window.localStorage.graphState){
var doc = json2html(JSON.parse(localStorage.graphState));
var dec = new mxCodec(doc);
dec.decode(doc.documentElement, graph.getModel());
setTimeout(function() {
var doc = json2html(generateData("400", "30", "661", "101"));
var dec = new mxCodec(doc);
dec.decode(doc.documentElement, graph.getModel());
}, 5000);
}
This will move the box up after a gap of 5 seconds.
CodePen
In KonvaJS, is it possible to make a layer inactive (but not invisible) upon clicking a button, then active on clicking another button? I've tried "text_overlay.listening(false);" but it doesn't work. I can deactivate individual textNodes with "textNode0.listening(false);", which does prevent the user from editing that text, but these textNodes are positioned over polygons, some of which are quite small (e.g., Luxembourg on a map of Europe) and the textarea prevents the user from clicking the polygon underneath (e.g., to change its fill color). Also, there will be over 40 textNodes to deal with, so deactivating 1 layer is far preferable!
Here's the button section of the HTML file:
<script src="js/text-input21.js"></script>
<!-- button events -->
<script>
// button states on load
var btnLabelClicked = true;
var btnColorClicked = false;
var btnDrawLinesClicked = false;
//color chip buttons
var btnViolet = document.getElementById("fillViolet");
var btnOrange = document.getElementById("fillOrange");
var btnYellow = document.getElementById("fillYellow");
//color chip buttons' fill when btnLabelClicked = true
btnViolet.style.background = disableBtnFill;
btnOrange.style.background = disableBtnFill;
btnYellow.style.background = disableBtnFill;
var buttonID = 'btnLabel';
function replyClick(clickedID) {
buttonID = (clickedID);
if (buttonID === 'btnColor') {
textNode0.listening(false);
textNode15.listening(false);
textNode16.listening(false);
btnViolet.disabled = false;
btnViolet.style.background = '#842dce';
btnOrange.disabled = false;
btnOrange.style.background = '#ffa500';
btnYellow.disabled = false;
btnYellow.style.background = '#ffff00';
btnLabelClicked = false;
btnColorClicked = true;
btnDrawLinesClicked = false;
} else if (btnColorClicked && (buttonID === 'fillViolet' || buttonID === 'fillOrange' || buttonID === 'fillYellow')) {
//text_overlay.listening(false);
textNode0.listening(false);
textNode15.listening(false);
textNode16.listening(false);
newFill = document.getElementById(buttonID).style.background;
} else if (buttonID === 'btnLabel' || buttonID === 'btnDrawLines' || buttonID === 'btnEraseLines' || buttonID === 'btnExport') {
//disable color buttons
btnColorClicked = false;
btnViolet.disabled = true;
btnViolet.style.background = disableBtnFill;
btnOrange.disabled = true;
btnOrange.style.background = disableBtnFill;
btnYellow.disabled = true;
btnYellow.style.background = disableBtnFill;
if (buttonID === 'btnLabel') {
textNode0.listening(true);
textNode15.listening(true);
textNode16.listening(true);
btnLabelClicked = true;
btnDrawLinesClicked = false;
} else { //buttonID is not btnLabel or any of the color buttons
textNode0.listening(false);
textNode15.listening(false);
textNode16.listening(false);
btnLabelClicked = false;
btnDrawLinesClicked = true;
}
}
}
</script>
And here's the text-input21.js file containing the text_overlay layer:
var text_overlay = new Konva.Layer({
listening: true
});
stage.add(text_overlay);
var textNode0 = new Konva.Text({
text: 'X',
x: 80, // centered between Ireland & Great Britain
y: 125,
width: 150,
height: 15,
fontFamily: 'Arial, Helvetica, "sans-serif"',
fontSize: 14,
align: 'center',
listening: true
});
var textNode15 = new Konva.Text({
text: 'X',
x: 230, // Luxembourg
y: 225,
width: 100,
height: 15,
fontFamily: 'Arial, Helvetica, "sans-serif"',
fontSize: 14,
align: 'center',
listening: true
});
var textNode16 = new Konva.Text({
text: 'X',
x: 175, // France
y: 290,
width: 100,
height: 15,
fontFamily: 'Arial, Helvetica, "sans-serif"',
fontSize: 14,
align: 'center',
listening: true
});
text_overlay.add(textNode0);
text_overlay.add(textNode15);
text_overlay.add(textNode16);
text_overlay.draw();
console.log(text_overlay.getZIndex());
textNode0.on('click', () => {
// create textarea over canvas with absolute position
// first we need to find its position
var textPosition = textNode0.getAbsolutePosition();
var stageBox = stage.getContainer().getBoundingClientRect();
var areaPosition = {
x: textPosition.x + stageBox.left,
y: textPosition.y + stageBox.top
};
// create textarea and style it
var textarea = document.createElement('textarea');
document.body.appendChild(textarea);
textarea.value = textNode0.text();
textarea.style.textAlign = 'center';
textarea.style.resize = 'none';
textarea.style.position = 'absolute';
textarea.style.left = areaPosition.x + 'px'; //positioning needs work
textarea.style.top = areaPosition.y + 'px';
textarea.style.width = textNode0.width();
textarea.style.background = 'transparent';
textarea.style.border = 1; // final border = 0
textarea.style.outline = 'none';
textarea.style.fontFamily = 'Arial, Helvetica, "sans-serif"';
textarea.style.fontSize = 14;
textarea.focus();
textarea.addEventListener('keydown', function (e) {
// hide on enter
if (e.keyCode === 13) {
textNode0.text(textarea.value);
text_overlay.draw();
document.body.removeChild(textarea);
}
});
})
textNode15.on('click', () => {
// create textarea over canvas with absolute position
// first we need to find its position
var textPosition = textNode15.getAbsolutePosition();
var stageBox = stage.getContainer().getBoundingClientRect();
var areaPosition = {
x: textPosition.x + stageBox.left,
y: textPosition.y + stageBox.top
};
// create textarea and style it
var textarea = document.createElement('textarea');
document.body.appendChild(textarea);
textarea.value = textNode15.text();
textarea.style.textAlign = 'center';
textarea.style.resize = 'none';
textarea.style.position = 'absolute';
textarea.style.left = areaPosition.x - 20 + 'px'; //positioning needs work
textarea.style.top = areaPosition.y - 20 + 'px';
textarea.style.width = textNode15.width();
textarea.style.background = 'transparent';
textarea.style.border = 1; // final border = 0
textarea.style.outline = 'none';
textarea.style.fontFamily = 'Arial, Helvetica, "sans-serif"';
textarea.style.fontSize = 14;
textarea.focus();
textarea.addEventListener('keydown', function (e) {
// hide on enter
if (e.keyCode === 13) {
textNode15.text(textarea.value);
text_overlay.draw();
document.body.removeChild(textarea);
}
});
})
textNode16.on('click', () => {
// create textarea over canvas with absolute position
// first we need to find its position
var textPosition = textNode16.getAbsolutePosition();
var stageBox = stage.getContainer().getBoundingClientRect();
var areaPosition = {
x: textPosition.x + stageBox.left,
y: textPosition.y + stageBox.top
};
// create textarea and style it
var textarea = document.createElement('textarea');
document.body.appendChild(textarea);
textarea.value = textNode16.text();
textarea.style.textAlign = 'center';
textarea.style.resize = 'none';
textarea.style.position = 'absolute';
textarea.style.left = areaPosition.x - 45 + 'px'; //positioning needs work
textarea.style.top = areaPosition.y - 20 + 'px';
textarea.style.width = textNode16.width();
textarea.style.background = 'transparent';
textarea.style.border = 1; // final border = 0
textarea.style.outline = 'none';
textarea.style.fontFamily = 'Arial, Helvetica, "sans-serif"';
textarea.style.fontSize = 14;
textarea.focus();
textarea.addEventListener('keydown', function (e) {
// hide on enter
if (e.keyCode === 13) {
textNode16.text(textarea.value);
text_overlay.draw();
document.body.removeChild(textarea);
}
});
})
// add the layer to the stage
stage.add(text_overlay);
From experiment, layer.listening() sets listening on the layer but not its contents. Its not intuitive, but it makes sense because a layer is actually an HTML5 canvas. For example, you could want to toggle tracking of mouse movement over the layer background but have the layers child shapes still be listening continuously, so then you need this.
You can set listening on the children using the getchildren function
// get all children
var children = layer.getChildren();
Then iterate the list and use setListening() on each member. The getChildren() function can be combined with the className filter to create subsets of child objects, so you could toggle all text elements, or all polygons, or all circles, etc. It's quite funky.
As a side note, and don't take this as criticism, your coding style seems not to be DRY. What I mean is, your click events for the textNode0, textNode15 and textNode16 are repetitive - I guess each time you realise you need to make a change to one you have to make it manually to all. That leaves you open to bugs by cut & paste or omission. Better to make a standard myTextNode object and have it include all the functionality that you want in a textNode, then pass in the unique parameters when you create each object. That way making a change to the myTextNode 'class' affects all of them at once. The label for this is 'JS Objects', but if you Google that you will be overloaded with information. Have a read of this at W3 Schools for a 'way in' to the subject. Forgive me if you know all this but there are a lot of countries for your textNodes.
I have a container which contains a primary image and 2-3 thumbnails each. I wanted the user to be able to change the image by clicking on the thumbnail of its parent. Aside from that, I want the containers to be draggable/sortable so that users can be able to compare them easily.
This is why I made these 2 self invoking functions in my javascript file.
This one is to change the primary image into the image of the thumbnail.
$(document).ready(function(){
$('.thumb-img').on('click', function(){
var url = $(this).attr('src');
$(this).closest('.item-container').find('.primary-img').attr('src', url);
});
});
While this one is used to drag and drop the containers to interchange positions.
(function() {
"use strict";
var dragAndDropModule = function(draggableElements){
var elemYoureDragging = null
, dataString = 'text/html'
, elementDragged = null
, draggableElementArray = Array.prototype.slice.call(draggableElements) //Turn NodeList into array
, dragonDrop = {}; //Put all our methods in a lovely object
// Change the dataString type since IE doesn't support setData and getData correctly.
dragonDrop.changeDataStringForIe = (function () {
var userAgent = window.navigator.userAgent,
msie = userAgent.indexOf('MSIE '), //Detect IE
trident = userAgent.indexOf('Trident/'); //Detect IE 11
if (msie > 0 || trident > 0) {
dataString = 'Text';
return true;
} else {
return false;
}
})();
dragonDrop.bindDragAndDropAbilities = function(elem) {
elem.setAttribute('draggable', 'true');
elem.addEventListener('dragstart', dragonDrop.handleDragStartMove, false);
elem.addEventListener('dragenter', dragonDrop.handleDragEnter, false);
elem.addEventListener('dragover', dragonDrop.handleDragOver, false);
elem.addEventListener('dragleave', dragonDrop.handleDragLeave, false);
elem.addEventListener('drop', dragonDrop.handleDrop, false);
elem.addEventListener('dragend', dragonDrop.handleDragEnd, false);
};
dragonDrop.handleDragStartMove = function(e) {
var dragImg = document.createElement("img");
dragImg.src = "http://alexhays.com/i/long%20umbrella%20goerge%20bush.jpeg";
elementDragged = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData(dataString, this.innerHTML);
//e.dataTransfer.setDragImage(dragImg, 20, 50); //idk about a drag image
};
dragonDrop.handleDragEnter = function(e) {
if(elementDragged !== this) {
this.style.border = "2px dashed #3a3a3a";
}
};
dragonDrop.handleDragOver = function(e) {
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
};
dragonDrop.handleDragLeave = function(e) {
this.style.border = "2px solid transparent";
};
dragonDrop.handleDrop = function(e) {
if(elementDragged !== this) {
var data = e.dataTransfer.getData(dataString);
elementDragged.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData(dataString);
}
this.style.border = "2px solid transparent";
e.stopPropagation();
return false;
};
dragonDrop.handleDragEnd = function(e) {
this.style.border = "2px solid transparent";
};
// Actiavte Drag and Dropping on whatever element
draggableElementArray.forEach(dragonDrop.bindDragAndDropAbilities);
};
var allDraggableElements = document.querySelectorAll('.draggable-droppable');
dragAndDropModule(allDraggableElements);
})();
The two functions work but when I drag the container and change its position, the first function doesn't work anymore.
It's probably because you drag it and recreate the element node.
you can use Event to solve the problem.
$(document).ready(function(){
// It delegate thumb-img event to body, so whatever you recreate thumb-img,is all right
$('body').on('click', '.thumb-img', function(){
var url = $(this).attr('src');
$(this).closest('.item-container').find('.primary-img').attr('src', url);
});
});
I'm having trouble with my function. I made a text editor with BBcode.
Its working very well but the cursor always get back to the end of the textarea.
Here is how it works;
var element = document.getElementById('textEdit');
var lastFocus;
$(document.body).on('click','.editBout', function(e) {
e.preventDefault();
e.stopPropagation();
var style = ($(this).attr("data-style"));
// Depending on the button I set the BBcode
switch (style) {
case 'bold':
avS = "[b]";
apS = "[/b]";
break;
}
if (lastFocus) {
setTimeout(function () { lastFocus.focus() }, 10);
var textEdit = document.getElementById('textEdit');
var befSel = textEdit.value.substr(0, textEdit.selectionStart);
var aftSel = textEdit.value.substr(textEdit.selectionEnd, textEdit.length);
var select = textEdit.value.substring(textEdit.selectionStart, textEdit.selectionEnd);
textEdit.value = befSel + avS + select + apS + aftSel;
textEdit = textEdit.value
textEdit = BBcoder(textEdit);
document.getElementById('editorPreview').innerHTML = textEdit;
}
return (false);
});
This last part here triggers the preview event
$(document.body).on('blur', '#textEdit', function() {
lastFocus = this;
});
So i want it to come back to last focus but at a given position computed out of my selection + added bbcode length.
I followed this control-button-leaflet tutorial and it worked for me. Now I want to:
show some text when i hover over the button (like with the zoom buttons)
Change the color of the button when i hover over it
be able to write text inside the button instead of an image.
Here's the code:
var customControl = L.Control.extend({
options: {
position: 'topleft'
},
onAdd: function (map) {
var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');
container.style.backgroundColor = 'white';
container.style.backgroundImage = "url(http://t1.gstatic.com/images?q=tbn:ANd9GcR6FCUMW5bPn8C4PbKak2BJQQsmC-K9-mbYBeFZm1ZM2w2GRy40Ew)";
container.style.backgroundSize = "30px 30px";
container.style.width = '30px';
container.style.height = '30px';
container.onclick = function(){
console.log('buttonClicked');
}
return container;
}
});
var map;
var readyState = function(e){
map = new L.Map('map').setView([48.935, 18.14], 14);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
map.addControl(new customControl());
}
window.addEventListener('DOMContentLoaded', readyState);
It seems you more need a Button than a div:
var container = L.DomUtil.create('input');
container.type="button";
Then you can easily set a mouseover text:
container.title="No cat";
And some Text instead of an image:
container.value = "42";
And you can use the mouse events to style the button:
container.onmouseover = function(){
container.style.backgroundColor = 'pink';
}
container.onmouseout = function(){
container.style.backgroundColor = 'white';
}
(you could of course do this last part with css, might be more elegant)
Full example: http://codepen.io/anon/pen/oXVMvy