jQuery: Adjust the height of the overall container dynamically - javascript

http://dev.clickymedia.co.uk/rdicoursefinder/course-finder/
If you view the link, you will see that there are a number of filters acting at the same time. The overall height of the box is adjusted dependant on the amount of items showing by the filter plugin.
We then have a popup box when you click on each item. This also has a varying height, and pushes the next items down. We need the height of the container to adjust, taking into account the original height of the container before the item is clicked, and the popup box's height.
I have written some jQuery to do this, however, as you will see, each time it is adding the height of the blue popup box to the overall height again and again when you click the item to show the box, instead of once one is showing, adjusting the height of the container accordingly.
The jQuery I have used for the height is below:
var originalHeight = $('#filter-results').height();
var thisHeight = 70 + $('.resultsShowing').height();
var overallHeight = originalHeight + thisHeight;
$('#filter-results').height(overallHeight);
Any help would be much appreciated!

This line
var originalHeight = $('#filter-results').height();
will need to be outside your click() event, and should be done only once on $(document).ready()

This is because you're using the new height every time you're generating more height.
You need to move the originalHeight to one specific point, the first time you need it, and leave it alone there. Then, only thisHeight needs to get updated, and the result height should bet the former (static) + the latter (dynamic).

Remove this first of all
window.setInterval(function(){
///etc
}), 1);
It's killing my machine in Chrome.

if you want to know the blue element height before you display it, you should create it in memory:
var blueBox = $('<div />').html( ... );
var height = blueBox.height();
now you can add this height to the overall container and display blue element:
blueBox.appendTo('.overall');
ps. sorry about pseudo code

Related

JQuery width() returning wrong value?

I am in a scenario like this:
We have two similar popup windows, and such popup windows are generated by a factory (in Javascript) so that they share same common events & functions. One of them is our custom resize function named resizeFormRowService. It will get called when the browser window fires the resize event.
As the popup window is in a structure like repeating
<div class="row">
<div> //label </div>
<div> //data </div>
</div>
The resizeFormRowService first get the width of the parent div with class row, then set it's first div child (which is label) to a fixed width like 140px, and set second div's width to "parent - first child". All are done by JQuery (as shown below)
I found that there is a strange behavior on one of the popup in Chrome (I am comparing two similar popup windows as stated).
The calculated width of the second child div (which is data) is 5px more than the other popup's corresponding field. So I log something in resizeFormRowService to trace what's going on.
StandardTemplatePopup.prototype.resizeFormRowService = function () {
var self = this;
var $popUp = self.getPopup();
...
var $rows = $popUp.find('.row');
$rows.each(function () {
var $this = $(this);
var $firstDiv = $this.find('div:first');
var $secondDiv = $this.find('div:eq(1)');
var labelColWidth = self.options('labelColWidth');
// labelColWidth is something we can config, so both popup firstDiv's width is the same
// so I think the problem must be in $this.width()
$firstDiv.width(labelColWidth);
//Add by me, want to see which row is this
console.log($this);
//Add by me, see this row's width
console.log($this.width());
var width = $this.width() - $firstDiv.outerWidth() - 0.5;
$secondDiv.width(width);
});
...
};
Running this on both popup windows, one log 270px while the other one log 265px! So I try to see which rows are they, at this point I think maybe there is some scripts within the first popup window changing the row's margin / padding and thus changing its width, but surprisingly it's not the case
Here is first popup
Here is the second popup
As shown, the second child div's calculated width differ by 5px, but the parent's row width is exactly the same, which is contradicting what I logged in the resizeFormRowService!
So my question is: are there any known issues of JQuery width() which lead to my problem? If no, then any advice pointing to potential cause is appreciated.
EDITED:
I hope this may hint someone, one of my teammates, by trial & error, adding an empty div at the end of the first popup window
<div class="col-xs-12"> </div>
Then everything goes fine...both popup windows will resize correctly.
PS1: The smaller result: 265px is the correct and expected result
PS2: The height difference in the images is due to the wrongly calculated width of the second child div which makes content too wide to show in one line, so the height is auto-increased
I'm just going to put this in an answer because comments aren't very insightful.
To me, it would seem that your calculations are too fast and don't keep to any pre-set values. Something like say, a CSS transition would 100% surely mess it up for you. I personally would code it more like this (being a front-ender myself)
$rows.each(function () {
var $this= $(this);
var $firstDiv = $('div:first', $this);
var $secondDiv = $('div:eq(1)', $this);
var labelColWidth = self.options('labelColWidth');
// labelColWidth is something we can config, so both popup firstDiv's width is the same
// so I think the problem must be in $this.width()
$firstDiv.width(labelColWidth);
//Add by me, want to see which row is this
console.log($this);
//Add by me, see this row's width
console.log($this.width());
//why recalculate the $firstDiv.width when you have labelColWidth?
//try to avoid simple names like "width" for prevention of double naming
var newWidth = $this.width() - labelColWidth - 0.5;
$secondDiv.width(newWidth);
});
-- I should mention, Selectors like div:first and div:eq(1) tend to break when you insert things like : after or : before. I would recommend you use classes instead.

How to get the actual width available for content on the browser window?

