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.
Related
I need to do vertical slide View from bottom to top as in the screenshot below, I need to pull View, but I don't know how to do it. Maybe there is some kind of library?
you can use react-native-sliding-up-down-panel for this..
here is git link:-- https://github.com/Abhijeet-Ashapure/react-native-sliding-up-down-panel
or if you want some custom animation panel go for animation api or you may check react native PanResponder to make custom touch responding view.
To get your image like effect
you can check react-native-modalize library..
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
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().
Okay so I have this idea for a menu but I really have no idea how to implement it or what is required, I am very new to web design. So basically when an item on the menu is highlighted I want the slider bar to move under the highlighted item like so
http://s7.postimage.org/qa3vfh797/purple.gif
So when I am on a page I want the slider under the menu tab that relates to the page. When I hover over an item in the menu the slider slides from the current tab to the highlighted one. When the user un-highlights it, it returns to the tab that relates to the page the user is on. Any help would be greatly appreciated
I was going to provide you with a jsfiddle example but no need to reinvent the wheel.
jQuery MagicLine:
Article & Demo
If this is not the direction you would like to go in, then I suggest using jQuery UI, in particular, the tabs section: here. Make sure to use jQueryUI with Themeroller, which allows for user customization.
Hope this helps and let me know if you have any questions!
I won't give you the complete code, but I'll point you in the right direction with some keywords to search for.
What you need is to create a for the bar that will slide underneath your menu items.
Encapsulate each menu item within a div and implement a onMouseOver event for each of them.
Then in onMouseOver event, you need to move the div from its current location to under this menu div, i.e. change slider div's offsetLeft to the offsetLeft value for the menu div (if you use jquery, it provides handy functions to get this).
Now changing the div's position will directly move it there. If you want to have it done in a 'slide' animation, then you need to move it in steps, let's say in increments of 5 px each time. For this use setTimeOut function. Create a function to change slider div's offsetLeft value in 5 px increments, and call this function again and again till it reaches its destination via setTimeout function. setTimeout basically is a timer, that will call a function after specified amount of time.
This should give you enough to search on google :)
I am displaying 10 wordpress post titles in a list followed by a "Load more" button that loads the next 10 results.
How would I automatically trigger that button (let's make it a javascript event) when reaching the end of the scrollable parent of that list?
Is it possible to detect the position of the scrollbar, or the visibility of the last list item on the screen? what is the most failprove method?
Thanks you for your tips and tricks guys!
P.S. I do not work with jQuery so no need to suggest solutions that are using it :).
You can check how far down a page/element is scrolled by listening on the scroll event listener myElm.addEventListener('scroll',scrolled,false); with a function like that defined here https://stackoverflow.com/a/4638434/1615483 (which does not actually rely on jQuery)