Bootstrap nested carousels active controls - javascript

I have a problem with Bootstrap nested carousels;
On click of the intern carousel it changes also the the active li of the extern carousel, which ist not correct.
Also on click on the extern carousel controls, the intern carousel don't work any more.
Can anyone help?
$('#custom_carousel').on('slide.bs.carousel', function (evt) {
$('#custom_carousel > .controls li.active').removeClass('active');
$('#custom_carousel > .controls li:eq('+$(evt.relatedTarget).index()+')').addClass('active');
});
$('#intern_carousel').on('slide.bs.carousel', function (evt) {
$('#intern_carousel > .controls .active').closest('li').removeClass('active');
$('#intern_carousel > .controls li:eq('+$(evt.relatedTarget).index()+')').addClass('active');
});
.jumbotron.carousel-slider, .slider-cont > .row > div { padding: 0; }
.jumbotron .img-responsive { margin-bottom: 15px; }
.slider-cont {
max-width: 100% !important;
width: 100% !important;
padding: 0;
}
/* Override default Bootstrap classes */
.carousel-inner { font-size: 12px; }
.carousel-inner > .item > a > img, .carousel-inner > .item > img, .img-responsive, .thumbnail a > img, .thumbnail > img {
width: 100% !important;
}
#custom_carousel .carousel-inner > .item > a > img, #custom_carousel .carousel-inner > .item > img,
#custom_carousel .img-responsive, #custom_carousel .thumbnail a > img, #custom_carousel .thumbnail > img {
width: 100% !important;
}
.slider-cont > .row { margin: 0; }
#custom_carousel .carousel-control .glyphicon-menu-left, #custom_carousel .carousel-control .glyphicon-menu-right { top: 45%; right: 50%; font-size: 36px; position: inherit; }
/*#custom_carousel .carousel-control { border: 2px solid red; }*/
#custom_carousel .item {
color:#000;
background-color:#eee;
}
#custom_carousel .controls{
overflow-x: auto;
overflow-y: hidden;
padding:0;
margin:0;
white-space: nowrap;
text-align: center;
position: relative;
background:#ddd;
}
#custom_carousel .controls li {
display: table-cell;
width: 1%;
max-width:90px;
/*background-color: rgb(234,234,234); opacity: 0.2;*/
}
#custom_carousel .controls li.active {
border-top:3px solid #e53d20;
position: relative;
}
#custom_carousel li.active a { font-weight: bold; }
#custom_carousel img { margin: 0; }
#custom_carousel .controls > .nav a {
color: #6e6e6e;
font-size: 16px;
/*font-weight: 400;*/
padding: 18px 15px;
}
/* ******************* BEGIN Interne Carousels ******************* */
.interne-carousel {
background-color: #ffff00;
bottom: 142px;
height: 150px;
left: 0;
margin: 0 auto;
padding: 0;
position: absolute;
right: 0;
width: 500px;
}
#intern_carousel {
width: 500px;
left: 0;
margin: 0 auto;
padding: 0;
}
#intern_carousel .item { text-align: center; }
#intern_carousel img { border: 2px #a29e9e solid; }
#intern_carousel .controls li.active img { border: 2px red solid; }
#intern_carousel .carousel-control { color: red; background: none; }
#intern_carousel .controls li.active, #intern_carousel .controls li.active {
border-top: 3px solid yellowgreen;
position: relative;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron carousel-slider">
<div class="container slider-cont">
<div class="row">
<div class="col-md-12">
<!-- Begin Carousel -->
<div id="custom_carousel" class="carousel slide" data-ride="carousel" data-interval="2500">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="container slider-cont">
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/672x301/cccccc/ffffff" alt="Slide" class="img-responsive">
<div class="interne-carousel">
#####!!! interne-carousel !!!#####
<!-- Begin Interne Carousel -->
<div id="intern_carousel" class="carousel slide" data-ride="carousel" data-interval="2500">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="container slider-cont">
<div class="row">
<div class="col-md-12">
<h3>Lorem Ipsum 1</h3>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invid.
</div>
</div>
</div>
</div>
<div class="item">
<div class="container slider-cont">
<div class="row">
<div class="col-md-12">
<h3>Lorem Ipsum 2</h3>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invid.
</div>
</div>
</div>
</div>
<div class="item">
<div class="container slider-cont">
<div class="row">
<div class="col-md-12">
<h3>Lorem Ipsum 3</h3>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invid.
</div>
</div>
</div>
</div>
<!-- End Item -->
</div>
<!-- End Carousel Inner -->
<a class="left carousel-control" href="#intern_carousel" data-slide="prev"><span
class="glyphicon glyphicon-menu-left"></span></a>
<a class="right carousel-control" href="#intern_carousel" data-slide="next"><span
class="glyphicon glyphicon-menu-right"></span></a>
<div class="controls">
<ul class="nav">
<li data-target="#intern_carousel" data-slide-to="0" class="active">
<img src="http://placehold.it/75x44/cccccc/ffffff" alt=""/>
</li>
<li data-target="#intern_carousel" data-slide-to="1">
<img src="http://placehold.it/75x44/999999/cccccc" alt=""/>
</li>
<li data-target="#intern_carousel" data-slide-to="2">
<img src="http://placehold.it/75x44/cccccc/ffffff" alt=""/>
</li>
</ul>
</div>
</div>
<!-- End Interne Carousel -->
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container slider-cont">
<div class="row">
<div class="col-md-12"><img src="http://placehold.it/672x301/ffffff/cccccc" alt="Slide" class="img-responsive"></div>
</div>
</div>
</div>
<div class="item">
<div class="container slider-cont">
<div class="row">
<div class="col-md-12"><img src="http://placehold.it/672x301/cccccc/ffffff" alt="Slide" class="img-responsive"></div>
</div>
</div>
</div>
<div class="item">
<div class="container slider-cont">
<div class="row">
<div class="col-md-12"><img src="http://placehold.it/672x301/ffffff/cccccc" alt="Slide" class="img-responsive"></div>
</div>
</div>
</div>
<!-- End Item -->
</div>
<!-- End Carousel Inner -->
<a class="left carousel-control" href="#custom_carousel" data-slide="prev"><span
class="glyphicon glyphicon-menu-left"></span></a>
<a class="right carousel-control" href="#custom_carousel" data-slide="next"><span
class="glyphicon glyphicon-menu-right"></span></a>
<div class="controls">
<ul class="nav">
<li data-target="#custom_carousel" data-slide-to="0" class="active">
Lorem Ipsum
</li>
<li data-target="#custom_carousel" data-slide-to="1">
Sed ut perspiciatis
</li>
<li data-target="#custom_carousel" data-slide-to="2">
Lorem Ipsum
</li>
<li data-target="#custom_carousel" data-slide-to="3">
Sed ut perspiciatis
</li>
</ul>
</div>
</div>
<!-- End Carousel -->
</div>
</div>
</div>
</div>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

