We Keep Coding

document.addEventListener blocking highlight in textarea

I did a div that is moveable but unfortunetaly the function that let user move the div also block the highlight of the text in the text area behind.
I would like to keep the possibility to move the div and to highlight the text in textarea like I want.
Ps: I already tried to put the addEventListener on varMoveButtonNotesWindow but it's really ncomfortable to use it like that (we need to keep the cursor in the little box, and I dont want the box to be bigger it wouldn't look good).
Here's the code:
var mousePosition;
var offset = [0,0];
var isDown = false;
var varMoveButtonNotesWindow = document.getElementById('moveButtonNotesWindow');
var varNotesWindow = document.getElementById('notesWindow');
varMoveButtonNotesWindow.addEventListener('mousedown', function(e) {
isDown = true;
offset = [
varNotesWindow.offsetLeft - e.clientX,
varNotesWindow.offsetTop - e.clientY
];
}, true);
document.addEventListener('mouseup', function() {
isDown = false;
}, true);
//The bug occurs here
document.addEventListener('mousemove', function(event) {
event.preventDefault();
if (isDown) {
mousePosition = {
x : event.clientX,
y : event.clientY
};
varNotesWindow.style.left = (mousePosition.x + offset[0]) + 'px';
varNotesWindow.style.top = (mousePosition.y + offset[1]) + 'px';
}
}, true);
//so far
function closeNotesWindow() {
varNotesWindow.classList.remove('show');
}
function openNotesWindow() {
windowsModalContainer.classList.remove('show');
varNotesWindow.classList.add('show');
};
.firstTextarea {
height: 300px;
width: 300px;
}
#notesWindow {
display: block;
position: absolute;
width: 300px;
height: 275px;
top: 0px;
left: 0px;
border: 2px solid #313131;
z-index: 2;
resize: both;
overflow: auto;
}
#headerNotesWindow {
height: 35px;
background-color: black;
}
#moveButtonNotesWindow {
position: absolute;
background-color: blue;
color: white;
width: 20px;
height: 20px;
right: 5px;
z-index: 1;
top: 7.5px;
}
#closeButtonNotesWindow {
position: absolute;
background-color: red;
color: white;
width: 20px;
height: 20px;
right: 30px;
z-index: 1;
top: 7.5px;
}
#divTextareaNotesWindow {
text-align: center;
height: calc(100% - 6px - 35px);
}
#textareaNotesWindow {
resize: none;
width: calc(100% - 6px);
height: 100%;
outline: none;
}
<textarea class="firstTextarea">Pokemon is the best game of my childhood.</textarea>
<div class="divWindow" id="notesWindow">
<div id="headerNotesWindow">
<div id="moveButtonNotesWindow"></div>
<div id="closeButtonNotesWindow" onclick="closeNotesWindow()"></div>
</div>
<div id="divTextareaNotesWindow">
<textarea id="textareaNotesWindow"></textarea>
</div>
</div>

