This question already has an answer here:
Fading in and out divs with css
(1 answer)
Closed 8 years ago.
I have a small problem that I'm really scratching my head as to how to implement. I would like to know how to make a dynamically generated div fade in only. The div(s) are dynamically generated by Javascript code. How do I make it so that the div fades in onto the page? I cannot use jQuery or .innerHTML().
Create a rule in your stylesheet with a selector that matches the div and which sets a transition property.
Create another rule that matches the div if it is a member of an additional class and style it to be invisible (opacity is a good property to use for this).
Create the div
Add the class to the div
Add the div to the document
With a minimal setTimeout (to allow the browser to repaint the document with the div added), remove the class
CSS:
#fade-in-div{
transition: 1s;
-webkit-transition: 1s;
opacity: 0;
}
JS
//generate new div
document.write("<div id='fade-in-div'>New Div!</div>");
//make opacity = 1. This should take 1 second to make (1s fade).
document.getElementById("fade-in-div").style.opacity = 1; //this should take 1 second
Related
This question already has answers here:
I do not want to inherit the child opacity from the parent in CSS
(18 answers)
Closed 1 year ago.
(I wrote "tab helpers" in the title, which I guess is an invented terminology. Please, correct me.)
In the snippet below there's two checkboxes, one of which has opacity reduced to 20%.
.checkbox1 {
opacity: 100%;
}
.checkbox2 {
opacity: 20%;
}
<div class="checkbox1">
<input type="checkbox" id="myCheck1">
</div>
<div class="checkbox2">
<input type="checkbox" id="myCheck2">
</div>
If I tab-select the second one, I see this (well, not the stuff in blue):
Is there anyway to have that yellow thing retain 100% opacity even if the element's opacity is set via CSS to other than 100%?
I guess this might be all up to the browser, but I'm really not sure.
The yellow stroke is the outline and is notoriously hard to style since you're correct that it is browser-specific. User-defined styles can and often are disregarded wholesale by the browser.
As part of the element, it is affected by the value of the element's opacity property. This means you cannot set its opacity directly.
If you want to make the element semi-transparent without affecting the outline, you should style the other parts of the element with RGBA colors so you can set the transparency per-part. (see: I do not want to inherit the child opacity from the parent in CSS or #Rohit Azad Malik's answer to How to apply an opacity without affecting a child element with html/css?).
There are ways to style a checkbox (or other input types), but they're browser-specific.
I am working on front-end web development and keep running into the same issue. I am using bootstrap styling rules (bootstrap.css) with a few modifications.
HTML
<div class="container">
<div class="jumbotron">
<button type="button" id="jnav">Restricted</button>
</div>
</div>
style.css
#jnav{
opacity: 1;
}
From bootstrap.css
.jumbotron {
opacity: 0.75;
}
Basically, I wanted to use ID to override the opacity, so that the button would have an opacity of 1 while the rest of the jumbotron would have an opacity of 0.75. The problem is that the button's opacity is remaining at 0.75 (so it is annoyingly the same as the jumbotron background)! Does anyone know what's up? Is there something basic that I am missing? I thought that id was a more specific attribute and would override class styles.
Opacity doesn't inherit in the same way as things like color or background. Setting the opacity of an element makes that element and everything it contains render at that opacity relative to whatever is behind it. The opacity property of chile element then compunds like #techfoobar said. You can read more here.
Basically, what you need to do is set the opacity for each child of .jumbotron separately while leaving the opacity of .jumbotron at 1.
It's hard to say given the limited information, but it sounds like you're trying to place a button (#jnav) inside the jumbotron which has an opacity. Since the jumbotron has an opacity of 0.75, everything inside of it will follow that same opacity regardless of any other rules. This is not a problem with class/ID specificity or bootstrap, more just a general styling nuance.
Basically what Jcubed just said above.
Typically the selectors used in Bootstrap.css are very specific. The selector might be something like body > div > .jumbotron which is very specific. In this case simply using the element Id won't override the css. You will need to match the specificity or be more specific. For example body > div > #jnav would effectively override the css as they are both equally specific.
This of course assumes that the css you want to use comes after the css you are replacing. Either after it in the same css file or a seperate css file included after the base Bootstrap.css.
If worst comes to absolutely worst, then you can use:
#jnav{
opacity: 1 !important;
}
But this shouldn't need to happen unless you are absolutely desperate.
They do not override each other. They both applied, but #jnav is within .jumbotron. So .jumbotron's opacity will apply on top of #jnav's opacity.
If you just want the effect, you should use rgba
Example:
#jnav{
background: rgba(111, 111, 111, 0.1);
}
The last index is the opacity of the background, and it will not overlap with your font.
#jnav does have an opacity of 1. But that would be, in a sense, relative to its parent .jumbotron with an opacity of 0.75.
As techfoobar mentions, opacity is compounded with the inherited value. And hence, #jnav's opacity will effectively be 1 * 0.75.
Here's what MDN has to say:
The value applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, an element and its contained children all have the same opacity relative to the element's background, even if the element and its children have different opacities relative to one another.
View this question, if you want to achieve a transparent background but not the content effect.
This question already has answers here:
How to select classes with spaces
(5 answers)
Closed 8 years ago.
I have been trying to figure out this piece of CSS animation . What I am not able to understand is how did the creator manage to elongate the toggle so smoothly , without any keyframe animation or transform property ? Also on the HTML side, what are the <b> tags doing ? If you notice the b tags have classes assigned to them as
<b class="b switch"></b>
but the same class is selected from CSS as
.switch{
}
How does that work without the "b" ?
Thanks in advance.
The animation is just a css transition with a very small delay. Look at the transition, transition-property and transition-delay calls in your codepen example that are like:
.check:checked ~ .switch {
right: 2px;
left: 22px;
transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);
transition-property: left, right;
transition-delay: .05s, 0s;
}
And then there's also another cubic-brezier transition applied to the .track element when the checked element needs to return to its original css and position.
The cubic brezier is a curve type used in vector animations and this curve (and its parameters ilsted in brackets) combined with the transition delay is what accounts for the smoothness.
The basic idea behind our the above code block is:
The transition duration will be for a total of .35s (because transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);) and it will translate accross the css right and left values in accordance to its transition-property: left, right;. In addition, there will be a small delay time added to the elements transition values. The transition of the left value is passed a delay of .05s while the right property is given no delay by passing it a delay 0s.
For the cubic-bezier transition itself, it's a little more complex but don't worry not too much. You can think of each of the 4 values given in brackets as points on the x and y axis that control the velocity at which the element will transition at any given moment during its transition sequence of cubic-bezier(P0,P1,P2,P3); In other words, it smoothes out the animation by making the animation timing non-linear.
For more about cubic-brezier transitions see this tutorial and demo: http://www.hongkiat.com/blog/css-cubic-bezier/
The <b> tag can be used to denote bold text. Here it's not really doing that though. Often designers will use <i> (which is italics) or <b> tags as a place holder for some element which they've assigned a background img or other visual styling too because since the <b> tag only effects text they can be sure their css won't be effected by the html call.
My goal is to create a page with 3 absolutely positioned, overlapping divs. Only 1 div should be visible at a time. 3 buttons at the bottom of the page are used to "select" each div with a fade-in/out using CSS transitions.
I'm close but I have a small issue.
Currently, upon initialization the page is blank with 3 buttons.
My question is, how do I have the first div (with id="#1") appear by default upon initialization without the need to press a button. I still want div #1 to follow the normal fade-in/fade-out rules, with the exception of upon initialization.
HTML:
<div id="1" class="inner">One</div>
<div id="2" class="inner">Two</div>
<div id="3" class="inner">Three</div>
Toggle One
Toggle Two
Toggle Three
SOME CSS:
.inner{
position:absolute;
visibility:hidden;
opacity:0;
transition:visibility 0s linear .5s, opacity .5s linear;
}
.inner:target{
visibility:visible;
opacity:1;
transition-delay:0s;
}
I would prefer a solution that doesn't use javascript/jQuery but I'm not against it if necessary.
Most likely you will need to use JavaScript/jQuery at a minimum to set the visibility of the #1 div on load. You can do this with CSS via:
.inner:first-of-type {
visibility: visible;
opacity: 1;
}
http://jsfiddle.net/74qYY/
The restriction there is that a background is required to obscure the other divs. If you can't live with that, you can always use JS: http://jsfiddle.net/74qYY/1/
For those interested, I found a round-about way to preserve the CSS transitions without requiring a background. Specifically I used the url fragments set by the buttons.
In the question, I wanted div "#1" to show as default. Another way to look at this is that I wanted a GET request of "/" to redirect to "/#1".
I used some jQuery to check for the absence of a URL fragment and then redirect to www.url.com/#1, which in turn triggers the CSS transition.
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 9 years ago.
is it possible to effect a parent node based on a child node's :hover state? ie.
nav ul li a:hover {
/* something here to effect the li or the ul or the nav elements */
}
not that bothered about compatibility, I am looking to be using latest firefox/chrome and ie9/10 only based on the target audience of the app. So CSS3 and browser specific CSS is fine, though I would like to avoid jQuery (and javascript in general) if possible.
Its not possible right now, as you can only style downstream siblings or descendants while hovering other another element (as of Selectors Level 3)
However, when Selectors Level 4 becomes stable and UA's start implementing it, you can eventually use the parent combinator - e.g.
<h2>Hello<span>World</span></h2>
h2! > span:hover {
background: azure; /*the h2 background changes while hovering over the span */
}
You should better use javascript onmousehover event instead.
Something like,
<script>
function onhoverstylechange()
{
document.getElementById("id").style.color='red';
}
</script>
<div id="id">
Change
</div>
and just apply any css or css file in the javascript function.