basically, nested carousel is not supported, find more information on github
But you can try for some workaround (worked for me), like an example below (i'm using jquery), where i will temporarily change the "active" class of item insides child-carousel(s). And add it back after the event on parent carouse has completed
btn.on("click", function () {
/*
Fix for Nested Carousel:
Before any sliding action, need to "hide" inner carouse active items
After sliding action, update active items again
*/
$.each(carourselInnerHolder.find(".child-carousel.active"), function (i, item) {
$(item).removeClass("active").addClass("active-fix-nested");
});
setTimeout(function() {
Metronic.unblockUI(); //blockUI to avoid multiple actions immediately
}, 200);
carouselHolder.carousel(carouselIndex); // action that trigger update parent Carousel to slide to new item with this index
$.each(carourselInnerHolder.find(".child-carousel.active-fix-nested"), function (i, item) {
$(item).addClass("active").removeClass("active-fix-nested");
});
/*
END Fix for Nested Carousel
*/
});

Related

On hover zoom image like shown

I have this gallery of images and I want on hover to zoom the image. I have shown below two images the first one is without hover effect and the second one is when image is hovered. This should be applied on every image. I also show you the code that I used to create the gallery.
HTML
<div class="tab-content">
<div class="tab-pane active" id="all">
<div class="row">
<div class="col-xl-6 col-lg-6 ">
<div class="first-img">
<img src="img/image_1.png" alt="">
<div class="text">
<h3>Mixed Gin Drinks</h3>
<p>Sit amet commodo nulla facilisi</p>
</div>
</div>
<div class="second-img">
<img src="img/image_3.png" alt="">
<div class="text">
<h3>Gin Tonic</h3>
<p>Sit amet commodo nulla facilisi</p>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-6 second-col">
<div class="third-img">
<img src="img/image2.png" alt="">
<div class="text">
<h3>Gin on a Bar </h3>
<p>Sit amet commodo nulla facilisi</p>
</div>
</div>
<div class="fourth-img">
<img src="img/image_4.png" alt="">
<div class="text">
<h3>Gin Tonic 2</h3>
<p>Sit amet commodo nulla facilisi</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
main .gallery .tab-content .tab-pane .first-img,.second-img,.third-img,.fourth-img{
position: relative;
margin-bottom: 15%;
}
main .gallery .tab-content .tab-pane .second-col{
margin-top:5%
}
main .gallery .tab-content .tab-pane .text{
position: absolute;
left: 50px;
bottom: -60px;
}
main .gallery .tab-content .tab-pane .text h3{
font-size: 40px;
line-height: 48px;
letter-spacing: 0px;
font-weight: bold;
margin-bottom: 0;
}
main .gallery .tab-content .tab-pane .text p{
font-size: 16px;
opacity: 0.5;
}
main .gallery .tab-content .tab-pane img{
width: 100%;
}
If you want to try that with CSS, you can try the "Transform" Property + scale.
choose your selector, in below "img" tag is taken, you can select yours:
img:hover {
transform: scale(2,2);
}
You can achieve this by selecting the "img" tag in the CSS as shown below,
img{
transition: 0.5s all ease-in-out; /*Animation for smooth transformation of images*/
}
Now, to add the zoom effect on hover
img:hover{
transform: scale(1.5); /*150% zoom*/
}

Is there a way where i can put a left arrow above a div?

I have two divs inside a div with width 100%. One div has the width 70% and another one has 30%. What I am trying to do is the 30% div to have Left Arrow** when a link is on active.
Here you can see a little bit about my code and also the image where the design is.
.menu a.active:before {
content: "";
position: absolute;
top: 50%;
left: -21px;
z-index: -1;
height: 30px;
width: 30px;
margin-top: -15px;
background: #FFF;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
border-opacity: 0.3;
border-left: 5px solid rgba(0, 0, 0, .3);
border-bottom: 5px solid rgba(0, 0, 0, .3);
-webkit-background-clip: padding-box;
/* for Safari */
background-clip: padding-box;
/* for IE9+, Firefox 4+, Opera, Chrome */
}
.menu a.active {
position: relative;
background: #FFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/* width: 250px; */
/* height: 250px; */
/* padding:5px; */
z-index: 1;
border-opacity: 0.3;
/* border: 5px solid rgba(0, 0, 0, .3); */
-webkit-background-clip: padding-box;
/* for Safari */
background-clip: padding-box;
/* for IE9+, Firefox 4+, Opera, Chrome */
}
<div id="featured">
<!--div with width 70%-->
<div class="fragments-together ">
<div class="slider">
<div class="box overlay-image-up">
<span class="top-title">Upcoming events</span>
<span>
<img class="slider-homepage" src="./img/slider-home-page.png"/>
</span>
<div class="info">
<div class="info-left">
<span>17 January 2020</span>
<h1>European youth gathered in Buzau at the end of the year</h1>
</div>
<div class="info-right">
<button>see more</button>
</div>
</div>
</div>
<div class="box overlay-image-up">
<span class="top-title">Upcoming events</span>
<span>
<img class="slider-homepage" src="./img/slider-home-page.png"/>
</span>
<div class="info">
<div class="info-left">
<span>17 January 2020</span>
<h1>European youth gathered in Buzau at the end of the year</h1>
</div>
<div class="info-right">
<button>see more</button>
</div>
</div>
</div>
<div class="box overlay-image-up">
<span class="top-title">Upcoming events</span>
<span>
<img class="slider-homepage" src="./img/slider-home-page.png"/>
</span>
<div class="info">
<div class="info-left">
<span>17 January 2020</span>
<h1>European youth gathered in Buzau at the end of the year</h1>
</div>
<div class="info-right">
<button>see more</button>
</div>
</div>
</div>
<div class="box overlay-image-up">
<span class="top-title">Upcoming events</span>
<span>
<img class="slider-homepage" src="./img/slider-home-page.png"/>
</span>
<div class="info">
<div class="info-left">
<span>17 January 2020</span>
<h1>European youth gathered in Buzau at the end of the year</h1>
</div>
<div class="info-right">
<button>see more</button>
</div>
</div>
</div>
</div>
<div class="overlay-slider"></div>
</div>
<ul class="ui-tabs-nav">
<div class="menu">
<a href="#" data-picindex="1">
<span><img src="./img/cube-icon.png" alt="">21 Feb 2019</span>
<h2>Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod </h2>
</a>
<a href="#" data-picindex="2">
<span><img src="./img/cube-icon.png" alt="">21 Feb 2019</span>
<h2>European youth gathered in Buzau at the end of the year</h2>
</a>
<a href="#" data-picindex="3">
<span><img src="./img/cube-icon.png" alt="">21 Feb 2019</span>
<h2>Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod </h2>
</a>
<a href="#" data-picindex="4">
<span><img src="./img/cube-icon.png" alt="">21 Feb 2019</span>
<h2>Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod </h2>
</a>
</div>
</ul>
</div>
Is there any way where i can add an arrow to the div? I am using a slider, and this is a slider..
Thank you for your time!!

How to set same dynamic width of component child for all instances? Web Components

Assume I have a small component in a web application that represents an expander control, i.e. a header text, an icon to expand / collapse and some content.
A very simple React implementation (pseudo code) could look like this:
const Expander = ({children, title, onExpandToggle, isExpanded}) => (
<div>
<div><span>{title}</span><img src={...} onClick={onExpandToggle} /></div>
{isExpanded && children}
</div>
);
This implementation shows the icon after the title, so the position of the icon is determined by the length of the title.
It could look something like this:
Now assume that there are multiple like this below each other. It becomes messy:
To make this cleaner, all icons should have the same padding from left. The padding should not be fixed but dynamic, so that the longest title determines the position of all icons:
Assuming that I want to keep the expander in its own component, is there a CSS way to achieve my goal?
So far, I haven't tried anything as I don't have a starting point. In WPF I would have used something like SharedSizeGroup, but this doesn't exist for CSS.
Assuming you'll have a container to your component, you can set display: flex to the inner container and align-self: flex-end to your image.
Then wrap your component/s with a div that has display: inline-block which takes the width of the biggest element inside.
Here's an example:
.container{
display: inline-block;
padding: 3px;
}
.item{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.item .plus{
width: 15px;
height: 15px;
background-image: url("https://cdn1.iconfinder.com/data/icons/mix-color-3/502/Untitled-43-512.png");
background-size: cover;
background-repeat: no-repeat;
align-self: flex-end;
margin-left: 10px;
}
<div class="container">
<div class="item">
<div>Synonyms</div>
<div class="plus"></div>
</div>
<div class="item">
<div>Concept</div>
<div class="plus"></div>
</div>
<div class="item">
<div>Term</div>
<div class="plus"></div>
</div>
</div>
Affecting all the instances without a shared container or fixed width and with CSS alone, is not possible, since there is no way to access a parent element with CSS. Therefore, If you'll have an inner instance (the biggest one) it won't be able to apply it's width to its own parent or any ancestor and it's other children.
If you're after a solution that will set all the instances in the page with the same size without them sharing a container you can achieve it with JS.
Calculate the width of each instance, save the biggest, then set this width for the rest of the instances. In this example I'm also highlighting the biggest item. The items are all around the page and can be inside various divs and displays or without any container.
var biggestWidth = 0;
var biggestItem;
function setWidth() {
$(".item").each(function() {
var currentWidth = $(this).width();
if (currentWidth > biggestWidth) {
biggestWidth = Math.ceil(currentWidth);
biggestItem = $(this);
}
});
$(".item").width(biggestWidth);
biggestItem.addClass("biggest");
}
$(setWidth());
section {
width: 40%;
float: left;
border: 1px solid black;
border-radius: 3px;
margin: 10px;
padding: 10px;
}
.s1 {
background-color: #e5e5e5;
display: table;
}
.item {
display: inline-block;
clear: both;
float: left;
}
.txt {
float: left;
display: inline-block;
}
.plus {
width: 15px;
height: 15px;
background-image: url("https://cdn1.iconfinder.com/data/icons/mix-color-3/502/Untitled-43-512.png");
background-size: cover;
margin-left: 10px;
float: right;
}
.shift{
margin-left: 30%;
}
.clear{
clear: both;
}
.biggest{
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="s1">
<div class="item">
<div class="txt">Synonyms</div>
<div class="plus"></div>
</div>
<div class="item">
<div class="txt">Concept</div>
<div class="plus"></div>
</div>
<div class="item">
<div class="txt">Term</div>
<div class="plus"></div>
</div>
</section>
<section>
<div class="item">
<div class="txt">Synonyms</div>
<div class="plus"></div>
</div>
<div class="item">
<div class="txt">Concept</div>
<div class="plus"></div>
</div>
<div class="item">
<div class="txt">Term</div>
<div class="plus"></div>
</div>
</section>
<section>
<div class="item">
<div class="txt">Synonyms - Long</div>
<div class="plus"></div>
</div>
<div class="item">
<div class="txt">Concept</div>
<div class="plus"></div>
</div>
<div class="item">
<div class="txt">Term</div>
<div class="plus"></div>
</div>
</section>
<div class="item">
<div class="txt">Synonyms</div>
<div class="plus"></div>
</div>
<div class="item">
<div class="txt">Concept</div>
<div class="plus"></div>
</div>
<div class="item">
<div class="txt">Term</div>
<div class="plus"></div>
</div>
<div class="clear"></div>
<div class="shift">
<div class="item">
<div class="txt">Synonyms</div>
<div class="plus"></div>
</div>
<div class="item">
<div class="txt">Concept</div>
<div class="plus"></div>
</div>
<div class="item">
<div class="txt">The bigget item is here</div>
<div class="plus"></div>
</div>
</div>
You can also try using the css display property "table-row" and "table-cell".
style:
.trow {
display: table-row;
}
.tcell
{
display: table-cell;
padding: 2px;
}
You can design your component like following.
const Expander = ({children, title, onExpandToggle, isExpanded}) => (
<div className="trow">
<div className="tcell">{title}</div>
<div className="tcell"><img src={...} onClick={onExpandToggle} /></div>
{isExpanded && children}
</div>
);
Example
.trow {
display: table-row;
}
.tcell
{
display: table-cell;
padding: 2px;
}
<div>
<div class="trow">
<div class="tcell">Synonyms</div>
<div class="tcell">X</div>
</div>
<div class="trow">
<div class="tcell">Concept</div>
<div class="tcell">X</div>
</div>
<div class="trow">
<div class="tcell">Term</div>
<div class="tcell">X</div>
</div>
</div>
I think that strictly speaking, with all the restrictions you've laid out, the answer is "no, it's not possible".
But since I believe that you need, at any rate, to group those expanders somehow (alternative being that every expander on the page would be horizontally aligned, to which no complete CSS solution exists either), you can simply count on the CSS box model.
<div style="background-color: #efffef; display: inline-block;">
<div style="position: relative; padding-right: 36px;">
<span>Title 1</span>
<span style="position: absolute; right: 0; top: 0;">[x]</span>
</div>
<div style="position: relative; padding-right: 36px;">
<span>Long title 2</span>
<span style="position: absolute; right: 0; top: 0;">[x]</span>
</div>
<div style="position: relative; padding-right: 36px;">
<span>Title 3, at your service</span>
<span style="position: absolute; right: 0; top: 0;">[x]</span>
</div>
</div>
I personally would do it with classic <table>. Its easy, semantically correct, and it will be done in 3 minutes. But we could do it also with display:inline-block and float:right, or with <table>-imitation using display:table, display:table-row and display:table-cell. In my opinion display: flex is relative new and not overall cross-browser compatible (for example IE10, IE11 and others). Because of all it I would like to provide you 3 solutions.
Solution with display:inline-block and float:right
With display:inline-block the size is always aligned on the content.
.container,
.item div,
.item b{display:inline-block}
.item b
{
float:right;
width:16px;
height:16px;
margin-left:5px;
cursor:pointer;
background:url("https://i.stack.imgur.com/bKWrw.png")
}
<div class="container">
<div class="item">
<div>Synonyms</div>
<b></b>
</div>
<div class="item">
<div>Concept</div>
<b></b>
</div>
<div class="item">
<div>Term</div>
<b></b>
</div>
</div>
<br style="clear:both">
Solution with <table>-imitation
.container{display:table}
.item{display:table-row}
.item div{display:table-cell; vertical-align:top}
.item b
{
display:inline-block;
width:16px;
height:16px;
cursor:pointer;
margin-left:5px;
background:url("https://i.stack.imgur.com/bKWrw.png")
}
<div class="container">
<div class="item">
<div>Synonyms</div>
<div><b></b></div>
</div>
<div class="item">
<div>Concept</div>
<div><b></b></div>
</div>
<div class="item">
<div>Term</div>
<div><b></b></div>
</div>
</div>
Solution with classic <table> (my favorite)
.menu td{vertical-align:top}
.menu td b
{
display:inline-block;
width:16px;
height:16px;
cursor:pointer;
margin-left:5px;
background:url("https://i.stack.imgur.com/bKWrw.png")
}
<table class="menu" cellpadding="0" cellspacing="0">
<tr>
<td>Synonyms</td>
<td><b></b></td>
</tr>
<tr>
<td>Concept</td>
<td><b></b></td>
</tr>
<tr>
<td>Term</td>
<td><b></b></td>
</tr>
</table>
The simplest example I can think of, based on your code snippet, would be something like:
const containerStyle = {
width: `[whatever width you need for the container]`,
display: `flex`,
flexDirection: `column`
}
const itemStyle = {
width: `100%`,
display: `flex`,
flexDirection: `row`,
justifyContent: `space-between`
}
const Expander = ({children, title, onExpandToggle, isExpanded}) => (
<div style={containerStyle}>
<div style={itemStyle}>
<span>{title}</span>
<img src={...} onClick={onExpandToggle} />
</div>
{isExpanded && children}
</div>
);
const Expander = (children, title, onExpandToggle, isExpanded) => (
<div>
{title}
<img src={...} style={{marginLeft : '5px',float : 'right'}} onClick={onExpandToggle}/>
</div>
<div style={{width : '0px',overflowX : 'visible'}}>
{isExpanded && <div>
{children}
</div>}
</div>
);
And put it in:
<div style={{display : 'inline-block'}}>
<Expander />
<Expander />
</div>
In CSS it is not possible for different elements of a page to "know" each other. The closest thing you can get is to use display flex and/or grid. This way the direct parent can control the way its children will display, kind of similar to React.
The main difference between flex and grid is that flex is 1 axis and grid 2 axis.
Working example using grid and flex:
<div class="container">
<div class="summary"><span class="text">Synonyms</span> <span class="icon">+</span></div>
<div class="details">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet officiis sequi perspiciatis sapiente iure minus laudantium! Quidem iure consectetur quod odit iusto, labore sunt quae, enim nesciunt officiis, quia ad.</p>
</div>
<div class="summary"><span class="text">Concept</span> <span class="icon">+</span></div>
<div class="details">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet officiis sequi perspiciatis sapiente iure minus laudantium! Quidem iure consectetur quod odit iusto, labore sunt quae, enim nesciunt officiis, quia ad.</p>
</div>
<div class="summary"><span class="text">Terms</span> <span class="icon">+</span></div>
<div class="details">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet officiis sequi perspiciatis sapiente iure minus laudantium! Quidem iure consectetur quod odit iusto, labore sunt quae, enim nesciunt officiis, quia ad.</p>
</div>
</div>
<style>
.container {
display: grid;
/* summary's width needs to be relative to the longest text
and details needs to span the whole grid */
grid-template-columns: auto auto;
}
.summary {
grid-column: 1 / 2; /* start at the beginning of 1st column and end at the beginning of the 2nd column */
display: flex; /* create horizontal layout */
justify-content: space-between; /* place the available space between the children */
}
.details {
grid-column: 1 / 3; /* start at the beginning of 1st column and end at the end of the 2nd column */
}
</style>
As you can see, it is very readable and requires very little markup.
With flex and grid you need to think on 2 levels parent > child. This means you need to change your React component accordingly:
const Expander = ({children, title, onExpandToggle, isExpanded}) => (
<>
<div class="summary" onClick={onExpandToggle}><span class="title">{title}</span> <span class="icon">+</span></div>
{isExpanded && (
<div class="details">
{children}
</div>
)}
</>
);
Here I removed the wrapper div in order to use a Fragment to ensure .summary and .details are direct children of a .container. Note that I also moved the onClick on the whole title for UX reasons.
CSS Grid is very useful and flexible, it is worth learning it. The browser support is recent but quite good, just make sure you use autoprefixer.
You can also use tricks using display: inline-block; whose size is based on its children but will involve workarounds when one of the children needs to overflow (like in your case). So I don't recommend it. I would also advise against using Javascript.
Don't hesitate to tell me what you think about this answer.
It is possible.
1. Flex-box + Absolution:
if you don't mind to use absolute positioned container, you can do it in this way
.container {
display: inline-flex;
flex-direction: column;
align-items: stretch;
width: auto;
}
.item {
margin: 5px 0;
padding: 5px;
border: 1px solid black;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
}
.header img {
width: 8px;
height: 8px;
margin-left: 20px;
cursor: pointer;
}
<div class="container">
<div class="item">
<div class="header">
<span>Synonyms</span>
<img src="https://image.flaticon.com/icons/png/512/61/61155.png" />
</div>
</div>
<div class="item">
<div class="header">
<span>Concept</span>
<img src="https://image.flaticon.com/icons/png/512/61/61155.png" />
</div>
</div>
<div class="item">
<div class="header">
<span>Term</span>
<img src="https://image.flaticon.com/icons/png/512/61/61155.png" />
</div>
</div>
</div>
The main problem here is that you don't know the height of the container so it might influence other content.
2. Inline Flex-box:
if the container position is critical for you, you can use inline-flex
.wrapper {
margin: 20px 10px;
}
.container {
display: inline-flex;
flex-direction: column;
align-items: stretch;
width: auto;
}
.item {
margin: 5px 0;
padding: 5px;
border: 1px solid black;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
}
.header img {
width: 8px;
height: 8px;
margin-left: 20px;
cursor: pointer;
}
Some content above the container...
<div class="wrapper">
<div class="container">
<div class="item">
<div class="header">
<span>Synonyms</span>
<img src="https://image.flaticon.com/icons/png/512/61/61155.png" />
</div>
</div>
<div class="item">
<div class="header">
<span>Concept</span>
<img src="https://image.flaticon.com/icons/png/512/61/61155.png" />
</div>
</div>
<div class="item">
<div class="header">
<span>Term</span>
<img src="https://image.flaticon.com/icons/png/512/61/61155.png" />
</div>
</div>
</div>
</div>
Some content below the container...

html using css. wont format the way i want

I need the header main and footer to have 855px with the float left to with 570px and the right side to float with 255px. it wont line up correctly without going into the other section.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BrightIdeas</title>
<link rel="stylesheet" href=" C:\Users\Brandon\Desktop\html\css\style.css"/>
<link rel="stylesheet" href="C:\Users\Brandon\Desktop\html\css\reset.css"/>
<link rel="javascript" href="C:\Users\Brandon\Desktop\html\css\js\app.js">
</head>
<body>
<div id="wrapper">
<div id="header">
<header>
<div class="container">
<h1>BrightIdeas</h1>
<nav>Sign Up! | FAQ | Support
</nav>
</div>
</header>
</div>
<div id="content">
<main>
<div class="container">
<div id="left">
<h2>BrightIdeas will change your life!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<h3>Here's why you need bright ideas</h3>
<ul><li>It fits your lifestyle</li>
<li>It's awesome</li>
<li>We say so</li></ul>
</div>
<div id="right">
<img src="C:\Users\Brandon\Desktop\html\brightIdeas\images\brightidea.png" alt="an image of a lightbulb"/>
</div>
</div>
</main>
</div>
<div id="footer">
<footer>
<div id="contact">
<h5>Contact Us</h5>
<p>BrightIdeas</p>
<p>666 Sixth Street</p>
<p>Amherst, NY 12345</p>
</div>
<div id="sitemap">
<h5>Sitemap</h5>
<ul>Home</li>
<li>About Us</li>
<li>Privacy</li>
<li>Support</li>
<li>FAQ</li>
<li>Careers</li></ul>
</div>
</footer>
</div>
</div>
</body>
</html>
here is my stylesheet. ive changed it multiple times so it is a little jumbled
#body {
margin: 0 auto;
margin bottom: 120px;
height: 100%;
width:100%;
}
#main{
min-width:855px;
overflow: auto;
}
#header {
background: white;
min-width:855;
overflow:auto;
height: 70px;
padding:20px 20px;
}
div img{
float:right;
}
div h1{
float:left;
width:570px;
font-style: italic;
font-size: 250%;
overflow: auto;
}
div nav{
overflow: auto;
float:right;
width:285px;
}
#content {
/* Height of the footer element */
padding-bottom:120px;
}
}
#footer {
/*yellow footer*/
position:fixed;
background: #f9e933;
min-width:855px;
bottom: 0;
height:120px;
}
#contact{
float:left;
width:570px;
background: #f9e933;
height:120px;
padding
}
#sitemap {
float:right;
width:285px;
background: #f9e933;
height:120px;
}
#left{
margin: 20px;
float:left;
width:570;
overflow: auto;
}
#right{
float:right;
width:285;
overflow:auto;
}
.container {
max-width:855;
margin: auto;
column-count: 2;
}
#wrapper {
min-height: 100%;
position: relative;
width:855px;
}