This can do like but not perfact：
RollBack selection when focus back it.
var mousePosition;
var offset = [0,0];
var isDown = false;
var varMoveButtonNotesWindow = document.getElementById('moveButtonNotesWindow');
var varNotesWindow = document.getElementById('notesWindow');
varMoveButtonNotesWindow.addEventListener('mousedown', function(e) {
isDown = true;
offset = [
varNotesWindow.offsetLeft - e.clientX,
varNotesWindow.offsetTop - e.clientY
];
}, true);
document.addEventListener('mouseup', function() {
isDown = false;
}, true);
//The bug occurs here
document.addEventListener('mousemove', function(event) {
event.preventDefault();
if (isDown) {
mousePosition = {
x : event.clientX,
y : event.clientY
};
varNotesWindow.style.left = (mousePosition.x + offset[0]) + 'px';
varNotesWindow.style.top = (mousePosition.y + offset[1]) + 'px';
}
}, true);
//so far
window.addEventListener('load',function(){
var logTextSelection = function(event) {
var tgItem = event.target;
tgItem.setAttribute("lastSelectionStart",tgItem.selectionStart);
tgItem.setAttribute("lastSelectionEnd",tgItem.selectionEnd);
}
var rollBackSelection = function(event){
var tgItem = event.target;
var lastSelectionStart = tgItem.getAttribute("lastSelectionStart");
var lastSelectionEnd = tgItem.getAttribute("lastSelectionEnd");
if((lastSelectionStart !== lastSelectionEnd)){
tgItem.focus();
tgItem.setSelectionRange(lastSelectionStart,lastSelectionEnd);
}
}
var docTextareas = document.getElementsByTagName('textarea');
for (var i = 0; i < docTextareas.length; i++) {
docTextareas[i].addEventListener('select', logTextSelection, true);
docTextareas[i].addEventListener('keyup', logTextSelection, true);
docTextareas[i].addEventListener('focus', rollBackSelection, true);
}
});
function closeNotesWindow() {
varNotesWindow.classList.remove('show');
}
function openNotesWindow() {
windowsModalContainer.classList.remove('show');
varNotesWindow.classList.add('show');
};
.firstTextarea {
height: 300px;
width: 300px;
}
#notesWindow {
display: block;
position: absolute;
width: 300px;
height: 275px;
top: 0px;
left: 0px;
border: 2px solid #313131;
z-index: 2;
resize: both;
overflow: auto;
}
#headerNotesWindow {
height: 35px;
background-color: black;
}
#moveButtonNotesWindow {
position: absolute;
background-color: blue;
color: white;
width: 20px;
height: 20px;
right: 5px;
z-index: 1;
top: 7.5px;
}
#closeButtonNotesWindow {
position: absolute;
background-color: red;
color: white;
width: 20px;
height: 20px;
right: 30px;
z-index: 1;
top: 7.5px;
}
#divTextareaNotesWindow {
text-align: center;
height: calc(100% - 6px - 35px);
}
#textareaNotesWindow {
resize: none;
width: calc(100% - 6px);
height: 100%;
outline: none;
}
<textarea class="firstTextarea">Pokemon is the best game of my childhood.</textarea>
<div class="divWindow" id="notesWindow">
<div id="headerNotesWindow">
<div id="moveButtonNotesWindow"></div>
<div id="closeButtonNotesWindow" onclick="closeNotesWindow()"></div>
</div>
<div id="divTextareaNotesWindow">
<textarea id="textareaNotesWindow"></textarea>
</div>
</div>

