bartaz/impress.js — Issue #55: FIX for Text Height
Author: hersonHerson
Created: 2012-01-13 05:25:46+00:00
State: open

Hello, I don't know if I must post here what I want to share, but I made a little change on resizing of the the

s when they are bigger than the screen size

so I use this two functions for calculate the size of the window and the size of the element you want (in this case, are the

s)

var windowSize = function(){
var w = 0;
var h = 0;
if(!window.innerWidth){
if(!(document.documentElement.clientWidth == 0)){
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
}else{
w = document.body.clientWidth;
h = document.body.clientHeight;
}
}else{
w = window.innerWidth;
h = window.innerHeight;
}
return {width:w,height:h};
}

var objectPosition = function(obj) {
var curleft = 0;
var curtop = 0;
var height = obj.offsetHeight;
var width = obj.offsetWidth;
if (obj.offsetParent){
do {
curleft += (obj.offsetLeft || 0);
curtop += (obj.offsetTop || 0);
} while (obj = obj.offsetParent);
}
return { left: curleft, top: curtop, width: width, height: height };
}

with these functions I calculate an interval for resizement

so I replace the definition of the "var target = { rotate: {}, scale: {}, translate:{} }" with these lines...

var textHeight = objectPosition(el).height;
var windowHeight = windowSize().height;
var interval = (textHeight > windowHeight) ? windowHeight / textHeight : 1;

var target = {
rotate: {
x: -parseInt(step.rotate.x, 10),
y: -parseInt(step.rotate.y, 10),
z: -parseInt(step.rotate.z, 10)
},
scale: {
x: (1 / parseFloat(step.scale.x)) * interval,
y: (1 / parseFloat(step.scale.y)) * interval,
z: 1 / parseFloat(step.scale.z)
},
translate: {
x: -step.translate.x,
y: -step.translate.y,
z: -step.translate.z
}
};

I think the windowSize() and objectPosition() are not necessary but I used them for fixing it faster...

Here you can see what I changed http://herson.byethost11.com/impress.js/
If you see the slide number 2, the text is very long and It fits now on the screen