I have an CSS3 animation which enlarges a div box.
This div contains an child element "p"-tag. When I set the animation class on the div box, the p tag inherits the animation. But I want to run the animation only on the parent div element and not on the child.
How can I prevent animation (-webkit-animation) inheritance?
I tried to set -webkit-animation:none on the child but it doesnt work.
you could try using a JQuery animation (height, width in your case) on the div instead so that you can select the particular elements that you wish to animate
There is no animation of the child p because the child p is rendered inside the div. There is only an animation on the rendered div. You can try to hide the child p with css:
div#yourDivId p {
display: none;
visibility: hidden;
}
Now it works: http://jsfiddle.net/fiddly/FwHZn/1/
I had to set the width of the "p"-tag. Otherwise the animation will be applied on the div and on the p tag.
Related
I'm building an element( Component in react), that can enclose a child component/element. There are some styles defined on the element. The element should have styles such that, it'd allow the child element to be positioned anywhere on the screen (i.e, relative to the viewport).
There are 2 catches, however,
I can't set the custom element's height and width to be 100% with position: absolute, because there's an element behind this element that needs to be visible and clickable (My first approach was to set opacity:0 on the custom element so that the element behind could be visible, but this would not make it clickable).
The child element is conditionally mounted/unmounted, so during this process a scrollbar is visible and it goes away after the mounting/unmounting completes, making it to a not-so-good UI.
Let's call the custom element ABC.
The HTML structure would look something like this:
<ABC props>
<div><p>Child element</p></div> //This could be anything for the matter of fact.
</ABC>
CSS of ABC component:
position: absolute;
z-index: 25;
top:0;
margin: 0 auto;
border: 5px solid blue;
transform: translateY(15px);
transition: opacity 1s ease,transform 1s ease;
In the above case, I'd want to be able to apply styles to the child div element so that it can be positioned anywhere relative to the viewport, and occupy any size as specified. I did try using position: fixed with other combinations, but none seem to solve the issue.
Any input is appreciated. Thanks.
You can either:
have a container 100% height/width of viewport and disable mouse interactions on it with pointer-events and touch-events (and re-enable them on the child element)
use position:fixed and vh/vw units on top/left properties for position
References:
CSS pointer-events property
CSS Position property
CSS values and units
This is what I tried.
CSS:
div#Layer3:hover div#Layer3copy
{
display: inline-block;
}
HTML:
<div id="Layer3"><img src="images/Layer3.png">
<div id="Layer3copy"><img src="images/Layer3copy.png"></div>
</div>
I want this div to be hidden and when hover another div it appear, however, its working OK,
But moved a little bit from it actual place,
is there a solution for it?
Alright, first you need to know display,position and pseudo state properties of CSS
in your snippet #Layer3 is wrapping #Layer3copy so we can invoke it on hover state by using direct child selector i.e
#Layer3:hover > #Layer3copy{
/*Do your things here*/
}
working example: https://jsfiddle.net/ishusupah/eupfr101/
In this example as you wanted i am using #Layer3copy display:none and on hover state i am making it display:block.
you can display and position however you want.
You are not hiding/showing any div. What you are actually doing in the code above is when Layer3 div is hovered on, you are changing Layer3copy div style to be inline block - and that's why it is moving. A div is by default a block element - which means it is taking up a full width of a row. When you change it to an inline-block you are "telling" the div to align next to another element if there is enough width in a row, and not take the full width - that's why the div is moving next to the parent div.
You also need to modify your selectors to achieve your requirement.
To actually achieve what you want (hiding and displaying back the Layer3copy without it being moving), use this CSS code:
#Layer3 #Layer3copy{
display: none;
}
#Layer3:hover #Layer3copy{
border: 3px solid red;
display: block;
}
The first selector is giving the default definition when layer3 - the container div is not hovered - in which the child Layer3copy div is not displayed (display:none).
The second selector is saying when layer3 is hovered apply styling to Layer3copy and turn it to display:block - which is the default display for divs (they are block elements) - this it is getting displayed and staying it its initial position without "movement".
Here is a working example with the above code.
I've additionally added a thin red border to the inner div, so you'll see what i mean in a block element - which is taking the entire width of a row.
try using this
#Layer3:hover > #Layer3Copy {
position: absolute;
display: inline-block;
/** Postion of your div **/
}
Try to adjust the position until it is placed wherever you want it to be in.
I think you want to be like a tooltip or something
I have an exterior parent div with two child divs within. I want to hide both of the child divs until the user scrolls to certain section of the page, at which point, the divs will fade in. How can I make the parent div retain its size when the interior divs have their visibility attribute set to hidden?
visibility:hidden
The HTML element takes space but is not visible. The element is simply transparent, so to speak.
display:none
The HTML element does not hold its space and is not visible.
visibility:hidden is probably what you want
Bishal is right, another approach that you could use is to animate the opacity property and in both cases (either using visibility or opacity), you can set an animation to produce the fade in effect:
The CSS:
.element {
opacity: 0;
transition: all 1s ease-in-out;
}
Then you can target your .element on scroll with JS and set the opacity property to 1 (the transition property will ensure the fade in).
http://216.194.172.101/~culinare/index.php/terms-conditions-and-policies
The problem I'm having is pretty clear. The DIV that shows the gray box with the T&C stretches beyond the parent DIV that contains it. I've tried a number of variations in the CSS, and none of it seems to work. What am I missing?
Floating elements doesn't affect the size of the parent element. You can however make the parent contains the floating elements also, by using the overflow style:
.body_content { overflow: hidden; }
As the parent element doesn't have a specific height, the overflow style won't actually hide anything, it will just have the effect on the floating elements inside it.
The div with the class .body_wrapper has left: right.
So you have to do the next:
.body_content {
/* other styles */
display: table;
}
i need a div to have a pointer-events:none on a div but not on a div inside an iframe that is inside that div.
basically i .contentWindow.document.write the div into the iframe, and then
i need that specific inner div to react to mouse events even thought the div containing the iframe has a pointer-events:none
pointer-events:auto wont work because it still inherits the none and all the other options are "svg only".
I only need this to work in chrome!
seems to say that "auto" works here, but it doesnt for me:http://css-tricks.com/almanac/properties/p/pointer-events/
It all depends on what you are targeting.
Example JSFiddle
Try setting the pointer-events of your iframe to auto.
iframe{
pointer-events: auto; /*You can add !important too if necessary*/
}
Remember that the contents of an iframe are their own document and do not inherit CSS from the parent, so your iframe is what is not clickable, rather than the div inside it.