React - How to expand an element and hide others, on click - css
I'm new to react and fairly new to programming in general.
I'm using react and want a box to expand on click while the 3 other boxes hide simultaneously. Right now I've just gotten it to add a class of 'hidee' (named that way because 'hide' is actually a feature) on click and send an alert.
Wanting the expanded area to be almost full window size as it will house content.. and then would add a nav bar to the top of that. Below is the concept and my current code is in a sandbox below that.
Here's my code so far for this component and corresponding css and html. Code Sandbox
import React, { Component } from 'react';
// onclick= (this.expand)
//outside of render:
// expand =(e) => {
// e.target (targets the one they clicked on)
// hide every other element of the class add a class to e.target to increase width and height
// add div to top with nav
// }
class AdminPanel extends Component {
constructor(){
super();
}
expand = (event) => {
event.preventDefault();
var elements = document.querySelectorAll('.title');
debugger;
for (var i=0; i<elements.length; i++){
elements[i].classList.add('hidee');
//hide everything except the one we clicked on
//if event.target != elements[i] then add a class of hidee
//add a class to event.target called expand
//make a css file and put in hidee and expand classes and put the css in
//import that css file at the top of this file
}
alert('hi');
}
render(){
return (
<div class="box">
<div class="container">
<div class="row">
<div className="col-sm-6 ">
<a href="#"/>
<div class="box-part text-center">
<div class="title" onClick={this.expand}>
<img class="card-img-top" src="https://visualpharm.com/assets/224/Folder-595b40b85ba036ed117dd27b.svg" alt=" image"/>
</div>
<div className="text">
<span><h2>Thought Archives</h2></span>
</div>
</div>
</div>
<div className="col-sm-6 ">
<a href="#"/>
<div class="box-part text-center">
<div class="title" onClick={this.expand}>
<img class="card-img-top" src="https://visualpharm.com/assets/168/Read%20Message-595b40b75ba036ed117d88f5.svg" alt=" image"/>
</div>
<div className="text">
<span><h2>Incoming Requests</h2></span>
</div>
</div>
</div>
<div className="col-sm-6 ">
<a href="#"/>
<div class="box-part text-center">
<div class="title" onClick={this.expand}>
<img class="card-img-top" src="https://visualpharm.com/assets/375/Create-595b40b75ba036ed117d7bbf.svg" alt=" image"/>
</div>
<div className="text">
<span><h2>Create New</h2></span>
</div>
</div>
</div>
<div className="col-sm-6 ">
<a href="#"/>
<div class="box-part text-center">
<div class="title" onClick={this.expand}>
<img class="card-img-top" src="https://static.thenounproject.com/png/5040-200.png" alt=" image"/>
</div>
<div className="text">
<span><h2>Your Community</h2></span>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default AdminPanel;
/* css for AdminPanel.js*/
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400,600,700');
body{
background: #f2f2f2;
font-family: 'Josefin Sans', sans-serif;
}
h3{
font-family: 'Josefin Sans', sans-serif;
}
.box{
padding:60px 0px;
}
.card-img-top {
height: 100px;
width: 30%;
}
.box-part{
background:#FFF;
border-radius:10px;
padding:60px 10px;
margin:30px 0px;
}
.box-part:hover{
background:#4183D7;
}
.box-part:hover .fa ,
.box-part:hover .title ,
.box-part:hover .text ,
.box-part:hover a{
color:#FFF;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
.text{
margin:20px 0px;
}
.fa{
color:#4183D7;
}
/* end css for adminPanel.js*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
Update the state of the component in the expand function using setState, When the state changes to true, the render method gets the new state.
constructor(){
super();
this.expand = this.expand.bind(this);
this.state = {
hide: !this.state.hide
};
}
expand = (event) => {
event.preventDefault();
this.setState({
hide: true
});
alert('hi');
}
{ this.state.hide ?
<div className="col-sm-6 ">
<a href="#"/>
<div class="box-part text-center">
<div class="title" onClick={this.expand}>
<img class="card-img-top" src="https://visualpharm.com/assets/168/Read%20Message-595b40b75ba036ed117d88f5.svg" alt=" image"/>
</div>
<div className="text">
<span><h2>Incoming Requests</h2></span>
</div>
</div>
</div>
: null }
if I were your, I'd definitely split the div's with the class of title into a separate component and have an initial data with everything each div needs.
If you make that, then you just have to loop through your source of data and render the elements your them to be rendered. As a result, you can show/hide the navbar.
I've created a sandbox in which you can see how to control the state of your component and render whatever you want accordingly.
Assume that each div is called card
Hope that could help!
You can do it easily as below :
class AdminPanel extends React.Component {
state = {
//Create sections obj in state to maintain your section's class
sections : {
thoughtArchives: {
key: 1,
class: 'hidee',
//add extra data if you want for further use
},
incomingRequests: {
key: 2,
class: 'hidee'
},
createNew: {
key: 3,
class: 'hidee'
},
yourCommunity: {
key: 4,
class: 'hidee'
}
}
}
constructor(props) {
super(props);
}
expand = (sectionKey) => {
//get the prevState
this.setState(prevState => {
//if key matches with section to expand add expand class or add hidee class
for (let k in prevState.sections) {
prevState.sections[k].class = prevState.sections[k].key === sectionKey ? 'expand' : 'hidee'
}
//return sections to update state
return prevState
})
}
render() {
let {sections} = this.state;
return (<div className="box">
<div className="container">
<div className="row">
<div className="col-sm-6 ">
<a href="#"/>
<div className="box-part text-center">
{/* Append expand/hidee class & attach onCLick listener and pass key of section to expand function*/}
<div className={"title " + sections.thoughtArchives.class} onClick={this.expand.bind(this, sections.thoughtArchives.key)}>
<img className="card-img-top" src="https://visualpharm.com/assets/224/Folder-595b40b85ba036ed117dd27b.svg" alt=" image"/>
</div>
<div className="text">
<span>
<h2>Thought Archives</h2>
</span>
</div>
</div>
</div>
<div className="col-sm-6 ">
<a href="#"/>
<div className="box-part text-center">
<div className={"title " + sections.incomingRequests.class} onClick={this.expand.bind(this, sections.incomingRequests.key)}>
<img className="card-img-top" src="https://visualpharm.com/assets/168/Read%20Message-595b40b75ba036ed117d88f5.svg" alt=" image"/>
</div>
<div className="text">
<span>
<h2>Incoming Requests</h2>
</span>
</div>
</div>
</div>
<div className="col-sm-6 ">
<a href="#"/>
<div className="box-part text-center">
<div className={"title " + sections.createNew.class} onClick={this.expand.bind(this, sections.createNew.key)}>
<img className="card-img-top" src="https://visualpharm.com/assets/375/Create-595b40b75ba036ed117d7bbf.svg" alt=" image"/>
</div>
<div className="text">
<span>
<h2>Create New</h2>
</span>
</div>
</div>
</div>
<div className="col-sm-6 ">
<a href="#"/>
<div className="box-part text-center">
<div className={"title " + sections.yourCommunity.class} onClick={this.expand.bind(this, sections.yourCommunity.key)}>
<img className="card-img-top" src="https://static.thenounproject.com/png/5040-200.png" alt=" image"/>
</div>
<div className="text">
<span>
<h2>Your Community</h2>
</span>
</div>
</div>
</div>
</div>
</div>
</div>)
}
}
export default AdminPanel;
Related
create a sticker label with 3x8 size with CSS
I am having trouble with CSS creating 24 identical information on 3x8 (70x37mm) size.
I can adjust the size and margin to make everything fit inside the box but im having no luck on creating 3x8 (70x37mm) size box.
if I just set the width: 70mm; and height: 37mm ; everything gets on top of each other...
My data inside the 70x37mm-box is below:
let labellist = [];
for (let i = 1; i <= 24; i++) {
<div className="label-main" key={i}>
<p className="item_name">{item_name}</p>
<p className="Check_Date">Tillv:{Check_Date}</p>
<strong>
<i className="Batch_number">
batch# {Batch_number}
</i>
</strong>
<div className="row no-gutters ">
<div className="col-8 ">
<p className="Expire_Info"> {Expire_Info}</p>
<p className="prodcution">
<p>{type}</p>
<p>{address 1} </p>
<p>{address 2}</p>
<p> {email} </p>
<p className="OBS">{OBS}</p>
</p>
</div>
<div className="col-4">
{
<QRCode
value={Content}
renderas="svg"
style={{
width: "80px",
height: "80px",
}}
/>
}
</div>
</div>
</div>
}
return labellist;
return (
<div>
<div className="container">{renderLable()}</div>
</div>
)
how to copy color in clipboard , reactjs
I am beginner in reactjs, I want to copy a color when I click on color.
How should it be done?
import React from 'react';
const Green = ()=>{
return (
<div>
<h1 className='g-color-title'>Green Color</h1>
<div className='container-fluid'>
<div className='div-style' id='color31'> #2ECC72 </div>
<div className='div-style' id='color32'> #26AE60 </div>
<div className='div-style' id='color33'> #6AB04A </div>
<div className='div-style' id='color34'> #43BE31 </div>
<div className='div-style' id='color35'> #10A881 </div>
<div className='div-style' id='color36'> #019031 </div>
<div className='div-style' id='color37'> #75DA8B </div>
<div className='div-style' id='color38'> #218F76 </div>
<div className='div-style' id='color39'> #218F76 </div>
<div className='div-style' id='color40'> #7CEC9F </div>
</div>
</div>
)
}
export default Green;
You can use navigator.clipboard.writeText() to copy text to the clipboard.
I would recommend using an object of colors, then with Object.entries() and map() create the <div>s and add an onClick() to trigger it:
const Green = () => {
const colors = {
color31: '#2ECC72',
color32: '#26AE60',
color33: '#6AB04A',
color34: '#43BE31',
color35: '#10A881',
color36: '#019031',
color37: '#75DA8B',
color38: '#218F76',
color39: '#218F76',
color40: '#7CEC9F',
};
return (
<div>
<h1 className='g-color-title'>Green Color</h1>
<div className='container-fluid'>
{Object.entries(colors).map(([id, color]) =>
<div className='div-style' id={id} onClick={navigator.clipboard.writeText(color)}>{color}</div>
)}
</div>
</div>
);
}
export default Green;
Bulma's navbar-buger doesnt connect to menu items in Vue.js 2
I am trying to implement a navbar for my application whose front end is built using Vue 2.0 and Bulma . It works well on desktops and but on smaller screens its showing the burger icon but it is not showing any elements. Its just present.
<template>
<div class="container is-fluid">
<div>
<nav class="navbar is-dark">
<div class="navbar-brand">
<a class="navbar-item" href="#">
<img alt="K R O N O S" height="100px">
</a>
<div class="button navbar-burger" data-target="navMenu">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="navbar-menu" id="navMenu">
<div class="navbar-end">
<div class="navbar-item">
<a class="" href="#"> Docs </a>
</div>
<div class="navbar-item ">
<a class="" href="#"> Report </a>
</div>
<div class="navbar-item">
<a class="">More</a>
</div>
<div class="navbar-item">
<a class="">Logout</a>
</div>
</div>
</div>
</nav>
</div>
</div>
</template>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Get all "navbar-burger" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0)
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function ($el) {
$el.addEventListener('click', function () {
// Get the target from the "data-target" attribute
var target = $el.dataset.target
var $target = document.getElementById(target)
// Toggle the class on both the "navbar-burger" and the "navbar-menu"
$el.classList.toggle('is-active')
$target.classList.toggle('is-active')
})
})
}
})
export default {
name: 'Navbar',
data () {
return {
msg: ''
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div{
border: 0px solid black;
}
</style>
As you can see I have tried implementing the example code in on which was present here but with no use. Shouldnt Bulma give me responsive navbar out of the box. All the examples and solutions I have found are for the older "nav" class not the newer "navbar". Help would be much appreciated.
So, after a bit of studying the Vue guide and clues from fatman's comments, this is the fix I applied.
The above code works , but this is a more vue-ish way to do the navbar-burger menu.
<template>
<nav class="navbar">
<div class="container">
<div class="navbar-brand is-large">
<a class="navbar-item" href="#">
<img alt="K R O N O S" height="100px">
</a>
<button #click="makeBurger" class="button navbar-burger" data-target="navMenu" v-bind:class="{ 'is-active': activator }">
<span></span>
<span></span>
<span></span>
</button>
</div>
<div class="navbar-menu" id="navMenu" v-bind:class="{ 'is-active': activator }">
<div class="navbar-end">
<div class="navbar-item">
<a class="" href="#"> Docs </a>
</div>
<div class="navbar-item ">
<a class="" href="#"> Report </a>
</div>
<div class="navbar-item">
<a class="">More</a>
</div>
<div class="navbar-item">
<a class="">Logout</a>
</div>
</div>
</div>
</div>
</nav>
</template>
<script>
export default {
name: 'Navbar',
data () {
return {
msg: '',
activator: false
}
},
methods: {
makeBurger () {
this.activator = !this.activator
return this.activator
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div{
border: 0px solid black;
}
</style>
Hope this helps someone. The show/hide functionality is taken care by Bulma.
This works, but
will not close the menu
will cause router-links not to work
For 1.) I recommend adding #click to navbar-item as well:
<a #click="makeBurger" class="navbar-item">
<router-link to="/login">
{{link1}}
</router-link>
</a>
Positioning Google Charts inside Bootstrap tabs [duplicate]
This question already has answers here:
Issue with displaying Google Chart in a bootstrap tab
(2 answers)
Closed 5 years ago.
I created Bootstrap3 tabs RES and BUS. In each of these two tabs I want to position two Google charts (Area and Pie carts). So inside bootstrab tab-pane I put bootstrap row and split it into columns col-sm-9 (for larger AreaChart) and col-sm-3 (for smaller PieChart).
Identical content is inside both BUS and RES tabs! but position on second (RES) tab is ruined. WHY? And how to fix it?
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div class="container">
<div class="row text-center">
<div class="col-sm-12">
<div class="thumbnail">
<h3>Title</h3>
<hr>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#BUS">Bus</a></li>
<li><a data-toggle="tab" href="#RES">Res</a></li>
</ul>
<div class="tab-content">
<div id="BUS" class="tab-pane active">
<div class="row">
<h3>BUS title</h3>
<div class="col-sm-9">
<div id="AreaB1"></div>
</div>
<div class="col-sm-3">
<div id="PieB1"></div>
</div>
</div><!-- .row -->
<script type="text/javascript">
function drawChartsB()
{
var view;
var AreaOpt = {
height: 200,
legend: { position: 'bottom', maxLines: 1 },
};
var PieOpt = {
height: 200,
legend: { position: 'bottom', maxLines: 1 }
};
view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','A','B'],['2017M02',95,0],['2017M03',129,0],['2017M04',42,33]]));
view.setColumns([0,1,{sourceColumn:1,role:"annotation"},2,{sourceColumn:2,role:"annotation"}]);
(new google.visualization.AreaChart(document.getElementById('AreaB1'))).draw(view,AreaOpt);
view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','AB'],['A',42],['B',33]]));
(new google.visualization.PieChart(document.getElementById('PieB1'))).draw(view,PieOpt);
}
</script>
</div>
<div id="RES" class="tab-pane">
<div class="row">
<h3>RES title</h3>
<div class="col-sm-9">
<div id="AreaR1"></div>
</div>
<div class="col-sm-3">
<div id="PieR1"></div>
</div>
</div><!-- .row -->
<script type="text/javascript">
function drawChartsR()
{
var view;
var AreaOpt = {
height: 200,
legend: { position: 'bottom', maxLines: 1 },
};
var PieOpt = {
height: 200,
legend: { position: 'bottom', maxLines: 1 }
};
view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','A','B'],['2017M02',95,0],['2017M03',129,0],['2017M04',42,33]]));
view.setColumns([0,1,{sourceColumn:1,role:"annotation"},2,{sourceColumn:2,role:"annotation"}]);
(new google.visualization.AreaChart(document.getElementById('AreaR1'))).draw(view,AreaOpt);
view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','AB'],['A',42],['B',33]]));
(new google.visualization.PieChart(document.getElementById('PieR1'))).draw(view,PieOpt);
}
</script>
</div>
</div><!-- .tab-content -->
</div><!-- .thumbnail -->
</div><!-- .col -->
</div><!-- .row -->
</div><!-- .container -->
<script type="text/javascript">
google.charts.load("current",{callback:drawChartsB,packages:["corechart"]});
google.charts.load("current",{callback:drawChartsR,packages:["corechart"]});
</script>
External JSFiddle: enter link description here
need to wait until container is visible before drawing the chart,
or need to set specific size settings in the chart options...
also, recommend calling the load statement only once...
try setup similar to following...
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div class="container">
<div class="row text-center">
<div class="col-sm-12">
<div class="thumbnail">
<h3>Title</h3>
<hr>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#BUS">Bus</a></li>
<li><a data-toggle="tab" href="#RES">Res</a></li>
</ul>
<div class="tab-content">
<div id="BUS" class="tab-pane active">
<div class="row">
<h3>BUS title</h3>
<div class="col-sm-9">
<div id="AreaB1"></div>
</div>
<div class="col-sm-3">
<div id="PieB1"></div>
</div>
</div><!-- .row -->
<script type="text/javascript">
function drawChartsB()
{
var view;
var AreaOpt = {
height: 200,
legend: { position: 'bottom', maxLines: 1 },
};
var PieOpt = {
height: 200,
legend: { position: 'bottom', maxLines: 1 }
};
view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','A','B'],['2017M02',95,0],['2017M03',129,0],['2017M04',42,33]]));
view.setColumns([0,1,{sourceColumn:1,role:"annotation"},2,{sourceColumn:2,role:"annotation"}]);
(new google.visualization.AreaChart(document.getElementById('AreaB1'))).draw(view,AreaOpt);
view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','AB'],['A',42],['B',33]]));
(new google.visualization.PieChart(document.getElementById('PieB1'))).draw(view,PieOpt);
}
</script>
</div>
<div id="RES" class="tab-pane">
<div class="row">
<h3>RES title</h3>
<div class="col-sm-9">
<div id="AreaR1"></div>
</div>
<div class="col-sm-3">
<div id="PieR1"></div>
</div>
</div><!-- .row -->
<script type="text/javascript">
function drawChartsR()
{
var view;
var AreaOpt = {
height: 200,
legend: { position: 'bottom', maxLines: 1 },
};
var PieOpt = {
height: 200,
legend: { position: 'bottom', maxLines: 1 }
};
view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','A','B'],['2017M02',95,0],['2017M03',129,0],['2017M04',42,33]]));
view.setColumns([0,1,{sourceColumn:1,role:"annotation"},2,{sourceColumn:2,role:"annotation"}]);
(new google.visualization.AreaChart(document.getElementById('AreaR1'))).draw(view,AreaOpt);
view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','AB'],['A',42],['B',33]]));
(new google.visualization.PieChart(document.getElementById('PieR1'))).draw(view,PieOpt);
}
</script>
</div>
</div><!-- .tab-content -->
</div><!-- .thumbnail -->
</div><!-- .col -->
</div><!-- .row -->
</div><!-- .container -->
<script type="text/javascript">
google.charts.load("current",{callback:drawChartsB,packages:["corechart"]});
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
switch ($(e.target).html()) {
case 'Bus':
drawChartsB();
break;
case 'Res':
drawChartsR();
break;
}
});
</script>
How to fill columns with images
Consider I've a sample layout in bootstrap 3: <div class="row"> <div class="col-md-6"> <div class="row"> <img class="filler" src="some/other/img.jpg" /> </div> <div class="row"> <img class="filler" src="some/other/img.jpg" /> </div> </div> <div class="col-md-6"> <img class="main-img" src="some/link.jpg" style="width: 100%; height: auto" /> </div> </div> How can I make images with filler class to auto-scale to gain the same height as the image with main-img class. I want to reach the following effect: ________ ____________ |.filler | | |________|auto-scale | |.filler |width: 100% | |________|____________| Is that event possible only with css? EDIT: I meant a height not, width (my bad);
Basically you didn't pay enough attention to the Bootstrap HTML markup which is quite important for it to remain "smart" and responsive.
.filler,
.main-img {
width: 100%;
height: auto
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="row-fluid">
<div class="col-md-6">
<img class="filler" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
<img class="filler" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg" />
</div>
<div class="col-md-6">
<img class="main-img" src="http://www.gettyimages.com/gi-resources/images/frontdoor/creative/PanoramicImagesRM/FD_image.jpg" />
</div>
After the lil' talk we had in the comments, decided to back what i said with some code. Done with jQuery, as it was faster (for me). If you don't already have jQuery in your project, you should probably rewrite it in javascript. Not fully tested, but I don't see any reason why it shouldn't work cross-browser, cross-platforms:
document.initPictures = function() {
$('.resizeMe').css({
'height': $('#theContainer .col-sm-6').eq(1).height() + 6,
'display': 'flex',
'flex-direction': 'column',
'transition': 'height .4s cubic-bezier(0.55, 0, 0.55, 0.2)'
});
$('.resizeMe img').each(function() {
var src = $(this).attr('src');
$('.resizeMe').append('<div style="flex-basis: 50%; background-image: url(' + src + '); background-size:cover; background-position: center center"' + '</div>');
$(this).remove();
})
};
document.resizePictures = function() {
if ($('#theContainer').outerWidth() > 768) {
$('.resizeMe').css({
'height': $('#theContainer .col-sm-6').eq(1).height()
});
} else {
$('.resizeMe').css({
'height': $('.resizeMe').outerWidth()
});
}
};
$(window).resize(function() {
document.resizePictures();
});
document.initPictures();
.main-img {
width: 100%;
height: auto
}
#theContainer {
margin-top: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="row-fluid" id="theContainer">
<div class="col-sm-6 resizeMe">
<img class="filler" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
<img class="filler" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg" />
</div>
<div class="col-sm-6">
<img class="main-img" src="http://joombig.com/demo-extensions1/images/gallery_slider/Swan_large.jpg" />
</div>
NOTE: if anyone could explain to me why $('#theContainer .col-sm-6').eq(1).height() is 6px smaller at page load than afterwards, I'd be really happy.