OK I found it, i just created a div that replace document for the addeventListener.
Ps I set the color to rgba(0, 175, 0, 0.3) just for you to see how it react and work you can obviously change it to 0.
function start() {
varNotesWindow.classList.add('show');
}
var mousePosition;
var offset = [0,0];
var isDown = false;
var varMoveButtonNotesWindow = document.getElementById('moveButtonNotesWindow');
var varNotesWindow = document.getElementById('notesWindow');
const constAlternativeDocumentForMoveButtonsWindow = document.getElementById('alternativeDocumentForMoveButtonsWindowId');
//Start Move Notes Window
varMoveButtonNotesWindow.addEventListener('mousedown', function(e) {
isDown = true;
offset = [
varNotesWindow.offsetLeft - e.clientX,
varNotesWindow.offsetTop - e.clientY
];
constAlternativeDocumentForMoveButtonsWindow.classList.add('use');
}, true);
constAlternativeDocumentForMoveButtonsWindow.addEventListener('mousemove', function(event) {
event.preventDefault();
if (isDown) {
mousePosition = {
x : event.clientX,
y : event.clientY
};
varNotesWindow.style.left = (mousePosition.x + offset[0]) + 'px';
varNotesWindow.style.top = (mousePosition.y + offset[1]) + 'px';
}
}, true);
constAlternativeDocumentForMoveButtonsWindow.addEventListener('mouseup', function() {
constAlternativeDocumentForMoveButtonsWindow.classList.remove('use');
});
document.addEventListener('mouseup', function() {
isDown = false;
}, true);
//End Move Notes Window
function closeNotesWindow() {
varNotesWindow.classList.remove('show');
}
function openNotesWindow() {
windowsModalContainer.classList.remove('show');
varNotesWindow.classList.add('show');
};
.alternativeDocumentForMoveButtonsWindowClass {
display: none;
}
.alternativeDocumentForMoveButtonsWindowClass.use {
display: block;
position: absolute;
z-index: 3;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0, 175, 0, 0.3);
}
#notesWindow {
display: none;
}
#notesWindow.show {
display: block;
position: absolute;
width: 300px;
height: 275px;
top: 0px;
left: 0px;
border: 2px solid #313131;
z-index: 2;
resize: both;
overflow: auto;
}
#headerNotesWindow {
height: 35px;
background-color: black;
}
#moveButtonNotesWindow {
position: absolute;
background-color: blue;
color: white;
width: 20px;
height: 20px;
right: 5px;
z-index: 1;
top: 7.5px;
}
#closeButtonNotesWindow {
position: absolute;
background-color: red;
color: white;
width: 20px;
height: 20px;
right: 30px;
z-index: 1;
top: 7.5px;
}
#divTextareaNotesWindow {
text-align: center;
height: calc(100% - 6px - 35px);
}
#textareaNotesWindow {
resize: none;
width: calc(100% - 6px);
height: 100%;
outline: none;
}
<button onclick='start()'>Let's Go</div>
<div class="alternativeDocumentForMoveButtonsWindowClass" id="alternativeDocumentForMoveButtonsWindowId"></div>
<div class="divWindow" id="notesWindow">
<div id="headerNotesWindow">
<div id="moveButtonNotesWindow"></div>
<div id="closeButtonNotesWindow" onclick="closeNotesWindow()"></div>
</div>
<div id="divTextareaNotesWindow">
<textarea id="textareaNotesWindow"></textarea>
</div>
</div>

Execute a function when mouse is over any button

So I have a page where I have replaced my cursor with a div.
The cursor is simply a part of the page that I can animate using CSS.
The main thing I want to achieve is to make this cursor change size when I hover over any button.
I cannot get it to work...
Cursor positioning is handled by a JQuery script but the vanilla one doesn't seem like it wants to work with me...
I can can't fix the error...
// Jquery code that moves the cursor (div element)
$(document).on('mousemove', function(e){
$('#cursor').css({
left: e.pageX - 7,
top: e.pageY - 7
});
});
// Function to be executed when mouse is over a button
document.querySelectorAll('button').addEventListener("mouseover", cursorHovering);
function cursorHovering() {
document.getElementById('object').style = "transform: scale(2);";
}
body {
height: 300px;
width: 300px;
background-color: #ccc;
}
*, body { cursor: none !important; }
#cursor {
position: fixed;
z-index: 20000;
height: 15px;
width: 15px;
background-color: #ffffff;
mix-blend-mode: difference;
border-radius: 50%;
opacity: 0;
transition: 0.3s;
transition-property: transform, opacity;
pointer-events: none;
}
body:hover #cursor {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="cursor"></div>
<button class="button1">Hover over me (1)</button>
<button class="button2">Hover over me (2)</button>
<button class="button3">Hover over me (3)</button>
</body>

You mean something like this?
// Jquery code that moves the cursor (div element)
var c = document.getElementById('cursor');
document.addEventListener('mousemove', (e) => {
c.style.left = e.pageX - 7 + 'px';
c.style.top = e.pageY - 7 + 'px';
});
// Function to be executed when mouse is over a button
document
.querySelectorAll('button')
.forEach(b => {
b.addEventListener("mouseover", () => c.style.transform='scale(2)');
b.addEventListener("mouseout", () => c.style.transform='scale(1)');
});
body {
height: 300px;
width: 300px;
background-color: #ccc;
}
*, body { cursor: none !important; }
#cursor {
position: fixed;
z-index: 20000;
height: 15px;
width: 15px;
background-color: #ffffff;
mix-blend-mode: difference;
border-radius: 50%;
opacity: 0;
transition: 0.3s;
transition-property: transform, opacity;
pointer-events: none;
}
body:hover #cursor {
opacity: 1;
}
<body>
<div id="cursor"></div>
<button class="button1">Hover over me (1)</button>
<button class="button2">Hover over me (2)</button>
<button class="button3">Hover over me (3)</button>
</body>

