Develop Reference

On window resize get new width and last one

I`m trying build function who on document width changes get current webpage windows size and save last of past width with function, so i need past value.
So in pseido code it will be:
on resize(function){
var CURENT_W = 100
**var PAST_W = 90**
var MODIFIER = CURENT_W - PAST_W
jQuert('#element').css('atribute': MODIFIER)
});
So i need function who tell me how much window is resized.
How to get old document width? It`s possile?
Maybe there is some better method?

I've made a little snippet for you, you can use it as you want, just try to understand the script.
I'm 100% it can be done in some easier way, but this is the first that came to my mind
$(document).ready(function() {
// store a variable with body's width
var initial = $("body").width();
// render the body's width value on the selector
$("#initialwidth, #actualwidth").text(initial);
//now let's resize
$(window).resize(function() {
// Before doing some maths, let's get the width from #actualwidth span instead of directly from the variable
// the span has the value "static" because it was defined outside the ".resize()" event
var staticWidth = $("#initialwidth").text();
var newWidth = $("body").width();
//new width - initial width = difference
var finalWidth = newWidth - staticWidth + "px";
$("#actualwidth").text(newWidth);
$("#diff").text(finalWidth);
});
});
Here's a jsfiddle:
http://jsfiddle.net/2dcsonjg/

What is the right generic way to find any element on screen?

I wanted to write a code which should find whether an element exists on screen or not.
As per my requirement it should also support for an element which is inside a div that has inner scrolling.
Assumptions are
1.that only one level of inner scrolling should be supported.
2.only visibility in context of vertical scrolling is checked.
The main problem is the following usecase as depicted on this link.
An element A ($("#innerele")) is present inside the DIV ($("#outerdiv")) which is scrollable. First you have to find out whether the DIV itself is present on screen and second then test that whether A is visible. For e.g A may be at a the top position inside DIV and thus visible, but if DIV itself is not visible then it should return false.
I could write the following code which is jquery plugin which takes care of the above requirements. The context is the DIV which has inner scrolling inside it.
$.fn.isonscreen = function(context){
//Subtract the offset of the parent container.
//Will be 0 in case cont is undefined
var tominus=0,
//Add the scrollTop position incase no cont is undefined.
toadd=0;
if(context){
//Find if the div is itself visible
if(!context.isonscreen()){
return false;
};
tominus = context.offset().top;
}else{
context = $(window);
toadd = context.scrollTop();
}
if($(this).offset().top - tominus <= (toadd + context.height())){
return true;
};
return false;
}
For the above link the code to find if A is on screen or not -
$("#innerele").isonscreen($("#outerdiv"))
Will this work everytime or there is some usecase where it will fail?.

Get Default Height Of Element On Webpage after css height has been applied)

