We Keep Coding

Dynamic equal height responsive image gallery

I need to display thumbnails of various images of different sizes. I wanna display them in equal height and width of responsive divs. But the problem is the images are of different sizes. I have also tried jquery but couldn't reach to a solution.
HTML Code:
<div class="gallery">
<div class="pic">
<img src="http://img.autobytel.com/car-reviews/autobytel/11827-cool-luxury-cars/2015-Tesla-Model-S-90D-black-profile-in-front-of-modern-house.jpg">
</div>
<div class="pic">
<img src="https://imgct2.aeplcdn.com/img/800x600/news/Nissan_XTrail_2015/nissan-x-trail-1.jpg">
</div>
<div class="pic">
<img src="http://media.caranddriver.com/images/14q3/612034/best-sports-cars-2015-editors-choice-for-premium-and-exotic-sports-cars-car-and-driver-photo-634605-s-450x274.jpg">
</div>
</div>
CSS:
.gallery{
max-width:800px;
overflow:hidden;
width:100%;
}
.gallery .pic{
width:33%;
float:left;
max-height:200px;
height:100%;
}
.gallery img{
height:100%;
width:100%;
}
Jquery
var maxHeight = 0;
$('.gallery .pic').each(function(index){
if ($(this).height() > maxHeight)
{
maxHeight = $(this).height();
}
});
$('.gallery .pic').height(maxHeight);
Fiddle: https://jsfiddle.net/1rooxnko/
Note: I am looking for a solution that is without fixed height to pic class.

try this updated responsive code may be it can help you
JSfiddle
HTML:
<div class="gallary">
<div class="pic">
<img src="http://img.autobytel.com/car-reviews/autobytel/11827-cool-luxury-cars/2015-Tesla-Model-S-90D-black-profile-in-front-of-modern-house.jpg">
</div>
<div class="pic">
<img src="https://imgct2.aeplcdn.com/img/800x600/news/Nissan_XTrail_2015/nissan-x-trail-1.jpg">
</div>
<div class="pic">
<img src="http://media.caranddriver.com/images/14q3/612034/best-sports-cars-2015-editors-choice-for-premium-and-exotic-sports-cars-car-and-driver-photo-634605-s-450x274.jpg">
</div>
</div>
CSS:
.gallary{
width:100%;
overflow:hidden;
display:flex;
}
.pic{
width:33.33%;
}
.gallary img{
width:100%;
height:100%;
}

The problem I could find was in your .gallery element, you've set the max-height, but you also need to specify height too.
have a look at this https://jsfiddle.net/ya2za6d1/

Change this
.gallary .pic{
width:33%;
float:left;
max-height:200px;
height:100%;
}
to this
.gallary .pic{
width:auto;
float:left;
max-height:200px;
}
EDIT: I've seen that your code works. But also that images looks distorted.
One suggest that I can give you is to use (if you can) background images to avoid this problem.

You can do this with flexbox (no js required) as follows:
.gallary{
width:100%;
display: flex;
}
.pic {
flex: 1;
}
.pic img {
width: 100%;
}
I've set .gallary's width to 100% so that we can see it's responsive.
As gallery is the parent element I've set this to flex.
I've then added flex: 1 to each .pic element so that they are each the same width. Finally, I've set the width of each image to 100% so that they scale to fit the width of each .pic element.
Using flexbox like this means that each child element (in this case the .pic elements) is automatically the same height.
I've set up a codepen http://codepen.io/alexmagill/pen/ggGVwL with some background colours in place so that you can play around with it and get a sense of what is happening.
Support for it is pretty solid now but you might want to add in fallbacks for older browsers.

Please refer this link https://github.com/liabru/jquery-match-height
1.Apply match height class for the outer div of the image.
2.Then apply this css for the image
<style>
.img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
}
</style>

If element moves, how to animate that movement with css or jquery?

