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/
Related
Sorry in advance if this is a minor question, but I'm new to javascript. I'm writing code for a webpage with full-width color backgrounds. Essentially, what I'm trying to do is detect the height of the window, and then make sure that the color block is the size of the window. The function works well on page load.
The problem is when I shrink the window, the div height doesn't change with the window size. I get all sorts of errors, like graphics poking out from behind the div.
I think what I'm missing is a way to detect the height of the content within each div and resize the height accordingly.
You can see how it works at http://pressshoppr.com
Here's the code:
$(function(){
var windowH = $(window).height();
if(windowH > wrapperH) {
$('.fullWidthSectionBG').css({'height':($(window).height())+'px'});
$('.fullWidthSectionBGFirst').css({'height':($(window).height())-120+'px'});
}
$(window).resize(function(){
var windowH = $(window).height();
var wrapperH = $('.fullWidthSectionBG').height();
var newH = wrapperH + differenceH;
var truecontentH = $('.fullWidthSection').height();
if(windowH > truecontentH) {
$('.fullWidthSectionBG').css('height', (newH)+'px');
$('.fullWidthSectionBGFirst').css('height', (newH)-120+'px');
}
});
});
I am not sure I totally understand the effect you are going for here, but I would imagine that if your initial bit of code achieves it, all you have to do is reuse exactly that. Treat each resize as if the page had just loaded, and get the results you want, eg:
$(function(){
// encapsulate the code that we know WORKS
function init() {
var windowH = $(window).height();
if(windowH > wrapperH) {
$('.fullWidthSectionBG').css({'height':($(window).height())+'px'});
$('.fullWidthSectionBGFirst').css({'height':($(window).height())-120+'px'});
}
}
// call on page ready
init()
// ...and call again whenever the page is resized
$(window).resize(init)
});
I am working on making some an 'about us' page on our company's site. I have a pic, and I am putting absolute placed speech or 'thought bubbles' above each person's head, with information. I can't share the page, as we are developing on a secure server, but I am attaching the JQuery that i am using.
<script type="text/javascript">
$(document).ready(function () {
$('.readMore').toggle(function () {
var width = $(this).width();
var height = $(this).height();
var increment = 200;
$(this).parent().css("z-index", "9999").animate({
"width": width + increment,
"height": height + increment,
"margin-left": -(width / 2)
}, 300);
$(this).html("Read less >>");
});
});
</script>
I have the animation set to run pretty much the way I want it to, but the one thing that I keep getting stuck on is this. I want JQuery to capture the width and height of each div when it is clicked on (it does this. I am storing the information in two variables called width and height), and then use as the base for the animate function to set it's width and height to the original+200px (this also works fine). However, once that animation has run, I want the original width and height variables to stay the same as they were before the animation, so that I can revert the div height and width to the original for that particular div.
Any ideas on how to accomplish this?
Simple, define the variables out of the toggle scope like this:
$(document).ready(function () {
var originalWidth = $('.readMore').width(),
originalHeight = $('.readMore').height();
$('.readMore').toggle(function () {
var width = $(this).width();
var height = $(this).height();
if (originalWidth !== width){
//do the magic
}
if (originalHeight !== height){
//do the magic
}
});
});
You can declare variable outside of your ready(), those variable will keep your data even outside the function. You can, for example, keep the original width and height on 2 variable outside of the ready function, and they will stay the same between each call.
I want to get an html element's width like so:
var elementWidth = document.getElementById("myElement").style.width;
Then I want to assign this to the current window which is a popup created using:
window.open("myUrl","myName","width=200,height=200");
How would I go about doing that? Any pointers coz the windows cant be assign width & height values like elements.
This can be done by doing:
var elemWidth = document.getElementById("myElem").style.width;
var elemHeight = document.getElementById("myElem").style.height;
window.resizeTo(elemWidth,elemHeight);
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.
Basically this function is meant to store the height value of the element that calls it and then if that height matches the element it will expand its height by 200px and if it does not match the stored value it restores that value (in essence shrinking the element container). How do I get it to read from the external style sheet to get the var heightVal = parseInt(boxStyle.height);?
function expand(e){
var box = document.getElementById(e);
var boxStyle = box.style;
var heightVal = parseInt(boxStyle.height);
if(boxStyle.height == heightVal){
boxStyle.height = heightVal + 200 +'px';
}
else{
boxStyle.height = heightVal;
}
}
This is my revised answer... This code allows for the function to be used universally to re-size any elements height regardless of whether you want it to start minimized or maximized and/or whether you want it to expand or collapse. I developed this function as an improvement on the answer I had previously written. This is actually a result of another function I have been working on to change the CSS class to allow for animation without using either javascript nor jquery. I now have both functions working and universal!
The parameters are pretty straight forward... box represents the element you want to resize, hNew represents the height you want to resize it to (can be larger or smaller than the current height of the element and the function still works).
function resize_height(box, hNew){
if(box.style.height != hNew || box.style.height == box.old_height){
box.old_height = box.style.height
box.style.height = hNew;
}
else{
box.style.height = box.old_height;
}
}