set a default div (CSS transitions) - html

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.

Related

CSS psuedo:element hover effect is not working correctly

I'm using CSS to ease-in-out some text when a particular psudeo:element is hovered.
The code below is selecting the parent of the .description element I want to show on hover, however the hover effect is happening before I want it to.
.grid-item:hover .description {
visibility: visible;
opacity: 1;
}
When the cursor is a few centimetres above the parent element, the hover state is triggered. I believe this may be a problem with the padding/margins of this element. I've tried many things with no luck.
Here is the full code.
Gently hover a little bit over each image to understand the problem.
You just need to change the CSS selector that shows the text on hover. At the moment, it is triggered when the parent of .image (i.e. .grid-item) is hovered. Instead, if you set it as follows, it will be triggered when the div containing the image is hovered.
.image:hover + .description {
visibility: visible;
opacity: 1;
}
Here's the updated pen: https://codepen.io/anon/pen/WEWmEw?editors=1100
#Jordan Miguel, you're right. It's the padding, as well as the content itself.
If you crack open the dev tools for the browser of you choice (I'm using Chrome's in the picture), you can probably find a tool that will show the box model for a particular CSS element. When selecting your element, you can see the padding on the right and left side that trigger hover.
On the left hand pane of the tools, you can see the element selected as well as the stylings that have been applied. From here you can figure out what you'll need to change in order to get the behavior you expect.

Pure CSS Modal & Popup without href

I'm looking for a modal popup made purely out of CSS only. I don't even need any animations, but I'd like it to have a semi-transparent full screen white background blocking the page. I've found a few just searching, but the problem is that they use href tags to open and close the popup window. So the problem is that when you click on the links, the page moves to that href tag.
I found one here http: //codepen.io/maccadb7/pen/nbHEg but like I said, it uses href tags so the page moves to that href tag. I'm using these on long pages with much content, so I need the page to stay in the same spot when it's used.
Maybe there's a way to use label and IDs instead of 'a hrefs'?
I really could use the help, thank you in advance.
You could make use of CSS and a checkbox-hack as described here: https://css-tricks.com/the-checkbox-hack/ with an overlay demo shown here: http://codepen.io/Idered/pen/vytkH
As stated in the article and show in the demo you are able to hide a checkbox, attach a label referencing the checkbox id as for. Then on clicks show an overlay, which is otherwise not displayed. Adding on to that, you are also to add transitions to fade the modal/overlay in/out.
Example of CSS to make it work:
.modal {
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: left;
background: rgba(0,0,0, .9);
transition: opacity .25s ease;
}
.modal-state {
display: none;
}
.modal-state:checked + .modal {
opacity: 1;
visibility: visible;
}
HTML:
<label class="btn" for="modal-1">Show me modal with a cat</label>
<input class="modal-state" id="modal-1" type="checkbox" />
<div class="modal">
</div>
I don't think it's currently possible.
Pure CSS modal uses :target as a trick to react to the click, since CSS doesn't have events.
I don't know any other tricks you can use to substitute :target.
Maybe could try to make the modal fixed when not :target, so when the user clicks, it won't scroll. I tried to do it, but my skills in CSS is limited and I tried for less than 5 min. I'm not sure it will work, tho.
There is actually a CSS trick for building a gallery without href. The problem is that in my opinion is not elegant and requires hidden radioboxes.
Article: https://developer.mozilla.org/en-US/docs/Web/CSS/:checked#Using_hidden_radioboxes_in_order_to_store_some_CSS_boolean_values
Demo: https://developer.mozilla.org/#api/deki/files/6268/=css-checked-gallery.zip
But I would definitely opt for the "href way" – or at least that's what I did when I wrote my own pure-CSS slide renderer…
As far as I'm aware, this isn't possible. CSS isn't a reactive language, unlike javascript, which can handle events from user input. The CSS-only solutions that you've found navigate away from the page so that the page can show the modal on load.
The CSS-only solution you linked is very clever, and it's about as close as you can hope to get. Sorry!

Why does id not override class in bootstrap?

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.

Text below collapsible dropdown menu is unselectable, and links unclickable

Here's a fiddle showing you a demo of the dropdown menu I've written.
The problem:
Part of the text (the site title link in this case) that is below the dropdown menu ("Channels") is unselectable / unclickable, while the other part below the normal "Home" link is rendered just fine. (You can try that in the demo.)
Why I think this is happening: I use JavaScript to dynamically change the height between 0 and auto values when the menu ("Channels") is clicked; NOT something like display: none;, and hence the menu-item element is only hidden, rendering the text that falls beneath it un-selectable/clickable.
The question is, how do I fix this, without breaking the menu's current functionality and style (i.e. transition for dropdown). Everything I've tried, including display: none | block;, visibility: hidden | visible;, and opacity: 0 | 1; have failed me.
EDIT: As seen in the latest versions of Google Chrome and Chromium web browsers.
It work in FF
For Chrome where for some reason the child element (of #channels-menu-item-wrapper) does not respect the overflow:hidden of the parent use (it respects the hidden in a visual manner only..)
You can use a delayed transition and move the sub-element out of the way ..
.collapse > div{
position:relative;
}
.collapse:not(.in) > div {
left:-10000px;
-webkit-transition:left 0s ease;
-webkit-transition-delay:0.35s; /*same delay as the time it takes to open/close so it does not show*/
}
(i have only added the -webkit- vendor specific rule.. apply for all)
Demo at http://jsfiddle.net/gaby/cfH33/5/
Set .collapse div's height and width to 0 using script when clicking on the menu.
Update: Form the #Gaby answer got this hint ".collapse:not(.in)".
.collapse:not(.in){
width:0;
}
This also will work. http://jsfiddle.net/8Mde7/3/
This is what I meant by setting width:0.

Opacity css affecting children elements

I am trying to implement an error message when user has disabled javascript. I have created a jsfiddle for my current work. I have 2 div layers one covering the whole page and an another one on top of that to show the warning message, but the opacity settings affects for the cover layer affects the warning message also. I have tried using the techniques from previous questions but I could not make it work. Can anyone help me?
http://jsfiddle.net/xcPcv/
Just move the message outside of the faded container ...
From:
<div id="fadeMe">
<div id="center">You have javascript disabled.</div>
</div>
To:
<div id="fadeMe">
</div>
<div id="center">You have javascript disabled.</div>
http://jsfiddle.net/xcPcv/7/
Instead of opacity, use rgba(0,0,0,.75) for the background:
http://jsfiddle.net/xcPcv/9/
The issue is that opacity applies to all contained (child) elements, not just the element you are applying
opacity
to. A side effect of this is that a further opacity setting will be that fraction of the parent opacity.
In your case you need to do nothing else but move the popup div outside the fadeMe div
<div id="fadeMe"></div>
<div id="center">You have javascript disabled.</div>