Window width changes when 1 element resized? - javascript

I'm making a 2 block web page, 1 needs to be resizable using the resizable() function of jquery. when one is resized, the second block needs to change its width as well.
I use the following jquery code :
$(document).ready(function(){
$(window).bind('resize', function(){
var left_width = $(".left").width();
var right_width = $(".middle").width() - left_width;
$(".right").width(right_width);
});
$(".left").resizable();
});
the problem is, for some reason $(window).width() keeps changing and i cant assign the width to the right block correctly
Example
the problem
this is what comes up in the console when i log $(window).width() ,
sometimes its 1166 , sometime 1183.

The scroll bar is being displayed for a fraction of a second while resizing, slightly reducing the size of your window.
This seems to sometimes clash with when you calculate the new width of the second area, which reduces the width slightly.

Use Jquery .css.
$(document).ready(function(){
$(window).bind('resize', function(){
var left_width = $(".left").width();
var right_width = $(".middle").width() - left_width;
console.log(right_width);
console.log(left_width);
console.log('window ' + $(".middle").width());
$(".right").css("width",right_width+"px");
});
$(".left").resizable();
});
[EDIT] I misunderstood the problem but the difference is about right scroll of browser

The window size changing is due to the scrollbar appearing on the right of the browser window as $(window).width() calculates the size of the viewing area. My recommendation would be to change the overflow of the body to hidden whilst you are resizing the object. It seems to work on your Fiddle at least.

Related

$(window).resize() and $(document).ready() calculate different values

I am trying to make text adaptive using jQuery. Here is the fiddle:
http://jsfiddle.net/bq2ca7ch/
You can see a div with some text in it. The div doesn't have a specified height, and it's height is calculated from text height and 10% paddings on top and bottom.
I want font-size to be responsive. Let's say, div's original size was 124px, and font-size was 50px, so I want to keep this ratio. That means I need to know, what percent 50 is from 124. It is about 40.32 (50/124*100). That means that I need to set font-size to value, equal to container height/100 * 40.32. Here is the code I used:
function foo(){
var container = $(".box");
var containerHeight = $(".box").innerHeight().toFixed();
var neededSize = (containerHeight/100*40.32).toFixed();
container.css("font-size", neededSize + "px");
}
$(window).resize(foo);
$(document).ready(foo);
That seems to be working, but only when I resize the page. When I reload it, there is some different value. Why does the same function gives different values on resize and onload?
What i observed that Size changes because :
1. When you just reload .the function runs only once.
2.But when you resize , the function runs twice and changes the font size because the again calculations are done based on new height.
Main thing is on resize it is calculating wrong innerheight
See this:
function foo(jQuery ){
var container = $(".box");
var containerHeight = $(".box").innerHeight(true).toFixed(2);
var neededSize = (containerHeight/100*40.32).toFixed(2);
alert(containerHeight );
container.css("font-size", neededSize + "px");
}
$(window).resize(foo);
$(document).ready(foo);
Resize method is not reliable.
Code in a resize handler should never rely on the number of times the handler is called. Depending on implementation, resize events can be sent continuously as the resizing is in progress (the typical behavior in Internet Explorer and WebKit-based browsers such as Safari and Chrome), or only once at the end of the resize operation (the typical behavior in some other browsers such as Opera).
I tried with this , it worked for me both are giving the same result for me . try this container.css("font-size":neededSize + "px");

jQuery Change top value on scroll

I am hoping to create an effect similar to this one further down the page, in the 'Designing For 20-Somethings' section.
The effect is essentially to get a long image to change the css top value within a device such as a MacBook or iPhone, so it appears as though the image within the device is also scrolling whilst the user is scrolling the website.
I've created a fiddle to show how far I've got, but this doesn't work well on resize or when initially loaded.
This is some of the code I am using below
var yOffset = $element.offset().top - ($(document).scrollTop() + $(window).height()/diviser)
Any help is appreciated.
OK I see it now. But the movement is so subtle i didn't even notice it. It looks to be a lot of work for something that is pretty much unnoticeable. It appears he's changing the top position of the image based on some percentage change of the full window scroll but only when the image is inside the viewport.
Just off the top of my head (completely untested) something like this would scroll the image up and 1/4 the speed the window would scroll;
var mobiletop = $('.mobile').position().top;
var scrollfactor = 4;
$(window).scroll(function(){
if($(window).scrollTop() > mobiletop){
var imgtop = $('.mobile img').position().top - (($(window).scrollTop() - mobiletop)/scrollfactor);
$('.mobile img').css('top', imgtop + 'px');
}

JS / jQuery How to get height of dynamic (responsive) div?

I have not been able to find an answer that works for me on SO.
Basically I have a div with an image that has fixed positioning. It is responsive and will shrink or grow to whatever the screen size is.
What I want to do is get the height anytime the screen size changes and input it as a positioning value for another div so that it there is no overlapping (due to the fixed positioning).
I can get the height initially but it never changes after the first value when the screen is being resized.
quick demo up here: link
look in console to see height being returned. notice that it doesn't change when browser is resized.
JS
$(function(){
var explore = $('#explore').height();
console.log(explore);
$( window ).on("resize", function() {
console.log(explore);
});
});
I've also tried .css("height") but that didn't fix the issue.
*note the div does not have fixed positioning on this example since it would make the layout more confusing
You are not modifying explore:
Change it as follows:
$(function(){
var explore = $('#explore').css("height");
console.log(explore);
$( window ).on("resize", function() {
explore = $('#explore').css("height");
console.log(explore);
});
});
You need to add a resize listener to the window like so:
function repositionDivOnResize() {
// this is where you'll dynamically reposition your element
}
$(window).on("resize", repositionDivOnResize)

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.

A bit of problem with implementing a modal dialog

I am developing a modal dialog as a part of a web application. There is one thing that's been of a puzzle to me. Please watch a movie clip that I just uploded at http://inter.freetzi.com/example/. I feel strongly that I have to accompany my question with a video because this is the case when it's better to see once, than to hear 100 times.
(It could be vertical scrolling, or both vertical and horizontal at the same time. But I am using horizontal scrolling in my example, so watch for it.)
Here's about my question:
Width of the transparent mask affects the width of the page itself. But in Opera, for exemple, every time the window gets resized, the page gets width that is at most close to 'true'. While in IE, once the transparent mask has affected the width, afterwards the page remembers it and stays with it. What is the problem and how to settle it? How to make IE behave the way Opera does?
In my project, I do the following:
//curViewpointW and curViewpointH are current width and height of the viewpoint (current is meant to be the moment of the resize event)
oMask.style.width = curViewpointW + 'px';
oMask.style.height = curViewpointH + 'px';
var pageWH = getPageWH(); //getPageWH() is a function that gets current width and height of the page (with scrolling if there is any)
var curPageW = pageWH[0];
var curPageH = pageWH[1];
if (curPageW > curViewpointW) {
oMask.style.width = curPageW + 'px';
}
if (curPageH > curViewpointH) {
oMask.style.height = curPageH + 'px';
}
But IE ignores that somehow...
P.S. It's jQuery in my example, so many of you may have used its dialog before.
Have you looked into setting an onresize event handler that will adjust your mask dimensions when the window is resized? If you are using Prototype, you can set up such a handler unobtrusively like this:
Event.observe(document.onresize ? document : window, "resize", function() {//dostuff});
courtesy of the Roberto Cosenza blog

Categories

Resources