How do we implement like Windows store does? Left and right navigational arrows with animations for 'Listview'? I tried, 'Flipview', 'HubControl', and also, when ever I try 'ensureVisible' on 'Listview', there are no animations in 'Listview'. How do I achieve animating content while navigating with left and right arrows?
Sorry, misunderstood your question before. I think you'll have to use a ListView and draw your own buttons on a layer above it.
When you push a button, you can get the current scroll position of the ListView using the scrollPosition property. Get the current width of the ListView and add to or subtract that from the scrollPosition. However, this does not animate the scrolling automatically.
You can also use the ensureVisible() method to scroll to a particular item.
To get the ListView to animate when jumping to a new position, I think you're going to have to use WinJS.UI.executeAnimation to do it.
https://msdn.microsoft.com/en-us/library/windows/apps/hh779762.aspx
I've done it before, but I honestly can't remember exactly how it works. I know you'll have to setup some rules for how the animation behaves in CSS and then run it asynchronously in javascript.
WinJS.UI.Pivot has arrows with ListViews in the playground.
http://winjs.azurewebsites.net/#pivot
So does WinJS.UI.FlipView
http://winjs.azurewebsites.net/#flipview
But maybe you want the WinJS.UI.NavBar
http://winjs.azurewebsites.net/#navbar
Related
I'm creating photo slides using simple scrollbar method but also adding js for left and right button to make it flexible to view slide horizontally.
Scrollbar is working just perfect but the bellow buttons doesn't seem to show any action. Can someone please guide me what's wrong in the coding? TIA
Here's what I am talking about: [https://jsfiddle.net/sh27dyx3/1/]
scrollbar doesn't set $("#slide").left. jQuery's offset().left is just clever enough to tell you what is its offset. you need to update the parent's scrollbal scrollLeft property
https://jsfiddle.net/txth2usk/
by the way, i guess you could determine what image is at the leftmost position and then instead of -100 and +100 you could scroll to the next/previous sibling's offset, would be much cooler
I'm trying to create a project in angularJS and ionic where there is a slidebox with three slide and each slide contains some content. I want to scroll to top each time I change the slide.
I have supposed that the better way to do this is use on-swipe-left/right methods but I didn't manage to do my task and so, each time I change slide it doesn't change scroll position. Someone have some ideas of how to do it?
Thanks
Since you're using Ionic, you can (should) use the $ionicScrollDelegate's method scrollTo(). By calling $ionicScrollDelegate.scrollTo(0, 0, true) you're scrolling to the top. If you don't want the scrolling to be animated, call the method with false as the third parameter or omit it.
Does anybody knows how to implement horizontal scrolling on event? I am trying to replicate this functionality: http://www.spotify-valentines.com/#/home
First, it scrolls fullpage to the right. Then, it scrolls half way to the right. Then it scrolls full page, also to the right, and finally it becomes a normal screen with vertical scrolling.
The site seems to be built with Angular, but I am not sure how this functionality is accomplished.
Thanks!
It can be accomplish by using fullPage.js.
Just create a single section with multiple slides in. Then you can create your custom buttons and associate them with the action $.fn.fullpage.moveTo() or $.fn.fullpage.moveSlideRight() or $.fn.fullpage.moveSlideLeft().
I've got 10 floating DIVs in a container DIV that I want to be able to scroll through using a button.
I'd like to use left/right buttons to make the container DIV scroll 300px horizontally to display the next floating DIV.
I'd like the width of the container to appear as 100% of the window, and I'd also like there to be no horizontal scroll-bar on the bottom. If it could scroll sideways that'd be great but it's not a must have.
Here's what I've got:
http://jsfiddle.net/696je/
I'm just looking for a function and the way to activate the function for left/right buttons.
I've tried Google for hours, I've tried Flesler's ScrollTo but I haven't had any luck, it might be something do to with the way I've got the width set up, anyway, thanks for your help.
It is possible to do with mix of CSS (display:inline-block and white-space:nowrap) and jQuery (scrollLeft)
here is a jsFiddle implementation with minimum possible wrappers.
I was a little confused by your code you posted in the jsFiddle. You said you wanted no horizontal scroll bars, yet your stuff was set up that way. I went with the horizontal scroll bar since that is what you were going with in your code.
I made a working function here jsFiddle. To get it to work in the frame you need to put focus in the "Result" window (just click anywhere), then use your left and right arrows.
I must give the javascript for keypress credit from this post
I'm looking for a way to do an effect which is most likely a combination of things, the base of it would be something like this:
http://nikestadiums.com/
As you can see, when you scroll down, a div is actually sliding up. I am not sure there is such a plugin, and if there is, is it possible to resize and maybe re-position elements as you scroll down?
I've seen the post:
How to make div scroll down with a page once it reaches top of page?
and I know of sticky elements http://imakewebthings.github.com/jquery-waypoints/sticky-elements/
Is it even possible to do something like this? If yes, can you give me links/examples please?
And of course I need to make it super super smooth like the Nike one...ha
Here is a jsfiddle, but I can't get it to work right.
http://jsfiddle.net/3U2Gj/65/
Thanks.
I've modified your JSFiddle. I tested it in Chrome, Firefox, and IE7+.
http://jsfiddle.net/t0nyh0/aMXRq/3/
I've cleaned it up a bit and moved all your "states" into classes. On scroll, it simply uses JQuery to add and remove classes based on the scroll position.
Note that there is no animation, if you wish to animate it, you can use class transitions to animate. See more here: http://docs.jquery.com/UI/Effects/ClassTransitions.
In regards to entering full mode on keydown, you can again create an "expand" class and apply it upon keydown. You can then structure your CSS as follows:
.minState3.expand { }
and to show the button again
.minState3.expand button { display:block; }
Doing it this way allows you the flexibility to define how it looks based on the different states.