Develop Reference

jquery ready and resize function doesn't work

Hello I had this problem which for some reason only occurs when I upload it to my website server the problem is I need a group of images to be the same size as another group of divs and I need this function to load on ready and resize but the function will only work when I resize the document/window rather than ready/load, when I need it to do both.
$(document).ready(function(){
$(window).on('resize ready', function(){
var heightval = $('#main-contentp1').height();
$("#fom-desc").height(heightval);
var heightvalb = $('#moodboard-box-ca').height();
$("#vmt-pic-sec").height(heightvalb);
var heightvalc = $('#view-blog-seca').height();
$(".vmt-pic-sec").height(heightvalc);
});
});

Well you are adding the ready event listener inside $(document).ready() which runs only after the document is ready. so the ready won't be fired.
try this:
$(document).ready(function(){
myFunction();
$(window).on('resize', myFunction);
});
function myFunction(){
var heightval = $('#main-contentp1').height();
$("#fom-desc").height(heightval);
var heightvalb = $('#moodboard-box-ca').height();
$("#vmt-pic-sec").height(heightvalb);
var heightvalc = $('#view-blog-seca').height();
$(".vmt-pic-sec").height(heightvalc);
}

document.onready = whatToDoOnResizeOrLoad;
window.onresize = whatToDoOnResizeOrLoad;
function whatToDoOnResizeOrLoad(){
var heightval = $('#main-contentp1').height();
$("#fom-desc").height(heightval);
var heightvalb = $('#moodboard-box-ca').height();
$("#vmt-pic-sec").height(heightvalb);
var heightvalc = $('#view-blog-seca').height();
$(".vmt-pic-sec").height(heightvalc);
});

Store variable from one event handler to be used by another event handler

I have this code:
$("#open").click(function()
{
var pos = $(window).scrollTop();
/* the next lines of code affects the value
* of 'pos'.
*/
});
$("#close").click(function()
{
var pos = /* what i want here is the $(window).scrollTop();
before the #open event handler changes it's value. */
//another code of mine.
});
Can anyone help me with this? Thanks in advance.

it's very simple, make variable global
var pos; //global variable
$("#open").click(function()
{
pos = $(window).scrollTop();
/* the next lines of code affects the value
* of 'pos'.
*/
});
$("#close").click(function()
{
// use pos here accordingly
//another code of mine.
});

You can store the original window DOM contents before you call any functions:
var pos;
$("#open").click(function(){
pos = $(window).scrollTop();
});
$("#close").click(function(){
$(window).height(pos);
});
Docs
http://api.jquery.com/scrollTop/
http://api.jquery.com/height/

You could just organize a little your code and do this:
function MyApp(){
var self = this;
this.pos = "";
this.temp = $(window).scrollTop(); //store initial value
this.wire = function(){
$("#open").click(self.open);
$("#close").click(self.close);
}
this.open = function(){
self.pos = $(window).scrollTop();
/* the next lines of code affects the value
* of 'pos'.
*/
}
this.close = function(){
self.pos = /* what i want here is the $(window).scrollTop(); before
* the #open event handler changes it's value.
*/
//another code of mine.
var original = self.temp; //here get the initial stored value
}
}
Example:
<script type="text/javascript">
$(function() {
var app = new MyApp();
app.wire(); //wire handlers
});
</script>

I'd use a variable local to an anonymous function:
(function() {
var context = {};
$('#open').click(function() {
context.pos = $(window).scrollTop();
});
$('#close').click(function() {
// Do something with context.pos
});
})();
Your code and explanation don't make this clear, but the above maintains an assumption from your code: That close cannot be clicked unless open has been clicked, and open cannot be clicked again until close has been clicked. But that really depends on your code - if that assumption isn't true I'd approach it differently (if that assumption isn't true, clicking close here risks getting an undefined).

More safe way.
$("#open").click(function() {
$("#close").attr("data-pop", $(window).scrollTop());
});
$("#close").click(function() {
var pos = $(this).attr("data-pop");
});

$(window).resize() doesn't fire function

I wrote a function that's supposed to fire when the page first loads, and when a user resizes the window. It works fine when the page loads, but it doesn't work when the user resizes the window. What's weird is that if I put an alert inside the function, that alert shows up when the window gets resized, but the rest of the function doesn't fire. I'm not seeing any error's in Chrome's console. I've tried changing it to $(document).resize(), $("body").resize(), and $(".pricingHeader").resize(), and nothing's worked. This makes no sense to me.
function getTallest() {
var tallest = 0;
$(".pricingHeader").not(".features .pricingHeader").each(function(){
tallest = $(this).height() > tallest?$(this).height():tallest;
});
$(".pricingHeader").not(".features .pricingHeader").height(tallest);
$(".features .pricingHeader").height(tallest + 8);
}
$(document).ready(function() {
getTallest();
});
$(window).resize(function() {
getTallest();
});