How do I go about getting what the height of an element on a page would be if it ignored the 'height' css property applied to it?
The site I'm working on is http://www.wncba.co.uk/results and the actual script I've got so far is:
jQuery(document).ready(function($) {
document.origContentHeight = $("#auto-resize").outerHeight(true);
refreshContentSize(); //run initially
$(window).resize(function() { //run whenever window size changes
refreshContentSize();
});
});
function refreshContentSize()
{
var startPos = $("#auto-resize").position();
var topHeight = startPos.top;
var footerHeight = $("#footer").outerHeight(true);
var viewportHeight = $(window).height();
var spaceForContent = viewportHeight - footerHeight - topHeight;
if (spaceForContent <= document.origContentHeight)
{
var newHeight = document.origContentHeight;
}
else
{
var newHeight = spaceForContent;
}
$("#auto-resize").css('height', newHeight);
return;
}
[ http://www.wncba.co.uk/results/javascript/fill-page.js ]
What I'm trying to do is get the main page content to stretch to fill the window so that the green lines always flow all the way down the page and the 'Valid HTML5' and 'Designed By' messages are never above the bottom of the window. I don't want the footer to stick to the bottom. I just want it to stay there instead of moving up the page if there's not enough content to fill above to fill it. It also must adapt itself accordingly if the browser window size changes.
The script I've got so far works but there's a small issue that I want to fix with it. At the moment if the content on the page changes dynamically (resulting in the page becoming longer or shorter) the script won't detect this. The variable document.origContentHeight will remain set as the old height.
Is there a way of detecting the height of an element (e.g. #auto-resize in the example) and whether or not it has changed ignoring the height that has been set for it in css? I would then use this to update the variable document.origContentHeight and re-run the script.
Thanks.

I don't think there is a way to detect when an element size changed except using a plugin,
$(element).resize(function() //only works when element = window
but why don't you call refreshContentSize function on page changes dynamically?
Look at this jsFiddle DEMO, you will understand what I mean.
Or you can use Jquery-resize-plugin.

I've got it working. I had to rethink it a bit. The solution is on the live site.
The one think I'd like to change if possible is the
setInterval('refreshContentSize()', 500); // in case content size changes
Is there a way of detecting that the table row has changed size without chacking every 500ms. I tried (#content).resize(function() but couldn't to get it to work.

How can I check if an element is in overflow area?

i have a div with a with of 300px.
this DIV contains different Icons and if there are too many Icons then they are not visible due to overflow:hidden
How may i programatically check if an icon is visible or is in overflow area?

I couldn't find anything exactly like that so I wrote a quick library function.
Element.addMethods({
isClipped: function(element, recursive){
element = $(element);
var parent = element.up();
if ((element === document.body) || !parent) return true;
var eLeft = element.offsetLeft,
eRight = eLeft+element.getWidth(),
eTop = element.offsetTop,
eBottom = eTop+element.getHeight();
var pWidth = $R(parent.scrollLeft, parent.getWidth()+parent.scrollLeft),
pHeight = $R(parent.scrollTop, parent.getHeight()+parent.scrollTop);
if (!pWidth.include(eLeft) || !pWidth.include(eRight) || !pHeight.include(eTop) || !pHeight.include(eBottom)) {
return true;
}
if (recursive) return parent.isClipped(true);
return false;
}
});
It's not elegant (I did say "quick") but it allows you to use isClipped() on any element. You can see a jsfiddle test here. It tests if any part of an element (excluding borders) is part of the overflow. You could do something similar to test for elements that are entirely outside the containing client area.

http://elvingrodriguez.com/overflowed/
It's a jQuery plugin that tells you if an element is overflowed.

If a node's scrollWidth/Height is higher than it's offsetWidth/Height, then something will be (partially) hidden. It's then a matter of determining which area is hidden through simple math (adding up icon widths, calculating the scroll offset and then eventually checking if an icon is within that visible area).

Div Overflow Scroll-to-bottom: Is it possible?

If I have a div with overflow:auto so that it is a scrollable div and I load it with information that makes a significant scroll area, is there a way that when I load the information, the div shows the bottom results? Or essentially scrolls to the bottom?
I've seen jQuery solutions but this is for use in an HTA so I cannot use jQuery. Is there a purely javascript way to accomplish this?

var myDiv = document.getElementById('myDiv');
myDiv.scrollTop = myDiv.scrollHeight;
Works in Firefox, Safari, Opera, Chrome and even Internet Explorer, which is more than I can say for the SSE test case I Set up... lol
I will spare you the rant about the obtuse solutions offered by others, and here is an example of code that could be used for an instant messaging type client.
document.body.onload = function()
{
var myDiv = document.getElementById('myDiv');
// Pick your poison below, server sent events, websockets, AJAX, etc.
var messageSource = new EventSource('somepage');
messageSource.onmessage = function(event)
{
// You must add border widths, padding and margins to the right.
var isScrolled = myDiv.scrollTop == myDiv.scrollHeight - myDiv.offsetHeight;
myDiv.innerHTML += event.data;
if(isScrolled)
myDiv.scrollTop = myDiv.scrollHeight;
};
};
The part of that example that is relevant checks to see if the div is already scrolled to the bottom, and if it is, scrolls it to the bottom after adding data to it. If it is not already scrolled to the bottom, the div's scroll position will stay such that the visible content of the div is unaffected by adding the data.

document.getElementById('mydiv').scrollTop = 9999999;
The scrollTop property specifies the scrolling offset in pixels from the top of the region. Setting it to a very large value will force it to the bottom.

How about this?
function scroll_to_max(elm) { // {{{
if(!scroll_to_max_el) {
scroll_to_max_el = elm;
setTimeout(scroll_to_max, 10); // Allow for the element to be updated
} else {
var el = scroll_to_max_el;
var t = el.scrollTop;
el.scrollTop = t+100;
if(el.scrollTop != t) {
setTimeout(scroll_to_max, 10); // Keep scrolling till we hit max value
} else {
scroll_to_max_el = null;
}
}
}
var scroll_to_max_el = null; // Global var!
// }}}
(NOTE: Only tested it in Chrome...)

Late answer but this is much more helpful
$('#mydiv').scrollTop(($('#mydiv').height()*2));

I think you need to set the scrollTop after the element is updated.
setTimeout(function (){
el.scrollTop = 999999999
}, 10)
also, in chrome at least, 99999999999 will scroll to the bottom. but 999999999999 (an extra 9) will scroll to the top. it's probably converted to an int in the C side of webkit.