How can i set this default collapsible opening?
Without bootstrap
`
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .collapsible:hover {
background-color: #555;
}
.collapsible:after {
content: '\002B';
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
Animated Collapsibles
A Collapsible:
Open Collapsible
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Collapsible Set:
Open Section 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Open Section 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Open Section 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i
`
Related
Situation: I want a figure that has an img and a figcaption stacked vertically. The figure should be 100vh high, the figcaption its natural height (i.e. it could split onto two lines, or the user could change the text size), and the img should flex to take the remaining space.
I’ve got a solution that works if the image is initially smaller than the viewport: https://codepen.io/robinwhittleton/pen/XWYaqyg. But if you edit that pen to an image size of 2000x3000 (i.e. bigger than the viewport) it breaks.
Sample HTML:
<figure>
<img src="https://via.placeholder.com/200x300/eee?text=2:3"/>
<figcaption>Figcaption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption</figcaption>
</figure>
Sample CSS:
figure {
margin: 0;
display: flex;
flex-direction: column;
height: 100vh;
}
img {
object-fit: contain;
flex-shrink: 1;
}
I’ve tried a bunch of stuff now but either I’m fundamentally misunderstanding this, or it’s not really possible to do (which seems unlikely). Any ideas? This is going into an ePub so the ideal solution will work on slightly older WebKits, but at this point I’d just be happy with a solution that’s working in browsers.
The trick here is you force the image height into zero, then stretch it out again by using flex-grow. The image will be distorted, then using object-fit to fix it.
* {
margin: 0;
padding: 0;
}
figure{
display: flex;
flex-direction: column;
height: 100vh;
}
figure > img{
height: 0;
flex-grow: 1;
object-fit: contain;
}
<figure>
<img src="https://via.placeholder.com/200x300/eee?text=2:3"/>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</figcaption>
</figure>
The image will be scaled down.
figure {
margin: 0;
display: grid;
flex-direction: column;
height: 100vh;
grid-auto-rows: 1fr auto;
}
img {
height: 100%;
}
body { margin: 0}
<figure>
<img src="https://via.placeholder.com/200x300/eee?text=2:3"/>
<figcaption>Figcaption caption caption caption caption caption</figcaption>
</figure>
I am looking for a css3 responsive technique to have two side-by-side divs (stacked on smaller screens), one with text, the other one filled entirely with an image. At minimum, the image aspect ratio must be maintained; ideally both divs should always be squares of the same size (even when stacked).
Edit - fiddle:
https://jsfiddle.net/marekjedlinski/zdwdhLmg/
html:
<div class="outer outer-left">
<div class="inner inner-text inner-text-left block-orange">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pharetra lorem in ligula volutpat euismod. Nullam eu lorem tellus. Donec luctus lacus in felis blandit quis accumsan nulla imperdiet. Phasellus lorem quam, egestas et scelerisque ac, consequat nec diam. Nunc elit elit, venenatis at eleifend eget, feugiat eu elit.</p>
</div>
<div class="inner inner-img">
<img src="image-1-300.jpg" />
</div>
</div>
<div class="outer outer-right">
<div class="inner inner-img">
<img src="image-2-300.jpg" />
</div>
<div class="inner inner-text inner-text-right block-green">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pharetra lorem in ligula volutpat euismod. Nullam eu lorem tellus. Donec luctus lacus in felis blandit quis accumsan nulla imperdiet. Phasellus lorem quam, egestas et scelerisque ac, consequat nec diam. Nunc elit elit, venenatis at eleifend eget, feugiat eu elit.</p>
</div>
</div>
css:
* {
box-sizing: border-box;
}
html, body {
width: 100%;
font-size: 18px;
margin: 0;
}
.outer {
display: flex;
flex-direction: row;
}
.outer-left {
flex-wrap: wrap-reverse; /* when wrapped, image must sit on top of text */
}
.outer-right {
flex-wrap: wrap;
}
.inner {
flex: 1 1 300px; /* grow, shrink, basis */
}
.inner-img {
background: #563D7C;
text-align: right;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden
}
.inner-img img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%
}
/* below only text styling for text divs, not relevant */
I can get some of the way using flexbox. This is the starting point, the ideal situation:
When the browser window grows however, the images get stretched:
At minimum, I want the aspect ratio to be maintained. It's OK if the image gets clipped, but ideally I would like the squares to grow as squares (both for image and text), so that the image would be proportionally resized.
Now, when horizontal space shrinks and the divs get stacked, the images are again stretched:
Here i still want the image divs and the text divs to remain perfect squares, but at the very least the aspect ratio must be maintained
Ideally, like this:
I can use flexbox or any earlier techniques, but I need this to be fairly compatible, not bleeding-edge (object-fit seems too futuresque, for example).
There are similar questions here and here, and they come close, but do (not solve this specific issue.)
edit ?? your fiddle works fine ?!
if background and object-fit is not the answer and you 'd like to use flex, i believe best is to start with square image and center content aside it.
You can use mediaquery to switch display behavior of divs and reset order.
here is an example:
/* ================================== */
/* DEMO USING A SINGLE FLEX CONTAINER */
/* ================================== */
/* use your own tags, class and sizes */
/* ================================== */
div {
display: flex;
flex-wrap: wrap;
width: 80%;
min-width: 300px;
max-width: 800px;
margin: auto;
}
div > * {
flex: 1 1 340px;
min-width: 50%;
}
div > div {
background: green;
display:flex;
align-items:center;
padding: 1em;
margin: 0;
box-sizing: border-box;
color:white;
}
div div:first-of-type {
order: -1;
background:rgb(148, 98, 39);
}
div:before {
content: "";
display:inline-block;
vertical-align:middle;
padding-top: 100%;
width:0;
}
div p {
display:inline-block;
vertical-align:middle;
max-width:99%;
}
#media screen and (max-width:866px) {
div div , div div:first-of-type {display:block;order:0;}
}
<div>
<img src="http://lorempixel.com/300/300/cats">
<div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo.</p></div>
<img src="http://lorempixel.com/300/300/animals">
<div><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
facilisis luctus, metus</p></div>
</div>
I'm struggling to find the right combination of CSS to help ensure my drop cap on my blog posts display the same in all browsers. I primarily use Safari and do my design work there. How it renders in Safari is my preference.
In Firefox, the drop cap hangs low and the text doesn't wrap around the letter. I added a negative bottom margin and now the text wraps. But it is still hanging too low. I really want this consistent.
What can I do to remedy this? Thank you.
This is my website here.
Create Drop Cap : Float the first character of the para to the left.
.firstcharacter {
float: left;
color: #903;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: Georgia;
}
<p>
<span class="firstcharacter">L</span> orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices
molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.
</p>
The site I'm working on will display lengthy articles on screen. The site is responsive so everything you see on screen will re-size and re-flow to accommodate different screens. Previously we had a two column layout where the articles would be in the left floated div. And a side bar of shorter content would be in the right hand floated div.
It was decided that since the right hand content was so short there was lots of wasted white space beneath it. I was asked to try and incorporate the right hand column into the left hand div so the text would wrap around it.
That part was pretty easy, I just floated the now embedded right hand column into the article and the written text wrapped around it.
See this JSFiddle:
http://jsfiddle.net/TheMonkxx/2aucA/1/
Here is the HTML for the page:
<div class="parent">
<div class="right_content" align="right"></div>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Maecenas vitae nunc arcu. Cras tortor velit, consectetur
quis consectetur vel, ultrices eu nisl. Pellentesque convallis orci ligula,
id pharetra mauris. Vestibulum eleifend, turpis eget commodo dapibus, diam
magna nunc auctor elit, nec molestie libero quam quis mi. Donec interdum
velit non arcu sollicitudin eu ullamcorper lectus venenatis. Vivamus at
lacus magna. Proin in diam semper urna fermentum molestie sit amet sit
amet augue. Nulla sit amet massa eu risus laoreet laoreet eget sed erat.
Aliquam quis enim in odio porta consequat. Ut egestas urna et erat iaculis
et aliquam libero auctor.</div>
Here is the CSS
.parent {
border: 1px solid green;
width: 200px;
float: right;
}
.right_content {
width: 25%;
height: 150px;
float: right;
background-color: red;
margin: 0 0 7px 7px;
}
The problem comes in when I try to add images to the article content. Since the site is responsive, I want the images to have max-width: 100% applied. However when I do that the images go 100% of the parent container and push any written content beneath the images gets pushed after the right hand column. See this fiddle:
http://jsfiddle.net/TheMonkxx/2a66J/
Here is the updated HTML for the page:
<div class="parent">
<div class="right_content" align="right"></div>
<img src="http://www.thetop22.com/wp-content/uploads/2012/01/Black-Keys-Banner-3.png"
/>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Maecenas vitae nunc arcu. Cras tortor velit, consectetur
quis consectetur vel, ultrices eu nisl. Pellentesque convallis orci ligula,
id pharetra mauris. Vestibulum eleifend, turpis eget commodo dapibus, diam
magna nunc auctor elit, nec molestie libero quam quis mi. Donec interdum
velit non arcu sollicitudin eu ullamcorper lectus venenatis. Vivamus at
lacus magna. Proin in diam semper urna fermentum molestie sit amet sit
amet augue. Nulla sit amet massa eu risus laoreet laoreet eget sed erat.
Aliquam quis enim in odio porta consequat. Ut egestas urna et erat iaculis
et aliquam libero auctor.</div>
And the updated CSS:
img {
max-width:100%;
}
.parent {
border: 1px solid green;
width: 200px;
float: right;
}
.right_content {
width: 25%;
height: 150px;
float: right;
background-color: red;
margin: 0 0 7px 7px;
}
Giving the image a pre-defined width fixes the layout but it causes problems for the responsive nature of the site. I also will have some articles which have images at various places in the copy, so I can't always predict an image will be beside the right hand column.
Any ideas or suggestions how I can get the desired layout and keep the responsive aspect working? Thanks!
Although this is old, I've just figured out a good and simple solution using jQuery.
CSS Part
First we need to set all the images to be small so they can fit next to the floating div. let's say 75%;
.parent img {
max-width:100%;
width: 75%;
}
jQuery Part
Then we want to reset the width of all images below the floating div:
jQuery(document).ready(function(){
var h = jQuery(".right_content").height(); //get floating div height (let's say it's dynamic).
jQuery('.parent img').each(function(){ //loop through all images in content
jQuery(this).removeAttr('style') //remove any disturbing inline styles. optional.
var p = jQuery(this).position(); //get each .wp-caption position
var top = p.top; //top position
if(top > h){ //if img is below the floating div
jQuery(this).css("width", "initial") //change img width to original (or anything you like)
}
});
});
hope it help somehow.
Without a script with which to do some calculations, you might have to settle for smaller images.
http://jsfiddle.net/2a66J/2/
img {
max-width:72%;
float: left;
}
Technically, your site isn't "responsive". It's "fluid". If it was responsive you could set fixed max-widths based on viewport size and have 100% image width for all scenarios. The minor drawback is that you aren't usually using 100% of the available viewport width for your page with a responsive design.
One way to look at this, however it is not very efficient and be very bloated if you are working with lots of images.
If what you posted on jsFiddle is all that you have to work with, then my suggestion is to add a around said article image. You will then constraint this to a percentage and either float it left or right with a secondary class.
HTML
<div class="article_image article_image_flleft"><img src="http://www.thetop22.com/wp-content/uploads/2012/01/Black-Keys-Banner-3.png"
/></div>
CSS
.article_image{
width: 50%;
}
.article_image_flleft{
float: left;
}
Fiddle:
http://jsfiddle.net/D8ELj/1/
As isherwood points out, setting various viewports at be more beneficial in the long run.
I'm trying to make a layout using the new css3 flexbox model. I want a page that occupies 100% of the height, using has a fixed footer and header and the remaining content is on a column in the middle. The content column should occupy 100% of the width up to a fixed maximun width. Also, everything should be aligned in the center.
I managed to build it exactly to spec in this demo wich works great in chrome or any webkit based browser. But it breaks in firefox, where adding the "max-width" property makes everything a fixed column aligned to the left.
Can anyone enlight me on why this is not working in firefox? Is it a different interpretation of the spec, or is it an error in my code?
This is the HTML of the demo:
<div class="container">
<div class="header">Header</div>
<div class="content">
<div class="fixed">
<h1>Title</h1>
<div class="someText">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vehicula sodales risus quis rhoncus. Donec suscipit lorem ante. Nullam tempor, lorem sit amet faucibus dictum, est nisl aliquam felis, a tempor arcu massa sit amet felis. Donec a blandit mi. Sed posuere, lacus eu scelerisque porttitor, turpis sem aliquam nulla, ut rutrum sem libero a felis. Morbi nec sodales odio. Nulla facilisi. Sed consectetur pellentesque arcu, in laoreet nulla semper ac. Pellentesque vulputate sem eget eros condimentum in malesuada dui convallis. Vivamus tristique velit id justo laoreet vestibulum. Nulla orci nisl, vulputate vitae facilisis sit amet, ultricies id massa. Sed eget faucibus magna. Integer a leo sem, hendrerit fermentum libero.</p>
<p>In gravida faucibus dui, quis bibendum est ornare nec. Cras ac metus a dui rhoncus mattis. Nulla ut hendrerit est. Cras sed sem felis, venenatis tincidunt ipsum. Vestibulum id sodales ligula. Nunc sit amet neque vel ante aliquam commodo. Aenean elit felis, imperdiet sagittis lacinia ut, tincidunt accumsan arcu. Vivamus dapibus ligula a est convallis eget tincidunt libero interdum. Nunc mattis, odio et tincidunt egestas, orci ante pharetra nulla, hendrerit ultrices nunc ipsum nec sem. Vestibulum egestas leo pulvinar massa mollis sit amet dapibus velit venenatis. Etiam molestie posuere lacinia. Nam ut nulla elit, ac tincidunt tellus. Nulla mollis metus id ante accumsan et mattis est ultricies. Morbi nec nunc nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="footer">
<div class="fixed">Footer</div>
</div>
</div>
and this is the CSS:
body, html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background:black;
}
.container {
height: 100%;
width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
display: -moz-box;
-moz-box-orient: vertical;
}
.header, .footer {
background-color: #32403C;
height: 40px;
width: 100%;
margin: 0;
line-height: 40px;
vertical-align: middle;
text-align: center;
color: #FFF;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
display: -moz-box;
display: -webkit-box;
-webkit-box-flex: 0;
}
.content {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-flex: 1;
-webkit-box-align:center;
-moz-box-align:center;
box-align:center;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
}
.fixed {
background:#787;
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
width:100%;
max-width:480px;
overflow:hidden;
display: -webkit-box;
display: -moz-box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
}
.someText {
-webkit-mask-image: -webkit-linear-gradient( black, black 75%, transparent 95%);
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
overflow:scroll;
}
.content { background: #876; }
.colorLight { background-color: #A6687B; }
.colorMedium { background-color: #8C605F; }
.colorDark { background-color: #735E5A; }
What you're using in Gecko there is the XUL flexbox model, which has nothing to do with the old CSS flexbox drafts you were apparently reading (which also have nothing to do with the current flexbox drafts, which use a totally different display value, etc).
In particular, display: -moz-box has been around for 10+ years and has whatever behavior it has, while the flexbox draft you were reading is much newer and has behavior that's quite different from the -moz-box behavior. The WebKit flexbox implementation postdates the first W3C drafts or is contemporaneous with them, so is closer to what those drafts talks about. But again, the current drafts are completely different from those early ones...