I got some elements, and when an event is triggered one of them is removed or added to the DOM, when this happens the rest of the elements moves around to find their right place on the DOM, what I want is to animate that movement.
Any ideas? I would like to only use CSS if it's possible.
Note that when clicked the button, the element 2 goes off or on and the others move's, I want that movement animated.
Here is my code
$('button').click(function(){
element = $('#dos').is(":visible");
if(!element){
$('#dos').show();
}
else{$('#dos').hide();}
})
section{
margin:auto;
display:block;
text-align:center;
}
#uno{
width:200px;
background:rgba(255,229,0,1.00);
height:100px;
display:inline-block;
}
#dos{
width:200px;
background:rgba(0,255,60,1.00);
height:100px;
display:inline-block;
}
#tres{
width:200px;
background:rgba(232,0,255,1.00);
height:100px;
display:inline-block;
}
button{
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section>
<div id="uno">1</div>
<div id="dos">2</div>
<div id="tres">3</div><br>
<button>Click</button>
</section>

If you want it to be done in CSS, then work with .addClass()/.removeClass() instead of .show() and .hide(). Learn about keyframes – it's easy, intuitive and gives full control over CSS animations. It's as easy as:
#keyframes hide-animation {
to {
width: 0%;
visibility: hidden;
}
}
.hidden {
animation: hide-animation .3s linear forwards;
}
You can bind any animation you want to the class you are adding. Here's your JSFiddle with working hide animation.

It's hard for me to give an exact answer without knowing what kind of movement you want but I'll take a stab at it.
One general solution is to put the element you are hiding/showing in a container div, and then animate the width or height of the container div. Let me see if I can give you an example for vertical:
HTML:
<div id="uno">1</div>
<div id="dos-container">
<div id="dos">2</div>
</div>
<div id="tres">3</div>
CSS:
#uno{
height:100px;
}
#dos{
height:100px;
}
#dos-container{ /* same height as dos if starting visible, if starting hidden set to 0*/
height:100px;
}
#tres{
height:100px;
}
JS(with jquery):
$('button').click(function(){
element = $('#dos').is(":visible");
if(!element){
//animate container height to match content div height
$('#dos-container').animate({height: "100px")},500); //500 is the speed of the animation
//show content in container
$('#dos').show();
}
else{
//animate container height to 0
$('#dos-container').animate({height: "0px")},500);
//then hide content div
$('#dos').hide();
}
})

Shift down / up position fixed elements in HTML

I'm working on a HTML framework that most of it's pages constructed from two section. first section (TopPanel) is a sliding panel that could slide down or up (with jQuery as well). second section is the Main part of page that could contain any sort of HTML document.
<!doctype html>
<html>
<head>
<!--Meta scripts & more-->
</head>
<body>
<div class="TopPanel">
<!--Panel's Contents-->
</div>
<div class="Main">
<!--Some standard HTML docs here-->
</div>
</body>
</html>
When the TopPanel is sliding down, all elements of the Main section must move down. But it's possible to exist some position:fixed element in the Main section. so it's clear that they won't move unless we gave them some margin-top: [$('.TopPanel').height()] px;. But it's not what I'm looking after!
I'm looking for a way to shift down and shift up all content of the Main section with a smooth effect and without changing of all elements attributes.

Have you thought about using a CSS transform:translateY(20px) on the body tag? If you are using fixed position on the other element, it shouldn't actually affect it although I haven't tested that.
You can then use transitions to get the smooth movement you are after.
body{
padding:10px;
overflow:hidden;
background:#fff;
height:100%;
transition:all .2s;
}
body.active{
transform: translateY(60px);
}
Example:
http://codepen.io/EightArmsHQ/pen/gpwPPo
Lookout for this kind of stuff though : Positions fixed doesn't work when using -webkit-transform

JSFIDDEL version
(UPDATED) Try this:
$('.main').click(function(){
$('.main').toggleClass('toggle');
})
.main{
width:20%;
height: 10%;
background-color: rgba(100,100,100,0.7);
text-align: center;
position: fixed;
top: 12%;
transition:all 1.0s
}
.top{
width: 20%;
height: 10%;
text-align: center;
background-color: rgba(300,50,50,0.7);
position: absolute;
}
.toggle{
transform: translateY(100px);
transition:all 1.0s
}
<div class="content">
<div class="top">
Top
</div>
<div class="main">
Main
</div>
</div>
It would need some tweaking but it still does what you are looking for.

I think you are looking for is maybe this:
I have used JQuery UI 1.9.2 for making the toggle ease effect. For more i have created the Fiddle
JQuery
$("button").click(function(){
$(".topPanel").toggleClass("height", 300);
$(".main").toggleClass("top", 300);
});
CSS
body { margin:0; }
.topPanel
{
width:100%;
height:50px;
background:#333;
}
.main
{
top:50px;
bottom:0px;
width:100%;
position:absolute;
background:#ddd;
}
.height { height:100px; }
.top { top:100px; }
p { font-weight:bold; }
HTML
<div class="topPanel">
</div>
<div class="main">
<center><button>Click Me!</button></center>
<p>Hey look at me, i am moving along when you click button!</p>
</div>

