I'm using the UI-Calendar directive for Full Calendar and I have some resizing issues. The div that the calendar is in can change size based on an event which changes the div's class and thereby it's size. When this happens, the calendar redraws incorrectly. I can detect when the trigger occurs, but this seems to be inside the digest loop, i.e. before the element has actually changed sizes, so telling fullcalendar to redraw at this point is not helping.
Neither does jQuery.resize seem to fire (either by using angular's jqlite or the real jQuery). BTW, window resize does fire.
Currently, I'm solving it with a a $timeout every 100ms to check if the size has changed, which is a rather gross hack.
How can i either get notified when a div has resized or hook into the end of the digest loop, so that I see the size change reflected?
The resize event only fires when it's bound to the window (except for IE, where you can bind it to any HTML element). Here, more about that.
Checkout http://marcj.github.io/css-element-queries/ for an efficient solution.
Related
I have a number of images in my HTML document.
The user triggers some changes (AJAX calls) when clicking on an image or by pressing a key.
To keep track of the latest image (client-side), I use javascript and onmouseover, assigning the image ID to a javascript-variable which in turn is used to fill the AJAX calls.
Everything works well (even it there might be better ways to do it), but sometimes it takes some time to refresh the image. For a moment, it ceases to exist, causing the image next to it to jump left.
This, of course, moves that image underneath the pointer, triggering the mouseover event.
How(?) is it possible to distinguish between a mouseover event caused by mouse-movement from one fired by a layout change?
The short answer is you can't really tell what caused a mouseover event, other than the cursor moved over a new DOM element (or some other things, like a tap on a touch device). A layout change is just something that happens independent of this event.
One possible solution to your actual problem is to avoid the problem altogether by preventing the layout jump. For example, you could use a placeholder element to fill the space while the next image loads.
Alternately, your logic could almost-certainly be made more-robust so as not to depend on something as fragile as this.
I am trying to get height of a div, after window.resize method, so that the element has its new height, but before display the output to the user, so I could change height of another div.
What I know already and not so tempted to use in this case
Use percentages for setting height of another div
Use fixed heights
Use CSS instead
use clientHeight
use innerheight
so back to question
Is there any event in JS or JQuery which could get me state where document is re sized but not displayed to user yet on the screen.
$(window).resize(WindowResizeNow);
You can use $(window).resize().
When you change the DOM in JS function, DOM is updated immediately, but a page is rendered after the function has been executed.
This might not be obvious in case of some events, which fire several times per second (like resize and scroll, keydown etc.), but user might keep them as a single event.
If multiple handler calls cause troubles, they can be omitted by using a debouncer.
I'm using a PolyCalc to polyfill CSS calc(). I need to run it whenever window size changes, but resize event seems not to be fired when scrollbars appear. And scrollbars appear with some delay on my page as some of the content is loaded from a server.
I guess I have to answer my own question. Thanks to #Tricky12 I know it is not likely that there is more elegant solution then checking for resize at some interval.
Anyway I found a jQuery resize plugin that does that and allows to check for resize on any element and also replaces default $(window).resize which then reacts on scrollbars.
Take a look at this jsfiddle
http://jsfiddle.net/zB2Td/5/
Animation is triggered although .animate class is added after changing the dimensions.
If you uncomment the second line from the end transition won't start as it should.
Why does this code work like that?
What is a proper way to add .animate and not trigger transition on the previous changes.
Thanks!
To my understanding, what's happening is that the call to box.width() counts as a "Read" operation, as defined by this post. It forces the browser (webkit anyway) to re-layout (aka reflow) the DOM. Without this call, the browser never "knows" that the box was 200x200 prior to .animate being added, and it assumes the box started out at 100x100.
Is it possible to determine when a dom element has come into view ?
I would like an event to be raised when an element (e.g div, image) has come into the view of the browser
Is this possible ?
Where I saw this question? Right, here.
Not exactly the same but might help.
I don't see an "easy" way to do it. You basically would have to attach a check to the scroll and resize events. You'll need to do all the calculations - height of window, how much it was scrolled, element's offset, and using these you can see if the element has been scrolled to. Couple of potential optimizations would be - only recheck window height on resize, make sure the element has an ID so it's a quick lookup, use a flag if what you want to do is a one time thing, i.e. once it becomes visible and you do what you do stop the checks.
I would like an event to be raised
when an element (e.g div, image) has
come into the view of the browser
You can use the onload event for that which fires when all images, DOM, frames have loaded into the page :)