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'}); });
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
});
});
For <div class="editdiv">Test</div>. Jquery click functionality is added in document.ready function . But editdiv loading in page dynamically with delay.
So when I click on the div. Function is not calling. By using timeout function is working fine.
I need a different approach to solve this functionality.
If your .editdiv is loaded dynamically after your js loading so your click event can't detect it and it will not work, instead you should use event delegation on() to deal with fresh DOM :
$('body').on('click', '.editdiv', function(){
//Your click event code
})
If you want to avoid setTimeout you could use delay with queue callback method :
$('div.scroll-area-blue')
.delay(5000)
.queue(function() {
$(this).enscroll({
showOnHover: false,
verticalScrolling: true,
verticalTrackClass: 'vertical-track-blue',
verticalHandleClass: 'vertical-handle-blue'
});
});
If you will use setTimeout better to use it like :
setTimeout( enscrollDiv, 5000);
function enscrollDiv(){
$('div.scroll-area-blue').enscroll({
showOnHover: false,
verticalScrolling: true,
verticalTrackClass: 'vertical-track-blue',
verticalHandleClass: 'vertical-handle-blue'
});
}
Hope this helps.
It is really difficult to understand whats going wrong from your question. What I guess is you are loading a specific div using Ajax or similar technologies - meaning the div is not available initially.
The way jQuery works is that, it only binds the event to the elements only available at the time the part is executed.
If a <div id='myDiv'></div> is not present when $('#myDiv').click(function(){}) is called, it won't work.
One workaround is to do it like this:
$('body').on('click','#myDiv',function(){});
This registers the click on body and then checks if the clicked element is having a id 'myDiv' or not. We can expect the <body></body> to be present always. So the problem we had with previous code won't happen here.
maybe you're loading the javascript codes before the html elements(tags) are loaded.
try adding the script which includes "document.ready()" before the end tag of the body when all html tags have already finished loading.
I'm hitting targets in the dark. Hope it works for you. It's difficult to generate any solution without analyzing the problematic code......
I created some kind of lazy load for images. It works like this:
Every 500ms it check photoes which one you see on device and if you see it begin to load real image and this function will never run for images that loaded but if image cant load it will try again when you see this image again.
Is there any problem to use that kind of function every 500ms?
It sounds like you're using this in response to the images coming into view? Rather than polling every 500ms all the images on the page to see if they're in view, perhaps it would be better to trigger the check only when the page has scrolled (or whatever causes images to scroll. You could still limit this to be no more frequent than once every 500ms, but it has the benefit of:
Not having a 500ms interval loop running all the time
Not checking the images in view unnecessarily
I'll assume the images come in and out of view as the user scrolls, so what you'd want to do in that instance is as follows:
Bind an event to $(window).scroll
Have it fire an event after a fixed period with setTimeout (500ms in your case).
Cancel that timer if the user scrolls again and start it (to prevent it firing multiple times.
Listen for the event firing and perform your image check there.
Here's an example of how the code might look:
var scrollIntervalTimeout;
$(window).on('scroll', function() {
// Cancel the timeout and start it again
clearTimeout(scrollIntervalTimeout);
scrollIntervalTimeout = setTimeout(function() {
$(window).trigger('scrollDidEnd');
}, 500); // 500ms delay before firing the event
});
// Listen for the scrollDidEnd event
$(window).on('scrollDidEnd', function() {
// Perform your image check here
});
I have a function, that adjusts element width/height on a page. This function is triggered by a custom dimensionchange event.
I'm
$(window).trigger("dimensionchange")
whenever I'm loading content via AJAX or changing a page (I'm using jquery mobile).
My problem is on some pages, a bunch of Ajax requests get triggered (like a search page, which ajax loads criteria and intial results), so I'm ending up with several "dimensionchange" events, which all trigger my layout update function. This slows down the page considerably and is not necessary, because I only need to capture the last dimensionchange and then update the layout.
Question:
Is there a way to capture the last occurence of an event when the event fires a random amount of times? The only thing I could think of is to set a timeout on every event occurence and if there is no further event in ... 500ms... trigger the page update. But this seems pretty awkward, so I'm curious to know if there is a better way?
Thanks for help!
You want to use jQuery's Global Ajax Event Handlers ajaxStart() and ajaxStop() methods.
There is another recent post about Using AjaxStop and AjaxStart. The main thing you need to know is that you can be notified when the first ajax query begins, and when the last one ends. You could set a flag like this:
$(document).ready(function() {
var ajaxBusy = false;
$(document).ajaxStart( function() {
ajaxBusy = true;
}).ajaxStop( function() {
ajaxBusy = false;
});
});
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();
});