We Keep Coding

OWL CAROUSEL fixed height?

I'm currently using Owl Carousel and am wondering if there's a way to adjust image sizes so that the height of each image is consistent. I'm using this plugin to display my photography, and I have both landscape and portrait sizes. I tried using autoWidth in the JS but it makes my portrait images too large and my landscape images too short, how do I get all the images to have a set height?
I tried adjusting the CSS, but the landscape images seem to be behind the next image and doesn't display the full width. It looks like there is a set width, and when I adjust the width, the image just gets stretched. I have 19 items in the carousel. Also tried adjusting the items in the responsive part of the JS, when I adjust it to two items, the landscape images are the right proportions but the portrait images end up being stretched. Any ideas on how to fix?
Here's the CSS code I've used:
#demos img{
display: inline-block;
max-width: auto;
height: 500px!important;
margin-bottom: 30px;
}
Javascript:
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop: true,
margin: 0,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 3,
nav: false
},
1000: {
items: 5,
nav: true,
loop: true,
margin: 0
}
}
})
})

you can use this code in your css
.owl-carousel .owl-stage {
display: flex;
}
.owl-carousel .owl-item img {
width: auto;
height: 100%;
}

If you're using Bootstrap, then add the img-responsive class:
<img class="img-responsive">
This worked for me, I was also facing the same issue.

try to play with something like this:
display:block; height:500px !important; margin:0 auto 30px;

add style to img tag, owl carousel automatically adjust the height to the biggest image. img tag width height might not work, try adding css styles
<img
class="img-fluid"
src={require("../../assets/assorted-flowers-on-table-2253831.jpg")}
style="width:800px; height:600px;"
/>

Add to your style:
img {
width: 100%;
height: 500px!important;
object-fit: cover;
object-position: center;
}
And if you need, force the height on every parent of your image. That worked for me.

Disable CSS transformation-based centering with Jquery depending on content height

For a website I'm designing directly with CSS and Foundation 5, I am centering all content vertically in the middle of the viewport when the content area is taller than the browser window.
I found an excellent pure CSS solution that works perfectly. I'm very happy with the current behavior when the content area is small enough to fit entirely within the viewport without a scroll fold. I fairly sure that I don't need or want any kind of vertical centering when the content is long enough for scrolling.
The problem is that when there is too much content to fit on the screen, the CSS crops off the header and makes it impossible to scroll up to see the top of the content.
The CSS I adapted from davidwalsh.name uses a transformation to raise the container by half its height after its top was placed 50% down from the top.
#non-framework-container {
height: 100%;
width: 100%;
}
#non-framework-wrapper {
height: auto;
width: auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
This is applied to these two nested containers around the Foundation classes.
<div id="non-framework-container">
<div id="non-framework-wrapper">
<header class="row">
[...]
</header>
[...]
</div>
</div>
I want to disable the CSS when the content (specifically #non-framework-container) is taller than the viewport. I was hoping it would be as simple as this bit of JQuery:
$(document).ready(function) {
if ( $("#non-framework-container").height() > $(window).height() ) {
$("#non-framework-wrapper").css("position":"static", "top":"0", "transform":"none");
}
});
Unfortunately, my script doesn't do anything, no matter the amount of content or the browser size (and regardless of whether I load it in the head tag or at the bottom of the body tag).
I love how the CSS transformation method works, so I'm reluctant to try a pure JavaScript solution.