Overflow hidden property is not working with parallax scrolling

The overflow hidden property is not working as expected when trying it with parallax scrolling.
I am trying to accomplish parallax scrolling with JavaScript everything should work fine but when i try to set the overflow to hidden the image still appearing outside the div
Here is the HTML
<div id="page2">
<p id="bb">The title</p> //Some title
<div id="bg"></div> //Blue box in front of the image(design decision)
<img src="img/Food.jpg" alt="prlx" id="prlx"/> //The image which has the proprety
</div>
Here is my JavaScript eventListener and the function :
window.addEventListener("scroll",func,false);
function func(){
prlx_lyr_1 = document.getElementById("prlx");
prlx_lyr_1.style.top = (window.pageYOffset/4)+"px"
}
And this is my CSS for the image which i am trying to hide the overflowing parts :
#page2 img{
position:relative;
top:-300px;
}
And this is the CSS of the div which contain the image
#page2{
overflow:hidden;
height:250px;
}
There is some extra CSS for the #bg
Update:
here is a
You can notice that the overflow is not hidden the container div is the blue side in the page
Here is a js fiddle

So the issue is position: fixed breaks the element out of the flow of the document and unlike absolute it can't be contained by using relative on a parent. Instead you should set this image as a background set to fixed on a div that is position: absolute:
HTML
<div id="page2">
<p id="bb">The chef</p>
<div id="bg"></div>
<div id="bg-image"></div>
</div>
CSS
#page2{
overflow:hidden;
height:250px;
position: relative;
}
#bg{
background: #33c1c9;
height:250px;
width:100%;
position:relative;
z-index:74897;
opacity:0.4;
}
#bg-image{
background: url("http://im47.gulfup.com/1Y5tcL.jpg") no-repeat fixed;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
FIDDLE

How to eliminate the flicker from this JQuery/CSS3 Animation

I'm trying to do an animation using css3/JQuery while clicking the side bar, the current div slides to the left and disappears, while another div which was hidden slides in sort of like a page transition.
this is what i've ATM : fiddle
HTML:
<div id='wrap'>
<header></header>
<div id='content'>
<div id='contentMenu'></div>
<div id='page1'>
<div id='left'></div>
<div id='right'></div>
</div>
<div id='page2'></div>
</div>
<footer></footer>
</div>
CSS:
* {
margin:0;
padding:0;
}
html, body, #wrap {
height:100%;
}
header {
height:15%;
background: #0080FF;
}
#content {
width:100%;
height:75%;
min-height:75%;
}
#contentMenu {
width:2%;
height:100%;
background:black;
display:inline-block;
}
#page1 {
width:97%;
height:100%;
display:inline-block;
-webkit-transition:height 5s;
}
#page1 div {
display:inline-block;
}
#left {
width:50%;
height:100%;
background:#FF8000;
}
#right {
width:40%;
height:100%;
background:grey;
display:none;
}
#page2 {
width:49%;
height:100%;
background:purple;
display:none ;
}
footer {
background: #58D3F7;
height:10%;
z-index:99;
}
.dis{
display:inline-block !important;
}
Script:
$('#contentMenu').click(function () {
$('#page1').toggle('fast', 'swing', function () {
$('#page2').toggleClass('dis');
});
});
but when the hidden div is given visibility, you can see a flicker in the footer.
is there anyway to eliminate this?
if i remove -webkit-transition:height 5s;, the div is animated from top right to bottom left ( toggle() animates height , width and opacity at same time) is it possible to disable the change in height and animate simply from right to left?
is there anyway to avoid the jQuery and achieve this using pure css3?
Any other ways to achieve the same using css animations also would be greatly appreciated :)

Adding overflow: hidden on #content should fix your problem :
#content {
overflow: hidden;
width:100%;
height:75%;
min-height:75%;
}
( updated JSFiddle here )

I like the overflow hidden idea as well. Also, you could get rid of most of the jquery by using css for the animation. Using transition position the div absolutely outside of the div with overflow:hidden. Then set .active to the position where you want it.