We Keep Coding

How to disable a JavaScript, with inner window width

The page I am working on has a tilt effect, which affects the orientation of the site body. I want to turn this off when the page reaches a mobile viewport; I have looked and tried a few thing but can't seem to get the effect I want. The code below is what i am using. This script runs separate from my main JS code.
window.addEventListener("mousemove",function(e) {
var width = window.innerWidth;
var height = window.innerHeight;
var clientHeight = document.body.clientHeight;
var skew = {};
skew.y = (20 * ((e.x / width) - 0.5));
skew.x = -(20 * ((e.y / height) - 0.5));
document.body.style.webkitTransform = "perspective("+clientHeight+"px) rotateX("+skew.x+"deg) rotateY("+skew.y+"deg)";
});

CSS changes won't remove themselves, so you'll have to remove the transform manually if the browser window is under your desired size.
Check on window resize,
window.addEventListener('resize', function() {
if (window.innerWidth < 568) {
document.body.style.webkitTransform = '';
}
});
And also make sure not to reapply it if the user moves their mouse.
// This is the function you already have
window.addEventListener('mousemove', function(e) {
if (window.innerWidth < 568) {
return;
}
...
}

How can I inject a div into a webpage that moves on window resize?

Essentially, I'm creating a custom click & drag selection box. The problem is that the div is position absolutely, so it will scroll with the page, but it will not move with the page when the window is being resized. My attempted solution was to listen to the window resize, and move the div according to the change. The problem is that it will SEEM to work, but it will not move entirely accurately, so it will slowly move out of place if the window is resized slowly, or quickly move out of place if the window is resized quickly. It seems that the resize listener does not capture every resize event. I've narrowed the code down to the concept I'm using.
Try injecting this script into a page (I'm using the Chrome console and I haven't made any attempt for cross-compatibility because this will be used in a Chrome extension). It will attempt to resize only when the scrollbar is not active, to replicate the behavior of the page content. The client and scoll variables are interchangeable for recording the change in dimensions, but they are both there for testing purposes. I would love to see a solution which solves this problem using styling attributes. Thanks for your help!
var div = document.createElement("div");
div.style.position = "absolute";
div.style.backgroundColor = "#000";
div.style.width = div.style.height = div.style.left = div.style.top = "200px";
document.body.appendChild(div);
// get the highest z index of the document
function highestZIndex() {
var elems = document.getElementsByTagName("*");
var zIndex = 0;
var elem, value;
for (var i = 0; i < elems.length; i++) {
value = parseInt(document.defaultView.getComputedStyle(elems[i], null).zIndex, 10);
if (value > zIndex) {
zIndex = value;
elem = elems[i];
}
}
return {
elem: elem,
zIndex: zIndex
};
}
// set the div on top if it is not already
var highestZ = highestZIndex();
if (highestZ.elem != div) div.style.zIndex = highestZ.zIndex + 1;
// last width & height of client & scroll to calculate the change in dimensions
var clientWidth = document.body.clientWidth;
var clientHeight = document.body.clientHeight;
var scrollWidth = document.body.scrollWidth;
var scrollHeight = document.body.scrollHeight;
// move the div when the window is being resized
function resizeListener() {
var _clientWidth = document.body.clientWidth;
var _clientHeight = document.body.clientHeight;
var _scrollWidth = document.body.scrollWidth;
var _scrollHeight = document.body.scrollHeight;
// horizontal scrollbar is not enabled
if (_scrollWidth <= _clientWidth) {
div.style.left = parseInt(div.style.left.replace(/px/, ''), 10) + (_scrollWidth - scrollWidth) / 2 + 'px';
}
// vertical scrollbar is not enabled
if (_scrollHeight <= _clientHeight) {
div.style.top = parseInt(div.style.top.replace(/px/, ''), 10) + (_scrollHeight - scrollHeight) / 2 + 'px';
}
clientWidth = _clientWidth;
clientHeight = _clientHeight;
scrollWidth = _scrollWidth;
scrollHeight = _scrollHeight;
}
window.addEventListener("resize", resizeListener);
PS: Please, no jQuery solutions.

Since the resize listener isn't quite dependable with outside events, I've developed a simple "hack" to get the wanted results. The window overflow is forced to scroll and the body width & height are set to +1 so that the scrollbar is active, in which the div will then stay in place. Once the resize is complete, the overflow and body dimensions are restored. This may not be a desired solution for others who want the div to move on a manual window resize, but I am invoking the resize from JavaScript so it works perfectly for me.
The script in practice:
var overflow, overflowX, overflowY, bodyWidth, bodyHeight;
function startResize() {
// store the original overflow values
overflow = document.body.style.overflow;
overflowX = document.body.style.overflowX;
overflowY = document.body.style.overflowY;
bodyWidth = document.body.style.width;
bodyHeight = document.body.style.height;
// force the scrollbar
document.body.style.overflow = "scroll";
// activate the scrollbar
document.body.style.width = document.client.width + 1 + "px";
document.body.style.height = document.client.height + 1 + "px";
}
function stopResize() {
// restore the original overflow values; x & y are included because enabling the global overflow will update x and y
document.body.style.overflow = overflow;
document.body.style.overflowX = overflowX;
document.body.style.overflowY = overflowY;
// restore the original body width & height
document.body.style.width = bodyWidth;
document.body.style.height = bodyHeight;
}

How to stop IE from redrawing while updating many elements

I have a page with many divs that are laid out in a grid. Each div has text in it. I want the text to be just big enough to fill the div. I do this by increasing the text size until I detect that the div has scrolled, and then go back, as per this answer:
Auto-size dynamic text to fill div
This works really well on most browsers, including mobile ones, but on IE10 it is very slow. You can actually watch it making the text smaller. I am guessing that it is doing some kind of window-wide layout operation each time the font size changes.
Any idea how to suspend the redraw until all of the divs are done or otherwise improve performance?
Here is a simple fiddle showing the technique. Just imagine this with about 50 divs on the page. Instant in Chrome, takes several seconds in IE10:
(function($) {
$.fn.textfill = function(options) {
var fontSize = options.maxFontPixels;
var ourText = $('span:visible:first', this);
var maxHeight = $(this).height();
var maxWidth = $(this).width();
var textHeight;
var textWidth;
do {
ourText.css('font-size', fontSize);
textHeight = ourText.height();
textWidth = ourText.width();
fontSize = fontSize - 1;
} while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
return this;
}
})(jQuery);
$(document).ready(function() {
$('.jtextfill').textfill({ maxFontPixels: 200 });
});
jsfiddle: http://jsfiddle.net/pRJdY/

well the jsFiddle fails cause there was a bug in the version of jQuery jsFiddle is referencing, http://bugs.jquery.com/ticket/13980.
So I created a local version of the sample. I think I see what you are talking about, but not totally sure. I see it go from the normal small text to much larger, but it happens real fast. I see the same behavior in Chrome. So my guess is till I have thousands of elements on the page I may not be able to recreate your issue.
I did optimize your JavaScript a little so I hope that helps you out a little:
(function ($) {
$.fn.textfill = function (options) {
var $this = $(this),
fontSize = options.maxFontPixels,
ourText = $('span:visible:first', this),
maxHeight = $this.height(),
maxWidth = $this.width(),
textHeight,
textWidth;
do {
ourText.css('font-size', fontSize);
textHeight = ourText.height();
textWidth = ourText.width();
fontSize = fontSize - 1;
} while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
return this;
}
})(jQuery);

The problem is the huge number of DOM accesses. Fortunately, your algorithm can be greatly optimized.
Starting at 200px fontsize and going down, when you're going to end up around 10-30px is very slow. Better to go up, and better to do a binary search for the correct size.
Starting at the minimum size and going up is 5x faster, in this case, at least: http://jsfiddle.net/pRJdY/2/
Binary search cuts the time required in half, again: http://jsfiddle.net/pRJdY/4/
(function($) {
$.fn.textfill = function(options) {
var start = (new Date).getTime(),
node = $(this),
max = options.maxFontPixels,
min = 3,
span = $('span:visible:first', this),
maxHeight = node.height(),
maxWidth = node.width(),
size,
isTooBig,
finalSize = null;
do {
console.log(size);
size = Math.round((min + max) / 2);
span.css('font-size', size);
isTooBig = (span.height() > maxHeight || span.width() > maxWidth);
if (isTooBig) {
max = size - 1;
} else {
min = size;
}
if (min === max) {
finalSize = max;
}
} while (finalSize === null);
span.css('font-size', finalSize);
console.log('elements:', node.size(), 'elapsed time:', (new Date).getTime() - start);
return this;
}
})(jQuery);

JQuery recalculate css on window resize

On this site:
http://houston.aiga.org/
Although the slider is full width / variable on browser window size, the Title of each slider item is always indented to line up with the content.
I've tried setting this up:
http://jsfiddle.net/topiman/xS7vn/
$(window).resize(function() {
$('#item').css("padding-left",$(window).width()/2);
});
The function is working but the calculation pushes the item too far in on decreasing window size and too far out on increase.
The line in the working slider example is:
$('.layout-feature .box-section-image-gallery-controls-title, .layout-feature .box-section-image-gallery-title').css('paddingLeft', 60 + extraSpace/2);
where extraSpace is the $(window).width()
Any help gratefully received - thanks in advance

It seems you forgot about the width after all: http://jsfiddle.net/topiman/xS7vn/5/
This is what I came up with. Stupid thing is the console.log kept giving back a +8 difference which I had to hardcode remove. Is this what you were looking for?
$(window).resize(function() {
var ItemWidth = $(".wrapper").width();
$('#item').width( ItemWidth );
var WindowWidth = $(window).width();
// cannot resize because window is smaller than the wrapper
if( ItemWidth > WindowWidth ) {
var PadWidth = 0;
} else {
var PadWidth = (WindowWidth - ItemWidth)/2 - 8;
}
console.log( ItemWidth + " - " + WindowWidth + " - " + PadWidth );
$('#item').css("margin-left",PadWidth + "px");
});
Update; also check http://jsfiddle.net/xS7vn/8/ for the latest update including resizing on page load.

Checking a text element's width (based on font-size) against its parent container

I come to you with a tricky question:
Imagine you have the following basic structure:
<div><p>hello</p></div>
Now assume that div has display:block; and width:200px;.
Using javascript, how would you check what font-size gives you a 'hello' as big as possible without horizontal overflow (in the case of one word) or jumping to a 2nd line in case of a sentence or group of words?
I can't think of a way to measure the space occupied by text so that it can then be checked against that of the parent container, let alone checking if an element is overflowing or linejumping.
If there is a way, I'm sure this is the right place to ask.

Take a look at FitText
It is open source on github as well.
If you are interested in typography you might want to check out their other project called Lettering.js

There may be a method that's not as crazy, but this should be as precise as possible. Essentially, you have a div that you use to measure its width and incrementally increase the text content until it exceeds the width of the target div. Then, change the target div's <p>'s font size to the measuring div's minus 1:
http://jsfiddle.net/ExplosionPIlls/VUfAw/
var $measurer = $("<div>").css({
position: 'fixed',
top: '100%'
}).attr('id', 'measurer');
$measurer.append($("<p>").text($("p").text()));
$measurer.appendTo("body");
while ($measurer.width() <= $("#content").width()) {
$("#measurer p").css('font-size', '+=1px');
console.log($("#measurer").width());
}
$("#measurer p").css('font-size', '-=1px');
$("#content p").css('font-size', $("#measurer p").css('font-size'));
$measurer.remove();

Quick and dirty
fiddle
Set p's style to display: inline then run this
var dWidth = $("div").width();
var pWidth = $("p").width();
var starting = 1;
while (pWidth < dWidth) {
$("p").css("font-size",starting+"em");
pWidth = $("p").width();
starting = starting + .1;
}

Try this:
Auto-size dynamic text to fill fixed size container
(function($) {
$.fn.textfill = function(options) {
var fontSize = options.maxFontPixels;
var ourText = $('span:visible:first', this);
var maxHeight = $(this).height();
var maxWidth = $(this).width();
var textHeight;
var textWidth;
do {
ourText.css('font-size', fontSize);
textHeight = ourText.height();
textWidth = ourText.width();
fontSize = fontSize - 1;
} while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
return this;
}
})(jQuery);
$(document).ready(function() {
$('.jtextfill').textfill({ maxFontPixels: 36 });
});
<div class='jtextfill' style='width:100px;height:50px;'>
<span>My Text Here</span>
</div>

new jsFiddle Demo (updated 3/22/13)
I would just keep increasing the font size until the clientWidth or clientHeight changed. However, this becomes unreliable when using the actual element itself. To handle that situation, it is possible to create a span on the fly and then monitor the span's dimensions in order to properly retain the actual element's original sizes.
js
var adjuster = document.getElementById("adjust");
adjuster.onclick = function(){
var p = document.getElementById("p");
var text = p.innerText;
var s = document.createElement("span");
s.innerText = text;
p.innerHTML = "";
p.appendChild(s);
var h = p.clientHeight;
var w = p.clientWidth;
var size = 10;
while(true){
size++;
s.style.fontSize = size + "px";
if($(s).height() > h || $(s).width() > w){
size-=2;//rollback to no height change
s.style.fontSize = size + "px";
break;
}
}
p.style.fontSize = s.style.fontSize;
p.removeChild(s);
p.innerText = text;
};