We Keep Coding

Line across any device and in the centre, using canvas or html,css

I'm making an app using JavaScript and JQuery, which will tell the user if there device is straight or not, basically like a spirit level. I want to draw a line a straight line across the middle of the screen and i want this to be responsive no matter the size of the device. This will be used on mobiles and tablets. I used a canvas to the draw a line and so far i'm not sure if this is the right way to approach this?
if anyone could give me any advice i would really appreciate it. Below is my canvas line so far. And I've included some rough drawing of what i mean.
const c = document.getElementById("LineCanvas");
const drw = c.getContext("2d");
drw.beginPath();
drw.moveTo(10,45);
drw.lineTo(180,47);
drw.lineWidth = 5;
drw.strokeStyle = '#006400';
drw.stroke();
If the phone is aligned straight the line will be green else red

to draw the line you can use a pseudo element from HTML or body or any specific tag that you want to use in a specific page or click , then update rotation via transform:rotate() ; or rotate3D()
example ( without javascript, rotate values will have to be taken from your device via your app ):
let level = document.querySelector("#level");
document.querySelector("#spirit").onclick = function() {
level.classList.toggle('show');
}
#level {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
display: none;
pointer-events: none;
}
#level.show {
display: block;
}
#level::before {
content: '';
position: absolute;
width: 200vmax;
margin: 0 -50vmax;
border-top: 1px solid;
box-shadow: 0 0 1px 5px #bee;
top: 50%;
transform: rotate(0deg);
}
#level.show~#spirit::before {
content: 'Hide';
}
#level:not(.show)~#spirit::before {
content: 'Show';
}
/* animation to fake phone device moving */
#level::before {
animation: rt 10s infinite;
}
#keyframes rt {
20% {
transform: rotate3d(1, -1, 1, -0.25turn);
}
40% {
transform: rotate3d(1, 1, 1, 0.5turn);
}
60% {
transform: rotate3d(1, -1, 1, -0.75turn);
}
80% {
transform: rotate3d(1, 1, -1, -0.5turn);
}
}
<div id="level">
<!-- to show on a single page or via js on user request -->
</div>
<button id="spirit" type=button> that spirit level</button>

While drawing a line with canvas can work you might find it more straightforward to draw it with a simple div element. When you sense a slope you can change its color to red and back to green if it's level.
Of course you will have to do some calculations to decide what angle you want the line to be - but I guess that is the whole point of your webapp to show people how far off they are.
When you know the angle you want the line to be call slope(n) where n is the number of degrees. I've also put in a simple button so the user can choose whether to show the line or not but I expect you'll have your own code for that.
On any page where you want the user to be able to show the line put this in the head:
<style>
* {
margin: 0;
padding: 0;
}
.linecontainer {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: 99999;
}
#line {
width: 200vmax;
height: 5px;
position: relative;
top: 50%;
left: calc(50vw - 100vmax);
transform: rotate(45deg);
background-color:red;
}
.hideline {
display: none;
}
#showbtn {
font-size: 20px;
background-color: blue;
color: white;
height: 2em;
width: auto;
padding: 2px;
}
</style>
and put this in the main body of the page:
<div class="linecontainer">
<div id="showbtn" onclick="document.getElementById('line').classList.toggle('hideline');">
Click me to show/hide the line
</div>
<div id="line"></div>
</div>
<script>
function slope(deg) {
let line = document.getElementById('line');
line.style.backgroundColor = ( deg%180 == 0 ) ? 'green' : 'red';
line.style.transform = 'rotate(' + deg + 'deg)';
}
</script>
Here's a snippet where you can show the line at different angles.
function slope(deg) {
let line = document.getElementById('line');
line.style.backgroundColor = ( deg%180 == 0 ) ? 'green' : 'red';
line.style.transform = 'rotate(' + deg + 'deg)';
}
* {
margin: 0;
padding: 0;
}
.linecontainer {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: 99999;
}
#line {
width: 200vmax;
height: 5px;
position: relative;
top: 50%;
left: calc(50vw - 100vmax);
transform: rotate(45deg);
background-color:red;
}
.hideline {
display: none;
}
#showbtn {
font-size: 20px;
background-color: blue;
color: white;
height: 2em;
width: auto;
padding: 2px;
}
<div class="linecontainer">
<div id="showbtn" onclick="document.getElementById('line').classList.toggle('hideline');">
Click me to show/hide the line
</div>
<div id="line"></div>
</div>
<!-- this is just for the demo -->
<div style="background-#eeeeee;font-size: 20px;position:fixed;z-index:100000;bottom:0;left:0;">How many degrees do you want me to rotate? <input style="font-size:20px;"value="45" onchange="slope(this.value);"/></div>

