Thumbnail Navigation Problems with css position - css

I'm trying to create a thumbnail navigation for a slideshow. Below the main images will be a line of what appears to be dots, when you hover over them a preview appears.
I got this from a tutorial that was originally designed to be a next and prev navigation, but I am trying to convert it.
http://codepen.io/smalltrades/pen/sjrqm
I would like the dots to be spaced evenly across the bottom of the window, but as I am not completely fluent in css I haven't been able to find the right combination of settings. Currently all the dots are stacked on top of eachother.
Any thoughts?

Related

Any idea for making image hotspot (WP)

For Wordpress, how can I make it like https://store.google.com/us/category/connected_home
Hotspot info, Top-tab for changing the spot. Can be made with slide revolution?
Inspect the page. They've positioned the elements with percentage based left and top values.
If I was to build something like this, I'd use javascript to hide and show the various labels when I click the menu tabs. And I'd add CSS animations so they transition in like in your example.

Revolution Slider: A way to snap to grid when adding text to a slide?

I am able to add text without issue to the revolution slider but is there a way to force it to snap to the nearest coordinates, or center the text block on the slide without "eyeing" it up?
When you are dragging and dropping items like buttons, is there a way to set the exact coordinates of the button so it is consistent across slides. For example in some software you can hold CTRL while moving the mouse to see the grid lines and where the item will line up such as a ruler. I don't have a picture per se, but I am looking for a way to set items at the same point across slides without simply guessing.
I am using the latest version of the slider 5.x.
Yes there is a Helper Grid in Slider Revolution plugin.
It is located in the main items slide viewer (visual) editor, just at the bottom. You have 2 selectors:
Help Grid: You can chose between 25x25, 50x50 or a custom helper grid.
Snap to: You can make lines in this helper grid magnetic…

Menu bar movement from under banner to fix position on top of page?

The title explains it. I can't seem to figure out the specific way to put it while searching for a way to have a menu bar under a banner, then, have it move up to a fixed position on the top of the page as you scroll down (kind of like the salmon-colored box that is currently showing up to the right of this form).
I will be using a simple table for a menu bar.
Many Thanks!
Sean

Bootstrap 3 fixed size template

I want to create fixed szie page, without common scrollbar. Scrollbars have only two div's, where content content goes beyond of div (contend data and sidebar listing area) as on picture. I alreay did it without bs3, and use javascript (for calculate new offsets on page resize).
http://i.imgur.com/4kesDk7.jpg
Today I tried to create fixed size template with Bootrstrap3, but i can't do it. It's possible to do using bs3? Anybody can show how it is done?
I tried modify this code http://www.bootply.com/0FG70wcT3B. I do left and right headers.

How to layout out a component differently depending on the amount of space available?

I am trying to build a sort of button bar in Flex - something like the horizontally laid-out bookmark bar you'd see in most modern web browsers, where when you run out of horizontal space, you can click on the arrows button(>>) to get a drop-down to see the rest of the items which did not fit into the horizontal space. Problem is, how can I know how much horizontal space is available for me to tell how many buttons to render into the button bar? This need doesn't appear to be support by the general layout manager framework.
You can check the width of the parent container, and if that is less than the combined widths of your objects that you've attached with AddChild or AddElement, then you don't have enough space and need use your arrow functionality.

Resources