Arrow pointing to offscreen DIV

by Julian

HTML

<script src="http://www.azoffdesign.com/static/js/jquery.overscroll.js"></script>
<span id="arrow">→</span>
<div id="container"></div>

<div id="bar">
    <img id="gear" src="http://www.clker.com/cliparts/j/V/R/4/3/s/cog-cogwheel-gear-zahnrad-hi.png" width=120 height=120 />
</div>

CSS

#container {
    height: 800px;
    width: 800px;
}

#arrow {
    font-family: Arial, "Times New Roman";
    font-size: 64px;
    font-weight: bold;
    color: white;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    color: green;
}

#arrow.homeVisible {
    color: red;
}
     

#bar {
    width: 160px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    top: 0;
    left: 0;
    position: absolute;
}

h3, ul li {
    margin: 0 0 0 34px;
    color: white;
}

#gear {
    margin: 20px 0 0 20px;
    cursor: pointer;
}

div.img {
    width: 200px;
    height: 200px;
    position: absolute;
}

div.id0 {
    border: 4px solid red;
    top: 1244px;
    left: 1244px;
}

JavaScript

// Setup constants
var viewportWidth = $(window).width(),
    viewportHeight = $(window).height(),
    arraySize = 11,
    centerPoint = {x:5, y:5};

// This function calculates the distance between two points
function distance(point1, point2) {
    
    // Euclidean Distance:
    return Math.sqrt(Math.pow(point1.x - point2.x, 2) + Math.pow(point1.y - point2.y, 2));
    
    // Instead, you could also use the more simple Rectilinear Distance:
    // return Math.abs(point1.x - point2.x) + Math.abs(point1.y - point2.y);
    
    // Or the 'Maximum Metric' (Chebyshev) Distance:
    // return Math.max(Math.abs(point1.x - point2.x), Math.abs(point1.y - point2.y));
    
}

// Create array containing points with distance values
var pointsWithDistances = [];
for (var i=0; i<arraySize; i++) {
    for (var j=0; j<arraySize; j++) {
        var point = {x:i, y:j};
        point.distance = distance(centerPoint, point);
        pointsWithDistances.push(point);
    }
}

// Sort points by distance
pointsWithDistances.sort(function(point1, point2) {
    return point1.distance == point2.distance ? 0 : point1.distance < point2.distance ? -1 : 1;
});

// Create output "graphics"
var tileSize = 250;
var borderSize = 4;
var containerContent = "";
var maxDistance = distance(centerPoint, {x:0, y:0});
for (var l=0; l<pointsWithDistances.length; l++) {
    var point = pointsWithDistances[l];
    var colorValue = parseInt(point.distance / maxDistance * 255, 10);
    if (colorValue != 0) {borderSize = 0};
    containerContent += '<div class="img id'+colorValue+'" style="background-color:rgb('+colorValue +',10,100); left:'+((point.x*tileSize)-borderSize)+'px; top:'+((point.y*tileSize)-borderSize)+'px"></div>';
}

document.getElementById('container').innerHTML = containerContent;


    var container = $("#container");
    container.css('width', viewportWidth);
    container.css('height', viewportHeight);    
    container.overscroll();

// Center first box in viewport
    var gear =...