I'm trying to get height from adjustable div because I'd like to add overflow style into css when height value will be greater than a set value. When you resize window height of this the div change. I'll explain this with some pictures:
The main problem is how to get it dynamically? I mean,when you resize your own window etc.?
In case you are able to use jQuery, I would suggest using the window.onresize method and compute the height of the div.
$(document).ready(function()
{
$(window).on("resize", function()
{
$("#myDiv").text("My height is " + $("#myDiv").height());
});
});
Take a look at this fiddle I created for you: http://jsfiddle.net/9ftGe/
I hope this is what you wanted.
I think you're looking for monitoring the browser variables...
window.innerHeight
window.innerWidth
Whenever you check/call these variables you should get the exact window inner size and take it from there.
NB: These variables (constants to us) are case sensitive.
Related
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.
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)
At the moment, I can set width attribute to auto to take the full width of the window, and it dynamically adjust itself if the window size is being changed (e.g. re-sizing the browser windows or displaying it on a different screen size). Example: http://jsfiddle.net/NnsN2/
However, I can't get the height to work the same. It will always be the minimum height that will fit the content, even though I've tried setting it to auto.
The usual approach of getting the window height first ($(window).height()) and use that for height doesn't work here, because it will be static and will not dynamically adapt to change of window size.
How can I make the height always take the full height of the window as well as be able to adapt itself to window size change?
You can try to get the element's #id or .class at runtime and then make the width/Height according to the window width and height:
$(window).resize(function () {
$('.ui-dialog').css({
'width': $(window).width(),
'height': $(window).height(),
'left': '0px',
'top':'0px'
});
}).resize(); //<---- resizes on page ready
checkout in fiddle
Here is how I was able to "solve" this problem for jQuery UI Ver 1.8.17:
After the dialogue has been opened, and assuming that you have captured its id, use the following:
$("#DlgID").parent().css('height', $(window).height());
The actual height is dictated by the parent of your <div> containing the dialogue content, hence the reference. You can also use this method to control other properties of the parent.
Happy coding!
You can use jquery plugin :
$("#demo").dialog({
width: 500,
height: 300,
dialogClass: "dialog-full-mode" /*must to add this class name*/
});
//initiate the plugin
$(document).dialogfullmode();
I am using jQuery to resize an element when the window is resized using:
$(window).resize(function() {
topHeight = $("#top").height();
height = $(window).height() - 210;
$("#container").height(height);
$("#g").height(height-25);
});
With the topHeight getting the most recent height of the top bar since it can rearrange.
My problem is that I can't figure out a way to resize the #container when the #top changes height. I've tried using $("#topRow").resize(function() { }), but it seems as though that doesn't work with elements.
You have to catch every event when #top's height changes.
If it happens when you resize the window, then you should bind your logic to window.resize, so your code in the question should work.
If there are other events when #top changes its height, then you should bind the logic there too.
Update: in the comments you mentioned that there is a multiple selection field, which can make the #topRow element change its height, so that is an event, which you can add your logic to.
Note: there is another option. You create a setInterval which periodically checks the size of #topRow and resises the #container if necessary, but I personally don't recommend this solution.
There are some ready JavaScript (jQuery) splitters, but they require panels height to be set. The problem is, that my website doesn't support fixed height, it just can't. Other thing is that this container can change it's height dynamicly, so I'd like to this splitter to adjust to the panels height.
Is there a script or a way to avoid that?
My idea was to set container's height the bigger panel's height, like:
var lheight = $("#LeftPanel").height();
var rheight = $("#RightPanel").height();
if(lheight > rheight){
$("#container").css("height", lheight+"px");
} else {
$("#container").css("height", rheight+"px");
}
but this doesn't seems to be a nice way for me.
Do you have any suggestions?
You can pass a new value to .height(), like this:
var h = Math.max($("#LeftPanel").height(), $("#RightPanel").height());
$("#container").height(h);
In this case we're just using Math.max() to get the taller one, and setting the height to that.