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
Related
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 am new to AngularJS. Right now I have a reusable carousel widget that I modified to display 2 slides in one frame (I make my carousel as a directive so I can use it anywhere). I am using carousel component from angular-ui-bootstrap, and I modified it according to the way explained in this post.
However, I am planning to modify my current carousel widget to accept a number that will determine how many slides will be displayed in 1 frame, and dynamically changes its display.
For example, if 3 is passed, then 3 slides will be displayed in 1 frame.
The way I have my 2-slides-in-1-frame carousel widget is pretty static (the number of slides shown in 1 frame is already defined in its HTML). Is it possible to do this? Any help is really appreciated! Thanks.
There is no need to modify the angular-ui-bootstrap carousel, just display a row with two or three columns inside the carousel.
This is a my fork of the original angular-ui-bootstrap carousel plunkr:
http://plnkr.co/edit/F2h3gIQKzpkjymZDgrK6
The short version is:
<slide ng-repeat="slide in slides" active="slide.active">
<div class="row">
<div class="col-xs-6">
... first cell
</div>
</div>
<div class="row">
<div class="col-xs-6">
... second cell
</div>
</div>
</slide>
Then what you can do is create your own templating directive that does the math on how many columns to display (2 = col-xs-6, 3 = col-xs-4, ... ) and renders the above partial with the appropriate column classes.
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?
I have a view with several UI-Bootstrap accordions on it, each with it's first drawer showing a bunch of graphs (I used the tc-angular-chartjs library).
Now the first drawer of the first accordion is always open on page load and it always loads and draws the graphs on it.
However the first drawer of the second accordion is always closed on page load and when I open the drawer I can see that it's graphs were never drawn.
The funny part is when I change the code to always open the drawer on page load the graphs always start.
EDIT: this is the markup, the accordion is generated inside a data-ng-include
<accordion data-ng-model="machine.accordionOptions.oneAtATime" close-others="machine.accordionOptions.oneAtATime">
<!-- STATUS -->
<accordion-group is-open="machine.accordionOptions.isFirstOpen">
<accordion-heading>
<i class="glyphicon" data-ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
<span class="paused">Status:</span> Low Hit ration since {{2}} hours ago. High machine load average since {{2}} hours ago.
</accordion-heading>
<!-- data-ng-include body -->
<div data-ng-include="'angular/templates/dashboard/status.tmpl.html'"></div>
</accordion-group>
<!-- more drawers-->
</accordion-group>
</accordion>
and inside the 'angular/templates/dashboard/status.tmpl.html' I have several of these ..
<div data-ng-repeat="chart in rpDataLinecharts" class="col-lg-4 grid-box">
<strong>{{chart.title}}</strong> <span style="color: #aaaaaa;">{{chart.hint}}</span>
<div>
<canvas data-tc-chartjs-line data-chart-options="linechart_options" data-chart-data="linechart_data[$index]" data-auto-legend></canvas>
</div>
What am I missing here ?
The tc-angular-charts didn't draw because of a known issue with the Bootstrap Accordion and Canvas, if it's not showing it shouldn't draw and when the accordion drawer opens to reveal the charts, nothing tells the canvas code to run.
In the end I've replaced them with Angular-nvd3 charts which use SVG, and everything went fine from then on.
The question https://stackoverflow.com/questions/17375324/twitter-bootstrap-navbar-left-button-center-text-right-button by #twilight-pony-inc has been closed.
I think the question should be: Can i build a mobile app with Twitter's Bootstrap which looks like a native app. Or more specific how to build a navbar with a tittle and buttons on the right and left.
Example:
The blue header (navbar) with title "Temp" and buttons "back" and "home" should be build with Twitter's Bootstrap.
Interesting question. What #twilight-pony-inc is asking seems trivial but is not. Twitter's Bootstrap is build with a 'responsive' mind. The layout build with TB will adopt to the device which shows it. The example you give seems to build with a mobile frame work like jQuery Mobile. Mobile frameworks can be use to build mobile apps (only).
Nowadays mobile frameworks become more responisve and the coming version of Twitter's Bootstrap uses a mobile first approach. Twitter's Bootstrap 3 will have a mobile grid also. (see also http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/grids/rwd-basics.html and http://bassjobsen.weblogs.fm/twitter-bootstrap-3-breakpoints-and-grid/)
Consider if you need a mobile framework in stead of Twitter's Bootstrap first. Second consider to use Twitter's Bootstrap 3 cause it will make your mobile development easier.
Offcourse you can build such a layout with twitter boostrap too. Read about the grid first: http://twitter.github.io/bootstrap/scaffolding.html#gridSystem. Start with row for your navbar and split it in columns:
<div class="container navbar">
<div class="row">
<div class="span3 text-left"><button class="btn">back</button></div>
<div class="span6 text-center"><h3>Title (centered)</h3></div>
<div class="span3 text-right"><button class="btn">Home</button></div>
</div>
</div>
Also consider the fluid grid here: http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem
This will give you a navbar with two button. But on a small / mobile screen (below 768 px) your layout breaks. Below 768 px yor columns (divs with class spanX) will stack (and get a 100% width). You can use media queries to fix this:
#media (max-width:767px)
{
.navbar div[class*="span"] { float: left;} /* float left */
.navbar div.span3 { width:25%; }
.navbar div.span6 { width:50%; }
body {padding:0;}
}
This will create a row with three columns on small screens too. See: http://www.bootply.com/66054 or the image below:
The CSS make the mobile layout fluid cause the colums width is set by percentage (100% in a row).
Twitter's Bootstrap 3
TB3 has a fluid layout by default. TB3 has two grid the big grid for 768+ pixels width screens and a small mobile grid. Cause you can use the mobile grid, you don't need media queries to get a layout as above with TB3. In TB3 the width of columns is set by the col-span-{X} classes. Likewise for the small grid col-small-span-{X} are used to set the width.
So with Twitter's Bootstrap 3 you can build your navbar with:
<div class="container navbar">
<div class="row">
<div class="col-span-3 col-small-span-3 text-left"><button class="btn">back</button></div>
<div class="col-span-6 col-small-span-6 text-center"><h3>Title (centered)</h3></div>
<div class="col-span-3 col-small-span-3 text-right"><button class="btn">Home</button></div>
</div>
</div>
Twitter’s Bootstrap 3 defines three grids: Tiny grid for Phones (<768px), Small grid for Tablets (>768px) and the Medium-Large grid for Destkops (>992px). The row class prefixes for these grid are “.col-”, “.col-sm-” and “.col-lg-”. The Medium-large grid will stack below 992 pixels screen width. So does the Small grid below 768 pixels and the tiny grid never stacks. Except for old phones which always will stack the elements (mobile first design).
For this reason you should use the “.col-” prefixes for your mobile app:
<div class="container navbar">
<div class="row">
<div class="col-3 text-left"><button class="btn btn-default">back</button></div>
<div class="col-6 text-center"><h3>Title (centered)</h3></div>
<div class="col-3 text-right"><button class="btn btn-default">Home</button></div>
</div>
</div>
See: http://bootply.com/73382