I have an example of moving an SVG line using an HTML slider. Now it moves the horizontal line up and down via an HTML slider. Next I would like it to move up and down as well as scale inwards (from the center). It needs to scale smaller as it moves downward, and larger as it moves upward.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Move The Line</title>
<style>
.vert1Slider {
width: 150px;
height: 20px;
}
#vert1Display {
font-family: arial;
font-size: small;
margin-top: -20px;
text-align: left;
padding-left: 10px;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 20px;
border-radius: 10px;
background: #d3d3d3;
outline: none;
opacity: 0.5;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #4caf50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #4caf50;
cursor: pointer;
}
</style>
</head>
<body>
<!-- SVG Vertical Position Line Slider -->
<svg class="moveTheLine" id="svg2" width="150" height="80">
<rect width="300" height="300" fill="#eee"></rect>
<line
id="testLine"
x1="39"
y1="28"
x2="111"
y2="28"
fill="none"
id="svg_line"
stroke="#000000"
stroke-linecap="round"
stroke-width="5"
/>
</svg>
<!-- END - SVG Vertical Position Line Slider -->
<!-- HTML Vertical Position Line Slider -->
<div class="vert1Slider">
<input
id="vert1Range"
type="range"
min=".5"
max="1.5"
value="1"
step=".05"
class="slider"
/>
<p id="vert1Display">Vertical Position <span id="vertScalar"></span></p>
</div>
<!-- END - HTML Vertical Position Line Slider -->
<!-- JS Vertical Position Line Slider -->
<script>
var sliderVert1 = document.getElementById("vert1Range"); //getter
var outputVert1 = document.getElementById("vertScalar"); //getter
var origVert1 = document.getElementById("testLine").getAttribute("y1"); //getter
var origVert2 = document.getElementById("testLine").getAttribute("y2"); //getter
console.log(origVert1, origVert2);
outputVert1.innerHTML = sliderVert1.value;
sliderVert1.oninput = function () {
var newPathX1 = $(testLine).attr("x1"); //getter
var newPathY1 = $(testLine).attr("y1"); //getter
var newPathX2 = $(testLine).attr("x2"); //getter
var newPathY2 = $(testLine).attr("y2"); //getter
newX1 = newPathX1 * 1;
newY1 = origVert1 * vert1Range.value;
newX2 = newPathX2 * 1;
newY2 = origVert2 * vert1Range.value;
console.log(newX1, newY1);
console.log(newX2, newY2);
console.log(vert1Range.value);
$(testLine).attr("x1", newX1); //setter
$(testLine).attr("y1", newY1); //setter
$(testLine).attr("x2", newX2); //setter
$(testLine).attr("y2", newY1); //setter
outputVert1.innerHTML = this.value;
};
</script>
<!-- END - JS Vertical Position Line Slider -->
</body>
</html>
Here is my example code:
https://jsfiddle.net/harbin_bill/0zw945m8/17/
I solved this problem using the line equation.
find the point coordinates at the upper limit & assign them as x1,y1
find the point coordinates at the lower limit & assign them as x2,y2
use those coordinates to solve for point slope & slope intercept
solve the y=mx+b equation for x
insert the equation as newX1 & newX2 into my code
sliderVert1.oninput = function () {
var newPathX1 = $(testLine).attr("x1"); //getter
var newPathY1 = $(testLine).attr("y1"); //getter
var newPathX2 = $(testLine).attr("x2"); //getter
var newPathY2 = $(testLine).attr("y2"); //getter
newY1 = origVert1 * vert1Range.value;
newX1 = (5 * newY1 + 133) / 7;
newY2 = origVert2 * vert1Range.value;
newX2 = -((5 * newY2 - 917) / 7);
console.log(Math.round(newX1), Math.round(newY1));
console.log(Math.round(newX2), Math.round(newY2));
console.log(vert1Range.value);
$(testLine).attr("x1", newX1); //setter
$(testLine).attr("y1", newY1); //setter
$(testLine).attr("x2", newX2); //setter
$(testLine).attr("y2", newY1); //setter
outputVert1.innerHTML = this.value;
};
Here is my example code:
https://jsfiddle.net/harbin_bill/0kduvj8z/1/
Related
I am creating a landing page, I used svg images for the home of the site.
On the left I have a title and a button, which are in the data div, while on the left there are 3 svg images, which are in the banner-images div and have a mouse parallax effect.
Now, everything is well placed if full screen, but when I resize the page everything gets messed up.
I have problems managing the 3 images and I don't know if what I wrote is correct.
I have no preferences for the responsive layout.
document.addEventListener('mousemove', move);
function move(e) {
this.querySelectorAll('.moving-img').forEach(layer => {
const speed = layer.getAttribute('data-speed');
const x = (window.innerWidth - e.pageX * speed) / 150;
const y = (window.innerHeight - e.pageY * speed) / 150;
layer.style.transform = "translateX(" + x + "px) translateY(" + y + "px)";
})
}
/* ------------------ Imports ------------------ */
#import url("https://fonts.googleapis.com/css2?family=Rubik:wght#300;400;500;700&display=swap");
/* ------------------ Colors ------------------ */
$blackBackgroundColor: #121212;
$blackDivsColor: #0c0c0c;
$whiteText: #fff;
$whiteBackgroundColor: #fff;
$whiteDivsColor: #e9e9e9;
$blackText: #121212;
$purple: #7b49db;
/* ------------------ Fonts ------------------ */
$bodyFont: "Rubik",
sans-serif;
/* ------------------ GLOBAL ------------------ */
* {
box-sizing: border-box;
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
font-family: $bodyFont;
}
section {
height: 100vh;
}
h1,
p {
margin: 0;
}
a {
text-decoration: none;
}
.container {
width: 100%;
max-width: 1300px;
margin: 100% auto;
}
/* ------------------ HOME ------------------ */
#home {
width: 100%;
display: flex;
background: $whiteBackgroundColor;
.home-container {
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
.data {
color: $blackText;
.home-title {
font-size: 15vh;
margin-bottom: 20px;
}
.home-button {
display: inline-block;
background-color: $purple;
color: $whiteText;
padding: 20px 50px;
border-radius: 10px;
}
}
.banner-images {
position: relative;
width: 600px;
height: 750px;
margin-left: 20px;
img {
position: absolute;
top: 0;
left: 0;
}
#up-hand, #down-hand {
z-index: 1;
}
}
}
}
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style/main.css">
<title>Tap-it</title>
</head>
<body>
<!-- Home section -->
<section id="home">
<div class="home-container container">
<div class="data">
<h1 class="home-title">TAP-IT</h1>
Get Started
</div>
<div class="banner-images">
<img src="./assets/images/banner-up-hand.svg" alt="banner" class="moving-img" id="up-hand" data-speed="-2">
<img src="./assets/images/banner-down-hand.svg" alt="banner" class="moving-img" id="down-hand" data-speed="1">
<img src="./assets/images/banner-phone.svg" alt="banner" class="moving-img" id="phone" data-speed="-1">
</div>
</div>
</section>
</body>
</html>
I don't know how to help with the code because I used images and the snippet can't handle them, so ask me anything you need.
If you need the 3 images, I'll leave them here: https://wetransfer.com/downloads/5c47bfcc566d33497e1e1accb33e942f20210615171854/23edfa
In the pen I built of your code for testing, the only real issue I saw with smaller page widths was that a horizontal scrollbar popped in and out as the parallax changed. Let us know if there's something else not working.
To fix that, first I made the parallax distance traveled constant across different window sizes by changing the calculation from your original:
const x = (window.innerWidth - e.pageX * speed) / 150;
const y = (window.innerHeight - e.pageY * speed) / 150;
to one that takes the cursor position as a proportion of the window size:
const x = (window.innerWidth - e.pageX) / window.innerWidth * speed * 6;
const y = (window.innerHeight - e.pageY) / window.innerHeight * speed * 6;
(The factor 6 was my best effort to recreate your factor 150 as it would apply to a maximized window on a 1080p screen.)
Since the speeds are -2, 1 and -1, the furthest to the right (and thus off the page horizontally) that one of the images can be offset is now 6px. So, to ensure that the images will stay within the window, just this had to be added in CSS:
.banner-images {
/* ... */
margin-right: 6px;
}
I have some image assets (folders in this example), where I can drag around and then use the "reset" button to essentially clean them up. However, after you reset the positions and try to drag again, it takes you all the way back to where you dragged it previously? Odd right??? Any help is greatly appreciated!
Again, looking to just solve for:
Let the user drag a folder/image
Let the user reset/clean-up
Let the user drag again, but starting from "reset"
"use strict";
// Reset Folder position on Clean Up
$(".reset-position").click(function () {
// Reset position
$(".resize-drag").removeAttr("style").css("transition", ".5s");
setTimeout(function () {
$(".resize-drag").removeAttr("style");
}, 600);
});
interact(".resize-drag")
.draggable({
onmove: window.dragMoveListener,
})
.resizable({
preserveAspectRatio: false,
edges: { left: false, right: false, bottom: false, top: false },
})
.on("resizemove", function (event) {
var target = event.target,
x = parseFloat(target.getAttribute("data-x")) || 0,
y = parseFloat(target.getAttribute("data-y")) || 0;
// update the element's style
target.style.width = event.rect.width + "px";
target.style.height = event.rect.height + "px";
// translate when resizing from top or left edges
x += event.deltaRect.left;
y += event.deltaRect.top;
target.style.webkitTransform = target.style.transform =
"translate(" + x + "px," + y + "px)";
target.setAttribute("data-x", x);
target.setAttribute("data-y", y);
target.textContent = event.rect.width + "×" + event.rect.height;
});
function dragMoveListener(event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute("data-x")) || 0) + event.dx,
y = (parseFloat(target.getAttribute("data-y")) || 0) + event.dy;
// translate the element
target.style.webkitTransform = target.style.transform =
"translate(" + x + "px, " + y + "px)";
// update the posiion attributes
target.setAttribute("data-x", x);
target.setAttribute("data-y", y);
}
:root {
--font-color: #000;
--font-size: 13px;
}
html,
body {
overflow: hidden;
background:white;
}
p {
font-size: var(--font-size);
text-align: center;
padding-top: 5px;
color: var(--font-color) !important;
}
.folder-container-1 {
width: 82px;
position: absolute;
right: 30px;
top: 10%;
cursor: pointer;
}
#folders {
width: 82px;
display: flex;
align-content: center;
justify-content: center;
}
#folders:active {
opacity: 0.7;
transform: rotate(4deg);
background: rgba(0, 0, 0, 0.5);
border-radius: 4px;
border: 1px solid grey;
}
.resize-drag {
box-sizing: border-box;
touch-action: none !important;
user-select: none !important;
}
.resize-container {
width: 100%;
height: 240px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Folder Reset Position</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<div class="folder-container-1">
<div class="folder-1 resize-drag projects-folder" data-target="#myProjects">
<img src="https://i.ibb.co/C2W4qR0/folder.png" id="folders" title="folder" alt="folder" />
<p>Folder 1</p>
</div>
<div class="folder-1 resize-drag components-folder" data-target="#myComponents">
<img src="https://i.ibb.co/C2W4qR0/folder.png" id="folders" title="folder" alt="folder" />
<p>Folder 2</p>
</div>
<div class="folder-1 resize-drag about-folder" data-target="#aboutMe">
<img src="https://i.ibb.co/C2W4qR0/folder.png" id="folders" title="folder" alt="folder" />
<p>Folder 3</p>
</div>
<button class="reset-position">Reset</button>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.js"></script>
<script src="/script.js"></script>
<script src="/drag.js"></script>
</html>
You have the data-x/data-y attribute still attached to the draggable even after reset. Try removing that and it should work fine.
I'm quite not sure why you need setTimeout to remove the style attribute though. I have added an extra statement to remove data-x and data-y. Maybe you can clean that up to a single statement
$(".reset-position").click(function () {
// Reset position
$(".resize-drag").removeAttr("style").css("transition", ".5s");
$(".resize-drag").removeAttr('data-x data-y');
setTimeout(function () {
$(".resize-drag").removeAttr("style");
}, 600);
});
I saw a code and i was trying to modify the size of the circles, but i don't know whither i can change it using js or css .Is there any way to change it ?
The full code is from:
https://codepen.io/XTn-25/pen/NWqeBaz
hesr is js code:
/**
* index.js
* - All our useful JS goes here, awesome!
Maruf-Al Bashir Reza
*/
console.log("JavaScript is amazing!");
$(document).ready(function($) {
function animateElements() {
$('.progressbar').each(function() {
var elementPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
var percent = $(this).find('.circle').attr('data-percent');
var percentage = parseInt(percent, 10) / parseInt(100, 10);
var animate = $(this).data('animate');
if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
$(this).data('animate', true);
$(this).find('.circle').circleProgress({
startAngle: -Math.PI / 2,
value: percent / 100,
thickness: 14,
fill: {
color: '#1B58B8'
}
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('div').text((stepValue * 100).toFixed(1) + "%");
}).stop();
}
});
}
// Show animated elements
animateElements();
$(window).scroll(animateElements);
});
It seems like it's using this as a dependency. So in order to change the circle size, you need to add size property which defaults to 100:
$(this).find('.circle').circleProgress({
startAngle: -Math.PI / 2,
value: percent / 100,
thickness: 14,
fill: {
color: '#1B58B8'
},
size: 300 // <-- here, the size changes the circle radius
})
and in order to stop overlapping the circles, you also need to modify the CSS a little bit by increasing the width of the .progressbar element:
.progressbar {
display: inline-block;
width: 300px;
margin: 25px;
}
So the full example would look like this:
/**
* index.js
* - All our useful JS goes here, awesome!
Maruf-Al Bashir Reza
*/
console.log("JavaScript is amazing!");
$(document).ready(function($) {
function animateElements() {
$('.progressbar').each(function() {
var elementPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
var percent = $(this).find('.circle').attr('data-percent');
var percentage = parseInt(percent, 10) / parseInt(100, 10);
var animate = $(this).data('animate');
if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
$(this).data('animate', true);
$(this).find('.circle').circleProgress({
startAngle: -Math.PI / 2,
value: percent / 100,
thickness: 14,
fill: {
color: '#1B58B8'
},
size: 300
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('div').text((stepValue * 100).toFixed(1) + "%");
}).stop();
}
});
}
// Show animated elements
animateElements();
$(window).scroll(animateElements);
});
/**
* index.scss
* - Add any styles you want here!
*/
body {
background: #f5f5f5;
}
.progressbar {
display: inline-block;
width: 300px;
margin: 25px;
}
.circle {
width: 100%;
margin: 0 auto;
margin-top: 10px;
display: inline-block;
position: relative;
text-align: center;
}
.circle canvas {
vertical-align: middle;
}
.circle div {
position: absolute;
top: 30px;
left: 0;
width: 100%;
text-align: center;
line-height: 40px;
font-size: 20px;
}
.circle strong i {
font-style: normal;
font-size: 0.6em;
font-weight: normal;
}
.circle span {
display: block;
color: #aaa;
margin-top: 12px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>
<h1 style="margin:auto;text-align:center;color:skyblue;">Circle Progressbar When Scroll</h1>
<div style="width:100%;height:800px;">↓ Scroll down ↓</div>
<h3>Title (Placeholder)</h3>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="100">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="30.5">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="77">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="49">
<div></div>
<p>Testing</p>
</div>
</div>
<div style="width:100%;height:500px;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
I am using blockly to create my program. I have blockly downloaded from this github location, and I'm trying to replace blockly images path from this location: https://blockly-demo.appspot.com/static/media/sprites.png to this (relative) location: sprites.png. but I don't know how to do this.
Question is: Where I can set this path?
Here is my page code (in root folder of blockly):
<!DOCTYPE html>
<html lang="en" style="width: 100%; height: 100%;">
<head>
<meta charset="UTF-8">
<title>Blockly Test</title>
<script src="blockly_compressed.js"></script>
<script src="javascript_compressed.js"></script>
<script src="blocks_compressed.js"></script>
<script src="msg/js/en.js"></script>
</head>
<body style="width: 100%; height: 100%; margin: 0;">
<xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
// toolbox codes are here.
</xml>
<div id="blocklyArea" style="position: absolute; width: 100%; height: 100%;"></div>
<div id="blocklyDiv" style="position: absolute;"></div>
<script>
var blocklyArea = document.getElementById('blocklyArea');
var blocklyDiv = document.getElementById('blocklyDiv');
var workspace = Blockly.inject(blocklyDiv, {toolbox: document.getElementById("toolbox")});
var onresize = function(e) {
// Compute the absolute coordinates and dimensions of blocklyArea.
var element = blocklyArea;
var x = 0;
var y = 0;
do {
x += element.offsetLeft;
y += element.offsetTop;
element = element.offsetParent;
} while (element);
// Position blocklyDiv over blocklyArea.
blocklyDiv.style.left = x + 'px';
blocklyDiv.style.top = y + 'px';
blocklyDiv.style.width = blocklyArea.offsetWidth + 'px';
blocklyDiv.style.height = blocklyArea.offsetHeight + 'px';
Blockly.svgResize(workspace);
};
window.addEventListener('resize', onresize, false);
onresize();
Blockly.svgResize(workspace);
//document.body.innerHTML = document.body.innerHTML.replace(/https:\/\/blockly\-demo\.appspot\.com\/static\/media\/sprites\.png/gi, "sprites.png");
</script>
<button id="generator" onclick="try { eval(Blockly.JavaScript.workspaceToCode(workspace)); } catch (e) { alert(e); }" style="position: absolute; margin: 25px; right: 0; width: 80px; height: 80px; border-radius: 50%; border: 5px solid teal; background: darkcyan; color: white; font-size: x-large; outline: none; cursor: pointer;">⯈</button>
</body>
</html>
Sorry for bad english.
You can change the media path while injecting blockly. Refer to media option while doing Blockly.inject() call.
In your case you can do something like -
var workspace = Blockly.inject(blocklyDiv, {toolbox: document.getElementById("toolbox"), media: './'});
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.