This is what I currently have:
<div class="col-lg-10 col-lg-offset-1 text-center">
<h2>Title</h2>
<hr class="small">
<div class="row">
<div class="col-md-6" id="logo">
<div class="portfolio-item">
<img class="img-portfolio img-responsive" src="logo.jpg">
</div>
</div>
<div class="col-md-5" id="description">
<div class="portfolio-item">
Text
</div>
</div>
</div>
I want to be able to center the image inside the column on the left, but I'm not exactly sure how. I've tried to follow this one here but it didn't work properly.
How to vertically align an image inside div
Try this:
http://codepen.io/tiagofabre/pen/LNagaB
Also there is a realy cool article about flex in this link:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.vertical-center {
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}
<div class="col-lg-10 col-lg-offset-1 text-center">
<h2>Title</h2>
<hr class="small">
<div class="container-fluid col-md-6 vertical-center">
<div class="col-sm-12 bg-green">
<img class="img-responsive center-block" src="http://placeimg.com/100/100/animals" />
</div>
</div>
<div class="container-fluid col-md-6 vertical-center">
<div class="col-sm-12 bg-green">
<div class="portfolio-item">Text</div>
</div>
</div>
</div>
into parent div, add this class:
col-lg-6 col-lg-push-6
like this:
<div class="col-lg-6 col-lg-push-6" id="logo">
<div class="portfolio-item">
<img class="img-portfolio img-responsive" src="logo.jpg">
</div>
</div>
You can set portfolio-item position to relative and img to position absolute and give the image top: 50%; transform: translateY(-50%) https://jsfiddle.net/pu4L80gq/
Also you can use JS to determine image container height and image height to give margin-top to image or padding-top to the container :
(image container height - image height) would give you the rest space in the container then divide it on two and with this value you can center your image vertically https://jsfiddle.net/pu4L80gq/1/
$(document).ready(function () {
var imgContHeight = $('.img-container').height();
var image = $('.img-container img');
var imgHeight = image.height();
image.css({
marginTop: (imgContHeight - imgHeight) / 2
});
});
Related
How can I make an element (element id #move-slower) move slower than the speed of the butter scroll container? My goal is to place this element somewhere behind the main container with the page content (which will use butter scroll) and have it move slower when scrolling than the container controlled by butter scroll.
I'm open to using other jQuery plugins other than butter scroll as long as I can achieve the same effect of this plugin.
Using:
https://github.com/cmalven/butter-scroll
HTML
<div class="outer-container js-outer-container">
<div class="inner-container js-inner-container">
<div id="slower-element"><img src="https://via.placeholder.com/100x300.png/09f/fff" alt=""></div>
<div class="container">
<div class="row">
<div class="col">
<img src="https://via.placeholder.com/300.png/09f/fff" alt="">
</div>
<div class="col">
<img src="https://via.placeholder.com/300.png/09f/fff" alt="">
</div>
</div>
<div class="row">
<div class="col">
<img src="https://via.placeholder.com/300.png/09f/fff" alt="">
</div>
<div class="col">
<img src="https://via.placeholder.com/300.png/09f/fff" alt="">
</div>
<div class="col">
<img src="https://via.placeholder.com/300.png/09f/fff" alt="">
</div>
</div>
</div>
</div>
</div>
JS
new ButterScroll({
$containerEl: jQuery('.js-outer-container'),
$elToScroll: jQuery('.js-inner-container'),
scrollEase: 0.07, // optional
maxDepthOffset: 500 // optional
});
CSS
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.inner-container {
overflow: hidden;
}
img {
max-width:100%;
height:auto;
}
#slower-element {
position:fixed;
top:0;
left:0;
}
Fiddle
https://jsfiddle.net/ts7j3n5z/
I need the following Layout:
+-----------+-----------+
| | |
| Div A | |
| | |
| | |
+-----------+ Div C |
| | |
| Div B | |
| | |
| | |
+-----------+-----------+
The boxes should be responsive and contain images (one for each box).
I am using bootstrap 3 and found a possible solution, unfortunately the heights depend also on the image size. I can't use tables and the layout has to be responsive, so a fixed height is no solution. I searched trough stackoverflow but I could not find a solution.
One approach is this (which is working well in the fiddle, except the images:
var colHeight = $(".slider").height();
var colHeight2 = colHeight - 30;
$('.child').css('min-height', colHeight2 / 2);
.slider {
background: #555;
}
.image1 {
margin-bottom: 30px;
background: #555;
}
.image2 {
background: #555;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 slider">
<img src="http://placehold.it/700x600" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-4">
<div class="row">
<div class="col-xs-6 col-sm-12 image1 child">
<img src="http://placehold.it/400x300" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-12 image2 child" style="overflow: hidden;">
<img src="http://placehold.it/400x300" class="img-responsive">
</div>
</div>
</div>
</div>
</div>
And I`ve created a fiddle here:
JsFiddle
You could check display:flex. I would do the below:
<div class="outer-container">
<div class="inner-container item">
<div>
<img src="" style="height:300px"/>
</div>
<div>
<img src="" style="height:200px"/>
</div>
</div>
<div class="item">
<img src="" />
</div>
</div>
.outer-container {
width: 50%;
margin: 0 auto;
}
.outer-container, .inner-container {
display: flex;
}
.inner-container {
flex-direction: column;
}
div {
border: 1px solid;
}
try this code in your jsfiddle
<div class="container">
<div class="col-xs-6 col-sm-6 col-md-6" >
<div class="col-md-8">
<img src="http://placehold.it/400x300" class="img-responsive">
</div>
<div class="col-md-5">
<img src="http://placehold.it/400x300" class="img-responsive">
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6" >
<img src="http://placehold.it/700x600" class="img-responsive">
</div>
</div>
You could assign
display:flex;
To all the child div's in the row class.
example here http://codepen.io/tom-maton/pen/Ywdzeo
<div class="row">
<div class="col-sm-6">
<div class="row">
<img src="http://placehold.it/400x300" class="img-responsive"/>
</div>
<div class="row">
<img src="http://placehold.it/400x300" class="img-responsive"/>
</div>
</div>
<div class="col-sm-6">
<img src="http://placehold.it/400x300" style="height:600px" />
</div>
</div>
I created a grid with col-md-7 on the left and col-md-5 on the right.
And I put images to the col-md-5, which are responsive and in col-md-12 width - full width
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-7">LEFT SIDE</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Demo : http://jsfiddle.net/r8rFc/298/
It works great without any problems.
However, I use a menu called Zozo UI tabs.
When I put my code into Zozo UI container div, the images overlap rather than staying on top of each other.
Thus, it just show the last IMG
I would add the whole code to here but unfortunately it has a lot of dependencies.
Please check from here.
xxx
<!-- Overview -->
<div class="z-content z-active" style="position: relative; display: block; left: 0px; top: 0px;">
<div class="z-content-inner">
<div class="row">
<div class="col-md-7">
<div class="row">
<div class="col-md-12">
LEFT
</div>
</div>
</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Need a way to get that images on the top of each other rather than overlapping.
You have
.productgroup img {
position: absolute;
}
it seems to be the reason of your problem.
I have 8 images on my page, 4 in one column and 4 in the other.
When I click on any of the images in the first column (panel1) I can see a circle appear on top of the image to show its been selected.
When I click on any of the images in the other column (panel2) the image fades out slightly but no circle is shown.
<div class="row col-xs-12 margin0">
<div class="col-xs-12 col-sm-6 col-md-3 productmargintop5 paddingRound productsLeft">
<div class="boxTop"></div>
<div class="box" id="panel1">
<div class="row col-xs-12 margin0" style="margin-left:-8%">
<div class="col-md-6 col-xs-6">
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145153/black_cherries_snbvu8.png" data-id="1" alt="" data-name="blackcherry" />
</div>
<div class="col-md-6 col-xs-6">
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145152/coconut_psdlax.png" data-id="2" alt="" data-name="coconut" />
</div>
</div>
<div class="clearfix"></div>
<div class="marginBottom10 visible-xs-block"></div>
<div class="row col-xs-12 margin0" style="margin-left:-8%">
<div class="col-md-6 col-xs-6">
<img src="//res.cloudinary.com/dncu6pqpm/image/upload/v1424145152/mango_p3tjp5.png" data-id="3" alt="" data-name="mango" />
</div>
<div class="col-md-6 col-xs-6">
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145152/strawberries_s1da7u.png" data-id="4" alt="" data-name="strawberries" />
</div>
</div>
<div class="clearfix"></div>
<div class="marginBottom10 visible-xs-block"></div>
</div>
<div class="boxBtm"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-1 productmargintop5 paddingRound productsLeft" style="top:40%; left: 4%; position:relative"> + </div>
<div class="col-xs-12 col-sm-6 col-md-3 productmargintop5 paddingRound productsLeft">
<div class="boxTop"></div>
<div class="box" id="panel2">
<div class="row col-xs-12 margin0" style="margin-left:-6%">
<div class="col-md-6 col-xs-6">
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145156/chocolate_lxphco.png" data-id="1" alt="" data-name="chocolate" />
</div>
<div class="col-md-6 col-xs-6">
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145156/cinnamon_o8nbos.png" data-id="2" alt="" data-name="cinnamon" />
</div>
</div>
<div class="clearfix"></div>
<div class="marginBottom10 visible-xs-block"></div>
<div class="row col-xs-12 margin0" style="margin-left:-6%">
<div class="col-md-6 col-xs-6">
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145156/honey_lawjsz.png" data-id="3" alt="" data-name="honey" />
</div>
<div class="col-md-6 col-xs-6">
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145156/vanilla_qptl2d.png" data-id="4" alt="" data-name="vanilla" />
</div>
</div>
<div class="clearfix"></div>
<div class="marginBottom10 visible-xs-block"></div>
</div>
<div class="boxBtm"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-1 productmargintop5 paddingRound productsLeft" style="top:40%; left: 4%; position:relative"> = </div>
<div class="col-xs-12 col-sm-6 col-md-3 productmargintop5 paddingRound productsLeft">
<div class="boxTop"></div>
<div class="box">
</div>
<div class="boxBtm"></div>
</div>
</div>
and my Script
$(document).ready(function () {
// Panel1 is working as expected
$("#panel1 .row img").click(function () {
$("#panel1 .row img").removeClass("BlackcherryCircle");
$("#panel1 .row img").removeClass("CoconutCirle");
$("#panel1 .row img").removeClass("MangoCircle");
$("#panel1 .row img").removeClass("StrawberryCircle");
$("#hdnPanel1").val('');
var name = $(this).attr("data-name");
var id = $(this).attr("data-id");
switch (name) {
case "blackcherry":
$(this).addClass('BlackcherryCircle');
break;
case "coconut":
$(this).addClass('CoconutCirle');
break;
case "mango":
$(this).addClass('MangoCircle');
break;
case "strawberries":
$(this).addClass('StrawberryCircle');
break;
default:
}
$("#hdnPanel1").val(id);
});
// Panel2 has the issue it will not apply the CSS Class for the image clicked
$("#panel2 .row img").click(function () {
$("#panel2 .row img").removeClass("ChocolateCircle");
$("#panel2 .row img").removeClass("CinnamonCircle");
$("#panel2 .row img").removeClass("HoneyCircle");
$("#panel2 .row img").removeClass("VanillaCircle");
$("#hdnPanel2").val('');
var name = $(this).attr("data-name");
var id = $(this).attr("data-id");
switch (name) {
case "chocolate":
$(this).addClass('ChocolateCircle'); // Will not apply the CSS Class
break;
case "cinnamon":
$(this).addClass('CinnamonCircle'); // Will not apply the CSS Class
break;
case "honey":
$(this).addClass('HoneyCircle'); // Will not apply the CSS Class
break;
case "vanilla":
$(this).addClass('VanillaCircle'); // Will not apply the CSS Class
break;
default:
}
$("#hdnPanel2").val(id);
});
});
I have created a JSFiddle here because I'm not 100% sure what is going wrong, the images that wont display the circle are inside panel2
I think the problem is the images... the images in the first panel has transparent background where as second one don't have transparent background.
So try to use images with transparent backgrounds
body {
background-color: lightgrey;
}
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145153/black_cherries_snbvu8.png" data-id="1" alt="" data-name="blackcherry" />
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1424145156/honey_lawjsz.png" data-id="3" alt="" data-name="honey" />
It's because the images you've used in panel 1 have transparent backgrounds. In panel 2 the images have solid white backgrounds.
I have the divs with different heights in my div structure. Each div contains <p> tags and <h2> tags. These are drawn using the data retrieved from the server side. I want to stack them to the left of the screen. the below example shows how it's displayed now.
What I want is to position all the divs left aligned irrelevant of the height and width of it. Sort of a left aligned stack.
The following is the div structure of the above image.
<div class="specials-container">
<div class="clear"></div>
<article class="facility-group">
<h2>Accomodation</h2>
<div class="facility-box">
<img src="/clientImages/TheWallawwa/facility-tick.png">
<p>2 Luxurious Rooms With Attached Toilets</p>
</div>
<div class="facility-box">
<img src="/clientImages/TheWallawwa/facility-tick.png">
<p>Armchair & built in window seat.</p>
</div>
<div class="facility-box">
<img src="/clientImages/TheWallawwa/facility-tick.png">
<p>55 metres sq.</p>
</div>
<div class="clear"></div>
</article>
<article class="facility-group">
<h2>Health</h2>
<div class="facility-box">
<img src="/clientImages/TheWallawwa/facility-tick.png">
<p>Double Vanity, Illuminated Makeup/Shaving Mirror</p>
</div>
<div class="facility-box">
<img src="/clientImages/TheWallawwa/facility-tick.png">
<p>Air Conditioned</p>
</div>
<div class="clear"></div>
</article>
<article class="facility-group">
<h2>Connectivity</h2>
<div class="facility-box">
<img src="/clientImages/TheWallawwa/facility-tick.png">
<p>High Speed Internet Access</p>
</div>
<div class="facility-box">
<img src="/clientImages/TheWallawwa/facility-tick.png">
<p>LCD Screen Television With Cable Channels</p>
</div>
<div class="clear"></div>
</article>
<article class="facility-group">
<h2>Special</h2>
<div class="facility-box">
<img src="/clientImages/TheWallawwa/facility-tick.png">
<p>King Size Balinese Four Poster Double Bed or Large</p>
</div>
<div class="facility-box">
<img src="/clientImages/TheWallawwa/facility-tick.png">
<p>Family Suite consists of a Double Garden Suite.</p>
</div>
<div class="clear"></div>
</article>
<article class="facility-group">
<h2>Common</h2>
<div class="facility-box">
<img src="/clientImages/TheWallawwa/facility-tick.png">
<p>Shared Bathroom</p>
</div>
<div class="facility-box">
<img src="/clientImages/TheWallawwa/facility-tick.png">
<p>Complimentary Toiletries</p>
</div>
<div class="facility-box">
<img src="/clientImages/TheWallawwa/facility-tick.png">
<p>Express Check In</p>
</div>
<div class="facility-box">
<img src="/clientImages/TheWallawwa/facility-tick.png">
<p>Free News Paper</p>
</div>
<div class="clear"></div>
</article>
<div class="clear"></div>
</div>
And this is the CSS that I've applied. I've only added the parent CSS and the container CSS. Omitted the images and header CSS. If needed I'll post them too.
.specials-container {
width: 100%;
position: relative;
}
article {
padding: 10px 6px;
text-align: left;
border: 1px solid #ccc;
border-radius: 5px;
float: left;
position: relative;
margin: 10px;
}
I tired the display:flex and other display commands. But those are not supported by older IE versions like IE 7.
here is the way I want to stack the DIVs.
I found a solution for this matter using the clear command. If I use a clear-fix for every fourth element which I draw, the elements get stacked to the left.
in this case, I've to add clear:left to each fourth element I draw.