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.
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
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!
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.
Please see the following jsfiddle: http://jsfiddle.net/bhellman1/Na3hd/11/
Right now when you move over the box, the hoverbox appears in the same place for all items.
What I would like to do is position the hover box based on which #box.corner you are moused over. If the #box.corner is to the left of the box, I'd like the hover box in the left, outside the box, centered to the corner.... If you mouse over a #box.corner that's in the bottom right, I'd like the hover box to show at the bottom right, centered to the corner.
Any ideas on how to accomplish this?
Thanks
If I read your question correctly, this should be what youre looking for: http://jsfiddle.net/Na3hd/17/
As you can see i moved around some of the css to match what different elements have in common more, so that the code can easily be reused and assigned to other elements. I moved the defining of the hoverbox into the mouseenter function, so that a new div gets created on each mouseenter, which will then not result in complication when setting the positions.
Hope this helps!
EDIT
Here a more dynamic approach: http://jsfiddle.net/Na3hd/22/
Also, i just realized you wanted to have these items show up outside of the boxes.
I have a icon with onmouseover event handler.
On mouseover it displays a table.
the Icon is at the right site of the screen.
If the table is small, it will be displayed within visible area. But if the the table is wide enough then only a part of the table is visible. One have to scroll to right to see the rest of the table.
What would be the solution to display it. I mean if the table will go 200px out of the visible area, then it should
moved 200px to left.
The table is displayed within an absolutlty positioned DIV.
The div.left + div.clientWidth should be less than document.body.clientWidth. In other words, the furthest to the right (max value of div.left) on the screen your div can be can be calculated as:
document.body.clientWidth - div.clientWidth
Give or take a pixel or two.