How to make info text appear and follow the cursor when hovering over image?

For my portfolio website, I want to include info text that becomes visible when hovering over the according image and I want the text to follow along the cursor.
I'm by no means a coding expert, so I tried to achieve the effect by replacing the default cursor with an image of the text on white background via css and the cursor-property.
However, this left me with weird gray edged around the image that the image originally doesn't have.
So I figured that this was a sloppy approach anyway and that I should rather try solving it via javascript... which left me with the following code:
$(document).bind('mousemove', function(e){
$('#tail').css({
left: e.clientX + 20,
top: e.clientY + document.body.scrollTop
});
});
#tail {
position: absolute;
background-color: #ffffff;
padding: 5px;
opacity: 0;
}
#tail p {
margin: 0px;
}
.project-01:hover > #tail {
opacity: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="project-01">
<a href="project-site-01.html">
<img src="images/project-cover-01.png" alt="Project description">
</a>
<div id="tail">
<p>Project description</p>
</div>
</div>
I am now left with text that appears when hovering over the image and it follows the cursor properly, even if the cursor position changes due to scrolling (which it didn't do properly at first, which is why I added the 'document.body.scrollTop').
The only problem: The info text is way to far away from the cursor. I tried adjusting the offset, adding '- 900' after 'document.body.scrollTop' but that only makes it look right with my specific browser height – if I switch to a smaller or bigger screen, the '- 900' of course doesn't fit anymore.
Is there anyone who can explain what I'm doing wrong on a dummy level or even better – tell me how to fix the problem? I've been trying to get that hover text effect working for literally the past two days. HELP!
PS: You can see the effect I want to create on https://playgroundparis.com

I hope this can help you!
Edit: Technically this is a duplicated. I realized the problem with scrolling that you talking about. I've found a solution in this post and I readaptated it for
your specific case.
var mouseX = 0, mouseY = 0, limitX, limitY, containerWidth;
window.onload = function(e) {
var containerObjStyle = window.getComputedStyle(document.querySelectorAll(".project-01")[0]);
containerWidth = parseFloat(containerObjStyle.width).toFixed(0);
containerHeight = parseFloat(containerObjStyle.height).toFixed(0);
var follower = document.querySelector('#tail');
var xp = 0, yp = 0;
limitX = containerWidth;
limitY = containerHeight;
var loop = setInterval(function(){
//Change the value 5 in both axis to set the distance between cursor and text.
xp = (mouseX == limitX) ? limitX : mouseX + 5;
xp = (xp < 0) ? 0 : xp;
yp = (mouseY == limitY) ? limitY : mouseY + 5;
yp = (yp < 0) ? 0 : yp;
follower.style.left = xp + 'px';
follower.style.top = yp + 'px';
}, 15);
window.onresize = function(e) {
limitX = parseFloat(window.getComputedStyle(document.querySelectorAll(".project-01")[0]).width).toFixed(0);
}
document.onmousemove = function(e) {
mouseX = Math.min(e.pageX, limitX);
mouseY = Math.min(e.pageY, limitY);
}
};
//Change the 100 value to set the fade time (ms).
$(".project-01").hover(function () {
$(this).find('#tail').fadeIn(100);
},
function () {
$(this).find('#tail').fadeOut(100);
});
#tail {
position: absolute;
background-color: #ffffff;
padding: 5px;
overflow: hidden;
}
#debug {
position: absolute;
right: 0;
top: 100px;
width: 100px;
height:100px;
background-color: red;
color: black;
}
#tail p {
margin: 0px;
}
.project-01 {
width: 300px;
overflow: hidden;
}
.project-01 img {
height: 100%;
width: 100%;
}
.project-01 a {
height: 100%;
width: 100%;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="project-01">
<a href="project-site-01.html">
<img src="https://picsum.photos/200/300" alt="Project description">
</a>
<div id="tail">
<p>Project descriptions</p>
</div>
</div>

You can use the below code's
.description {
display: none;
position: absolute;
z-index: 2000 !important;
color: black;
padding: 15px;
margin-left: 32px;
margin-top: -200px;
top: auto;
height: auto;
width: 500px;
}
.image {
height: 200px;
width: 200px;
}
.my-image:hover + .description {
display: block;
position: absolute;
background-color: black;
color: white;
}
.description:hover {
display: block;
background-color: black;
color: white;
}
<div class="project-01">
<a href="project-site-01.html" class="my-image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/monarch.png" alt="Project description" class="image">
</a>
<div id="tail" class="description">
Butterflies are insects in the macrolepidopteran clade Rhopalocera from the order Lepidoptera, which also includes moths. Adult butterflies have large, often brightly coloured wings, and conspicuous, fluttering flight.
</div>
</div>

I hope this helps i recenty made one myselff for my website a few days ago
No info cursor:
.info:hover .tooltip {
color: red;
visibility: visible;
opacity: 1;
transition: opacity 1s
}
.tooltip {
visibility: hidden;
opacity: 0;
transition: opacity 1s
}
}
.tootip:hover {
visibility: visible
}
<span class="info"><img src="https://google.com/favicon.ico">Hover Me</img> <span class="tooltip">Welcome</span></a></span>
With info cursor:
.info:hover .tooltip {
color: red;
visibility: visible;
opacity: 1;
transition: opacity 1s
}
.tooltip {
visibility: hidden;
opacity: 0;
transition: opacity 1s
}
}
.tootip:hover {
visibility: visible
}
.info {
cursor: help
}
<span class="info"><img src="https://google.com/favicon.ico">Hover Me</img> <span class="tooltip">Welcome</span></a></span>

