I need to implement an horizontal swipe menu like this:
http://jsfiddle.net/9zuxH/447/
<div class="categories">
<ul>
<li><span>ABCDEF</span></li>
<li><span>DEF</span></li>
<li><span>GHI</span></li>
<li><span>JKL</span></li>
<li><span>ABC</span></li>
<li><span>DEF</span></li>
<li><span>GHI</span></li>
</ul>
</div>
The problem is that it is animated poorly and it doesnt' use angularjs
i search a solution similar to Example 2
http://dimsemenov.com/plugins/touchcarousel/#carousel-gallery
but i need to implement it using angularjs
Have you any suggestions?
Related
Hi I have a ribbon with some div's in a row within. If it overlaps and you can not see everything, I show an arrow left from the ribbon and an arrow right of the ribbon. With this arrows I can scroll throught the ribbon infinite in the circle (direction left or right).
My codes lookes like this:
<div class="arrow" ng-click="list.push(list.shift())>←</div>
<div class="ribbon">
<div class="ribbonItem" ng-repeat="item in list">
{{ item.Name }}
</div>
</div>
<div class="arrow" ng-click="list.unshift(list.pop())>→</div>
This works, but it's without an animation and increased. It also needs much clicks to scroll throught. How can I implement an animation without using jquery or js and just do it with this ng-click. I tried it with a transition on the css-classes ng-enter/ng-leave of my ng-repeat, but it does'nt work: https://docs.angularjs.org/api/ng/directive/ngRepeat (look at "Animations").
Has someone an idea?
Thanks.
Similar question : how to use animation with ng-repeat in angularjs
Go through this link it might help you:
http://www.nganimate.org/angularjs/ng-repeat/move
I'd like to do the above app Tutorial effect using Onsen UI.
However, in the Page Patterns of Onsen UI, I didn't see anything similar.
Could someone shed some light on this?
Much appreciated.
I think what you're looking for is a carousel. You can make one using the <ons-carousel> component.
In this case you want to have a swipeable fullscreen carousel so you can define it like this:
<ons-carousel swipeable overscrollable auto-scroll fullscreen>
<ons-carousel-item>
Content #1
</ons-carousel-item>
<ons-carousel-item>
Content #2
</ons-carousel-item>
</ons-carousel>
Here is a simple example of a fullscreen carousel:
http://codepen.io/onsen/pen/xbbzOQ
Please also take a look at the docs:
http://onsen.io/reference/ons-carousel.html
If you want bullets, you can use the carousel.getActiveCarouselItemIndex() in order to get the current active element.
<ons-carousel-cover>
<div class="bullets">
<span
ng-repeat="idx in indices"
ng-class="{'active': idx === carousel.getActiveCarouselItemIndex()}">
•
</span>
</div>
</ons-carousel-cover>
You also need to trigger a digest event to make Angular understand that something changed.
This is the code:
http://codepen.io/argelius/pen/RWomrz
I'm trying to build a side Control Panel for Dashboard something similar to http://demo.neontheme.com/dashboard/highlights/
Can anyone give me some pointers for some examples where I can start building it ?
Thanks
Take a look at Bootstrap's vast range of Components (if you haven't already), and break down the functionality according to what you wish to accomplish.
For example, at a glance:
I can see that the page is fluid, and the left-hand navigation takes up roughly 2/12 (by default, Bootstrap utilises a 12-column grid system).
<div class="container-fluid">
<div class="row">
<div class="row">
<div class="col-md-2">
<!-- Menu -->
</div>
<div class="col-md-10">
<!-- Content -->
</div>
</div>
</div>
</div>
Accordions are in use to collapse/expand menu items, so you can harness Bootstrap's collapse.js to achieve this.
Also, some menu items have Labels and/or Badges attached to them, which Bootstrap also caters for.
Resources:
http://www.getbootstrap.com/css/#grid-example-fluid
http://www.getbootstrap.com/javascript/#collapse
http://www.getbootstrap.com/components/#labels
http://www.getbootstrap.com/components/#badges
How to implement mobile only or desktop only view inside a main menu in Semantic UI? Will the Responsive to Device feature only works with rows and columns as stated in Semantic UI Grid? Can any one please advice me on how this can be achieved with Semantic UI or should I use javascript to do the same?
Add HTML classes to Menu also
Working Demo
HTML
<div class="ui inverted menu grid">
<div class="mobile only row">...</div>
<div class="tablet only row">...</div>
<div class="computer only row">...</div>
</div>
For padding issue, Ovrride CSS with the below class
.ui.menu.grid>.computer.only.row {
padding:0;
}
Is there an option to reduce number of thumbnails from 4(desktop) to 1(mobile) display.
The example of carousel thumbnail: http://bootsnipp.com/snipps/thumbnail-carousel
I don't want them to collapse into one vertical row.
The snipp was created by William Woodgate, on 2013-06-09 14:17:36
Get there : bootsnipp.com/index.php/snipps/thumbnail-carousel and, at the verry bottom of the page, there is a 'Disqus comment form'.
Just fill a request. You'll most probably recieve a ''No, not in a javascript parameter.''
I also saw this webpage about same plugin : http://bootply.com/63984
For your particular context, just add the classes 'hidden-phone' 'hidden-tablet' on those specific elements you want to hide on a tablet or a phone.
<ul>
<li>asdf 1</li>
<li>asdf 2</li>
<li class="hidden-tablet">asdf 3</li>
<li class="hidden-phone hidden-tablet">asdf 4</li>
</ul>
So you reduce the number of thumbnails from 4 to .. what you want on mobile.
This might be help you out
Twitter Bootstrap Vertical Thumbnail Carousel
MAY THE SOURCE BE WITH YOU