Try this (not tested, cannot currently test where I am):
HTML:
<div id="non-framework-container">
<div id="non-framework-wrapper">
<header class="row">
<h1>Your mom makes the best pizza</h1>
</header>
</div>
</div>
CSS:
#non-framework-container {
height: 100%;
width: 100%;
}
.transform {
height: auto;
width: auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
JAVASCRIPT:
var div = $("#non-framework-wrapper").height();
var winSize = $(window).height();
$(document).ready(function() {
if (div < winSize) {
$("#non-framework-wrapper").addClass('transform');
} else {
$("#non-framework-wrapper").removeClass('transform');
}
});

What's the cleanest way to make a resizable three-column layout?

Sorry if the title isn't descriptive, but I'm working on a web-based application in javascript using the HTML5 canvas. I want the page to adjust to the window size, but I also want the columns to be resizable - that is, you can drag the vertical lines to change their width. The thing is, the canvas width and height attributes must be in pixels (setting the CSS properties stretches the image instead of widening the drawing surface). I need to change the canvas attributes through javascript. I have trouble working with all of these constraints together.
I tried Making the templates-panel float left and the properties-panel float right, but it ends up below the canvas and above the status-bar everytime. I've also got the status bar set to position:fixed but it tends to go above the canvas a bit. How would you do it? Keep in mind I have to be able to resize the window or the panels individually (except the menubar and status bar which never change size).
EDIT: quick edit to add that I can't use JQuery / JQuery-UI. The application is quite computer-intensive, so I had to get rid of it. My compatibility target is IE9 anyway.

I did a quick google search on how to do this and found a stack overflow post with a similar answer, here is the fiddle that was provided, here is the javascript portion:
var i = 0;
$('#dragbar').mousedown(function(e){
e.preventDefault();
$('#mousestatus').html("mousedown" + i++);
$(document).mousemove(function(e){
$('#position').html(e.pageX +', '+ e.pageY);
$('#sidebar').css("width",e.pageX+2);
$('#main').css("left",e.pageX+2);
})
console.log("leaving mouseDown");
});
$(document).mouseup(function(e){
$('#clickevent').html('in another mouseUp event' + i++);
$(document).unbind('mousemove');
});
http://jsfiddle.net/gaby/Bek9L/
And here is the post:
Emulating frame-resize behavior with divs using jQuery without using jQuery UI?
The fiddle uses jQuery but not jQuery UI,
You will need to use percentages for width, look into responsive design.
http://learn.shayhowe.com/advanced-html-css/responsive-web-design/
I hope this helps

it's this are you looking for?
fiddle link
<style>
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}
/* GRID OF THREE */
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 66.1%;
}
.span_1_of_3 {
width: 32.2%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%;}
.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}
</style>
<div class="section group">
<div class="col span_1_of_3" style="background-color:red;color:white;text-align:center;">
template
</div>
<div class="col span_1_of_3" style="background-color:blue;color:white;text-align:center;">
canvas
</div>
<div class="col span_1_of_3" style="background-color:gray;color:white;text-align:center;">
properties
</div>
</div>

How to resize a div to clients viewport height?

Ok, so i want to have a series of divs which are the exact width and height of the user's browser window, regardless of the screen size. I can easily make the divs stretch horizontally with "width: 100%;" but i cant work out how to make the height stretch itself. I am guessing that i need to use some bit of javascript to judge the height, and then another piece to resize the seperate divs. Unfortunately I am a complete javascript n00b and after two hours of seemingly fruitless searching and coming up with about 100 "solutions" this was as far as id gotten (Im sure that at some point I have probably been closer to the answer):
var viewportHeight = "height:" + document.documentElement.clientHeight;
getElementById('section-1').setAttribute('style', viewportHeight);
<div class="section" id="section-1"></div>
<div class="section" id="section-2"></div>
<div class="section" id="section-3"></div>
edit:
ah i should be more clear, im attempting to have all three divs take up the entire screen, so you have to scroll down to see each one - almost like seperate slides. The idea is that each one takes up the entire screen so you cant see the next section until you scroll down, rather than having three divs which take up a third of the screen.

