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)
Related
I am creating a program calculating flow in piping systems. In the user interface, the program contains a graphical drawing diagram, a ribbon on top of the screen containing functions helping the user drawing, and possibly a side ribbon with additional functions.
Here i've included a picture explaining my intentions:
As of now, my approach to achieve the division of screen, is to have nested elements in a tree structure, where the main branches are the divisions of the screen (the functional areas and the graphical drawing area). In the graphical area, the objects drawn in this area are positioned using absolute coordinates w.r.t. the drawing area element, and are also nested inside this element. As of now, this is the progress that has been made (grey area is the graphical drawing area, the red area is going to contain functions):
To obtain this current division of screen, the general html code looks like this, and the general css code uses mainly certain flex-settings.
App.svelte:
<main class="h-screen w-screen">
<section class="screen">
<!-- Creates a main bar. Will contain several functions and options. -->
<Bar/>
<!-- Creates the drawing board. -->
<DrawBoard/>
</section>
</main>
DrawBoard.svelte:
<section class='board' on:mouseup|self={$selected != null ? createObject : null}>
<!-- Displays all objects contained in the MainDataStructure. -->
{#each $editor.objects as object}
<ObjectOnBoard bind:object={object}/>
{/each}
<ObjectSelection/>
</section>
Using this method leads to several problems. As can be seen in the current progress, one object is moved to the edge of the screen, but instead of going out of the screen, it appears above the functional area. I would want to elements inside elements (the object inside the graphical area) disappear if they went out of the element, as if the graphical area was a screen of its own just like the whole tab. This leads me to my question:
Is this the right approach to achieve the user interface with area divisions i want? It seems so easy to not include a certain combination of setting in css, and then the different sections of the screen will intersect each other. I want to imagine that one solution would be to create one html body for each area, so that elements of each area would never intersect each other (i know that a document only has one body). Is there a totally different approach than the one shown, or do i have to find just the right (imo. kludgy) css settings, so that i make the visuals work as intented? And if this is the right approach, what kind of css-settings and other settings should i look into?
Look into CSS grid for the main layout. (Though this can be done with two flex layouts as well.) You can, for example, use grid-template-areas to set up named areas and then position element in them.
Elements intersecting other areas is just an issue of overflow. Either let the individual sections overflow with scroll (auto/scroll) or cut off their contents (hidden).
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
}
I'm working on a Bolt driven website which has quite a few contenttypes. Some of which are related to one another. It would be nice to break down the content menu in the admin section to make it easier to see related content.
So for example the list currently is something like this:
one
two
three
four
five
six
etc
I was thinking just a divider line similar to what appears in the settings menu would be enough to help the admin user's eye.
one
two
three
four
----------------
five
six
----------------
etc
Is there a way I could achieve this?
At the moment this is not possible.
You can however add fontawesome icons to your contenttypes for extra visual accessibility in the menu
icon_many: "fa:trophy"
icon_one: "fa:trophy"
Just replace trophy for any of the names in http://fortawesome.github.io/Font-Awesome/icons/
And you can move some less used contenttypes to a submenu with the following option:
show_in_menu: false
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.
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