Here's a vanilla JS solution.
document.addEventListener('mousemove', handleMouseMove, false);
// Cache the elements
const cursor = document.getElementById('cursor');
const buttons = document.querySelectorAll('button');
// For each button add the two event listeners
[...buttons].forEach(button => {
button.addEventListener('mouseover', handleMouseOver, false);
button.addEventListener('mouseout', handleMouseOut, false)
});
function handleMouseMove(e) {
// You need to ensure that you add "px" to the
// end of the value. jQuery does this automatically.
cursor.style.left = `${e.pageX - 7}px`;
cursor.style.top = `${e.pageY - 7}px`;
}
function handleMouseOver() {
cursor.style.transform = 'scale(2)';
}
function handleMouseOut() {
cursor.style.transform = 'scale(1)';
}
body {
height: 300px;
width: 300px;
background-color: #ccc;
}
*,
body {
cursor: none !important;
}
#cursor {
position: fixed;
z-index: 20000;
height: 15px;
width: 15px;
background-color: #ffffff;
mix-blend-mode: difference;
border-radius: 50%;
opacity: 0;
transition: 0.3s;
transition-property: transform, opacity;
pointer-events: none;
}
body:hover #cursor {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="cursor"></div>
<button class="button1">Hover over me (1)</button>
<button class="button2">Hover over me (2)</button>
<button class="button3">Hover over me (3)</button>
</body>

How to solve two javascript pop-ups conflict?