Prevent position:relative from influencing the width of a child

I have made a Fiddle that should explain the problem quite well (I hope):
JSFiddle
In short: I have a JS tooltip that is not supposed to take its parents width but rather just use auto width (until it reaches max-width and then wrap text). This works fine, unless the parent element has position:relative set, and then the tooltipchild inherits the width. I don't know how to prevent this from happening.
A solution that would work is to set a min-width but that is
not elegant
still doesn't explain why this acts the way it does
looks stupid when the tooltip is 1 or 2 words only
I have to include code for the fiddle link but it's a very extensive fiddle and since I can't pinpoint the issue, I'll just have to put something here (sorry!) - so this snippet will be of little use I'm afraid
<button id="tooltip">Click me</button>
button {
margin-left: 40%;
width: 50px;
position: relative; /* THE OFFENDING PROBLEM*/
}
var tooltip = document.getElementById("tooltip");
tooltip.addEventListener('mouseover', function() {
tlite.show(tooltip, {
text: template,
orientation: "bottom"
})
})

Maybe I found I trick that it works for you. My solution is to create a tooltip with an internal span in it. Now, we can format our new span putting parent span (our old .tlite span) to width:400px that it works like a max-width!
Ok, maybe the description is intricated, but with code become very simple. Follow me! ;)
Let's create our tooltip template with an internal span:
var template = document.createElement('span');
template.innerHTML = "<span class='internal'>ncididunt This tooltip is the.</span>";
Now we can put almost all our tooltip CSS in this new span:
.tlite {
/* here you can leave all the CSS concerning the animations and the positioning */
position: absolute;
z-index: 1000;
display: block;
visibility: hidden;
-webkit-transition: transition .25s ease-out;
transition: opacity .25s ease-out;
opacity: 0;
width: 400px; /* It's a width but it works like a max-width for internal span */
}
.tlite .internal{
display: inline-block; /* This does the trick! Super important! */
padding: .4rem .6rem;
text-align: left;
white-space: normal;
text-decoration: none;
pointer-events: none;
color: white;
border-radius: 5px;
background: green;
}
.tlite .internal::before {
position: absolute;
display: block;
width: 10px;
height: 10px;
content: ' ';
transform: rotate(45deg);
background: inherit;
}
.tlite-n .internal::before {
top: -3px;
left: 50%;
margin-left: -5px;
}
.tlite-nw .internal::before {
top: -3px;
left: 10px;
}
.tlite-ne .internal::before {
top: -3px;
right: 10px;
}
.tlite-s .internal::before {
bottom: -3px;
left: 50%;
margin-left: -5px;
}
.tlite-se .internal::before {
right: 10px;
bottom: -3px;
}
.tlite-sw .internal::before {
bottom: -3px;
left: 10px;
}
.tlite-w .internal::before {
top: 50%;
left: -3px;
margin-top: -5px;
}
.tlite-e .internal::before {
top: 50%;
right: -3px;
margin-top: -5px;
}
Now we can write how much we want and our new <span class="internal"> can grow up to 400px!
Try it:
/* he making of a tooltip is now very convulted because I had to alter a bit to fit the Fiddle; just ignore that*/
var template = document.createElement('span');
template.innerHTML = "<span class='internal'>Only few words.</span>";
var template2 = document.createElement('span');
template2.innerHTML = "<span class='internal'>This tooltip is positioned correctly and now it can grow up to 400px.</span>";
var template3 = document.createElement('span');
template3.innerHTML = "<span class='internal'>This tooltip has the width it should have but is placed wrong.</span>";
var tooltip = document.getElementById("tooltip");
tooltip.addEventListener('mouseover', function() {
tlite.show(tooltip, {
text: template,
orientation: "bottom"
})
})
tooltip.addEventListener('mouseleave', function() {
tlite.hide(tooltip);
})
var tabletooltip = document.getElementById("tabletooltip");
tabletooltip.addEventListener('mouseover', function() {
tlite.show(tabletooltip, {
text: template2,
orientation: "bottom"
})
})
tabletooltip.addEventListener('mouseleave', function() {
tlite.hide(tabletooltip);
})
var tabletooltip2 = document.getElementById("tabletooltip2");
tabletooltip2.addEventListener('mouseover', function() {
tlite.show(tabletooltip2, {
text: template3,
orientation: "bottom"
})
})
tabletooltip2.addEventListener('mouseleave', function() {
tlite.hide(tabletooltip2);
})
/*LIBRARY */
function tlite(getTooltipOpts) {
document.addEventListener('mouseover', function(e) {
var el = e.target;
var opts = getTooltipOpts(el);
if (!opts) {
el = el.parentElement;
opts = el && getTooltipOpts(el);
}
opts && tlite.show(el, opts, true);
});
}
tlite.show = function(el, opts, isAuto) {
opts = opts || {};
(el.tooltip || Tooltip(el, opts)).show();
function Tooltip(el, opts) {
var tooltipEl;
var showTimer;
var text;
el.addEventListener('mousedown', autoHide);
el.addEventListener('mouseleave', autoHide);
function show() {
if (opts['text']) {
text = opts['text'].innerHTML
} else {
text = ' ';
}
text && !showTimer && (showTimer = setTimeout(fadeIn, isAuto ? 150 : 1))
}
function autoHide() {
tlite.hide(el, true);
}
function hide(isAutoHiding) {
if (isAuto === isAutoHiding) {
showTimer = clearTimeout(showTimer);
tooltipEl && el.removeChild(tooltipEl);
tooltipEl = undefined;
delete el.tooltip; //experimental addition for the angular library version of the tooltip
}
}
function fadeIn() {
if (!tooltipEl) {
tooltipEl = createTooltip(el, text, opts);
}
}
return el.tooltip = {
show: show,
hide: hide
};
}
function createTooltip(el, text, opts) {
/*console.log('create')*/
var tooltipEl = document.createElement('span');
var grav = opts.grav || 'n';
tooltipEl.className = 'tlite ' + (grav ? 'tlite-' + grav : '');
tooltipEl.innerHTML = text;
el.appendChild(tooltipEl);
var arrowSize = 10;
var top = el.offsetTop;
var left = el.offsetLeft;
if (tooltipEl.offsetParent === el) {
top = left = 0;
}
var width = el.offsetWidth;
var height = el.offsetHeight;
var tooltipHeight = tooltipEl.offsetHeight;
var tooltipWidth = tooltipEl.offsetWidth;
var centerEl = left + (width / 2);
var vertGrav = grav[0];
var horzGrav = grav[1];
tooltipEl.style.top = (
vertGrav === 's' ? (top - tooltipHeight - arrowSize) :
vertGrav === 'n' ? (top + height + arrowSize) :
(top + (height / 2) - (tooltipHeight / 2))
) + 'px';
tooltipEl.style.left = (
horzGrav === 'w' ? left :
horzGrav === 'e' ? left + width - tooltipWidth :
vertGrav === 'w' ? (left + width + arrowSize) :
vertGrav === 'e' ? (left - tooltipWidth - arrowSize) :
(centerEl - tooltipWidth / 2)
) + 'px';
tooltipEl.className += ' tlite-visible';
return tooltipEl;
}
};
tlite.hide = function(el, isAuto) {
el.tooltip && el.tooltip.hide(isAuto);
};
if (typeof module !== 'undefined' && module.exports) {
module.exports = tlite;
}
button {
margin-left: 40%;
width: 50px;
position: relative; /* NOW, NO PROBLEM! ;) */
}
table {
margin-left: 30%;
}
#tabletooltip {
position: relative;
}
/* library css */
.tlite {
position: absolute;
z-index: 1000;
display: block;
visibility: hidden;
-webkit-transition: transition .25s ease-out;
transition: opacity .25s ease-out;
opacity: 0;
width: 400px;
}
.tlite .internal{
display: inline-block;
padding: .4rem .6rem;
text-align: left;
white-space: normal;
text-decoration: none;
pointer-events: none;
color: white;
border-radius: 5px;
background: green;
}
/*
tables need an extra class for the positioning of the tooltip
*/
.tlite-table tr td,
.tlite-table tr th {
position: relative;
}
.tlite-visible {
visibility: visible;
opacity: 1;
}
.tlite .internal::before {
position: absolute;
display: block;
width: 10px;
height: 10px;
content: ' ';
transform: rotate(45deg);
background: inherit;
}
.tlite-n .internal::before {
top: -3px;
left: 50%;
margin-left: -5px;
}
.tlite-nw .internal::before {
top: -3px;
left: 10px;
}
.tlite-ne .internal::before {
top: -3px;
right: 10px;
}
.tlite-s .internal::before {
bottom: -3px;
left: 50%;
margin-left: -5px;
}
.tlite-se .internal::before {
right: 10px;
bottom: -3px;
}
.tlite-sw .internal::before {
bottom: -3px;
left: 10px;
}
.tlite-w .internal::before {
top: 50%;
left: -3px;
margin-top: -5px;
}
.tlite-e .internal::before {
top: 50%;
right: -3px;
margin-top: -5px;
}
<h3>
Any object that has position:relative has troubles with the width of the tooltip. EX:
</h3>
<button id="tooltip">Click me</button>
<p>
Remove the position and it works as intended.
</p>
<h3>
BUT for some situations, I need position:relative, otherwise the tooltip is displayed at the wrong place. EX:
</h3>
<table style="width:25%">
<tr>
<th>titel1</th>
<th>title2</th>
</tr>
<tr>
<td id="tabletooltip">tooltip with position:relative</td>
<td id="tabletooltip2">tooltip without position:relative</td>
</tr>
</table>

