I'm having trouble getting the position of an element because my animation is long and $(this).position().top is calculated too early.
How can I get a future position value of an element before it animates to that position?
That's not what you want. You want to get the position of the element AFTER the animation has completed. You need to add a callback function to your animation, and call the position from inside that callback function. Here you go ->
$("whatever").animate({
//do stuff for animation
}, 'delay', function(){
//our animation has completed, this is our callback function.
//we can now successfully get our position.
$(this).position().top
});
Hope this helps!
Also
Please consider improving your accept rating, 20% either means that your questions are poorly formatted, or you aren't following the community guidelines. Please read the FAQ to understand interacting with Stackoverflow.com
https://stackoverflow.com/faq
Side note:
You will also get the badge 'Analytical' for reading the entire FAQ. I highly suggest it.
Related
The very basic approach to move SVG image to another place is
elementToMove.animate({svgTransform: 'translate(100, -30)'}, 1000, "swing", function(){ console.log('Done!'); } );
But this is somehow fake, when I will check this with
elementToMove.getBoundingClientRect()
The result X,Y coordinates will be the same as before (as it would never move).
I need to track position of moved (translated?) elements, but I don't really know how to make it.
The only way I can imagine is to make separate class for moved elements and make some autocalculated position fields whenever move method would be called, but this is terrible idea as I already made a lot of code.
So basically I have css that causes an element to get bigger (increase height) when it hovers. I want to be able to have a function that allows you to click the element, disable the hover functionality (by setting the height back to it's normal state with .css()), fire a different segment of code, and then set the hover height back to normal when done. Since .css() doesn't have a callback functionality, I'm kind of stumped regarding how to do this.
Here's a jsfiddle that kind gives the layout of what I want to do.
http://jsfiddle.net/lennox02/99KB2/3/
And here's the lines of code in question
//this fires first, disabling the hover height of 200px;
$(".single-item:hover").css({"height":"100px"});
//the code I want to fire, fires second
$("#6").html("Hello");
//after the code finishes firing, put the hover height back to how it was
$(".single-item:hover").css({"height":"200px"});
Try this, I think it's closer to what you want http://jsfiddle.net/99KB2/6/ but probably not exact. You might have to look into JavaScript callbacks if this isn't good enough.
$(".single-item").on('click', function() {
//this fires first, disabling the hover height of 200px;
$(this).css("height", "100px");
//the code I want to fire, fires second
$("#6").html("Hello");
});
$(".single-item").on('mouseout', function() {
$(this).css("height", "");
});
Also, it's much easier to use all jQuery events instead of mixing JavaScript and jQuery.
So, I have scoured the internet to find help on this...
I have a bar graph where the bars/values are sorted left to right with the largest value on the left. Based on user interaction, the bar graphs/values may change and, for instance, the middle bar may need to move 1 or more spots to the left. This has to be done on the fly, without removing the DOM element because I need to animate the left to right movements... this is for user appeal, something that is very important to the project.
So, I guess my question is, since you can't resort DOM elements and animate them at the same time, how can you track the movement. I've toyed with the idea of creating an initial index of the graph as the page loads and updating the index as changes are made. Logically, I have a hard time with this. Also, if one were to do that, whats the best way to index, using the data attribute? Isn't this only HTML5 and possibly unsupported in older browsers, or does jQuery keep a cache that has nothing to do with HTML5?
I'm fairly new to javascript/jQuery. I would say I've been using it for 2 years but I've ever really only done small jQuery animations and validation. Would really love some input form the community!
Thank you!
You're right, you can't animate elements by sorting.
The knack is to position the bars within the graph space with CSS properties, eg. left or margin-left.
Then you have something that, when changed in the right way, will give an animated effect.
All you need to do is to loop through each bar in turn, calculate its new CSS left/margin-left property and use jQuery's .animate() to cause it to slide into its new position.
Assuming that the bars to be positioned with margin-left and that the height of the bars also needs to be changed, then the general form of the jQuery will be :
$(".bars").each(function(i, bar) {
var $bar = $(bar);
var marginLeft = ........;//expression that calculates or fetches the new margin-left property for bar i
var height = ........;//expression that calculates or fetches the new height property for bar i
$bar.animate({
'margin-left': marginLeft,
'height': height
);
})
There's no need to sort anything or to use the data attribute.
I'm developing a simple one page website and I'm integrating the jQuery UI Slider. The website I'm integrating it in is : Website.
It seems like I'm having a little problem with the slider. If you look closely at the slider when navigating with the left and right arrow ( or the left and right keyboard keys ) you will notice that when going backward, before the last step, the min range jumps ahead the handle with a few pixels ( the background image ).
And also the animate property attached to the handle it doesn't work when using the mouse cursor to move the handle, per say the handle is in position 0 and you click on the last position, normally it should animate to the last position but it jumps there.
Could someone tell me how to fix these bugs ? I tried working on the CSS for the first problem but it doesn't seem to be because of that.
"min range jumps ahead the handle" - I've reduced the bug here: http://jsfiddle.net/jefferyto/Gd5dn/
This is a bug in jQuery.animate() when animating non-pixel values; Slider uses percentages. Before animating, jQuery converts the element's starting value (in pixels) into the end value's units, and assigns this non-px starting value to the element (lines 8601-8605 in jQuery 1.7.2 (unminified)).
The calculation is flawed for small end values (like 0%), and so the range's starting width is larger than what it should be.
I've opened a pull request with a fix; the same fix can be applied to the current stable version of jQuery.
Update: You can find a plugin that fixes this bug (for jQuery 1.7.2) here: http://jsfiddle.net/jefferyto/zbkQX/
Copy from (at the top)
// Start jQuery.animate() fix
to (before the test code)
// End jQuery.animate() fix
It should work if you paste this code into your plugins.js.
"it should animate to the last position but it jumps there" - this is because the Slider and jPages plugins are connected with circular callbacks.
When the user clicks on the slider, Slider triggers a slide event then animates the handle and range. The slide event handler calls jPages to change to the new page. jPages calls its assigned callback function, which passes the current page number back to Slider. Slider sets its value and starts to animate the handle/range.
After the slide event, Slider goes back to animating the handle and range (which is actually the second time it is animating). Slider calls .stop(1, 1) on the elements before animating, which causes the first animation to stop and jump immediately to its end value. (The second .animate() does nothing since the elements are already in the correct position.)
(I hope that made sense :-) )
I suggest adding logic in the jPages callback to call Slider with the new page number only if the trigger isn't originally from Slider.
Update: I think you'll need to update both callbacks:
For Slider:
slide: function(event, ui) {
if (!self.paging) {
self.paging = true;
$(self.shop_navigation_class).jPages(ui.value);
self.paging = false;
}
}
For jPages:
callback: function(pages) {
var data = {
current_page: pages.current,
total_pages: pages.count
}
self.set_local_storage_data(self.data_key, JSON.stringify(data));
if (!self.paging) {
self.paging = true;
$(self.shop_slider_class).slider("value", pages.current);
self.paging = false;
}
}
Please let me know if this works for you.
The simplest answer is probably to just not use jQueryUI's slider.
Having looked at your code it looks like you're easily competent enough at JS and CSS to replicate its appearance and core behaviour yourself, and make it work exactly how you want it to.
i want to make a real-time feed reader, and i want a solution to make the new items coming without refreshing the page and with a scrolling effect like friendfeed.
you can see what i'm talking about here: http://www.vimeo.com/4029954
I just want a function which i can call with new DIV content and then it create it above the previous DIVs with the effect.
Note: i already have the ajax and settimeout functions, means that i have the new feeds content to be added, so what i'm looking for is the effect and function to add new divs with scrolling effect!
Thanks
I think you might be looking for something better than the slideDown() effect. That isn't quite right as it just increases the height of an object rather than making it appear to "scroll" into view. Check out the show() effects from jQuery UI. http://jqueryui.com/demos/show/#option-effect I imagine the "Slide" effect would be appropriate if you gave it the option to slide vertically. The "Drop" effect sounds like it would be right, but I get the same effect as "slide" when I try it. Perhaps that is a bug in the demo site at the moment.
You may also be interested in using the animate() method to animate the top property of an element so that you can 'scroll' it into view. You'd need to have a container with overflow: hidden and a set height and width with position: relative set. Then, an inner container with position: absolute which you can then animate the top property of with jQuery.animate().
var $items = $("#scroller .inner *");
$('#scroller .inner').animate({
top: '-' + Math.round( $items.length * $items.eq(0).outerHeight(true) ) + 'px'
});
Note that if you know how many pixels tall each inner element would be, you could replace the $items.eq(0).outerHeight(true) with the integer value of the known height.
As you want the function that you call with new DIV content then I assume that you already did AJAX request.
Then to add the content to the site:
If you are matching the container of all entries then you'll need http://docs.jquery.com/Manipulation/prepend#content,
if you're matching the first entry you'll use http://docs.jquery.com/Manipulation/before#content.
If you want nice slide down effect just use ... wait-for-it ... yes, slide down function :) http://docs.jquery.com/Effects/slideDown
Here are some techniques which can help you further, but you should do the research yourself after this:
Comet for streaming data over a persistent HTTP connection. Quite real-time. http://en.wikipedia.org/wiki/Comet_(programming))
AJAX Polling sending a request to a HTTP, which is also a persistent connection, but closes after data is present. Then you'd need to reopen the request for new data. http://www.dhtmlgoodies.com/index.html?whichScript=ajax-poller
Use the JavaScript setTimeout function to regularly call a function. This function should then call one of jQuery's AJAX Functions, for example $.load.