If you haven't already tried it, you'll want to look at parent:child inheritance of elements within the DOM by way of using CSS.
What I want to STRESS is that everyone giving you JS hacks to accomplish this is not only providing you with overkill (YOU did ask for a JavaScript solution, so they gave it to you!), but it's also a deviation from standards. HTML is for structure, CSS is for presentation, and JavaScript is for behavioral aspects... setting a div to the width of the viewport on load is a PRESENTATION aspect and should be done in CSS... not JavaScript. If you were trying to change the width based on events or user interaction, then yes JavaScript is your friend... but stick with just HTML and CSS for now.
The trick is that most elements have an undefined height - and height is later defined by the content that the element holds.
If you want to 'trick' an element into having a height other than what it wants to default to, you'll have to explicitly define it. Since you want to inherit your height from the viewport, you'll have to define the height at the top and bring it down...
You might be in luck and can avoid JavaScript altogether (unnecessary). Just use CSS.
Try something like:
html, body {
height: 100%;
width: 100%;
}
Now, when you try to set your div's later on, specify width: 100% and the height gets inherited from the html --> body --> div.
Try that and see if that solves your problem - if not, point us to a website, a pastebin, or a SOMETHING with code in it that we can just show you how to do it (whereas what you posted for code was an attempt in JavaScript which is only 1 part of the code - post the full thing either to a server or temp site like pastebin).
Here is some sample code I wrote (tested in Chromium):
The HTML:
<html>
<head>
<title>Test Divs at 100%</title>
<link rel="stylesheet" type="text/css" href="divtest.css"
</head>
<body>
<div class="test1">aef</div>
<div class="test2">aef</div>
<div class="test3">aef</div>
</body>
</html>
The CSS:
html, body {
width: 100%;
height: 100%;
background-color: #793434;
padding: 0;
margin: 0;
}
div {
height: 100%;
width: 100%;
}
.test1 {
background-color: #E3C42E;
}
.test2 {
background-color: #B42626;
}
.test3 {
background-color: #19D443
}

try this
div#welcome {
height: 100vh;
background: black;
color: white;
}
div#projects {
height: 100vh;
background: yellow;
}
<div id="welcome">
your content on screen 1
</div>
<div id="projects">
your content on screen 2
</div>
it should work for you, but little support in IE

A bit of jQuery should do it:
$(document).ready(function() {
var window_height = $(window).height();
$('#section-1").height(window_height);
});
And if you want to keep 100% height on window resize:
$(document).ready(function() {
function viewport_height() {
var window_height = $(window).height();
$('#section-1").height(window_height);
}
viewport_height();
$(window).resize(function() {
viewport_height();
});
});

try this
window.onload = init;
function init()
{
var viewportHeight = "height:" + document.documentElement.clientHeight+"px;";
document.getElementById('section-1').setAttribute('style', viewportHeight);
}

Here is a script free solution, just CSS. This assumes that the divs are directly in the body element or a parent with position absolute and the parent has no padding.
#section-1 {
position: absolute;
height: 100%;
width: 100%;
background: #ff0000;
}
#section-2 {
position: absolute;
width: 100%;
top: 100%;
height: 100%;
background: #00ff00;
}
#section-3 {
position: absolute;
width: 100%;
top: 200%;
height: 100%;
background: #0000ff;
}
See fiddle: http://jsfiddle.net/QtvU5/1/

Auto height grid

I have a product grid on my e-shop (http://shop.rukahore.sk/). Every product div is 222px x 222px, but I want it to have auto height.
I tried something like this - http://patterntap.com/code/stacking-columns-layout-masonry ,
but I had to add min-height and it didn't look good because some of the images were smaller or bigger and wrapping div was still 222px, which I don't want to happen due to hover effect, etc.
Can someone provide advice regarding this?

Well, for using the display shown in that page you need to use the plugin
<!-- Requires Masonry | visit http://masonry.desandro.com/ to download -->
If you don't want to add more plugins... Well, what makes you lose the height is the float css property. You should use other thing to make the grid, see for example how they do it in www.camarasdecolores.com.
To add the Masonry plugin:
Add an id to your container:
<div id="masonryContainer" class="hp-products allposts" style="position: relative; height: 2008px;">
Add the init js code in a script
$(window).load(function(){
$('#masonryContainer').masonry({
itemSelector: '.hp-product',
columnWidth: 60
});
});
change some css:
#masonryContainer { width: 0 auto; }
.hp-product {
width: 180px; float: left;
}
.hp-product-img {
}
.hp-product-img img {
max-width: 100%;
height: auto;
}
//Void the following ones
.hp-products {
}
.allposts {
}
.allposts .hp-product {
}