Stop lines from wrapping when using jquery animate

I have this fiddle set up: https://jsfiddle.net/xwb9594m/
As you can see when the slide menu gets toggled off, the content wraps as the menu shrinks. I'm trying to just get it to slide away off the side of the screen cleanly.
This is my JS:
$(document).ready(function() {
var menuBtn = $('.video-search-button'),
menu = $('.video-search-menu'),
close = $('.video-search-menu .close');
menuBtn.click(function(){
menu.animate({width: 'toggle'});
});
close.click(function(){
menu.animate({width: 'toggle'});
});
});
and my SCSS:
.video-search-menu {
display: none;
position: fixed;
top: 0;
right: 0;
width: auto;
height: 100%;
overflow: hidden;
background: #24637e;
background: rgba(36, 99, 126, 0.9);
color: #fff;
z-index: 101;
&-wrapper {
position: relative;
padding: 180px 50px 0 50px;
}
.close {
position: absolute;
width: 40px;
height: 40px;
top: 15px;
left: 15px;
z-index: 9999;
cursor: pointer;
&:before, &:after {
content: '';
position: absolute;
width: 100%;
top: 50%;
height: 2px;
background: #ffffff;
transform: rotate(45deg);
}
&:after {
transform: rotate(-45deg);
}
}
}

