I'm trying to create a div with four divs that can be resized on drag from the corners in the center of the parent div while maintaining their aspect ratio. In addition to this I want the child divs to always fit within the parent, i.e. when one child is enlarged the others are made smaller to fit within the parent. Image explaining what I want
Here is my code so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Resize</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<style>
#container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 2px;
border: 10px #333 solid;
justify-content: center;
width: 1000px;
height: 758px;
}
.resizable {
justify-items: stretch;
border: 2px solid navy;
aspect-ratio: 1000/758;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
<body>
<div id="container">
<div class="resizable" ></div>
<div class="resizable" ></div>
<div class="resizable" ></div>
<div class="resizable" ></div>
</div>
<script>
$( function() {
$( ".resizable" ).resizable({
containment: "#container",
});
} );
</script>
</body>
</html>
Related
I have a basic html document with a sticky header and footer. I also have a div below the header that sticks to the header because it will eventually contain some tabs above a form. I have tried to align the form below this vertically but they don't line up. The problem is the tab div does not have a scrollbar but the form does. This means the width of the form is different to the width of the tabs. I tried to set them to 70% of the width and center but, because of the scrollbar they don't line up. I've tried some javascript to get the width of the scrollbar and then add this to the current right margin but it doesn't work. You will see the form is not as wide as the tabs div. I have spent hours on this.
Also, I tried adding a margin-bottom to the form but no margin appears below the border.
$(document).ready(function () {
setFormsWidth();
});
function setFormsWidth() {
let scrollbox = document.createElement('div');
// Make box scrollable
scrollbox.style.overflow = 'scroll';
// Append box to document
document.body.appendChild(scrollbox);
// Measure inner width of box
scrollBarWidth = scrollbox.offsetWidth - scrollbox.clientWidth;
// Remove box
document.body.removeChild(scrollbox);
// Get current width of right margin, which should be 30% of the
// width of the form-panel parent (the content class).
var formPanel = document.getElementById("main-form");
// Get the current right margin and remove the px at end of number
var style = window.getComputedStyle(formPanel);
var marginRightString = style.getPropertyValue('margin-right');
var marginRight = marginRightString.slice(0,-2);
// now addthe scrollBarWidth to the right margin
var newMargin = marginRight + scrollBarWidth;
formPanel.style.marginRight = newMargin + "px";
}
html, body {
height: 100%;
margin: 0;
overflow:hidden;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.header, .footer {
background: silver;
}
.page {
flex: 1;
overflow: auto;
background: pink;
}
.content {
background-color: green;;
}
.tabs {
width: 70%;
height: 50px;
background-color: aqua;
margin: 0 auto;
border-bottom: solid #FE6D73 7px;
}
.form-panel {
width: 70%;
height: 1000px;
background-color: #FFF;
margin: 0 auto;
overflow-y: auto;
border-bottom: solid #FE6D73 7px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="tabs">
THIS IS TAB
</div>
<div class="page" id="calculator">
<div style="height:1000px;">
<div class="content">
<form class="form-panel" id="main-form">THIS IS FORM</form>
</div>
</div>
</div>
<div class="footer">Footer</div>
</div>
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>
</html>
I suggest to show the scrollbar besides .form-panel element but not .page div, so it will not affect centering .form-panel element.
Here is how to change the css.
Set height to 100% for all elements between .page and .form-panel elements, including .form-panel itself, so that scrollbar for .page will not be shown
Set box-sizing: border-box; for .form-panel, so that the border is drawn inside .form-panel
move .footer outside .page element
If you would like to set a specific height for .form-panel, you can create a div inside it and set its height like below:
html, body {
height: 100%;
margin: 0;
overflow:hidden;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.header, .footer {
background: silver;
}
.page {
flex: 1;
overflow: auto;
background: pink;
}
.content {
background-color: green;
height: 100%;
}
.tabs {
width: 70%;
height: 50px;
background-color: aqua;
margin: 0 auto;
border-bottom: solid #FE6D73 7px;
}
.form-panel {
width: 70%;
height: 100%;
background-color: #FFF;
margin: 0 auto;
overflow-y: auto;
border-bottom: solid #FE6D73 7px;
padding-bottom: 7px;
box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="tabs">
THIS IS TAB
</div>
<div class="page" id="calculator">
<div style="height:100%;">
<div class="content">
<form class="form-panel" id="main-form">
<div style="height:1000px">
THIS IS FORM
</div>
</form>
</div>
</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
I'm learning the CSS grid and trying to position the items inside the grid?
can get and see data from javascript:
const profileImg = document.createElement('img');
var profilePhotoUrl = post.user.get("photo").url();
profileImg.src = profilePhotoUrl;
profileImg.className = "profile";
const username = document.createElement('username');
username.className = "user";
username.innerText = post.name;
const content = document.querySelector('.content');
content.append(profileImg, username);
putting a full CSS here:
body, html {
margin: 0;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
}
body {
display: grid;
margin: 0;
grid-template-columns: 20% auto;
grid-template-rows: 60px auto 100px;
grid-template-areas:
"header header"
"sidebar content"
"sidebar footer";
}
header {
position: sticky;
grid-area: header;
background-color: rgb(0, 0, 0);
}
aside {
grid-area: sidebar;
background-color: lightsteelblue;
}
.content {
display: inline-flex;
align-items: center;
}
footer {
grid-area: footer;
background-color: rgb(121, 121, 121);
padding: 10px;
}
.user {
grid-area: user;
font-size: 10pt;
}
.profile {
grid-area: profile;
}
HTML:
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<aside>
<ul>
<li>home</li>
<li>about</li>
<li>service</li>
<li>contact</li>
</ul>
</aside>
<header>
<h1>Diky</h1>
</header>
<div class="content">
</div>
<footer>
<p>this is my footer</p>
</footer>
<script src="app.js"></script>
</body>
</html>
And it looks like this. How can I position them vertically?
How can I position elements that are created from javascript?
(profile username) <--like this
(profile username)
(profile username)
Firstly, I'd recommend not to use flexbox with grid, for the same purpose, as it ruins your understanding of grid.
Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* Main grid container styling */
.grid-container{
display: grid;
/* This is used for the position into 3 columns */
grid-template-columns: 1fr 1fr 1fr;
/* For the margin between the three items */
grid-gap: 1rem;
/* For centering of items */
justify-content: center;
align-items: center;
}
/* For styling of grid items */
.grid-container-items{
height: 200px;
width: 200px;
background: red;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-container-items"></div>
<div class="grid-container-items"></div>
<div class="grid-container-items"></div>
</div>
</body>
</html>
I am trying to increase height of div on button click. I am facing an issue my div is increase from bottom (default behaviour). But I want my div bottom with remain contain. It show from top.
In my example I have two div yellow and white. On button click, I am increasing the height of white box. But it is increase from down direction. I need it grows from top.
Here is my code:
https://codesandbox.io/s/still-lake-lw07u?file=/index.html
<body>
<div class="parent">
<div class="abc">
<div class="img"></div>
<div class="content"></div>
</div>
</div>
<button onclick="abc()">click</button>
<script>
function abc() {
document.querySelector(".content").style.height = "300px";
}
</script>
</body>
Unclear of final design, but you might try this:
function abc() {
const sel = document.querySelector(".content");
sel.style.height = "300px";
sel.style.position = 'absolute';
sel.style.bottom = '0px';
}
You can use the transform: scaleY(val) and transform-origin: bottom to resize and from where your element.
.abc {
width: 80%;
margin: auto;
display: grid;
grid-template-columns: repeat(10, [col-start] 1fr);
grid-template-rows: repeat(8, [row-start] 1fr);
padding-top: 3.4em;
padding-bottom: 3.4em;
}
.img {
grid-column: col-start / span 8;
grid-row: row-start / span 6;
background-size: cover;
max-width: 1074px;
max-height: 200px;
background-color: #ee0;
}
.content {
grid-column: col-start 6 / span 6;
grid-row: row-start 2 / span 6;
background: #fff;
min-height: 100px;
border: 1px solid blue;
padding: 3em;
}
.bigger {
transform: scaleY(2);
transform-origin:bottom;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<style>
</style>
</head>
<body>
<div class="parent">
<div class="abc">
<div class="img"></div>
<div class="content"></div>
</div>
</div>
<button onclick="abc()">click</button>
<script>
function abc() {
document.querySelector(".content").classList.add('bigger');
}
</script>
</body>
</html>
Another version:
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/>
<title> Test Page </title>
<!-- link rel="stylesheet" href="common.css" media="screen" -->
<!-- From: https://stackoverflow.com/questions/69050335/how-to-increase-height-of-div-from-top-not-from-bottom/69050592#69050592 -->
<style>
.content { background-color: pink; width: 10em; }
.asterisk { height: 300px; }
</style>
</head><body>
<div class="parent">
<div class="abc">
<div class="img">Image</div>
<div class="content">Content</div>
</div>
</div>
<button onclick="abc()">click</button>
<script>
function abc() {
const sel = document.querySelector(".content");
var div = document.createElement('div');
// div.innerHTML = '*';
div.className = 'asterisk';
sel.parentNode.insertBefore(div, sel);
}
</script>
</body></html>
I am new to JQuery and am trying to create a product slider for my website. I was having some troubles so I made a basic version of it in this question. For some reason I am having no luck in getting it to work and have no idea why.
The three product boxes will animate as a section rather than individually, similar to this one https://smartslider3.com/product-carousel/. The animation will go from right to left when clicking the previous button and left to right when clicking the next button but I have just left it as slide up and slide down at the moment because I don't know the correct code for the animation. Touch swipe support would also be nice to have.
$( document ).ready(function() {
$("#slider-next-button").click(function(){
var currentSlider = $(".active");
var nextSlide = currentSlider.next();
currentSlider.slideDown(2000);
currentSlider.removeClass(active);
nextSlide.slideUp(2000);
nextSlide.slideUp(2000);
})
});
;
.content{
width: 80%;
margin: auto;
}
.slider-section{
background-color: lightgrey;
height: 600px;
padding: 50px 0px 0px 0px;
}
.slider-container{
display: grid;
grid-template-columns: 1fr 12fr 1fr;
grid-column-gap: 20px;
}
.slider-previous-button{
height: 40px;
border-radius: 20px;
background-color: grey;
cursor: pointer;
}
.slider-next-button{
height: 40px;
border-radius: 20px;
background-color: grey;
cursor: pointer;
}
.slider-items{
display: none;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 20px;
}
.slider-items.active{
display: grid;
}
.slider-item{
background-color: blue;
height: 400px;
}
<!DOCTYPE html>
<html>
<head>
<title>Slider Test</title>
<link rel="stylesheet" type="text/css" href="css/slidertest.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/slidertest.js"></script>
</head>
<body>
<div class="slider-section">
<div class="content">
<div class="slider-container">
<div class="slider-previous-button"><p></p></div>
<div class="slider-items active">
<div class="slider-item">1</div>
<div class="slider-item">2</div>
<div class="slider-item">3</div>
</div>
<div class="slider-next-button"><p></p></div>
<div class="slider-items">
<div class="slider-item">4</div>
<div class="slider-item">5</div>
<div class="slider-item">6</div>
</div>
<div class="slider-items">
<div class="slider-item">7</div>
<div class="slider-item">8</div>
<div class="slider-item">9</div>
</div>
</div>
</div>
</div>
</body>
</html>
How does facebook vertically align its photos? I inspected their img tag and its parent. The parent doesn't use padding and the img doesn't use margins. There is vertical-align, but I don't think it applies in this case(see Image not vertical-align:middle). I normally vertically align using margins (and sometimes with javascript) so I'm interested in how facebook does it without padding or margins. Does anyone know how they do it?
After doing some research in facebook's website i found the answer,here is the code
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.img_contain {
height: 700px;
text-align: center;
line-height: 700px;
border: #333333 1px solid;
}
.img_contain img {
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="img_contain">
<img src="images/image.jpg" />
</div>
</body>
</html>
Only thing i was missing is adding <!DOCTYPE html> at the top of the document.Now its working.
And one more thing the height and line-height of the parent should be equal and it should be greater than height of the image it contains
TESTED CODE using display: table-cell
*refer to http://www.w3schools.com/cssref/pr_class_display.asp*
test page at http://anotherfeed.com/stack/css/valign.php
<!DOCTYPE html>
<html>
<head>
<title>StackOverflow on Another Feed</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<div style="height: 500px; min-height: 500px; width: 500px; border: 1px solid; display: table-cell; vertical-align: middle; text-align: center">
<img src="http://anotherfeed.com/facebook_icon.png" style="display: inline-block; margin-left: auto; margin-right: auto;" />
</div>
</body>
</html>