I am trying to use the Twitter Bootstrap Carousel
is there any way not display the vertical grey bars at both the sides of the carousel?
You can do it with CSS
.carousel-control.left,
.carousel-control.right {
background-image: none
}
jsFiddle
How to do it yourself:
Go to a site that has the bootstrap carousel. I went to the documentation page
In Chrome (or whatever browser you like) use Inspect Element to see a list of all the matched CSS rules. Something is giving it that styling, and it's going to have to live here.
Find one that looks like the culrprit and uncheck the box to see if removing that style makes a difference
Note: You shouldn't change bootstrap.css, but you can override it by placing your changed css later. If it doesn't work, try !important
Best of luck!
you can change "boostrap.css" file..(2.3.2/assets/css/bootstrap.css)
you can find and "#999" (color code) replace anything you want or delete.
Related
I'm currently working on a project and I want to use this full screen carousel (http://bootsnipp.com/snippets/ZkRvj). I'm currently using the latest bootstrap 3 version (3.3.7) however this particular snippet was built for 3.2.0.
(If you change the bootstrap version in bootsnipp to the latest, you can also replicate the problem)
The issue I am having is that the DIV .overlay used to darken the background of each slide in the carousel is also overlapping the text and button which means the text and button is also getting darkened. I have tried giving the .hero class (used for the text and button) and the child elements a higher z-index however this does not fix the problem. I have also tried lowering the overlay z-index but this also doesn't work.
This issue does not show in bootstrap 3.2.0 but in 3.3.7 it does and I have no idea how to get around this issue.
Thanks
I don't know why the change in bootstrap version should give this issue, though it obviously does...
I got around your problem using 3 steps:
1) Give .carousel-inner a background-color: #000;.
2) Delete the '.overlay' div.
3) In your .slide-x rule (where you set the background image), add opacity: 0.4;.
Basically, this makes the image semi opaque, but not your hero. As you can see through the image to the (now) black background of the slide container you get exactly the same effect without the z-index heartache.
I've tried searching for this across the web, but I found nothing specific.
So, has anyone had an experience with Foundation 5 Top Bar? I don't see any options to make dropdown animated. It just appears. Is there some kind of a property for data-options. I know there are some properties like this:
data-options="sticky_on: medium"
Is there something like:
data-optiins="submenu_animation: fade"
Or something similar
There are no data options to add animation to the top-bar opening/closing on mobile. It will just appear and disappear. The reason is that Foundation changes the top-bar height from a specific css height value to height: auto; and you can't use CSS transition animations for height: auto.
You would need to completely re-work the foundation top-bar JS to create the animation yourself with javascript. Or you could set a height on .top-bar.expanded in CSS and then the CSS transition would work.
See this answer - https://stackoverflow.com/a/24719200/2247931
There was a similar question asked on here (not enough information was given) so no real solution was presented. I am using MixItUp to filter content within a framework (Foundation) based on a button being clicked. I noticed a weird movement that happens when a button is clicked. I have uploaded the files to be viewed here
http://cantaloupecreative.info/filter-code-snippet/
After the animation fires, I see page elements jump to the right a bit. If that's what you're referring to, take a look at the scroll bar. When there aren't enough elements on the page, the scroll bar disappears and everything re-centers, which is likely what you're seeing. You can avoid this by permanently enabling or disabling the scroll bar with CSS
overflow-y: scroll;
or something similar.
Okay here is what I uncovered in my search for a solution. WebKit is overriding the css change I am making to my body class. You cannot use overflow-y in chrome because of this. Now when I was making the change to my sass file it wasn't compiling correctly. After hardcoding the webkit fix into my stylesheet I was able to remove the scrollbar on all toggled divs with the following code.
::-webkit-scrollbar {
display:none
}
Obviously this only fixes half of the problem because now I am without a scrollbar. But it atleasts fixes the hoping issue.
building a mobile site using bootstrap 3 which makes use of the collapse js plugin.
My issue is that when you hover over the font in the collapse (it's worth noting that this happens with system fonts and is not just a web-font issue, it's just easier to show with a webfont) or click the font it changes in appearance. Parts of the font are removed or the size changes. I'm not sure why this is happening and I've tried the following:
-webkit-font-smoothing
text-rendering
adding a fixed line height
backface-visiblity
However, none of those work. I'm running out of ideas and while it's harder to show in a screenshot it is 100% a big and noticeable issue when interacting with the site.
I'm assuming it's something to do with the collapse jquery but I can't find anything in the bootstrap repo, on here or from a general google search (hard thing to search for haha) so any help would be appreciated. I don't have much code related to the fonts but:
.panel-tap {
position: relative;
display: block;
width: 100%;
line-height: 1;
font-size: 16px;
}
The panel has some padding but this isn't altered during the animation, nor are any styles added during the animation (only class names are added to display/hide the content below.
I can't post a link to the site but hopefully this is enough info.
Thanks
edit: Worth noting that I've tried removing all styles associated with it (i.e position) and tried adding specific styles to make sure it isn't being overridden across the site (i.e adding font-weights, line-heights, borders etc)
edit2: This doesn't happen all the time, it stops after a few seconds or a few clicks, it's totally inconsistent
edit3: Disabled the animation/jquery side of collapse and it still does it
Some Ideas:
Have you tried setting all the CSS annimation properties to 0/none. It might be picking something up from a parent/bad selector elsewhere.
Double checked there is no CSS for :active or :focus. Or maybe a span around the text that has a relative font-size ( em, % etc)
I remember having trouble with something similar and position:relative;. Can you wrap a span around the text and give it position:static;
Is there an active class or something that might be causing the issue?
Thats all I can think of at the mo. But might help.
I have a question about the accordion plugin for jQuery.
Basically, I've got it to work on my site nicely, there's just one thing that I'd have liked it to do and that is bottom-up opening in stead of top-down.
What I mean by that is that my 3 buttons just stand in the vertical menu (div) in the bottom. And when you click it, they'll slide open but upwards, not downwards.
Is there a way to achieve this easily?
I've gone through the documentation, but can't find any native support for it, so I was wondering if it was possible to do it in the javascript of the plugin itself.
Thanks in advance.
Here's how I got my accordion to always to be fixed to the bottom and slide upward:
#accordion {
position:absolute;
bottom: 0px;
}
There is an animated option that controls which animation is used for the widget. I don't know if it supports 'slideUp' or not. You might want to experiment with the other effects in the UI effects library and/or the default animation effects. A little investigation may also enable you to create your own effect that does exactly what you want if one of the pre-defined ones doesn't work. Note that you'll probably also want to change the icons, at least for the selected header.
Have a look at:
http://jqueryui.com/demos/accordion/#option-active
Here it shows which part of the accordion-menu starts as active part...