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());
});
Related
In javascript I have this window resize event defined
$(window).resize(function() {
})
but inside, I need to get width of elements. The problem is, the dimensions I am getting are for the state of how it looked before the reflow, when I need to get the dimensions after the reflow.
I tried putting a timeout of 1ms, but it doesn't seem to work. If I do 100ms, then it does. But I don't link this method, is there a better way?
EDIT: The function gets called once but its just that it needs to wait until after the redraw.
Thanks
You should use document.ready like this:
$(document).ready(function(){
$(window).resize(function() {
///Your code
});
});
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.
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'}); });
So, I am trying to get backstretch.js to work with multiple divs that is loaded from the db.
but I can't get a separate image for each div.
This works perfectly, when I hover the boxes, the background shows up, but I wan't it to be loaded as soon as the page loads.
$(".tournament-thumb").hover(
function(){
$(this).backstretch($(this).data("url"));
}
);
I have tried this with .ready() without any result this it doesn't seem to register "$(this)" ? :
$(".tournament-thumb").ready(
function(){
$(this).backstretch($(this).data("url"));
}
);
Here is the HTML:
<div class="tournament-thumb" data-url="images/image.jpg"></div>
Please help me... If there is any better way than this, please respond with that then :)
From the docs:
The .ready() method can only be called on a jQuery object matching the current document, so the selector can be omitted
So you can only use $(document) for the ready() method.
possibly best solution is to bind the delegation to the document object like
$(document).on('hover','.tournament-thumb',function(){
$(this).backstretch($(this).data("url"));
});
Okay, I solved it with jQuery.each
$.each($(".tournament-thumb"), function() {
$(this).backstretch($(this).data("url"));
});
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();
});