I have 2 containers placed side by side (floating). Both of these containers have multiples forms generated dinamically and I can’t know which one will be the highest.
So I use a simple script to calculate both divsheight and apply the highest to both. Easy enough and working fine:
$(document).ready(function () {
var height = Math.max($(".left").outerHeight(),$(".right").outerHeight());
$(".left").height(height);
$(".right").height(height);
});
The forms inside are responsive, so it will be displayed in 3, 2 or 1 column depending on window width. Simple and easy css:
.form {
float:left;
width:50%;
padding-right:20px;
}
#media (max-width: 800px) {
.form {
width:100%;
}
}
My problema is that I can’t seem to make the script work BOTH at resize and at ready function when the page is loaded and run the script anytime the user resize the window manually.
So far I have tried the solutions I have found here around but none Works so far and I have no idea why. I have tried:
$(document).ready(function() {
$(window).resize(function() {
var height = Math.max($(".left").outerHeight(), $(".right").outerHeight());
$(".left").height(height);
$(".right").height(height);
}).resize();
});
and
$(document).ready(myfunction);
$(window).on('resize',myfunction);
function myfunction() {
var height = Math.max($(".left").outerHeight(),$(".right").outerHeight());
$(".left").height(height);
$(".right").height(height);
}
and
var callback = function () {
var height = Math.max($(".left").outerHeight(),$(".right").outerHeight());
$(".left").height(height);
$(".right").height(height);
};
$(document).ready(callback);
$(window).resize(callback);
But while still working when reloading the window, resizing when the containers grow (under 800px) doesn’t run the script (or the height value doesn’t change).
I’m not an expert at javascript / jquery so probably I’m missing something basic but after many hours I can’t find any solution.
Here is a JSFIDDLE with an example with the original script. Any Little help would be greetly apreciated.
The way you are handling the resize is correct, the issue is that you have already set the height of both of the divs previously, therefore they are no longer expanding/contracting to the size of their contents. I.E if the height of the divs was set to 286 on load the Math.max calculation will be using 286 when the window is resized.
To fix, reset the height before you calculate which is bigger:
$(window).resize(function() {
$(".left, .right").height('auto');
var height = Math.max($(".left").outerHeight(), $(".right").outerHeight());
$(".left, .right").height(height);
}).resize();
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.left {
float: left;
width: 50%;
padding-right: 20px;
background-color: grey;
border: 1px solid;
}
.right {
float: left;
width: 50%;
background-color: grey;
}
.form {
float: left;
width: 50%;
padding-right: 20px;
}
input {
width: 100%;
}
#media (max-width: 800px) {
.form {
float: left;
width: 100%;
padding-right: 20px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="left">
<div class="form">
<p>form</p>
<input type="text">
</div>
<div class="form">
<p>form</p>
<input type="text">
</div>
<div class="form">
<p>form</p>
<input type="text">
</div>
<div class="form">
<p>form</p>
<input type="text">
</div>
</div>
<div class="right">
<div class="form">
<p>form</p>
<input type="text">
</div>
<div class="form">
<p>form</p>
<input type="text">
</div>
</div>
Related
I have a rather annoying problem at the moment. I have tried numerous threads in here on how to set a grid of images to the same size no matter what size the image has to begin with. But it doesn't work and it's driving me crazy.
The results I'm getting looks like this:
My HTML looks like this:
<div class="container">
<div class="jumbotron">
<h3 class="text-center">Search Movie!</h3>
<form id="searchForm">
<input type="text" class="form-control" id="searchText" placeholder="Search for any movie...">
</form>
</div>
</div>
JavaScript:
function getMovies(movieSearched) {
axios.get('http://www.omdbapi.com?s='+movieSearched+'&apikey='+myKey).then((response) => {
movies = response.data.Search;
var output = ``;
$.each(movies, (index, movie) => {
output+= `
<div class="col-md-4">
<div class="box">
<img src="${movie.Poster}" height="250">
<h5>${movie.Title}</h5>
<a onclick="movieSelected('${movie.imdbID}')" class="btn btn-primary" href="#">Movie Details</a>
</div>
</div>
`;
$('#movies').html(output);
});
and CSS:
.box {
padding: 5px;
text-align: center;
overflow: hidden;
}
.box img {
margin-bottom: 30px;
display: grid;
width: 100%;
height: 250px;
object-fit: scale-down;
object-position: center;
}
#movieDiv {
display: grid;
}
#movies img, #movie img {
width: 100%;
height: 100%;
}
Maybe it has to do with the fact that I'm setting the images from the JS to the #movieDiv? Im new to this so I'm not really experienced. But how do I make the images the same size?
Thanks!
to fix the issue with the hight you can simply wrap your whole content inside a div and set the display to flex , it will automatically set the child div to the same hight no mater the size of the content inside of them , and then inside those div you can put your images
.container{
display:flex;
}
here is a codepen link
https://codepen.io/anon/pen/dmWQgm
I want the image (any image) height equal the window height even when I resize, I want to do it by jquery.
I used resize method in jquery but I don't get the results I need.
html:
<div class="header">
<div class="container">
</div>
</div>
css:
.container {
width: 1200px;
margin: auto;
}
.header {
background: url('https://preview.ibb.co/cu9YyH/download.jpg');
background-repeat: no-repeat;
}
jquery:
$(function () {
$(".header").height($(window).height());
$(window).resize(function () {
$(".header").height($(window).height());
});
});
There's no need for JS here. CSS alone will do the job, and is preferable for two reasons. Firstly this is a UI concern, so you shouldn't use JS as a crutch for that. Secondly, it performs better and you don't need to rely on the resize event to update the settings on the element.
To achieve what you need use vh (viewport height) units, like this:
html, body {
padding: 0;
margin: 0;
}
header {
background-color: #ccc;
height: 100vh;
}
div {
min-height: 50px;
}
<header>
I am the full-height header...
</header>
<div>
Some content here...
</div>
I am trying to make a page scale or mobile compatible I think is the term. The problem with my page right now is that it looks good at a certain size but when I drag the browser, the background picture of my page covers the "Services" Title the <section> portion.
Here is the jsFiddle: http://jsfiddle.net/eg18dfy0/4/ Not sure how useful this would be as local files are not included in here.
Normal:
Dragging:
Here is my code:
HTML snippet the matters:
<header>
<div class="background_image">
</div>
<div class="welcome-text-container">
<div class="row">
<div class="welcome-text1">Welcome!</div>
<div class="welcome-text2">BE GOOFY, TAKE A PICTURE!</div>
<div class="btn-row">
TELL ME MORE
</div>
</div>
</div>
</header>
<!-- services -->
<section id="services">
<div class="container">
<div class="service-title">Services</div>
<div class="service-caption">What we'll do for you</div>
</div>
</section>
CSS:
.background_image {
background-image: image-url("header-bg.jpg");
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 66.64%;
position: absolute;
/* (img-height / img-width * width) */
/* (853 / 1280 * 100) */
}
/* Services */
#services {
padding-top: 110px;
margin-top: 75px;
}
.service-title {
text-align: center;
font-size: 55px;
font-weight: 700;
}
.service-caption {
text-align: center;
font-size: 20px;
}
This should solve your problem:
Fiddle illustrating fix
You're setting your background image in a div that's getting higher stacking priority based on document flow, so it's overlapping your subsequent divs.
Here's the CSS I added to solve the problem:
.container > div.background-image {
z-index: 1;
}
.container > div {
position: relative;
z-index: 2;
}
There are better ways to do this (i.e. not creating a separate div for a background image), but this will solve your issue without major changes to document structure.
All credit to http://placehold.it for the placeholder image. It's a life-saver if you're going to be solving CSS issues on StackOverflow.
I have 3 fieldsets.
What I would like to make is this layout:
I want the bottom right fieldset to be bottom aligned, so it's bottom would be aligned with the left fieldset.
It should work in different resolutions.
Is there an easy way? or I will have to use javascript to add to it a margin-top dynamically?
code:
<div class="fieldSetsContainer">
<fieldset class="leftFieldSet">test
<br/>test
<br/>test
<br/>test
<br/>test
<br/>test
<br/>
</fieldset>
<div class="rightFieldSets">
<fieldset>test2</fieldset>
<fieldset class="bottomRightFieldSet">test3</fieldset>
</div>
css:
.rightFieldSets {
float:left;
width:34%;
}
.rightFieldSets fieldset {
clear:left;
width:89%;
}
.leftFieldSet {
width:62%;
float:left;
margin-right:1px;
}
.bottomRightFieldSet {
margin-top:6px;
}
here is the a link:
http://jsfiddle.net/bbryK/
My solution assumes two things:
The right column has a fixed width.
The left column must always be the highest.
See http://jsfiddle.net/c3AFP/2/
Html structure:
<div class="container">
<div class="right">
<fieldset class="top"></fieldset>
<fieldset class="bottom"></fieldset>
</div>
<fieldset class="left"></fieldset>
</div>
Css styles:
.container {
position: relative;
}
.top, .bottom {
width: 300px;
}
.left {
margin-right: 300px;
}
.right {
float: right;
margin-left: 10px;
}
.bottom {
position: absolute;
bottom: 0;
}
EDIT:
Here is a solution with the right column sized by percentage: http://jsfiddle.net/c3AFP/5/
EDIT 2:
Here is a table based solution which removes the requirement of the left column being the tallest. Using vertical-align you can adjust where the smaller elements should align in relation to the tallest one: http://jsfiddle.net/c3AFP/7/
I'm giving you a start point on fiddle. Please play around, make some code and do share the same.
http://jsfiddle.net/vY462/
#one{width:200px;height:70px;border:2px solid black;float:left;}
#two,#three{width:200px;height:25px;border:2px solid black;float:right;margin-top:5px;}
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
I want to make a grid of divs that are the size of the viewport. Just to set a few basic variables, lets say I want it to be 7 divs wide and 10 divs high.
Here is a code I have so far to set the div size:
function height() {
var height = $(window).height();
height = parseInt(height) + 'px';
$(".page").css('height',height);
}
$(document).ready(function() {
height();
$(window).bind('resize', height);
});
function width() {
var width = $(window).width();
width = parseInt(width) + 'px';
$(".page").css('width',width);
}
$(document).ready(function() {
width();
$(window).bind('width', width);
});
Right now I just have 2 divs that are stacked on top of each other. One is red and one is black, just so I can see them. I want to be able to put content inside the divs. I also made sure to put
body {
margin: 0px;
}
Later I am going to put some scrolling features with jQuery but for now I just want a way to make the grid.
Edit:
Each individual div is the size of the viewport
Edit:
I used this handy plugin for the scrolling that is much better then a small script at the end of the page
You won't need any javascript for this as it can be easier achieved with just CSS.
HTML
<div id="content1">
Place your content here.
</div>
<div id="content2">
Place your content here.
</div>
<div id="content3">
Place your content here.
</div>
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
#content1,#content2,#content3 {
min-height: 100%;
height: auto !important; /*min-height hack*/
height: 100%; /*min-height hack*/
}
EXAMPLE 1
All 3 divs have the size of the browser window and of course they adjust accordingly. Also you can add a anchor link to navigate from tab to tab with again just html/css
Go to Main Element
If a navigation like this is something you would like to have then you can have a look on the
EXAMPLE 2
PS: in the example i have separated the css of the boxes just to put different colors but you can have it as i posted it above.
I've also created another fiddle for you, as my first two versions were missing something...You asked for a couple of divs vertically and a couple horizontally.
EXAMPLE 3
This example has 3x2 divs (6 total) but with the same logic you can make them 7x10.
Please don't hesitate to ask if you don't understand anything in the code.
Also i've added a bit of jQuery to make the scrolling more smooth, which is optional, you can just remove it
JavaScript (don't forget to include jQuery)
var $root = $('html, body');
$('a').click(function () {
$root.animate({
scrollLeft: $($.attr(this, 'href')).offset().left,
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
return false;
});
Hope this helps you
EDIT: You need to include jQuery in your code and also wrap the javascript code with:
$(window).load(function(){
});
I can't tell if you want the div to be the entire size of the screen and then have the overflow scroll - and shoot over to the next panel, or if you want your grid of divs to be the size of the viewport. If it's the second, here is my answer.
fiddle is here:
HTML
<div class="block">01</div>
<div class="block">02</div>
<div class="block">03</div>
<div class="block">04</div>
<div class="block">05</div>
<div class="block">06</div>
<div class="block">07</div>
<div class="block">etc. (to 70)</div>
CSS
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
margin: 0;
}
html {
height: 100%;
background-color: orange;
}
body {
height: 100%;
border: 1px solid blue;
}
.block {
width: 14.285714%%; /* 100/7 */
float: left;
height: 10%; /* 100/10 */
border: 1px solid rgba(255,255,255,.5);
}
Now, If that's not what you wanted, maybe this is.
fiddle is here:
HTML
<div id="content1" class="block">
<h2>block 01</h2>
</div>
<div id="content2" class="block">
<h2>block 02</h2>
</div>
<div id="content3" class="block">
<h2>block 03</h2>
</div>
<div id="content4" class="block">
<h2>block 04</h2>
</div>
<div id="content5" class="block">
<h2>block 05</h2>
</div>
<div id="content6" class="block">
<h2>block 06</h2>
</div>
<div id="content7" class="block">
<h2>block 07</h2>
</div>
<div id="content8" class="block">
<h2>block 08</h2>
</div>
<!-- you'll need 70... ? -->
<nav class="global-nav">
01
02
03
04
05
06
07
08
</nav>
CSS ( a little SASS in here for quickness )
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
}
html, body {
height: 100%;
}
html {
width: 700%;
/* overflow: hidden; */
/*This would hide the scroll bars but I'm leaving them for you to see */
}
.block {
min-height: 100%;
height: auto !important; /*min-height hack*/
height: 100%; /*min-height hack*/
width: 100%/7; /* SASS division to be quick*/
float: left;
border: 1px solid red;
}
.global-nav {
position: fixed;
bottom: 0;
left: 0;
}
.global-nav a {
display: block;
color: black;
}