StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
12830131
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
2
CommunityOwnedDate
CreationDate
2012-10-10T23:43:25.180
FavoriteCount
0
LastActivityDate
2012-10-10T23:43:25.180
LastEditDate
LastEditorUserId
0
OwnerUserId
735495
ParentId
12790972
PostTypeId
2
Score
1
ViewCount
0
LastEditorDisplayName
text
Body
Using tranlateY() is still not using hardware acceleration. If you still want to use jQuery Mobile for the toggle effect, you should make changes to the Jquery Mobile CSS. Look for this: <pre><code>.slide.in { -webkit-transform: translateX(0); -webkit-animation-name: slideinfromright; } .slide.out { -webkit-transform: translateX(-100%); -webkit-animation-name: slideouttoleft; } @-webkit-keyframes slideinfromright { from { -webkit-transform: translateX(100%); } to { -webkit-transform: translateX(0); } } @-webkit-keyframes slideouttoleft { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(-100%); } } </code></pre> (see here <a href="http://jquerymobile.com/demos/1.1.0-rc.1/docs/pages/page-customtransitions.html" rel="nofollow">http://jquerymobile.com/demos/1.1.0-rc.1/docs/pages/page-customtransitions.html</a>) And change: <pre><code>"translateX(-100%)" to "translate3d(-100%,0,0)" "translateX(0)" to "translate3d(0,0,0)" "translateX(100%)" to "translate3d(100%,0,0)" </code></pre> This will make jQuery for mobile transition smoother for webkit devices. From Webkit: <blockquote> translate3d(x, y, z) Move the element in x, y and z, and just move the element in z. Positive z is towards the viewer. Unlike x and y, the z value cannot be a percentage. <a href="https://www.webkit.org/blog/386/3d-transforms/" rel="nofollow">https://www.webkit.org/blog/386/3d-transforms/</a> </blockquote> It's known that the use of translate3d pushes CSS animations into hardware acceleration. Even if you're looking to do a basic 2d translation, use translate3d for more power! <a href="http://davidwalsh.name/translate3d" rel="nofollow">http://davidwalsh.name/translate3d</a> This way you can achieve what you're looking for. Diego Trigo
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POMobile GPU accelerated slideToggle functionality
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USDiego
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
CommentsPostId
1. COMany thanks diego! However, I'm not using jQuery mobile, just straight up HTML, CSS and some jquery. Though I can still apply your technique! Thanks again!
 singulars
 PostPostId
 PO
 UserUserId
 USuser1730207
2. COYep, you can still apply it to normal jQuery... Just create your own animation using CSS, and then trigger it by jQuery (like adding the class with the animation properties)
 singulars
 PostPostId
 PO
 UserUserId
 USDiego

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.