I have a css3 animation running with the iteration count set to infinite.
based on a click event I want to stop the animation but changing the iteration count does nothing. can anyone suggest a better solution?
Thanks
Ian
Put your animation in a class sepeared from the styling, i.e.
.box {
height: 100px;
width: 100px;
background-color: #000;
}
.box.animated {
-webkit-animation...
}
and then remove class animated on click.
Related
The Pinterest Widget Builder allows for flexibility in creating a widget to place on your site. I added one on this page, but there appears to be a limit to the width you can set for the widget. For example I set the width to 1170, but it is only displaying at 1111px.
Here is the code:
<a data-pin-do="embedUser" href="http://www.pinterest.com/rouvieremedia/" data-pin-scale-width="180" data-pin-board-width="1170">Follow Pinterest's board Pin pets on Pinterest.</a>
This is a Bootstrap site and I would really like to be able to make this widget responsive as well. I tried applying css styling to the widget just to see if I could impact it using this. Alas, no luck.
div.container > span.PIN_1407891215996_embed_grid.PIN_1407891215996_fancy {
border: 5px solid red;
}
Any suggestions for interacting with this element would be appreciated. Then I can apply some additional styling.
Wrap your widget in a container, e.g. #pinterest-container, and add the following styles:
#pinterest-container > span {
width: 100% !important;
overflow: hidden;
}
#pinterest-container > span > span > span > span {
min-width: 0;
}
The first one overrides width which is otherwise fixed, making it responsive. The second one deals with an issue where the last column is not displayed if the widget is very narrow.
The width of the widget depends on a number of factors:
The width of the enclosing element: you can't exceed that width
A multiple of the data-pin-scale-width + padding: the width of the widget won't pad right. It'll be exactly the size of the multiple of the items inside + small padding left and right, and the padding between the items
And given the above, the data-pin-scale-width obviously
So if you want an exact width of 1200, try the data-pin-scale-width="195". That should do it, assuming the enclosing element is larger.
Here's a solution I came up with: http://pastebin.com/kXVDWUu8
I suggest including the following style:
#pin-container > span {
box-shadow: none !important;
width: 100%;
overflow: hidden;
}
To make the Pinterest widget responsive, this is the solution that worked for me. Taken from here.
CSS
#pinterest-container {
display: flex;
}
#pinterest-container a {
flex: 1;
}
I'm using twitter bootstrap dropdown menu in a fixed navbar at the top of my page.
It all works fine but am having issues with the drop down menu items showing behind other page elements rather than in front of them.
If I have anything on the page with position: relative (like jquery ui accordion, or a google chart) then the drop down menu shows behind it. Tried changing the z-index of the dd menu and of the nav-bar, but doesn't make any difference.
The only way I can get the menu to sit above the other content is to change the content to position: fixed; OR z-index: -1; -but both of these solutions cause other problems.
Appreciate any help you can give me.
I think this is probably some standard issue with CSS positioning that I've misunderstood, so haven't posted any code, but can do if needed.
Thanks.
Just realized what's going on.
I had the navbar inside a header which was position: fixed;
Changed the z-index on the header and it's working now - guess I didn't look high enough up the containers to set the z-index initially !##!?
Thanks.
IE 7 on windows8 with bootstrap 3.0.0.
.navbar {
position: static;
}
.navbar .nav > li {
z-index: 1001;
}
fixed
Ran into the same bug here. This worked for me.
.navbar {
position: static;
}
By setting the position to static, it means the navbar will fall into the flow of the document as it normally would.
This will fix it
.navbar .nav > li {
z-index: 10000;
}
In my case in addition to z-index I had to set overflow: visible in parents elements
I had the same problem and after reading this topic, I've solved adding this to my CSS:
.navbar-fixed-top {
z-index: 10000;
}
because in my case, I'm using the fixed top menu.
Still the issue with Bootstrap v3, navbar and dropdown have same z-index ;-( I just increased .dropdown-menu z-index to 1001.
Solved by removing the -webkit-transform from the navbar:
-webkit-transform: translate3d(0, 0, 0);
pillaged from https://stackoverflow.com/a/12653766/391925
Just give
position: relative;
z-index: 999;
to the navbar
This fixed it for me:
.navbar-wrapper {
z-index: 11;
}
Solved this issue by removing transform: translateY(50%); property.
This worked for me:
.dropdown, .dropdown-menu {
z-index:2;
}
.navbar {
position: static;
z-index: 1;
}
I had the same problem, in my case because i forgot this in my NavBar style:
overflow: hidden;
I ran into a situation where a button with a Bootstrap drop down was embedded in a DataTables row. In that instance, I had to remove fixedColumns: true in the settings because that was injecting a position: sticky into the element style.
Did not work:
$(document).ready(function () {
var table = $('#order').DataTable({
fixedColumns: true,
fixedHeader: true, ...
Did work:
$(document).ready(function () {
var table = $('#order').DataTable({
fixedHeader: true, ...
I'm late to the party here but for anyone using the bootstrap sticky-top class beware that it's z-index is higher than what is defined for the dropdown so anything within it will bleed through the dropdown's menu.
https://github.com/twbs/bootstrap/issues/31747
This was my scenario and the other answers here that referenced position: sticky put me onto it.
In my case, this was caused because I had a CSS animation with transform operations applied to a parent <div>. I worked around the problem by moving the animation to a different element.
This might just be an impossible question, but I want to give it a try: so how can I have a box-shadow like effect in IE8 qirks mode. (Don't ask me why but we are not using DOCTYPEs).
I've already tried PIE, and that is not an option for me.
You could write a filter statement directly, rather than having PIE automatically generate one for you.
http://msdn.microsoft.com/en-us/library/ms533086(v=vs.85).aspx
Depending on what kind of box-shadow you want, you could fake a simple box-shadow effect, directly below the element, using the :after pseudo-selector. Admittedly you might still have to use bg images for your shadow effect, but at least it would separate the BG image from the BG of your main element and keep things less fiddly to update.
Edit: although if it's Quirks Mode, that may not work :-/
So it might be something like:
myelement {
position: relative;
...
}
myelement:after {
display: block;
width: XXpx;
height: 5px;
position: absolute;
top: 100%;
left: 0;
content: '';
background: ...
}
I have an absolute positioned div inside another absolute positioned div. The child div content is much bigger than the parent can contain. This is by design. I need the child div to spill out of its parent. It does so in every other browser except IE 8 (IE 7 looks OK, not sure) In IE8 the part of the child that is out of parent is clipped. It is there, but just not visible as can be verified by IE developer tools.
I tried z-index, tried explicitly setting overflow:visible, no luck at all.
UPDATE: I found out that the problem is caused by a filter defined in the parent div like this:
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66C6DEA2,endColorstr=#66C6DEA2)";
Anyone has an idea how to work around that?
I solved it using this How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?
My solution is a little modified, just put an empty div with class "ie_rgba_fix" inside the container you want transparent, add this CSS someplace IE specific and the children will not clip anymore as with overflow: hidden
/* IE8 RGB A workaround */
div.ie_rgba_fix
{
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66C6DEA2,endColorstr=#66C6DEA2)";
}
Try making the elements inside the absolute positioned element position:relative, and/or add a wrapper around all the elements in that absolute positioned element and relative it.
i took a tip from the checked answer here & the linked question, but didn't want to use an empty DIV (especially because other browsers don't need it).
Instead, i set up IE8-specific CSS that uses the container DIV's :before pseudo-element.
However, pseudo-elements are styled content, not DOM objects, so the -ms-filter property is useless. To compromise, i use a PNG matching the original filter i wanted (actually a data: URL, but either works) as the background-image.
i force the pseudo-element to the full size of the container, absolute-position it, and ta-da, the child element is visible outside the parent, and the parent still gets a transparency background.
.container.ie8 {
background-color: transparent;
position: relative;
}
.container.ie8:before {
background-image: url("data:image/png;base64,...");
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
CSS3 supports multiple background images, for example:
foo { background-image: url(/i/image1.jpg), url(/i/image2.jpg); }
I'd like to be able to add a secondary image to an element with a class though.
So for example, say you have a nav menu. And each item has a background image. When a nav item is selected you want to layer on another background image.
I do not see a way to 'add' a background image instead of redeclaring the whole background property. This is a pain because in order to do this with multi-backgrounds, you would have to write the base bg image over and over for each item if the items have unique images.
Ideally I'd be able to do something like this:
li { background: url(baseImage.jpg); }
li.selected { background: url(selectedIndicator.jpg); }
And have li.selected's end result appear the same if I did:
li.selected { background: url(baseImage.jpg), url(selectedIndicator.jpg); }
Update: I also tried the following with no luck (I believe backgrounds are not inherited..)
li { background: url(baseImage.jpg), none; }
li.selected { background: inherit, url(selectedIndicator.jpg); }
That is, in any case, not the way CSS inheritance works. inherit implies that an element should take on the attributes of it's parent element, not previous declarations affecting the same element.
What you want has been proposed as a way to make CSS more object-oriented, but the closest you will get is with a pre-processor like SASS.
For now you actually just have to re-state the first image along with the second.
I don't think this is possible, I think you'd have to redefine the whole rule every time.
For example, you could just add a "wrapper" around every item that has the initial background, with the actual item having a transparent background. Then add the background on the item itself when it's selected.
Additive CSS rules still aren't possible as far as I know.
You could try applying the second image to the ::after pseudo element:
li { background: url(baseImage.jpg); position: relative; }
li.selected::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url(selectedIndicator.jpg);
}
I had the same need as you recently.
I finally thought about it and solved using css variables.
::root { --selectdropdown: url( '../elements/expand-dark.svg' ); }
select.gender.female { background-image: var(--selectdropdown), url( '../elements/female-dark.svg' ); }
When you resetting the attribute, just specify the variable again in the list!