Try :
function getTallest() {
var tallest = 0;
$(".pricingHeader").not(".features .pricingHeader").each(function(i, elem){
if ( $(elem).height() > tallest ) tallest = $(elem).height();
});
$(".pricingHeader").height(function() {
var add = $(this).closest('.features').length ? 8 : 0;
return tallest+add;
});
}
$(function() {
$(window).on('resize', getTallest).trigger('resize');
});

Alright, I figured out what the problem was. I was setting the height of every .pricingHeader to a fixed height, which was preventing the tallest from resizing on window resize. Here's the fixed script:
function getTallest() {
var tallest = 0;
$(".pricingHeader").not(".features .pricingHeader").each(function(){
$(this).css({height:"auto"});
tallest = $(this).height() > tallest?$(this).height():tallest;
});
$(".pricingHeader").each(function() {
$(".pricingHeader").not(".features .pricingHeader").height(tallest);
$(".features .pricingHeader").height(tallest + 8);
});
}
$(document).ready(function() {
getTallest();
});
$(window).resize(function() {
getTallest();
});

window.onresize fires twice

I'm new to js. Please, don't kick painfully.
I have this code
window.onresize=function() {alert(1);};
When I resize any browser`s window, this function fires twice. Why? And how to rewrite this code that code will fire once.
Thanx in advance.

You need a timeout to bundle the resize events.
var res;
window.onresize=function() {
if (res){clearTimeout(res)};
res = setTimeout(function(){console.log("resize triggered");},100);
};
live Example

This event will fire multiple times in different browsers (some once you've finished the the resize, others during).
One way to get around this is to wait a certain amount of time (say half a second) after the event fires, to see if there are further updates. If not, you can proceed with the alert.
e.g.
var resizeTimer;
window.onresize = function(){
if (resizeTimer){
clearTimeout(resizeTimer);
}
resizeTimer = setTimeout(function(){
alert(1);
}, 500);
};
See it work on this fiddle.

To prevent function from "firing" the same result more than once when user resize
var doc = document; //To access the dom only once
var cWidth = doc.body.clientWidth;
var newWidth = cWidth; //If you want a log to show at startup, change to: newWidth = 0
window.onresize = function (){
newWidth = doc.body.clientWidth;
if(cWidth != newWidth){
cWidth = newWidth;
console.log("clientWidth:", cWidth); //instead of alert(cWidth);
};
};

I propose other solution because I don't like the timeouts,
`var resized;
window.onresize = function () {
if(resized){
resized = false;
}
else{
resized = true;
alert('resize');
}
};`

Why jQuery doing unwanted multiple actions of single command?

When i resize browser the it gives multiple alerts. I used "return false" not working.
If I used unbind()/unbind('resize') then it works but it creates an other problem- the resize() function stops working from second time browser/window resize.
My code-
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
alert($(".myclass").parent().width());
$(window).bind('resize',function() {
alert($(".myclass").parent().width());
});
});
</script>
<section class="myclass"></section>

This is not an issue with jQuery, but on the browser's implementation of resize.
Depending which browser you use it may trigger intermediate resizes, or a resize when your mouse is released only.

Because the resize triggers everytime the browser changes.
If you are resizing 100 pixels it can trigger up to 100 times.
Something like this should work and trigger only once you stopped resizing the window:
var resizing = false, stopedResizing = true;
$(window).bind('resize',function() {
if(!resizing){
console.log("started resizing. Width = " + $(".myclass").parent().width());
resizing = true;
}
stopedResizing = false;
setTimeout(function(){
if(!stopedResizing){
stopedResizing = true;
setTimeout(function(){
if(stopedResizing && resizing){
resizing = false;
console.log('Stoped resizing. Width = ' + $(".myclass").parent().width());
}
}, 500);
}
}, 500);
});

You could do something like:
$(document).ready(function(e) {
alert($(".myclass").parent().width());
var lastTime = 0;
$(window).bind('resize',function() {
var currentTime = new Date().time();
if(currentTime > lastTime + 5000)
alert($(".myclass").parent().width());
lastTime = currentTime;
});
});
...so that it will only fire on resizes at least 5 seconds apart. Normally though, you'd want to act when resizing stops, not when it starts.

This code fires ones on mouseover of the window after the a resize event as occurred.
$(document).ready(function() {
var windowResized = false;
function callFunction() {
console.log("I am called once after window resize");
}
$(window).mouseover(function() {
if (windowResized == true) {
callFunction();
windowResized = false;
}
})
$(window).resize(function() {
windowResized = true;
});
})