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
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.
This question already has answers here:
Is it possible to limit the height of a selectmenu widget with jQuery UI?
(2 answers)
Closed 6 years ago.
I'm trying to use the new jQueryUI selectmenu widget to get custom styling for my <select> dropdown and retain full functionality. But it appears to be practically useless for large lists. In its default state when opened, the dropdown items just keep running off the page and there is no scrolling enabled. I find this to be bizarre for a plugin which can supposedly replace the standard HTML <select> dropdown menu.
Is there a way to fix this e.g. set a max height on the dropdown items that are shown and enable scrolling? Maybe I missed an API option. I suppose it could be done with some creative CSS?
Here is a JS Fiddle showing what happens.
There sure is a way of doing that, and fortunately, it's incredibly simple! :)
You simply need to define a max-height for the <ul>:
#countries-menu {
max-height: 100px;
}
Note that the max-height could instead be applied to .ui-selectmenu-menu .ui-menu if you'd like to adjust any select menu in jQuery UI.
Updated fiddle: https://jsfiddle.net/mjfnao1L/1/
Hope this helps :)
If you want to set the height to a percentage of the viewable height, you can use this code below. This will set it to 90% of the viewable height, which will allow users with larger screens to see more options:
#countries-menu {
max-height: 90vh;
}
Im trying to recreate the script that rdio (http://rdio.com) has created for their player footer. when you click on footer, a panel slides up nicely and to reveal more content. another example is by teehan lax; the top dropdown http://www.teehanlax.com/ but theirs doesn't support firefox properly.
I came across this snippet, http://www.dynamicdrive.com/dynamicindex17/dddropdownpanel.htm
But its not clean as rdio's or teehan.
any thoughts on library they might using?
We're just using basic CSS transitions, and adding and removing classes. The z-index of the bottom bar is set such that it appears in front of everything else, and the class changes control how the content is changed.
You can accomplish the same height changes with jQuery quite easily, as described here: https://stackoverflow.com/a/4965097/1309238
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.
I want a menu hidden at the top of the page, that slides down after clicking a button so it shifts the other content bellow it down. What I have is the hidden menu and I use jQuery functions slideDown() and slideUp() to toggle it. The problem is that eg. on iPhone the slide is not fluent, so I would like to use some acceleration.
I wanted to just add -webkit-trasnform: translate3d as described here, but this seems not working with jQuery slide functions. Also I tried to use jQuery('.menu').animate({height: ..}) but it didn't work also (I think jQuery toggle uses the same). So I found out, that probably the transform3d works only for moving elements by adjusting its coordingates (left, top ..) but not width and height.
I found out this jQuery plugin https://github.com/benbarnett/jQuery-Animate-Enhanced , that should help accelerate width and height changes also, but it didn't work at all in my case.
So I managed to move the menu by adjusting the Top property and adding translate3d, which finally makes the menu move fluently, but now I cannot force the content bellow it to move down when the menu slides - if the menu has position:relative and is moved out of the screen, there is still a hole of its height at the top of the content. If it has position:absolute , it doesn't influence content bellow. If position:static, Top: property has no influence.
Am I missing something or what is the "recommended" way to implement this ? You can see the current implementation on http://www.huureenkerstboom.nl (please downsize your browser window to see the mobile implementation).