mirror of https://github.com/lukechilds/docs.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
391 lines
20 KiB
391 lines
20 KiB
<!DOCTYPE html>
|
|
<html lang="en-gb" dir="ltr">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Position - UIkit tests</title>
|
|
<script src="js/test.js"></script>
|
|
<style>
|
|
|
|
/* JavaScript */
|
|
#js-boundary {
|
|
height: 300px;
|
|
outline: 1px solid rgba(0,0,0,0.1);
|
|
position: relative;
|
|
}
|
|
|
|
#js-target {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 200px;
|
|
height: 100px;
|
|
background: rgba(0,0,0,0.1);
|
|
}
|
|
|
|
#js-element {
|
|
position: absolute;
|
|
display: none;
|
|
width: 75px;
|
|
height: 75px;
|
|
background: rgba(0,0,0,0.1);
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="uk-container">
|
|
|
|
<h1>Position</h1>
|
|
|
|
<div class="uk-position-relative">
|
|
|
|
<div class="uk-child-width-1-2@s" uk-grid>
|
|
<div>
|
|
|
|
<div class="uk-inline">
|
|
<a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-top-left">Top Left</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-top-center">Top Center</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-top-right">Top Right</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-center-left">Center Left</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-center">Center Center</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-center-right">Center Right</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-bottom-left">Bottom Left</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-bottom-center">Bottom Center</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-bottom-right">Bottom Right</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<div class="uk-inline">
|
|
<a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-top uk-text-center">Top</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-bottom uk-text-center">Bottom</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-left uk-flex uk-flex-middle">Left</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-right uk-flex uk-flex-middle">Right</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-center">This is a test for text wrapping if centered</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="uk-overlay uk-overlay-primary uk-padding-small uk-position-center-left-out uk-visible@xl">Out</div>
|
|
<div class="uk-overlay uk-overlay-primary uk-padding-small uk-position-center-right-out uk-visible@xl">Out</div>
|
|
|
|
</div>
|
|
|
|
<h2>Small</h2>
|
|
|
|
<div class="uk-position-relative">
|
|
|
|
<div class="uk-child-width-1-2@s" uk-grid>
|
|
<div>
|
|
|
|
<div class="uk-inline">
|
|
<a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-top-left">Top Left</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-top-center">Top Center</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-top-right">Top Right</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-center-left">Center Left</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-center">Center Center</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-center-right">Center Right</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-bottom-left">Bottom Left</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-bottom-center">Bottom Center</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-bottom-right">Bottom Right</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<div class="uk-inline">
|
|
<a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-top uk-text-center">Top</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-bottom uk-text-center">Bottom</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-left uk-flex uk-flex-middle">Left</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-right uk-flex uk-flex-middle">Right</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="uk-overlay uk-overlay-primary uk-padding-small uk-position-small uk-position-center-left-out uk-visible@xl">Out</div>
|
|
<div class="uk-overlay uk-overlay-primary uk-padding-small uk-position-small uk-position-center-right-out uk-visible@xl">Out</div>
|
|
|
|
</div>
|
|
|
|
<h2>Medium</h2>
|
|
|
|
<div class="uk-position-relative">
|
|
|
|
<div class="uk-child-width-1-2@s" uk-grid>
|
|
<div>
|
|
|
|
<div class="uk-inline">
|
|
<a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-top-left">Top Left</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-top-center">Top Center</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-top-right">Top Right</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-center-left">Center Left</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-center">Center Center</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-center-right">Center Right</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-bottom-left">Bottom Left</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-bottom-center">Bottom Center</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-bottom-right">Bottom Right</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<div class="uk-inline">
|
|
<a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-top uk-text-center">Top</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-bottom uk-text-center">Bottom</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-left uk-flex uk-flex-middle">Left</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-right uk-flex uk-flex-middle">Right</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="uk-overlay uk-overlay-primary uk-padding-small uk-position-medium uk-position-center-left-out uk-visible@xl">Out</div>
|
|
<div class="uk-overlay uk-overlay-primary uk-padding-small uk-position-medium uk-position-center-right-out uk-visible@xl">Out</div>
|
|
|
|
</div>
|
|
|
|
<h2>Large</h2>
|
|
|
|
<div class="uk-position-relative">
|
|
|
|
<div class="uk-child-width-1-2@s" uk-grid>
|
|
<div>
|
|
|
|
<div class="uk-inline">
|
|
<a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-top-left">Top Left</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-top-center">Top Center</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-top-right">Top Right</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-center-left">Center Left</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-center">Center Center</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-center-right">Center Right</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-bottom-left">Bottom Left</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-bottom-center">Bottom Center</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-bottom-right">Bottom Right</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<div class="uk-inline">
|
|
<a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-top uk-text-center">Top</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-bottom uk-text-center">Bottom</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-left uk-flex uk-flex-middle">Left</div>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-right uk-flex uk-flex-middle">Right</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="uk-overlay uk-overlay-primary uk-padding-small uk-position-large uk-position-center-left-out uk-visible@xl">Out</div>
|
|
<div class="uk-overlay uk-overlay-primary uk-padding-small uk-position-large uk-position-center-right-out uk-visible@xl">Out</div>
|
|
|
|
</div>
|
|
|
|
<h2>Cover</h2>
|
|
|
|
<div class="uk-child-width-1-4@s" uk-grid>
|
|
<div>
|
|
|
|
<div class="uk-inline">
|
|
<a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-cover uk-flex uk-flex-center uk-flex-middle">Cover</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<div class="uk-inline">
|
|
<a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-cover uk-flex uk-flex-center uk-flex-middle">Cover</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<div class="uk-inline">
|
|
<a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-cover uk-flex uk-flex-center uk-flex-middle">Cover</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<div class="uk-inline">
|
|
<a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
|
|
<div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-cover uk-flex uk-flex-center uk-flex-middle">Cover</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<h2>JavaScript</h2>
|
|
|
|
<div id="js-boundary" class="uk-margin">
|
|
<div id="js-target" class="uk-flex uk-flex-center uk-flex-middle" draggable="true">Drag me!</div>
|
|
</div>
|
|
|
|
<div id="js-element"></div>
|
|
|
|
<div class="uk-grid uk-child-width-auto uk-form-stacked">
|
|
<div>
|
|
|
|
<div class="uk-margin">
|
|
<span class="uk-form-label">Element</span>
|
|
<label>
|
|
Horizontal
|
|
<select id="js-element_x" class="uk-select uk-form-small uk-form-width-xsmall">
|
|
<option value="left">left</option>
|
|
<option value="center">center</option>
|
|
<option value="right">right</option>
|
|
</select>
|
|
</label>
|
|
<label>
|
|
Vertical
|
|
<select id="js-element_y" class="uk-select uk-form-small uk-form-width-xsmall">
|
|
<option value="top">top</option>
|
|
<option value="center">center</option>
|
|
<option value="bottom">bottom</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="uk-margin">
|
|
<span class="uk-form-label">Target</span>
|
|
<label>
|
|
Horizontal
|
|
<select id="js-target_x" class="uk-select uk-form-small uk-form-width-xsmall">
|
|
<option value="left">left</option>
|
|
<option value="center">center</option>
|
|
<option value="right">right</option>
|
|
</select>
|
|
</label>
|
|
<label>
|
|
Vertical
|
|
<select id="js-target_y" class="uk-select uk-form-small uk-form-width-xsmall">
|
|
<option value="top">top</option>
|
|
<option value="center">center</option>
|
|
<option value="bottom">bottom</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<div class="uk-margin">
|
|
<span class="uk-form-label">Offset</span>
|
|
<label>
|
|
Horizontal
|
|
<input id="js-offset_x" class="uk-input uk-form-small uk-form-width-xsmall" type="text">
|
|
</label>
|
|
<label>
|
|
Vertical
|
|
<input id="js-offset_y" class="uk-input uk-form-small uk-form-width-xsmall" type="text">
|
|
</label>
|
|
</div>
|
|
|
|
<div class="uk-margin">
|
|
<span class="uk-form-label">Flip</span>
|
|
<label>
|
|
Horizontal
|
|
<select id="js-flip_x" class="uk-select uk-form-small uk-form-width-xsmall">
|
|
<option value="x">flip</option>
|
|
<option value="">none</option>
|
|
</select>
|
|
</label>
|
|
<label>
|
|
Vertical
|
|
<select id="js-flip_y" class="uk-select uk-form-small uk-form-width-xsmall">
|
|
<option value="y">flip</option>
|
|
<option value="">none</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
|
|
var util = UIkit.util,
|
|
$ = util.$,
|
|
on = util.on,
|
|
offset = util.offset,
|
|
ticking,
|
|
element = $('#js-element'),
|
|
boundary = $('#js-boundary'),
|
|
target = $('#js-target'),
|
|
offsetX,
|
|
offsetY;
|
|
|
|
function position() {
|
|
util.positionAt(
|
|
element,
|
|
target,
|
|
$('#js-element_x').value + ' ' + $('#js-element_y').value,
|
|
$('#js-target_x').value + ' ' + $('#js-target_y').value,
|
|
$('#js-offset_x').value + ' ' + $('#js-offset_y').value,
|
|
null,
|
|
$('#js-flip_x').value + $('#js-flip_y').value,
|
|
boundary
|
|
);
|
|
}
|
|
|
|
on(window, 'dragstart', function (e) {
|
|
e.dataTransfer.setDragImage(new Image(), 0, 0);
|
|
|
|
offsetX = Math.round(e.pageX - offset(target).left);
|
|
offsetY = Math.round(e.pageY - offset(target).top);
|
|
|
|
});
|
|
|
|
on(window, 'dragover', function (e) {
|
|
|
|
e.preventDefault();
|
|
|
|
if (!ticking) {
|
|
requestAnimationFrame(function () {
|
|
|
|
util.positionAt(
|
|
target,
|
|
boundary,
|
|
'left top',
|
|
'left top',
|
|
(e.pageX - offset(boundary).left - offsetX) + ' ' + (e.pageY - offset(boundary).top - offsetY)
|
|
);
|
|
|
|
position();
|
|
|
|
ticking = false;
|
|
});
|
|
ticking = true;
|
|
}
|
|
|
|
});
|
|
|
|
util.$$('select,input').forEach(el => on(el, 'change', position));
|
|
|
|
util.css(element, 'display', 'block');
|
|
position();
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
|