I am beginner to JS and I am trying to create a simple game in it. I am looking for a way to stop the player (20px x 20px) box causing the screen to scroll, i am looking for a fixed screen where the player cannot exceed the sides of the screen. Please see previous attempts below.
HTML :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<div id="player"></div>
<script type="text/javascript" src="Script.js"></script>
</body>
</html>
CSS:
body{
margin: 0;
padding: 0;
background-color: red;
}
#player{
border-radius: 30%;
padding: 0px;
margin: 0px;
background-color: white;
width: 20px;
height: 20px;
position: absolute;
}
JavaScript:
var player = document.getElementById("player")
var pros = {'top': 0, 'left': 0, 'speed': 10}
var ws = {'h': screen.height, 'w': screen.width}
document.addEventListener("keydown", function(event){
var keyP = event.key;
if(keyP === "ArrowDown"){
pros.top = pros.top + pros.speed;
}else if(keyP === "ArrowUp"){
pros.top = pros.top - pros.speed;
}else if(keyP === "ArrowLeft"){
pros.left = pros.left - pros.speed;
}else if(keyP === "ArrowRight"){
pros.left = pros.left + pros.speed;
}
if(pros.top < 0){
pros.top = 0;
}else if(pros.top > ws.h){
pros.top = ws.h;
}else if(pros.left < 0){
pros.left = 0;
}else if(pros.left > ws.w){
pros.left = ws.w;
}
player.style.top = `${pros.top}px`;
player.style.left = `${pros.left}px`;
});
Now, I want the element to never escape the given screen area. As you can see in the code that I have tried to use screen.height/screen.width to control it but still it escapes the area and the scroll bars get activated even in the full screen mode. It looks too messy for a game.
Here is picture of how it escapes the area:
In Full Screen Mode :
Without Full Screen Mode :
The most accurate position and dimensions measurements are available via the getBoundingClientRect() function.
So at the top of your keystroke callback I'd add two lines:
var screenRect = document.body.getBoundingClientRect();
var playerRect = player.getBoundingClientRect();
These need to be calculated at every iteration in order to make sure that the "game" adapts to every screen change. Also any position increments are better calculated in percents of the screen size rather than static pixel values.
Your screen edge check should be rewritten like this:
if(playerRect.top < 0){
pros.top = 0;
} else if(playerRect.top + playerRect.height > screenRect.height){
// make sure the bottom edge of the player doesn't go over the bottom edge of the screen
pros.top = screenRect.height - playerRect.height;
}
if(playerRect.left < 0){
pros.left = 0;
} else if(playerRect.left + playerRect.width + > screenRect.width){
// make sure the right edge of the player doesn't go over the right edge of the screen
pros.left = screenRect.width - playerRect.width;
}
On the CSS side, try the following:
body{
margin: 0;
padding: 0;
background-color: red;
width: 100vw;
height: 100vh;
overflow: hidden;
}
#player{
border-radius: 30%;
padding: 0px;
margin: 0px;
background-color: white;
width: 20px;
height: 20px;
position: fixed;
}
The height and width of your PLAYER object is 20px as concluded from the Stylesheet that you have provided.
If you place your element on a 2D plane, then it's coordinates will be the point where its TOP-LEFT corner lie. Focus here.
So, your JavaScript should change to this:
...
if(pros.top < 0){
pros.top = 0;
}else if(pros.top > ws.h-20){ // changed here
pros.top = ws.h-20; // try playing with the value here
}else if(pros.left < 0){
pros.left = 0;
}else if(pros.left > ws.w-20){ //changed here
pros.left = ws.w-20; // try playing with the value here
}
...
This would always place the #player element 20px inside on the horizntal axis and 20px on the vertical axis. I was successful in limiting the appearance of the horizontal scroll-bar but the vertical vanished only for a value of ws.h-40.
Hope this helps.
Hey :) Maybe this helps you:
<style type="text/css">
body {
overflow:hidden;
}
</style>
Setting the overflow: hidden will hide the scrollbar.
Related
Can someone please explain what's going on here?
As you can see in the example, the scroll does not go all the way down to the bottom
This is of course a problem as it does not behave according to the instructions, which is:
scrollIntoView() or target.scroll (0, target.scrollHeight - target.clientHeight);
Strangely enough, it has something to do with the "font link" in "<head>", because if I use any font other than the one that has been downloaded (Poppins), it works
var html_1 = '<div class="chat_window"><div class="messages"></div></div>';
var html_2 = '<div>hello buddy</div>';
document.body.insertAdjacentHTML('beforeend', html_1);
var target = document.querySelector('.chat_window').querySelector('.messages');
for(var i = 0; i < 9; i++) {
target.insertAdjacentHTML('beforeend', html_2);
//target.scroll(0, target.scrollHeight - target.clientHeight);
target.lastElementChild.scrollIntoView();
}
body
{
font-family: Poppins; /*here, because of this the problem arise*/
}
.chat_window
{
height: 113px;
width: 339px;
border: 1px solid black;
}
.chat_window .messages
{
height: 100%;
overflow: auto;
}
<head>
<link href="http://fonts.googleapis.com/css?family=Poppins:400,300,500,600,700" rel="stylesheet">
</head>
<body></body>
The problem is the time needed to dynamically render the HTML and load the font. There are a few options, but might be seen as a little hacky.
Make sure you are using the same font somewhere else on the page. This will cause the browser to load the font (otherwise the browser may ignore the font until it is needed)
Delay the scroll a little after you render the HTML with JavaScript.
A minor change like this could work:
var html_1 = '<div class="chat_window"><div class="messages"></div></div>';
var html_2 = '<div>hello buddy</div>';
document.body.insertAdjacentHTML('beforeend', html_1);
var target = document.querySelector('.chat_window').querySelector('.messages');
for(var i = 0; i < 9; i++) {
target.insertAdjacentHTML('beforeend', html_2);
}
// A short delay, then jump to last item.
setTimeout(function(){
target.scroll(0, target.scrollHeight - target.clientHeight);
target.lastElementChild.scrollIntoView();
},500);
body{
font-family: Poppins;
}
.chat_window{
height: 113px;
width: 339px;
border: 1px solid black;
}
.chat_window .messages{
height: 100%;
overflow: auto;
}
<head>
<link href="http://fonts.googleapis.com/css?family=Poppins:400,300,500,600,700" rel="stylesheet">
</head>
<body>(forcing the font to load)</body>
I am trying to create a vertical slide show on scroll. One picture-screen glide over the next one, and then the second over the third, and so on…
HTML/CSS structure looks as following: external container has display property relative. Inside it there are several containers with images with the property fixed, so that they are all as a card deck and you pull card by card from the top.
JavaScript function should load the first pare of image-pages and follow the amount of scrolled distance changing the index of the image-page and changing the z-index of the layer (the top one: 2, the one blow: 1 and so on...)
var mansDok = []; var paklajAttal = [];
// Find all the slides containers
mansDok = document.getElementsByClassName("slaide");
// Find all the slides IDs
for(i=0; i<mansDok.length; i++) {
paklajAttal[i] = mansDok[i].id;
}
// Height of the browser window
var logAugst = document.documentElement.clientHeight;
// Start function on scrolling the contents
window.onscroll = function() {vertikSlaidrade()};
//
// Slideshow function
function vertikSlaidrade() {
var k = 0; var i = 0, winScroll;
// How far the screen been scrolled
winScroll = document.documentElement.scrollTop || document.body.scrollTop;
// Change slides while scrolling
if(winScroll <= logAugst * 1) {
document.getElementById(paklajAttal[k]).style.zIndex = "2";
document.getElementById(paklajAttal[k]).style.position = "relative";
document.getElementById(paklajAttal[k+1]).style.display = "block";
document.getElementById(paklajAttal[k+1]).style.position = "fixed";
} else if(winScroll <= logAugst * 2) {
document.getElementById(paklajAttal[k+1]).style.zIndex = "3";
document.getElementById(paklajAttal[k+1]).style.position = "relative";
document.getElementById(paklajAttal[k+2]).style.display = "block";
document.getElementById(paklajAttal[k+2]).style.position = "fixed";
} else if(winScroll <= logAugst * 2.8) {
document.getElementById(paklajAttal[k+2]).style.zIndex = "4";
document.getElementById(paklajAttal[k+2]).style.position = "relative";
document.getElementById(paklajAttal[k+3]).style.display = "block";
document.getElementById(paklajAttal[k+3]).style.position = "fixed";
} else if(winScroll > logAugst * 2.8) {
// Run reset function by the end of slides
atiestat();
}
}
// Function to reset the slides properties
function atiestat() {
for(var i=0; i<mansDok.length; i++) {
document.getElementById(paklajAttal[i]).style.zIndex = "0";
document.getElementById(paklajAttal[i]).style.position = "absolute";
document.getElementById(paklajAttal[i]).style.display = "none";
}
// Show the first pair of slides
document.getElementById(paklajAttal[0]).style.display = "block";
document.getElementById(paklajAttal[0]).style.zIndex = "2";
document.getElementById(paklajAttal[1]).style.position = "fixed";
document.getElementById(paklajAttal[1]).style.zIndex = "1";
}
* {box-sizing: border-box;}
html, body{
height: 100%;
margin: 0px;
padding: 0px;
background-color: #000;
font-size: 1em;
}
main {
position: relative;
margin: 0px;
padding: 0px;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
/* Page with slide */
.slaide {
position: absolute;
top: 0px;
left: 0px;
z-index: 0;
margin: 0px;
padding: 0px;
width: 100%;
display: none;
}
.slaide img {
width: 1230px; /* Doesn't work below this value !?!? */
}
/* Empty filler */
.tukss {
display: block;
margin: 0px;
padding: 0px;
height: 1000px; /* Do NOT reduce this value!!! */
}
<main>
<div class="slaide" id="lapa1" style="display: block;">
<img src="https://www.w3schools.com/howto/img_parallax.jpg">
</div>
<div class="slaide" id="lapa2">
<img src="https://www.w3schools.com/howto/img_parallax2.jpg">
</div>
<div class="slaide" id="lapa3">
<img src="https://www.w3schools.com/howto/img_parallax3.jpg">
</div>
<div class="tukss" id="tukss"></div>
</main>
May be its not the most elegant version of JS code, but everything works perfectly as I wanted. Somehow it doesn’t work if I change the image size below 1230px or to 100% and reduce the width of the browser window. (Images are from W3Schools.com)
I would appreciate if somebody could help me out with this situation.
I have two elements, and one is moving towards the other. I am trying to get the new distance as it moves closer. Consider the code below:
<html>
<center>
<body onload = 'start()'>
<div class='field'>
<div id='bull'></div>
<div id='mount'></div>
</div>
<button id='one'>DO</button>
</body>
</center>
<style>
.field{
width: 440px;
height: 260px;
background: rgba(0, 0, 0, .2);
margin-top: 30px;
border: 1px solid #222;
border-radius: 10px;
}
#bull{
width: 15px;
height: 10px;
background: #000;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
position: absolute;
}
#mount{
width: 60px;
height: 30px;
background: rgba(20, 10, 45);
color: #fff;
border-radius: 4px;
margin-top: 210px;
}
</style>
<script type='text/javascript'>
function start() {
var ball = document.getElementById('bull');
var button = document.getElementById('one');
var mount = document.getElementById('mount');
button.addEventListener('click', go);
var x_pos = 0;
var y_pos = 0;
var bounce_point = 200;
var ball_dim = ball.getBoundingClientRect();
var ball_h_half = ball_dim.width / 2;
var ball_w_half = ball_dim.height / 2;
var mount_dim = mount.getBoundingClientRect();
var mount_h_half = mount_dim.width / 2;
var mount_w_half = mount_dim.height / 2;
function go() {
for(x_pos = 0; bounce_point > x_pos; x_pos++) {
ball.style.margin = x_pos + "px";
ball.style.transition = x_pos/2 + "s";
var dist = ((ball_h_half - mount_h_half)*(ball_w_half - mount_w_half)) + ((mount_h_half - ball_h_half)*(mount_w_half - ball_w_half));
console.log(dist);
if(dist < 3) {
console.log('One');
}
}
}
}
</script>
When bull reaches comes within 3px of mount, nothing happens... I've pretty much explained the issue as best as I can.
**
When bull reaches comes within 3px of mount, nothing happens... I've pretty much explained the issue as best as I can.**
Well i tried a little bit more, and your logic doens't seem to fit to what you want to do. First of all, you probably noticed your value in the log doesn't change.
It could have been because the values are retreived outside the loop, but not only (they actually have to be in the loop to be updated). You have 2 other problems: first, you are measuring the elements width and height, which don't take account of margin or other positioning. Your elements don't change size, so the value also won't. The other problem is actually the transition itself on the movement. Because of the delay, all your loop iterations are most probably done, and the margin already set to its final value when your "bull" effectively starts to move. It means that in the loop, you can't detect the position change, the element having not started to move yet. Using the value that was just set (margin) instead of detecting the real position of the element should show a progression for the value, but it makes harder to detect the collision because your 2 elements don't have the same positioning rules and you can't just compare the margins.
Here is a quick example that gets updated values (because the transition has been disabled, if you enable back, the problem comes again). You'll notice your calculation for the collision is wrong too. You can't just compare a distance between 2 corners for that, for a rectangle it's rather "has gone beyond left vertical edge AND has gone beyond top horizontal edge" (this of course takes only in account the top left corner, to be complete, it should also be added that it must not have reached the right or bottom edge yet).
Well, I can't propose you an all ready solution, but this addresses your code main issues:
<html>
<center>
<body onload = 'start()'>
<div class='field'>
<div id='bull'></div>
<div id='mount'></div>
</div>
<button id='one'>DO</button>
</body>
</center>
<style>
.field{
width: 440px;
height: 260px;
background: rgba(0, 0, 0, .2);
margin-top: 30px;
border: 1px solid #222;
border-radius: 10px;
}
#bull{
width: 15px;
height: 10px;
background: #000;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
position: absolute;
}
#mount{
width: 60px;
height: 30px;
background: rgba(20, 10, 45);
color: #fff;
border-radius: 4px;
margin-top: 210px;
}
</style>
<script type='text/javascript'>
function start() {
var ball = document.getElementById('bull');
var button = document.getElementById('one');
var mount = document.getElementById('mount');
button.addEventListener('click', go);
var x_pos = 0;
var y_pos = 0;
var bounce_point = 200;
var ball_dim, ball_x, ball_y, mount_dim, mount_x, mount_y, diff_x, diff_y;
var stayInLoop = true;
//ball.style.transition = "0.4s"; //i don't know why you updated the transition time based on position, changed to a fixed value outside the loop because it's quicker for the example
function go() {
for(x_pos = 0; bounce_point > x_pos && stayInLoop; x_pos++) {
ball_dim = ball.getBoundingClientRect();
ball_y = ball_dim.top + 10; // +10 because we're considering the bottom edge of bull
ball_x = ball_dim.left + 15; // +15 because we're considering the right edge of bull
mount_dim = mount.getBoundingClientRect();
mount_y = mount_dim.top;
mount_x = mount_dim.left;
diff_x = mount_x - ball_x;
diff_y = mount_y - ball_y;
console.log(diff_x, diff_y);
ball.style.margin = x_pos + "px";
if(diff_x < 3 && diff_y < 3) {
console.log('One');
stayInLoop = false;
}
}
}
}
</script>
EDIT/SUGGESTION: i suggest looking at window.requestAnimationFrame() MDN doc here for a better control on animations
I'm doing a proof of concept site with paralax scrolling. I have 3 images on the right side of the page which link to anchors to navigate this single page site. If i put my #buttons div inside the parallax container, the buttons scroll and leave the links at the bottom of the page. If i leave them outside that div, they scroll even though ive set position to be fixed. It works perfect in FF, but not in chrome. All i need is a simple page with parallax scrolling, and three buttons on the right side of the page that persist in the same position on the screen regardless of where you have scrolled to. Why does it work in FF and not chrome? My code is below
<!DOCTYPE html>
<html>
<head>
<meta content="en-us" http-equiv="Content-Language">
<meta charset="utf-8">
<meta content="A high performance parallax scrolling example." name="description">
<meta content="Parallax Scrolling Example" name="title">
<title>Parallax Scrolling Example</title>
<style>
body {
padding: 45px;
background-color: #010001;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 32px;
line-height: 40px;
padding: 30px;
margin-right: 60px;
color: #FFFFFF;
}
p span {
background-color: rgba(1, 0, 1, .85);
}
a {
color: #AFDBF2;
}
h1 {
text-transform: capitalize;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
font-size: 40px;
padding: 10px;
margin: 0px;
background-color: rgba(178, 45, 0, .75);
color: #EEE;
}
#parallaxContainer {
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -1;
}
#parallaxContainer img {
width: 100%;
height: auto;
}
#buttons {
position:fixed;
bottom:100px;
right:10px;
}
</style>
</head>
<body>
<div id="parallaxContainer">
<img src="http://4.bp.blogspot.com/_2mN0xk6r-Eo/TEh9lXrojWI/AAAAAAAAAuk/mDn5MDGetBE/s1600/0014.jpg">
</div>
<div id="buttons">
<div id="button1"><img src="images/button.png"></div>
<div id="button2"><img src="images/button.png"></div>
<div id="button3"><img src="images/button.png"></div>
</div>
<div id="content">
<h1>Some Random Star Trek Quotes</h1>
<p><span>Captain Jean-Luc Picard: Duty. A starship captain's life is filled with solemn duty. I have commanded men in battle. I have negotiated peace treaties between implacable enemies. I have represented the Federation in first contact with twenty-seven alien species. But none of this compares with my solemn duty today... as best man. Now, I know, on an occasion such as this, it is expected that I be gracious and fulsome in my praise on the wonders of this blessed union, but have the two of you considered what you were doing to me? Of course you're happy, but what about *my* needs? This is all a damned inconvenience. While you're happily settling in on the Titan, I will be training my new first officer. You all know him. He's a tyrannical martinet who will never, *ever*, allow me to go on away missions.
Data: That is the regulation, sir. Starfleet code section 12, paragraph 4...
Captain Jean-Luc Picard: Mr. Data...
Data: Sir?
Captain Jean-Luc Picard: Shut up.
Data: Yes, sir.
Captain Jean-Luc Picard: [turning to the wedding guests] 15 years I've been waiting to say that. </p></span></p>
<br>
</div>
<script src="http://www.kirupa.com/prefixfree.min.js"></script>
<script>
var requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
var transforms = ["transform",
"msTransform",
"webkitTransform",
"mozTransform",
"oTransform"];
var transformProperty = getSupportedPropertyName(transforms);
var imageContainer = document.querySelector("#parallaxContainer");
var scrolling = false;
var mouseWheelActive = false;
var count = 0;
var mouseDelta = 0;
//
// vendor prefix management
//
function getSupportedPropertyName(properties) {
for (var i = 0; i < properties.length; i++) {
if (typeof document.body.style[properties[i]] != "undefined") {
return properties[i];
}
}
return null;
}
function setup() {
window.addEventListener("scroll", setScrolling, false);
// deal with the mouse wheel
window.addEventListener("mousewheel", mouseScroll, false);
window.addEventListener("DOMMouseScroll", mouseScroll, false);
animationLoop();
}
setup();
function mouseScroll(e) {
mouseWheelActive = true;
// cancel the default scroll behavior
if (e.preventDefault) {
e.preventDefault();
}
// deal with different browsers calculating the delta differently
if (e.wheelDelta) {
mouseDelta = e.wheelDelta / 120;
} else if (e.detail) {
mouseDelta = -e.detail / 3;
}
}
//
// Called when a scroll is detected
//
function setScrolling() {
scrolling = true;
}
//
// Cross-browser way to get the current scroll position
//
function getScrollPosition() {
if (document.documentElement.scrollTop == 0) {
return document.body.scrollTop;
} else {
return document.documentElement.scrollTop;
}
}
//
// A performant way to shift our image up or down
//
function setTranslate3DTransform(element, yPosition) {
var value = "translate3d(0px" + ", " + yPosition + "px" + ", 0)";
element.style[transformProperty] = value;
}
function animationLoop() {
// adjust the image's position when scrolling
if (scrolling) {
setTranslate3DTransform(imageContainer,
-1 * getScrollPosition() / 2);
scrolling = false;
}
// scroll up or down by 10 pixels when the mousewheel is used
if (mouseWheelActive) {
window.scrollBy(0, -mouseDelta * 10);
count++;
// stop the scrolling after a few moments
if (count > 20) {
count = 0;
mouseWheelActive = false;
mouseDelta = 0;
}
}
requestAnimationFrame(animationLoop);
}
</script>
</body>
</html>
I think it's a problem of -webkit-transform: translate3d because it is also not working in opera and chrome and both opera and chrome use webkit transform. On the other hand it's working on IE10 and FF because they both use transform: translate3d
To make it easy you can use jquery library for your parallax effect like:
skrollr.js or stellar.js its easy and fast to create parallax.
it was a css issue. I added a z-index for the buttons, all is well. the completed code is at jsfiddle.net/ZYQBD/4 thanks to all who helped!
I have posted my problem at http://jsfiddle.net/ugnf4/ as it would be make it easier.
Below is my html / javascript code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="mainContainer">
<div id="pageContainer" style="background: #cdcdcd;"></div>
</div>
<style>
BODY {
margin: 0px;
padding: 0px;
}
#pageContainer {
position: relative;
margin: 10px auto;
-webkit-transform-origin:50% 20%;
-webkit-transform:scale(1.37);
width: 1218px;
height: 774px;
border: 1px solid #000000;
}
#mainContainer {
width: 100%;
overflow: hidden;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</script>
<script type="text/javascript">
$(document).ready(function() {
setHeight();
$(window).resize(setHeight);
});
function setHeight()
{
$('#mainContainer').css({'height': $(window).height()});
}
$('#mainContainer').mousemove(function (e) {
});
</script>
</body>
</html>
Currently #mainContainer div has overflow hidden as i dont want to show scroll bars and #pageContainer div (inner div) is scaled at 1.37 using css3, as in certain cases based on screen / browser width height #pageContainer's content would be hidden because of overflow hidden.
I want to code javascript so that if somebody moves cursor in #mainContainer, based on position of mouse X and Y co-ordinates I would like to move #pageContainer so that similar position of #pageContainer would be visible (I hope it is clear).
I m having problem as I m using -webkit-transform-origin, unable to understand how to move #pageContainer around with respect to mouse co-ordinates of #mainContainer.
UPDATE:
I m looking something like what happens in issuu.com website when you open an ebook and zoom it more than the browser size (Should make it more clear)
I m looking for algo or pointer how to achieve it (how to calculate it) not necessarily a working script.
How can this be achieved.
Below is working html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="mainContainer">
<div id="pageContainer" >
<div id="pageContainerInner"style="background: #cdcdcd;">
</div>
</div>
<style>
BODY {
margin: 0px;
padding: 0px;
}
#pageContainer {
margin: 10px auto;
-webkit-transform-origin:50% 20%;
-webkit-transform:scale(1.37);
width: 1218px;
height: 774px;
}
#mainContainer {
width: 100%;
overflow: hidden;
}
#pageContainerInner {
position: relative;
width: 1218px;
height: 774px;
border: 1px solid #000000;
top: 0;
left: 0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</script>
<script type="text/javascript">
var pageWidth = 1220;
var pageHeight = 776;
var scale = 1.37;
var scaledDelta = 5; //Percentage mouse position approximation
$(document).ready(function() {
setHeight();
$(window).resize(setHeight);
});
function setHeight()
{
$('#mainContainer').css({'height': $(window).height()});
}
$('#mainContainer').mousemove(function (e) {
// Calculate the offset of scaled Div
var offsetX = $('#pageContainer').offset().left;
var offsetY = $('#pageContainer').offset().top;
// Calculate div origin with respect to screen
var originX = (-1 * offsetX) / scale;
var originY = (-1 * offsetY) / scale;
var wWdt = $(window).width();
var wHgt = $(window).height();
// Now convert screen positions to percentage
var perX = e.pageX * 100 / wWdt;
var perY = e.pageY * 100 / wHgt;
// Div content which should be visible
var pageX = perX * pageWidth / 100;
var pageY = perY * pageHeight / 100;
// Calculate scaled divs new X, Y offset
var shiftX = (originX - pageX) + (e.pageX / scale);
var shiftY = (originY - pageY) + (e.pageY / scale);
$('#pageContainerInner').css({'left': shiftX+'px', 'top': shiftY+'px'});
});
</script>
</body>
</html>
Hope this will help others.
I have posted a probable solution at http://jsfiddle.net/PYP8c/.
Below are the modified styles for your page.
BODY {
margin: 0px;
padding: 0px;
}
#mainContainer {
width: 100%;
overflow: hidden;
position: relative;
margin: 10px auto;
-webkit-transform-origin:50% 20%;
-webkit-transform:scale(1.37);
width: 1218px;
height: 774px;
border: 1px solid #000000;
}
#pageContainer {
position:absolute;
top:0px;
}
This is the javascript code for the same.
$(document).ready(function() {
//setHeight();
//$(window).resize(setHeight);
});
function setHeight()
{
$('#mainContainer').css({'height': $(window).height()});
}
$('#mainContainer').mousemove(function (e) {
var contentHeight = $("#pageContainer").height();
var minTop = 774 - contentHeight;
if(minTop>0)
minTop = 0;
var currTop = ((e.pageY-10)/774.0)*(minTop);
document.getElementById("pageContainer").style.top = currTop+'px';
});
Its just a demo on how you could get the text to move based on the mouse coordinates.
You could make a lot of changes, like adding a scrollbar that fades which gives the user a feedback about how much content is still available in both the vertical directions.
Also I have used hard coded values for height, but in your final version I would recommend you get the height of the mainContainer division dynamically.