CODEWITHSUNDEEP
javascripthtmlcsscss-transforms
Sudesh
Sudesh

Reputation: 1169

Moving css scaled div using javascript

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.

Upvotes: 0

Views: 1057

Answers (1)

Sameer Goyal
Sameer Goyal

Reputation: 581

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.

Upvotes: 1

Related Questions