We Keep Coding

Enable javascript on a window being resized

I want javascript/Jquery to execute a piece of code once the window is being resized. Is there any way to do this? I believe I read something like $(window).change (I could have written that so wrong but I'm learning) Though it misses any indicator that tells it when the window size changes.
Thanks in advance!!

Your can use .resize() function.
Bind an event handler to the "resize" JavaScript event, or trigger
that event on an element.
Use it like this:
$(document).ready(function(){
$( window ).resize(function() {
console.log("Fired!");
});
})

You can listen for the window.resize() function :
$(function(){
$(window).resize(function(){
// Your window was resized, do something here
});
});
It's worth noting that this will be fired for any minor change, so if you are expecting it to occur frequently, you may want to employ an approach similar to this related discussion that uses a delay to detect when the resize has completed and then it will fire the event.

How to set cursor to busy until document.ready is called

I want to set the cursor to busy as soon as page load starts and want to change the cursor to normal when $(document).ready is called since I see it takes couple more seconds for this $(document).ready function to be called.
What is the way to do it?
All I could find is here. Not sure if it's the right way to call.

Try this,
CSS,
* {cursor:wait}
jQuery
$(document).ready(function(){ $('*').css({cursor: 'auto'}); });

'transitionend' event does not fire consistently

The following code works inconsistently with Chrome but also Firefox (with 'transitionend'). The function slogan_fade_next is just console.log('end');. I always get the classname applied to the first span element but anything after that is hit-and-miss when I click the refresh button, reload, or anything else.
The class of slogan-fadein applied to slogan[] changes the opacity of the element from zero to one but the callback function fade_setup isn't called consistently.
function fade_setup(){
var el = document.getElementsByClassName('slogan')[0];
el = el.getElementsByTagName('span');
for(var i=0;el[i];i++){
el[i].addEventListener('webkitTransitionEnd',slogan_fade_next,false);
}
el[0].className='slogan-fadein';
}
document.addEventListener('DOMContentLoaded', fade_setup);

instead of
document.addEventListener('DOMContentLoaded', fade_setup);
can you use
document.addEventListener('load', fade_setup)
With your current implementation, the JavaScript may be running before the browser has finished applying styles and, therefore, before any transitions are defined.

The problem is caused by a timing issue with applying the styles and anything else as mentioned by Stephen. The problem is, things aren't settled by the time I try to fire the first fade in so I triggered that with window.onload=slogan_fade_next;. Everything has settled in by the time my first element has done its thing.
I've given absolutely no more thought to this other than "it works" and I'm sure I'll come up with a better way to do this.

Why can't I get scrollTop()

I am trying to make an element appear after a certain scrolling has occurred to do this I'm using scrollTop() but I always get 0.
$(document).on("mousewheel", function(){
console.log($(window).scrollTop());
});
instead of window I've tried body, #wrapper and document but with all of those I get a constant 0. What am I missing to get a proper read? (#wrapper has no set height just a width.)

Did you put your code under $(document).ready(), in other words,
Has the DomContentLoaded event triggered before your code execute?
.scrollTop() will give correct result only when document has been loaded completely.
can you give a detailed example?
Sidenote: $(document).on('event', callback) works irrespective on whether document is fully loaded or not.

Question - does it have to be "mousewheel"? I do not believe there is a mousewheel handler unless you use a jquery plugin.
do this and it works for me:
$(document).on("scroll", function(){
console.log($(window).scrollTop());
});

JavaScript firing on page load instead of event (Bug)

I'm having the strangest issue when I'm calling in functions on an event. I'm trying to get a function to run when the window is resized using $(window).resize() but it seems to fire the function as soon as the DOM loads then never again.
I'm probably missing something really simple here but I've been looking at it all day and I need a bit of outside help.
I've created a watered down version on JSfiddle that does the same thing but using $('a').click() instead of $(window).resize() so it's a bit easier to test. As the same issue is cropping up I have a feeling there's something wrong with my function but I just can't see it.
Link is here http://jsfiddle.net/sambeckhamdesign/APLZ2/1/

Try:
$('a').click(function(){
alert('hello');
}, imageResizer());​

You are running the function and sending it's output into the jQuery thingy as a parameter:
$('a').click(alert('hello'), imageResizer());
instead, try this:
$('a').click(function() {alert('hello'); imageResizer(); });
This provides an anonyomous function, which will be run when the item is clicked, calling imageResizer(), whereas the way you had it, it ran the imageResizer() function and put it's return value into the onclick handler. The reason it didn't work later on was because it would have been treating whatever the return value of the imageResizer() function was as code that it was trying to run.

You are triggering the event instead of assigning an handler to it
$('a').click(alert('hello'), imageResizer());​
Should be
$('a').click(function(event) {
event.preventDefault(); // I suppose you will want that ... it will avoid your window jumping to the top when you click due to the href="#"
alert('hello');
imageResizer();
});​