I built a simple pop-up that can open inline content and it is based on add and remove class. I want to use this pop-up two times on the same page, one as classic onclick pop-up and second should be triggered by mousemove (top of the page).
To done this I changed pop-up IDs, but I cannot get through one conflict: When mouse move pop-up is opened it cant be closed.
// Pop-up
if (document.querySelector(".fl-pop-up")) {
window.addEventListener("load", function() {
var btn = document.getElementById("btn_fl-pop-up");
var modal = document.getElementById("fl-pop-up__init");
// Open if exist
if (btn) {
btn.onclick = function() {
modal.classList.add("fl-pop-up__active");
};
}
var modal__overlay = document.querySelector(".fl-pop-up__overlay");
var close = document.querySelector(".fl-pop-up__overlay--close");
// Close on close click
close.onclick = function() {
modal__overlay.classList.remove("fl-pop-up__active");
};
// Close on window click
window.onclick = function(event) {
if (event.target == modal__overlay) {
modal__overlay.classList.remove("fl-pop-up__active");
}
};
// Close on ESC
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 27) {
modal__overlay.classList.remove("fl-pop-up__active");
}
};
});
}
// Abandoning visitor
var mouseX = 0;
var mouseY = 0;
var popupCounter = 0;
document.addEventListener("mousemove", function(e) {
mouseX = e.clientX;
mouseY = e.clientY;
// document.getElementById("coordinates").innerHTML = "<br />X: " + e.clientX + "px<br />Y: " + e.clientY + "px";
//});
//jQuery(document).mouseleave(function () {
var modal = document.getElementById("fl-pop-up__ab");
//var modal = document.querySelector(".fl-ab-pop-up");
if (mouseY < 50) {
if (popupCounter < 1) {
modal.classList.add("fl-pop-up__active");
}
popupCounter++;
}
});
.more-link {
position: absolute;
top: 50%;
left: 45%;
}
/* FL POP UP */
.fl-pop-up {
position: relative;
z-index: 1000000;
}
.fl-pop-up__overlay {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s 0s, visibility 0s 0.3s;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(23, 23, 23, 0.85);
height: 100vh;
}
.fl-pop-up__active {
opacity: 1;
visibility: visible;
transition: opacity 0.3s 0s, visibility 0s 0s;
}
.fl-pop-up__overlay--pop-up {
/*padding: 20px;*/
background: #fff;
width: 79%;
height: 70vh;
overflow: auto;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-box-shadow: 0 0 12px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
box-shadow: 0 0 12px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.fl-pop-up__overlay--close {
position: absolute;
cursor: pointer;
top: 0;
right: 0;
overflow: hidden;
font-size: 34px;
line-height: 1.1;
text-align: center;
z-index: 1050;
color: rgb(210, 210, 210);
background-color: rgb(22, 22, 23);
width: 40px;
height: 40px;
padding: 10px;
display: block;
background-position: 10px center;
}
.fl-pop-up__overlay--close:hover {
color: #fff;
}
<div id="btn_fl-pop-up" class="btn_fl-pop-up more-link">Open POP UP 1 - onclick</div>
<!--Onclick - POP UP 1-->
<div class="fl-pop-up">
<div id="fl-pop-up__init" class="fl-pop-up__overlay">
<div class="fl-pop-up__overlay--pop-up">
<div class="fl-pop-up__overlay--close">×</div>
<div style="margin: 0 0 0 -15px;">
<div class="col-xs-12" style="text-align: center; the padding-top:3em;">
<h1 style="font-size: 2.2rem;">POP UP 1 (click)</h1>
</div>
</div>
</div>
</div>
</div>
<!--Mousemove - POP UP 2-->
<div class="fl-pop-up">
<div id="fl-pop-up__ab" class="fl-pop-up__overlay">
<div class="fl-pop-up__overlay--pop-up">
<div class="fl-pop-up__overlay--close">×</div>
<div style="margin: 0 0 0 -15px;">
<div class="col-xs-12" style="text-align: center; padding-top:3em;">
<h1 style="font-size: 2.2rem;">POP UP 2 (mousemove)</h1>
</div>
</div>
</div>
</div>
</div>
Thank you

Make a splitter very thin and grab it

I want to make a draggle splitter between 2 panels. The following is a working version.
Now, I want to make the width of handle as thin as possible (less than 0.1px?), so there is no way to make the width (appear) smaller than 1px?
Additionally, when the splitter is thin, it is hard to select by the mouse. Is there a way to make a splitter easy to grab?
Taking JSBin as example, how did they manage to realise the splitters among the panels?
(function($) {
$.fn.drags = function(opt) {
opt = $.extend({
handle: "",
cursor: "ew-resize",
min: 10
}, opt);
if (opt.handle === "") {
var $el = this;
} else {
var $el = this.find(opt.handle);
}
var priorCursor = $('body').css('cursor');
return $el.css('cursor', opt.cursor).on("mousedown", function(e) {
priorCursor = $('body').css('cursor');
$('body').css('cursor', opt.cursor);
if (opt.handle === "") {
var $drag = $(this).addClass('draggable');
} else {
var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
}
var z_idx = $drag.css('z-index'),
drg_h = $drag.outerHeight(),
drg_w = $drag.outerWidth(),
pos_y = $drag.offset().top + drg_h - e.pageY,
pos_x = $drag.offset().left + drg_w - e.pageX;
var mouseMove = function(e) {
var prev = $('.draggable').prev();
var next = $('.draggable').next();
var total = prev.outerWidth() + next.outerWidth();
var totalPercentage = parseFloat(prev.css('flex')) + parseFloat(next.css('flex'));
var offset = prev.offset();
if(offset){
var leftPercentage = ((e.pageX - offset.left - drg_w / 2) / total) * totalPercentage;
var rightPercentage = totalPercentage - leftPercentage;
if (leftPercentage * 100 < opt.min || rightPercentage * 100 < opt.min) {
return;
}
prev.css('flex', leftPercentage.toString());
next.css('flex', rightPercentage.toString());
}
}
$drag.css('z-index', 1000).parent().on("mousemove", mouseMove).on("mouseup", function() {
$(this).off("mousemove", mouseMove).off("mouseup");
$('body').css('cursor', priorCursor);
$('.draggable').removeClass('draggable').css('z-index', z_idx);
});
e.preventDefault(); // disable selection
});
}
})(jQuery);
$('.handle').drags();
.flex-box {
display: flex;
width: 100%;
margin: 0;
height: 300px;
}
.flex-box .col {
border: 1px solid grey;
flex: 0.33;
padding: 12px;
overflow-y: auto;
overflow-x: hide;
}
.handle {
width: 1px;
text-align: center;
background: grey;
transition: all ease-in 0.1s;
}
.draggable {
background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex-box">
<div class="col">
<p>Pellentesque ...</p>
</div>
<div class="handle"></div>
<div class="col">
<p>Pellentesque ...</p>
</div>
</div>

If you'd like the handle to appear thinner try applying a negative value to the right "col" e.g. margin-left: -2px; so it overlaps the left "col" border on the left of it. I don't think you can make the width "appear" as 0.1px. Firefox is the only browser that renders such value. (https://css-tricks.com/forums/topic/0-1px-borders/)
.flex-box .col:last-child {
margin-left: -2px;
}
//raise handle layer to top
.handle {
.....
z-index: 9999;
}
Hope this helps...
*Edit:
This is the closest I could get to your request:
.flex-box {
display: flex;
width: 100%;
margin: 0;
height: 300px;
}
.flex-box .col {
border: 1px solid grey;
flex: 0.33;
padding: 12px;
overflow-y: auto;
overflow-x: hide;
}
.flex-box .col:last-child {
margin-left: -6px;
}
.handle {
width: 5px;
text-align: center;
transition: all ease-in 0.1s;
z-index: 999;
overflow: visible;
}
.handle-inner{
width: 5px;
height: 100%;
position: relative;
margin-left: -10px;
}
.draggable {
background: grey;
}
Jsbin :
https://jsbin.com/nupefekuhu/edit?html,css,js,output

Creating a map with inclined view without using WebGL? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I want to create a map viewer, which views a map from some angle. It is obvious how to create it, if angle is 90 degrees (like in google maps). However, I want an angle less than 90 and without using WebGL. Like this:
Maybe there are some solutions, hacks and tricks to do that using CSS or canvas?
Thanks!

Used JavaScript only for navigation by buttons and window edges. Requires some configuration for your screen display: just find commends beginning with Adjust
var mapWidth = -4500 + 900, // #Adjust: the same as #second width
mapHeight = -2234 + 600, // #Adjust: the same as #second height
$map;
function moveScreen(dx, dy) {
var positionX = $map.css("backgroundPositionX"),
positionY = $map.css("backgroundPositionY");
positionX = parseInt(positionX.substring(0, positionX.length - 2)) + dx;
positionY = parseInt(positionY.substring(0, positionY.length - 2)) + dy;
if (positionX < mapWidth) {
positionX = mapWidth;
}
if (positionX > 0) {
positionX = 0;
}
if (positionY < mapHeight) {
positionY = mapHeight;
}
if (positionY > 0) {
positionY = 0;
}
$map.css("backgroundPositionX", positionX + "px");
$map.css("backgroundPositionY", positionY + "px");
}
$(document).ready(function(){
$map = $("#second");
var moverLeft = null, moverUp = null, moverRight = null, moverDown = null;
var clearMover = function(code) {
if (code == 37) {
clearInterval(moverLeft);
moverLeft = null;
}
if (code == 38) {
clearInterval(moverUp);
moverUp = null;
}
if (code == 39) {
clearInterval(moverRight);
moverRight = null;
}
if (code == 40) {
clearInterval(moverDown);
moverDown = null;
}
}
var moveScreenTop = function(){
if (moverUp == null) {
moverUp = setInterval(function(){ moveScreen(0, 10)}, 10);
}
};
var moveScreenBottom = function(){
if (moverDown == null) {
moverDown = setInterval(function(){ moveScreen(0, -10) }, 10);
}
};
var moveScreenLeft = function(){
if (moverLeft == null) {
moverLeft = setInterval(function(){ moveScreen(10, 0) }, 10);
}
};
var moveScreenRight = function(){
if (moverRight == null) {
moverRight = setInterval(function(){ moveScreen(-10, 0) }, 10);
}
};
$("#button_top").hover(moveScreenTop, function(){clearMover(38);});
$("#button_bottom").hover(moveScreenBottom, function(){clearMover(40);});
$("#button_left").hover(moveScreenLeft, function(){clearMover(37);});
$("#button_right").hover(moveScreenRight, function(){clearMover(39);});
$("#button_left_top").hover(function(){moveScreenLeft(); moveScreenTop();}, function(){clearMover(37);clearMover(38)});
$("#button_right_top").hover(function(){moveScreenRight(); moveScreenTop();}, function(){clearMover(39);clearMover(38)});
$("#button_right_bottom").hover(function(){moveScreenRight(); moveScreenBottom();}, function(){clearMover(39);clearMover(40)});
$("#button_left_bottom").hover(function(){moveScreenLeft(); moveScreenBottom();}, function(){clearMover(37);clearMover(40)});
$(document).keyup(function(e){
clearMover(e.which);
});
$(document).keydown(function(e){
if (e.which == 37) {
moveScreenLeft();
}
if (e.which == 38) {
moveScreenTop();
}
if (e.which == 39) {
moveScreenRight();
}
if (e.which == 40) {
moveScreenBottom();
}
});
});
body {
margin: 0;
overflow: hidden;
}
#first {
/* Adjust perspective for your screen */
-moz-perspective: 600px;
-moz-perspective-origin: 50%;
-webkit-perspective: 600px;
-webkit-perspective-origin: 50%;
perspective: 600px;
perspective-origin: 50%;
width: 100%;
height: 100%;
}
#second {
margin: 0 auto;
/* Adjust width and height for your screen */
width: 900px;
height: 600px;
background: url("http://img2.wikia.nocookie.net/__cb20131223222429/althistory/images/archive/b/bb/20140706210315!World_Map_(Ranjit_Singh_Lives).png") 0px 0px;
/* Adjust translateZ for your screen */
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(260px) rotateX( 20deg );
-moz-transform: translateZ(260px) rotateX( 20deg );
transform: translateZ(260px) rotateX( 20deg );
}
.button_edge, .button_corner {
opacity: 0.1;
background-color: #999999;
position: fixed;
}
#button_top {
height: 30px;
left: 30px;
right: 30px;
top: 0px;
}
#button_bottom {
height: 30px;
left: 30px;
right: 30px;
bottom: 0px;
}
#button_left {
width: 30px;
left: 0px;
top: 30px;
bottom: 30px;
}
#button_right {
width: 30px;
right: 0px;
top: 30px;
bottom: 30px;
}
.button_corner {
width: 30px;
height: 30px;
}
#button_left_top {
left: 0px;
top: 0px;
}
#button_right_top {
right: 0px;
top: 0px;
}
#button_right_bottom {
right: 0px;
bottom: 0px;
}
#button_left_bottom {
left: 0px;
bottom: 0px;
}
.tip {
opacity: 0.9;
color: white;
background-color: #666666;
padding: 10px;
font-size: 14px;
width: 200px;
position: fixed;
left: 45%;
bottom: 50px;
}
.tip:hover {opacity: 0.2;}
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<div id="first">
<div id="second"></div>
</div>
<div class="button_edge" id="button_top"></div>
<div class="button_edge" id="button_bottom"></div>
<div class="button_edge" id="button_left"></div>
<div class="button_edge" id="button_right"></div>
<div class="button_corner" id="button_left_top"></div>
<div class="button_corner" id="button_right_top"></div>
<div class="button_corner" id="button_right_bottom"></div>
<div class="button_corner" id="button_left_bottom"></div>
<div class="tip">Use arrow buttons or mouse for navigation</div>
P.S.: Of course it is not a final version: it needs to adjust user's screen automatically, but I like the current version).