how to slide out content on hover - flexbox-layout

i have a beautiful little landing page with big pictures and small boxes with headings in it.
if you hover over the headings, the box around it should slide out (getting more width but shouldn't push the picture away, instead it should be above the picture) the picture next to it and shows some text there. this is all done in a flexbox-bootstrap layout.
will position: absolute, z-index and some left or right stuff do this trick as well even in a flexbox-content? or do i have to use some jscript/jQuery stuff?
here's my bootply: http://www.bootply.com/d2liwNZnCH
and the code for the greater good:
<main class="container">
<div class="row row-flex row-flex-wrap">
<div class="col-md-3 bgb fw">
<div class="contentbox flex-col">
<h2>example</h2>
</div>
</div>
<div class="col-md-3">
<div class="imagecontainer">
<img src="http://placehold.it/365x365" alt="Beispielinhalt" class="img-responsive">
</div>
</div>
<div class="col-md-3">
<div class="imagecontainer">
<img src="http://placehold.it/365x365" alt="Beispielinhalt" class="img-responsive">
</div>
</div>
<div class="col-md-3 bgr fw">
<div class="contentbox flex-col">
<h2>example</h2>
</div>
</div>
</div>
<div class="row row-flex row-flex-wrap">
<div class="col-md-8">
<div class="imagecontainer">
<img src="http://placehold.it/1265x365" alt="Beispielinhalt" class="img-responsive">
</div>
</div>
<div class="col-md-4 bgp fw">
<div class="contentbox flex-col">
<h2>example</h2>
</div>
</div>
</div>
<div class="row row-flex row-flex-wrap">
<div class="col-md-5 bgg fw">
<div class="contentbox flex-col">
<h2>example</h2>
</div>
</div>
<div class="col-md-7">
<div class="imagecontainer">
<img src="http://placehold.it/765x365" alt="Beispielinhalt" class="img-responsive">
</div>
</div>
</div>
</main> <!-- Maincontent -->
css:
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
margin: 0;
padding: 0;
}
.row-flex, .row-flex > div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex:1 1 auto;
}
.row-flex-wrap {
-webkit-flex-flow: row wrap;
align-content: flex-start;
flex:0;
}
.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {
margin:-.2px; /* hack adjust for wrapping */
}
.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
width:100%;
}
.flex-col {
display: flex !important;
display: -webkit-flex !important;
flex: 1 100%;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
}
.flex-grow {
display: flex;
-webkit-flex: 2;
flex: 2;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0px;
word-break: break-word;
}
.contentbox {
padding: 15px 30px 15px 30px;
text-align: center;
display: block;
}
.contentbox h2 {
font-variant: small-caps;
}
.imagecontainer {
display: block;
}
did it with a second ".contentbox"-div and some helper classes and jQuery click event and i chosed to fade the readmore-text in the contentbox itself above the centered heading.
html:
<div class="col-lg-3 col-sm-6 col-xs-12 fw">
<div class="contentbox readmore bgr flex-col">
<h2>example</h2>
</div>
<div class="contentbox expand bgr flex-col">
<span aria-hidden="true" class="pull-right closebox">×</span>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata.</p>
<p>read more</p>
</div>
</div>
css:
.contentbox {
padding: 15px 30px 15px 30px;
text-align: center;
display: block;
height: auto;
min-height: 160px; /* Only for my layout */
}
.readmore {
cursor: pointer; /* So your complete box seems clickable */
}
.expand {
position: absolute;
top: 0; /* You can switch these values to whatever values wished */
left: 0; /* It will then slide from the direction you chose */
right: 0; /* but remember to put the chosen direction to 0 again on .expanded */
bottom: 0; /* for me, the fadeeffect was the most elegant way */
font-size: 15px;
opacity: 0;
visibility: hidden;
transition: all .75s ease-in-out;
}
.expanded {
top: 0;
opacity: 1;
visibility: visible;
cursor: default;
transition: all .75s ease-in-out;
}
.closebox {
font-size: 24px;
position: absolute;
right: 10px;
top: 0px;
cursor: pointer;
}
js within document ready:
$(".readmore").click(function(){
$(this).next(".expand").addClass("expanded");
});
$(".closebox").click(function(){
$(this).parent(".expanded").removeClass("expanded");
});

Categories

Resources