Add a CSS rule
p{
overflow: hidden;
white-space: nowrap;
}

I updated your jsFiddle
Or copy the code below:
$(document).ready(function() {
var menuBtn = $('.video-search-button'),
menu = $('.video-search-menu'),
close = $('.video-search-menu .close');
var right = (1 - menu.width()) - 1;
menu.css('right', right);
menuBtn.click(function(){
menu.animate({right: 0}).show();
});
close.click(function(){
menu.animate({right: right});
});
});
Update: Close menu on clicking again on the button
jsFiddle
Or copy the code below:
$(document).ready(function() {
var menuBtn = $('.video-search-button'),
menu = $('.video-search-menu'),
close = $('.video-search-menu .close');
var right = (1 - menu.width()) - 1;
menu.css('right', right);
menuBtn.click(function(){
if(menu.is(':visible')) {
close.trigger('click');
}
else {
menu.animate({right: 0}).show();
}
});
close.click(function(){
menu.animate({right: right}, function() {
menu.hide();
});
});
});
Update 2:
You can also save some lines of code for your close-"icon":
jsFiddle

Create a 3d rotating mouse-tracking wall of tiles navigation using javascript, html5 and css3

I've been searching and I can't find anything on the web, but I'm interested in creating (or using something already available, hopefully since I'm pressed with time) similar to this site:
http://www.citroen.hr/citroen/#/citroen/
It's also similar to the Safari Top Sites view, but has the added mouse-tracking and 3d rotation.
Does anyone know of something similar created with javascript/html/css or can point me in the right direction?