I'm positioning my elements using JavaScript. In order to do it perfectly I have to get the amount of horizontal space available. Badly, $(window).width() does not take in account the scrollbar width. The result is this:
bad http://dl.dropbox.com/u/62862049/Screenshots/fb.png
Here, "Pagina 1" is contained in a small div that was supposed to align with the right border of the window. Well, it does - literally - ignoring the scrollbar, which covers part of the div, throwing the "1" of "Página 1" to the next line.
use this function
function scrollbar_width() {
var calculation_content = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>');
jQuery('body').append(calculation_content);
var width_one = jQuery('div', calculation_content).innerWidth();
calculation_content.css('overflow-y', 'scroll');
var width_two = jQuery('div', calculation_content).innerWidth();
jQuery(calculation_content).remove();
return (width_one - width_two);
}
now calculate available with
var availableWidth = $(window).width() - scrollbar_width();
This is similar to two previous questions:
how to get innerWidth of an element in jquery WITHOUT scrollbar
and
How to get screen width without (minus) scrollbar?

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.

image gallery /slide with zoom

I wanted to do something similar to this.
In this case when the user click in the image, this images is showed with 100% of the browser height, and the user can go to the next/previous image. When the user clicks again the image is showed in a bigger size(may be in the real size) and the user can go up and down in the image, but with out scroll, just moving the mouse.
What I want to do is when the user click the first time in the image go right to the last step: The biggest image with up and down synchronized with the mouse movement, and the possibility to go to the next image. In other words a mix with the features of the first and the second step of the original case.
Where I can see a tutorial, or a demo?? or how can I do the this??
Thanks
Basically, there are three parts to what you want to do.
Clicking on the image will show the image with respect to browser height
You can go to the next image while you are in this mode
Click on that image again will go into a supersize mode where your mouse position dictates what part of the image you are looking at
I'm not going to write a whole fiddle to demonstrate this because it's a decent amount of work but I can tell you the basic ideas.
With #1, when you click on the image, you will create a new div with a z-index of some high number (like 9999). The position would be fixed, and you will create
$(window).resize(function() {
var windowheight = $(window).height();
$("#imgdiv").css("height", windowheight);
});
Which will resize the image if the user decides to resize your window, this way it's always taking up the full height of your browser.
With #2, the arrows just create a new img tag. And the idea is something like
function loadnew() {
// create the new image
var newimg = "<img id='newimg'></img>"
$("#imgcontainer").append(newimg);
// make sure it has the same classes as the current img
// so that it's in the same position with an higher z-index
// then load the image
$("#newimg").addClass( "class1 class2" );
$("#newimg").css( "z-index", "+=1" );
$("#newimg").css( "opacity", 0 );
$("#newimg").attr("src", "url/to/img");
// animate the thing and then replace the src of the old one with this new one
$("#newimg").animate( {
opacity: 1;
}, 1000, function() {
$(oldimg).attr("src", $("#newimg").attr("src"));
});
}
Now with #3, you will size the image with respect to the width. The div fixed positioned. So again, you need a
$(window).resize(function() {
var windowwidth= $(window).width();
$("#imgdiv").css("width", windowwidth);
});
to make sure it's always taking up the whole screen. And for the mouse movement, you need to have a mousemove event handler
$("#superimgdiv").mousemove( function(e) {
// need to tell where the mouse is with respect to the window
var height = $(window).height();
var mouseY = e.pageY;
var relativepct = mouseY/height;
// change the position relative to the mouse and the full image height
var imgheight = $("superimg").height();
$("superimgdiv").css("top", -1*relativepct*imgheight);
});
And that's it. Of course I'm leaving out a bunch of details, but this is the general idea. Hopefully this can get you started. Good luck.

Why does this javascript (jquery) function seem to run out of order?

I'm having a nightmare with a simple function!
I want it to:
read the height of a div with existing content in it
Update the div with the new content (supplied to the function)
Read the height the div should be, but set it to the original height.
Animate the div's height to adjust and fit the new content.
Code is as follows:
// function to display status content by animating the height of the status message
function slideStatus(content){
// get current height
var status_origheight = $("#status-message").height();
// insert new content
$("#status-message").html(content);
// get new height
var status_newheight = $("#status-message").height();
// set the height to the orig value, hiding overflow content
$("#status-message").height(status_origheight).css("overflow","hidden");
// animate the div to the new height
$("#status-message").animate({height:"+="+(status_newheight - status_origheight)+""}, 1000);
}
When i run this, it appears to ignore the fact that the content has changed, and just use the original height (therefore do no animation as it thinks the height has not changed).
Please help if you can!! It's driving me nuts.
Work for me. Your bug is likely elsewhere... http://jsfiddle.net/6aBfD/
UPDATE
http://jsfiddle.net/6aBfD/3/
But that only works once. The problem is that you are relying on an element to set it's own height and read from that. But after the first run, you lock the height to a specific value. The updated link has the correct working clode, click it multiple times. I added the following:
$("#status-message")
.css("overflow","visible")
.css("height", "auto");
Now when you read the height it will be it's natural height. Then set the oveflow and height again later to lock it back down to what you want.
Rob,
Try the following instead of .height():
var status_origheight = $("#status-message").css('height');

Categories

Resources