I have visual selection for table which colorize mouse overed table cell and it row and column, like some crosshar.
see JSFiddle:
http:// jsfiddle.net/arhangelsoft/0ardb3u0/40/
But I'm need JS automated and animated movement with effects(like easing), like from 0,0 crosshair smooth moves to 55 cell, after that the same smooth moves to 22 cell and etc.
I thinking, how to do that.
Currently I have an idea:
Create absolute div for row(u see it in blue color), columns and target cell.
After that move theese elemets together in animate funtion from x point to y point.
Is there more simply method/idea to do it?
The similar example of result what I want get via JavaScript you can dewnload here(GIF picture, big(2 mb) ):
download and see
sorry, I can't make it smaller.
Here you go: http://jsfiddle.net/andunai/0ardb3u0/41/
(I've commented out all your code as a reference, the new code is at the bottom of fiddle.)
You are right: the approach here is to actually create 2 absolute divs and to move them according to hovered cell.
For the animation we can use CSS transition property here:
transition: all 0.1s linear
...so that when we do $(...).css(...) changing its width, height, top and bottom, properties are transitioned smoothly from old value to new one.
You can still use jQuery's $.animate() method for the animation, but CSS transitions are basically much more faster and smoother.
Also, note that I've used $(...).outerWidth(...) instead of width(...) to properly resize cells.
One more thing: note this CSS line -
pointer-events: none;
It is very important because it makes the crosshair divs 'transparent' for mouse events, meaning actual clicks will go "through" them and will be captured by appropriate td element.
Enjoy!
Related
In Titanium Studio, I'm developing an Android app. I have a TableView that has rows that overflow beyond the page's height. One column of the table has a label that I want to rotate 270 degrees so that the text in it is vertical.
I am rotating the text like this:
tr = Ti.UI.create2DMatrix();
tr = tr.rotate(270);
var label = Titanium.UI.createLabel({
...
...
transform: tr
});
However, this transform seems to only apply to labels that are in sight. When I scroll down the table, the labels in the table that were previously beyond the page's height are still horizontal. When I scroll back to the top of the table, the labels that had successfully rotated initially are back to being horizontal.
I tried using scroll, scrollend, dragstart, and dragend events to re-transform labels once they have been scrolled to, but this method does not consistently work. When it does work, it is ugly because the labels, when scrolled to, are initially horizontal, and the user can see the animation of them being transformed a few seconds later.
How can I avoid this and keep all of the labels rotated vertically from the start? Is there a better method of rotating labels?
Additional thoughts: The thing I find the oddest is that the labels/text have been created else they would not appear when I scroll down the table. They are the proper color and size. If the color and size properties are being properly applied, then why would transform not be? I even tried changing
transform: tr
to
transform: Ti.UI.create2DMatrix({rotate:270})
which I imagine is the same thing as
transform: Ti.UI.create2DMatrix().rotate(270)
which also did not work.
You could try animecyc module:
https://github.com/animecyc/TitaniumAnimator
Can someone break down CONCEPTUALLY how this was achieved?
http://content.time.com/time/beyond911/
I know it loads "grid.html" which is tiled and depending how you click, becomes "infinite" (try clicking a corner image over and over again). Just not sure how it centers on the element that is clicked, or the use of arrows to select adjacent elements.
thanks
They are using the -webkit-transform: translate(top, left); on the table to effect the centering. It shifts the table up and down and left and right. For the "infinte" scroll, they are literally moving the table rows and columns around in the DOM. Also, lots of math related to the size of the rows and columns.
my question is how can I add specific movement to x-y axis for an HTML element according to mouse movements.
Look at the site here and scroll to second slide:
http://community.saucony.com/kinvara3/
How can i achieve such effect!?
If you're going to write the library-free version, you will need to start with the following:
Learn DOM-manipulation.
var myEl = document.querySelector("#my-el");
Learn the <element>.style interface.
myEl.style.position = "absolute";
Learn the CSS properties, their values and how to read/use them from the style interface.
myEl.style.left = 10 + "px";
You'll need to understand the following CSS properties at a minimum:
"display"
"position"
"top"
"left"
"z-index"
Learn how to parse numbers from strings, properly, in JS.
...this will be unimportant, working with the mouse,
but very important, working with the DOM.
Learn how to write event-handlers.
window.addEventListener("mousemove", function (evt) {/*mousemove event object*/});
Learn the properties of event-objects (specifically the event-types that are important, like mouse, keyboard, touch).
Learn how to manage events, and control the number/frequency of operations, based on an ideal framerate, when the browser won't do it for you.
Learn how to make all of these things happen in a cross-browser, IE8+ way.
Learn a little linear-algebra (honestly, learning enough of it to understand an inverted-axis scaled-parallax is just a tiny bit harder than Grade 6 geometry.
You can get a similar effect CSS only, no JS needed!
You can see an example here: Pure CSS 3D Meninas, by Román Cortés. In his blog, there is also the explanation.
Basically, you have to split the target element in small elements, and on hover, set the position of different background layers according to your trigonometric calculations.
From his explanation,
There are 80 vertical hover elements of 5*455 pixels each, covering
the full effect. Each hover element contains inside elements to define
every layer position, the background image and the lateral background
image. When the hover element is not active (without the mouse over
it), all is inside elements showing images are hidden, with display:
none.
When the hover element is active, the images are set to display:
block, and the position of these are set. These positions have been
calculated and are written in the CSS code for each layer and each of
the 80 vertical hover elements. This is what does the magic.
I'm very new to CSS/HTML/JS so I don't have lots of experience with CSS transitions.
I'm trying to animate a div elements on my page, but I can't achieve a desired result so far.
Here is my problem:
In my HTML I have a div container element that has 5 div elements inside of it. They look like simple boxes positioned in the middle of the screen and aren't visible for now. I also have 5 buttons in the corner of the screen.
What I'm trying to do is:
when I click a button (for example button 3) 3 of the divs on the left should disappear and be moved to the left behind the margin of the screen and 2 of the divs should do the same, but move to the right. After that I want 3 divs that are on the right slide back to the screen and 2 divs on the right should slide back as well. So it looks like they sliding towards each other to the positions they started from initially.
I'm trying to do this effect using CSS transitions (transform: translateX(Npx);). So in my JS file I have something like this:
$(document).ready(function() {
$(".button").click(function(){
// PART 1
// move 3 divs to the left using transform: translateX(Npx) (no animation)
// move 2 divs to the left using transform: translateX(Npx) (no animation)
// PART 2
// slide 3 divs to the left using transform: translateX(Npx) (with animation)
// slide 2 divs to the left using transform: translateX(Npx) (with animation)
});
So the problem is that in this case only the part one works and part two seems to be not working.....if I attach the part on code to a different event...like another click button...it works just fine.
So my question is if these two transitions can be done under one event?!?!
I have done this, and this kind of effect can look great. If I understand your question correctly, your issue is that you run the animation AFTER you moved the divs, so your animation function uses the wrong starting point.
What you need is:
Be sure you have a CSS position:relative; set on your divs so the animation can work.
Run your animation function moving your divs relative to their current position (i.e. top, left), and include a success callback. You may need to first use offset() and some math to figure out the distance traveled.
On the completion of your animation (success callback), change the relative position of your divs back to 0px (or whatever they were before) and simultaneously perform the function where you actually move the divs to their new position in the DOM using insertBefore(). I've never seen a flicker since these functions are near-instant, but if you see an issue you can set visibility to hidden while you reset the position and move the divs, and then reset the visibility afterward
You can even set custom z-indexes for your divs during the animation that you reset on the success callback, allowing you to determine which elements the divs pass over/under or specifying which is on top if they cross each other.
I asked a question yesterday on here and got some awsome help, but I need more help concerning more or less the same, only a bit different.
This is my old thread.
So ye, I made this and the idea is that you can customize the table to see it the way you want. for now its possible to drag the columns to change the order and its possible to order the columns on alphabet or high/low. Since I got help here, its now also possible to hide the columns.
Now I want to make the hiding process a bit more smooth, since its hard to see if something is hidden after a click if you use no animation. I use .fadeOut(200); now, but when the fading is done the column just 'jumps' to fill the gap, is it possible to animate this in some sort?
Edit: After thinking some more, I thought that I could just loop a -1px width untill the element's width is 1px and then just hide it, but for some reason that wont work, the table doesnt respond to .width(xxx); or .css('width', 'xxx');. It does change the value, but the td keeps the same width.
This is somewhat of a workaround, and there might be a better solution, but here it is anyway:
Animate the opacity to 0.0. Fadeout does the same, but it also sets display:none after completely fading out. It is the display:none that causes the adjacent column to jump and fill in the gap.
Animating will cause your hidden div to remain there. Now that it is no longer visible, animate its width to 0. This will cause the adjacent div to smoothly take over its place.
Once width is 0, set display:none
Here's a working sample I whipped up. Adjust accordingly to animate width: http://jsfiddle.net/x7BEv/8/
Here's how the magic happens:
$(document).ready(function(){
$('#button').click(function(){
$('#upper').animate({opacity:0.0},'slow').animate({height:'0px'},'slow',allDone);
});
});
function allDone()
{
$('#upper').hide();
}
I'm not sure how important the allDone() method is. You could probably do away with it.
you must use jqgrid
or just for sorting you can use tablesorter which is very easy to implement