A basic version with HTML elements, CSS 3D transforms (so it only works in browsers supporting 3D transforms & nesting of 3D transformed elements - this means no Opera and no IE) and a little bit of JavaScript for the mouse tracking:
demo
HTML:
<ul class='tiles'>
<li class='tile'></li>
<!-- more tiles; I used 16 for the demo and put them on an icosagon -->
</ul>
<div class='slider'></div>
Relevant CSS:
.tiles {
position: absolute;
top: 50%; left: 50%;
padding: 0;
width: 0; height: 0;
list-style: none;
transform-style: preserve-3d;
transform: rotateY(-162deg);
}
.tile {
position: absolute;
left: 50%;
margin: 0.5em -10em;
width: 20em; height: 20em;
backface-visibility: hidden;
opacity: 0.5;
/* inradius of an icosagon */
cursor: pointer;
transition: 0.5s;
}
.tile:hover { opacity: 1; }
.tile:nth-child(odd) { bottom: 100%; }
.tile:nth-child(2), .tile:nth-child(1) {
transform: rotateY(18deg) translateZ(-66.29439em);
}
/* and so on... in general, something of the form:
.tile:nth-child(2*i), .tile:nth-child(2*i-1) {
transform: rotateY(1*18deg) translateZ(-66.29439em);
}
where 18deg = outer angle of the icosagon
66.29439em = 1.05*20em*(1 + sqrt(5) + sqrt(5 + 2*sqrt(5)))/2
= 1.05 * inradius of icosagon
see http://mathworld.wolfram.com/Icosagon.html */
.tile:nth-child(1) {
background: url(image1.jpg);
background-size: cover;
}
/* and so on, set backgrounds for each */
.slider {
position: absolute;
bottom: 5%; left: 10%;
height: 0.25em; width: 80%;
opacity: 0.5;
background: grey
linear-gradient(90deg, crimson 100%, transparent 100%) no-repeat;
background-size: 5% 100%;
}
JavaScript:
(function(){
var b = document.body;
b.addEventListener('mousemove', function(e) {
var w = b.clientWidth, x = e.clientX,
perc = x/w,
full_angle = -162,
to_angle = full_angle + (100 - perc)*full_angle,
txt = 'rotateY(' + to_angle + 'deg)',
prefixes = ['Webkit', 'Moz', /*'ms', 'O', */''],
len = prefixes.length,
property = 'Transform',
a = document.querySelector('.tiles'),
s = document.querySelector('.slider');
for(var i = 0; i < len; i++) {
if(prefixes[i] == '')
property = property.toLowerCase();
a.style[prefixes[i] + property] = txt;
}
s.style.backgroundPosition = (perc*100 - .5) + '% 50%';
}, false);
}());