My background image loads blocky for some reason (i.e., the center doesn't load horizontally), but after any tiny window resize it snaps into full form. I wanted to add a small bit of Javascript to adjust the window size by 1 pixel to remedy this. Unfortunately, I'm getting no results with the below code:
<script>
$(document).ready(function(){
window.resizeTo(window.outerHeight, window.outerWidth + 1);
}
</script>
Anyone have any ideas why?
Thanks!
Try to close the DOM ready function:
$(document).ready(function(){
window.resizeTo(window.outerHeight, window.outerWidth + 1);
}); // <-- Here
Related
I'm having a little trouble with my jQuery/JS code.
Whenever the window resizes, the "stretch" function should be run.
Now, I tried this:
function stretch() {
var stretch_elem = $('.stretch');
if (stretch_elem.length) {
var h = $(document).height() - stretch_elem.offset().top - 70;
stretch_elem.height(h);
}
}
$(window).resize(stretch);
But something strange is happening, when I resize the window. The element I'm stretching is just getting longer and longer, even if I upsize the window and the document height is getting lower.
What am I doing wrong here?
Thanks in advance.
Just fixed it. Had to add stretch_elem.height(0); before setting the new height. Didn't think I needed to do that. But it's working now.
I am trying to change the width of windows on dropdown change event. But I am stuck on it. The window is not resizing. here is my code:
$(".optionextended-narrow-swap-select select").change(function() {
$(window).resize(function(){
// here comes the code for resize.
alert (""); // for now it is not event alerting
});
});
Please help me to resize window. I just want to reduce it by 1 px just to trigger some event.
You can simply use:
window.resizeTo(window.innerWidth-1, window.innerHeight);
resizeTo():
The resizeTo() method resizes a window to the specified width and height.
For reducing width by 1 px: Get current width usingwindow.innerWidth and subtract 1 from it.
you need to trigger the window resize event.
Check the below article.
How to trigger the window resize event in JavaScript?
Try like
$(".optionextended-narrow-swap-select select").change(function() {
$(window).trigger( "resize" );
});
This was demo How it works
fiddle
I have a slider that is finished, but I have 1 issue.
I need to re-size the container to the windows size.
As you can see here
jQuery(document).ready(function(){
$(".toggle_window").click(function(){
$("#content").slideToggle("slow");
});
});
the slider disappear and I dont have any change to press the button so collapse the container again.
The problem I think is here #left and the high of this (height: 880px;), but I need to expand this guy at 95% of the webpage.
Which will be the best way to re-size the container?
I will appreciate your help.
Thnx in advance!
Cheers.
element #left height is set wrongly in your fiddle. Try setting the element height on document ready as
$("#left").height($( window ).height() - $("footer").position().left + 10);
If you want exactly 95% try like this,
$("#left").height($(window).height() /100 * 95 - $("footer").position().left);
First of all pardon me if this is a duplicate , but I have been trying solutions from other posts but none of them seems to work for me.
This is what I am trying to achieve:
I want to set the min-height and min-width of a div with the current width and height of the document. The Event should trigger on every resize of the document window.
This is what I have tried so far:
$(document).ready(function() {
function reset_demensions() {
doc_height = $(document).height();
doc_width = $(document).width();
$(".flicker-div").css("min-width", doc_width + "px");
$(".flicker-div").css("min-height", doc_height + "px");
alert("From - Function" + doc_width + "x" + doc_height);
}
reset_demensions();
$(window).resize(function() {
reset_demensions();
});
});
The problem I am facing:
First time when the window loads it shows me the correct width and height. But when I try to resize the window manually two problems are being noticed:
1> The function is called twice i.e. alert box
2> The captured height of the document doesn't change.
3> The captured width of the document keeps increasing rapidly , and the values are not garbage as it's static for every run.
Test Run OUTPUT:
On Load:
1349x626
On Resize:
1369x3130
1389x15650
I am sure I missed something here , might be something very silly. Kindly help me figure this out.
I think your mistake is that you are capturing the height of the DOCUMENT .. instead of the window.
You are changing the window size and expecting the document size to change.
change your code to check for $(window).height() and $(window).width()
First you don't need the + 'px';
When you reload your browser after refreshing. it should be working or?
A few days ago i had the same issue and recognized its because of the document.width/document.height.
Is it possible to calculate the same with window.width/window.height?
the function is called every step you resize your window but you can add a timeout, so it will be only once executed. --> timeout plugin http://benalman.com/projects/jquery-dotimeout-plugin/
Not sure if this will make a difference, but you don't need to have your function definitions nested in the onready function. It may be having some effect on the scope of the function/garbage collection etc? You can safely define the functions before the onready, as it won't be called until the document is ready. Also take out the alert from where it is. Doing that has caused me many a browser crash because of the speed that the event fires and it tries to fire an alert when you resize the window!
You might want to try $(window).width() too as that might explain your cumulative results as your document is getting bigger as you resize your div, especially if there is padding/margins involved somewhere.
code: http://jsfiddle.net/MDnrk/7/
for those too lazy to click the link:
$j(function(){
// need to fix some things that CSS doesn't seem to be able to fix (esp cross browser)
fix_drawer_height()
$j(window).resize(function() {
fix_drawer_height()
});
})
function fix_drawer_height(){
var new_height = document.body.offsetHeight - $j(".redline_info_scrollable").offset().top;
$j(".redline_info_scrollable").css({
'max-height': new_height + 'px;'
});
}
now, in my app, fix_drawer_height() gets called on DOM ready, but it doesn't seem to be called in teh JS fiddle.. so I'm not sure if that is the correct medium to show this problem.
Still not sure what would couse the window resize listener to not set the max-height appropriately. =\
The goal is to have the scrollable div always stretch to the height of the window.
Normally I'd just use height: 100% in the CSS, but that isn't really cross browser, and won't work with how the div is positioned in my actual app.
thanks!
You can use this:
function fix_drawer_height() {
$('.redline_info_scrollable').height($(document).height());
}
and add it in your onload or onresize;
working code: http://jsfiddle.net/MDnrk/13/