This is my first post and I'm trying to learn rails with twitter bootstrap. I am using the carousel and I want the bottom right to contain numbers that are clickable to change the picture, rather than having arrows on the far left & right side of the image. For example, the numbers 1,2, & 3 could be in squares at the bottom right and each change the image shown. How do I do that?
There is a plan to add pills navigation to the Carousel Plugin in milestone 2.3. There already exists a pull request which adds that functionality, so you might be best off using that version of bootstrap-carousel.js. However, be forewarned that this is new code and may be subject to changes, so if you elect to use it, be prepared to follow it through the life cycle.
Here is a demo of the updated plugin:
JSFiddle
Currently it uses pills, but changing it to numbers shouldn't be too difficult. Probably just add some code like:
$('.carousel-pills > span').each(function (i) {
$(this).text(i+1);
});
running this after the carousel initializes. You'll have to tweak the LESS/CSS to change the pills from dots to boxes.
Related
English is my second language and I don't know how to call the bottom bar #3 in below snapshot - bottom navigator I guess?
Well there are two few options:
Carousel Controls (this is used in bootstrap as a class name)
Indicators - either Carousel Indicators or Slideshow Indicators (this is used in W3.CSS)
I would think both are just as good in explaining what you mean and they are both used equally as much when talking about those small dots.
You can also use:
Pagination - though this is not as popular, and is mostly used to describe pages and not slideshows
Carousel Dots - which sort of explains it visually
When you need to know a specific term of a thing from a website, you can check the source code (right click → inspect element) as the term is sometimes revealed as a class name or something similar. As far as I can tell they don’t have one definitive name, as each site and each carousel library has their own name for them.
These are some acceptable names:
Carousel indicators
Carousel controls
Carousel dots (Owl Carousel)
Dot navigation
Carousel bullets (on shouldiuseacarousel.com)
I am a Bootstrap user and have been one for many years now. I am looking to use Semantic UI in a person project and have some questions.
1) Is it possible to get the CSS in one single file and the JS in one single file easily? I don't like having to include a bunch of different files and I want to make sure that all components are included.
2) When it comes to layouts, I was attempting to build a simple two column layout however, every time I shrank the window down in size, the content from the right pane would over lap the content in the left pane. Why is this?
3) Do I have to write my own CSS to build the basic construct of my page(s)?
4) Is it possible with the side bar icon navigation to have the side bar be displayed all the time?
Thank you.
1.my project include CDN
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="//oss.maxcdn.com/semantic-ui/2.0.7/semantic.min.css">
<script src="//oss.maxcdn.com/semantic-ui/2.0.7/semantic.min.js"></script>
2.this?
Tables will automatically stack their layouts for mobile devices. To disable this behavior, use the unstackable variation or tablet stackable to allow responsive adjustments for tablet.
<table class="ui unstackable table">
3. is like boostrap . Fisrst you can do
Container
4.I don't konw what your mean
This seems dissimilar to the accordion functionality provided by bootstrap.
To give an example, let's take the "how to format" info starting me in the face right now. I'd want it so that it only displays up to X pixels deep, and then stops until expanded. So it might look like:
and then, once expanded,
I happen to be using bootstrap. Is there a bootstrap native or other HTML solution to create this kind of experience?
Assume that the thing that I only want to show of is a single element, such as an image, rather than a series of text. This means a solution like min-height:50px and overflow:hidden won't work, as it will simply hide the entire image rather than part of it.
We can use jQuery .height() to accomplish knowing the rendered height of an element then making conditional modifications.
Documentation and examples for jQuery .height().
A combination of height and overflow in combination with the toggling of a class should work here.
http://jsfiddle.net/fm56je84/1/
The click of the arrow is bound to the following function:
function expandCollapse() {
$("#container").toggleClass("expanded");
$(".glyphicon").toggleClass("glyphicon-arrow-down"); // Flip Arrow
}
First of all take a look to this picture:
I'm trying to build this using Twitter Bootstrap (3.2.0) but doesn't know how to. So after read TB docs and Google some resources I came with this possible solutions:
Not use row and cols-x class from TB which may cause issues later for responsiveness and so on
Use them and overwrite the behavior by removing any padding or margin causing the gap between the two div
In this case which one should I use? What yours use on this cases?
As second question and related to the same:
How do yours calculate the right cols-x to apply in order to get as close as image width is? Any formula? Right now I'm doing using Firebug and applying cols on the fly but this is insane, any advice?
If you want to make two columns without gaps between each use own custom columns
I am trying to edit my wordpress page to make every menu item at the top of the page two lines long with the top line being a single word (ie: Home, About, etc.) and another line in a different font underneath each item (ie: "Read about us" underneath "About").
Here is an example of what I mean:
http://images.sixrevisions.com/2009/04/13-26_css_block_menu.png
I am aware that this is achieved in some way by using the 'Description' box on the Wordpress menu screen, and I have checked the 'show descriptions' box, but I'm unable to get it to display correctly.
Any help is greatly appreciated!
You do this by creating a custom walker which extends the Walker_Nav_Menu class - here's a good tutorial on it;
http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output