Keep image aspect ratio and inside a div - javascript

I want to have an image inside a div (the violet one, see images below), whose dimensions are expressed in %, and that the image never go out from the div but resize when needed, keeping the aspect ratio.
Currently, my code is the following but the image comes out from the div as you can see in the pictures below.
html {
min-height: 100vh;
position: relative;
}
body {
height: 100vh;
overflow: hidden;
}
#grille {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
flex-direction: row;
display: flex;
background-color: red;
}
#colonne {
width: calc(100% / 3);
height: 100%;
background-color: green;
}
#cellule {
flex-direction: column;
width: 100%;
height: calc(100% / 3);
background-color: aqua;
}
#conteneurImage {
width: 100%;
height: 80%;
background-color: violet;
}
#conteneurImage img {
width: 100%;
height: auto;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="table.css" />
</head>
<body>
<div id="grille">
<div id="colonne">
<div id="cellule">
<div id="conteneurImage">
<img src="home.png">
</div>
<div id="conteneurTexte">
Accueil
</div>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
The result:
What I expect:

You can use "display: flex; justify-content: center; " in #conteneurImage. And then Use "width:auto;height:100%;" in #conteneurImage img.You can learn more about flex in https://css-tricks.com/snippets/css/a-guide-to-flexbox/
html {
min-height: 100vh;
position: relative;
}
body {
height: 100vh;
overflow: hidden;
}
#grille {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
flex-direction: row;
display: flex;
background-color: red;
}
#colonne {
width: calc(100% / 3);
height: 100%;
background-color: green;
}
#cellule {
flex-direction: column;
width: 100%;
height: calc(100% / 3);
background-color: aqua;
}
#conteneurImage {
width: 100%;
height: 80%;
background-color: violet;
display:flex;
justify-content: center;
}
#conteneurImage img {
width: auto;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="table.css" />
</head>
<body>
<div id="grille">
<div id="colonne">
<div id="cellule">
<div id="conteneurImage">
<img src="https://image.flaticon.com/icons/svg/2/2144.svg">
</div>
<div id="conteneurTexte">
Accueil
</div>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>

Related

Js window resize changing element width based on another elemnt width

So i need change blue square element width when my screen size below 520px evry time i am resising the window.
The blue square should get green square width, but green square width style should be in percents.
Nothing works the way i am doing it :(
window.addEventListener('resize', ()=> {
if (screen.width < 520) {
const boxElement = document.getElementsByClassName('box')[0].clientWidth,
changingElement = document.getElementsByClassName('changing__width__element')[0];
changingElement.style.width = `${boxElement}px`;
}
}, true);
body,html{
width: 100%;
height: 100%;
}
.box{
width: 80%;
height: 80%;
left: 10%;
top: 10%;
background: lime;
display: flex;
position: relative;
align-items: center;
justify-content: center;
}
.changing__width__element{
width: 50px;
height: 50px;
background: blue;
position: relative;
}
<body>
<div class="box">
<div class="changing__width__element"></div>
</div>
</body>
If you don't want to go the CSS route, which is probably the easiest solution, don't use screen.width, use window.innerWidth, you can read more about the difference here: what-is-the-difference-between-window-innerwidth-and-screen-width
window.addEventListener('resize', ()=> {
const boxElement = document.getElementsByClassName('box')[0].clientWidth,
changingElement = document.getElementsByClassName('changing__width__element')[0];
if (window.innerWidth < 520) {
changingElement.style.width = `${boxElement}px`;
} else {
changingElement.style.width = "50px";
}
}, true);
body,html{
width: 100%;
height: 100%;
}
.box{
width: 80%;
height: 80%;
left: 10%;
top: 10%;
background: lime;
display: flex;
position: relative;
align-items: center;
justify-content: center;
}
.changing__width__element{
width: 50px;
height: 50px;
background: blue;
position: relative;
}
<body>
<div class="box">
<div class="changing__width__element"></div>
</div>
</body>
There is no need to use JavaScript for it. Just use a media query and change the width to 100% if the size of the window is smaller than 520px.
Changing something based on the screen size is normally not that useful.
body,
html {
width: 100%;
height: 100%;
}
.box {
width: 80%;
height: 80%;
left: 10%;
top: 10%;
background: lime;
display: flex;
position: relative;
align-items: center;
justify-content: center;
}
.changing__width__element {
width: 50px;
height: 50px;
background: blue;
position: relative;
}
#media (max-width: 520px) {
.changing__width__element {
width: 100%;
}
}
<body>
<div class="box">
<div class="changing__width__element"></div>
</div>
</body>
Generally, if you design something it is recommended to use "mobile-first" (or better small window first), and add complexity with larger window sizes:
body,
html {
width: 100%;
height: 100%;
}
.box {
width: 80%;
height: 80%;
left: 10%;
top: 10%;
background: lime;
display: flex;
position: relative;
align-items: center;
justify-content: center;
}
.changing__width__element {
width: 100%;
height: 50px;
background: blue;
position: relative;
}
#media (min-width: 520px) {
.changing__width__element {
width: 50px;
}
}
<body>
<div class="box">
<div class="changing__width__element"></div>
</div>
</body>

I want to display hidden buttons with js

I have this web page in construction, that should have a button that displays more buttons, but for some reason I don't know, these on hover hidden buttons don't appear (I've used this: https://es.stackoverflow.com/questions/126579/como-se-crea-un-bot%c3%b3n-que-despliegue-mas-botones). Any one know how to make this buttons appear? it seems to work fine with the snippet, then: what can be the problem? I whant it to be in separated files.
var flag = false;
$("#botones").mouseenter(function() {
if (!flag) {
flag = true;
$("#resto").show(200, function() {
flag = true;
});
}
}).mouseleave(function() {
$("#resto").hide(200);
});
* {
margin: 0px;
padding: 0px;
}
div#general {
margin: auto;
display: grid;
margin-top: 0%;
width: 100%;
height: 100%;
background-color: #4f6d7a;
}
div#enlaces {
float: center;
display: center;
width: 100%;
height: 100px;
background-color: #166088;
}
div#tablas_carpetas {
position: relative;
display: flex;
flex-wrap: wrap;
width: 100%;
height: 1400px;
background-color: #DBE9EE;
}
div#tablas {
order: 1;
position: static;
background-color: #dfc0c0;
height: 600px;
width: 40%;
}
div#carpetas {
order: 2;
width: 60%;
height: 600px;
background-color: green;
}
#media all and (max-width: 450px) {
div#tablas_carpetas {
display: grid;
}
div#tablas {
width: 100%;
order: 1;
}
div#carpetas {
width: 100%;
order: 2;
}
}
<!doctype html>
<html lang="es">
<head>
<title>Viewer</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="index_style_viewer.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="botones.js"></script>
</head>
<body>
<div id="general">
<div id="enlaces">
</div>
<div id="tablas_carpetas">
<div id="tablas">
</div>
<div id="carpetas">
<div id="botones" onmouseover="">
<button id="principal_1">Redes Sociales</button>
<div id="resto" hidden>
<button>Facebook</button>
<button>Twitter</button>
<button>LinkedIn</button>
<button>Gooogle</button>
</div>
</div>
</div>
</div>
<div id="anuncios">
</div>
<div id="pie">
</div>
</div>
</body>
</html>
you have issue with your js condition i simply tried with jquery it works perfectly
$(document).ready(function(){
$("#botones").mouseenter(function(){
$("#resto").show();
});
$("#botones").mouseleave(function(){
$("#resto").hide();
});
});
* {
margin: 0px;
padding: 0px;
}
div#general {
margin: auto;
display: grid;
margin-top: 0%;
width: 100%;
height: 100%;
background-color: #4f6d7a;
}
div#enlaces {
float: center;
display: center;
width: 100%;
height: 100px;
background-color: #166088;
}
div#tablas_carpetas {
position: relative;
display: flex;
flex-wrap: wrap;
width: 100%;
height: 1400px;
background-color: #DBE9EE;
}
div#tablas {
order: 1;
position:static;
background-color: #dfc0c0;
height: 600px;
width: 40%;
}
div#carpetas {
order: 2;
width: 60%;
height: 600px;
background-color: green;
}
#media all and (max-width: 450px) {
div#tablas_carpetas {
display:grid;
}
div#tablas {
width: 100%;
order: 1;
}
div#carpetas {
width: 100%;
order: 2;
}
}
<!doctype html>
<html lang="es">
<head>
<title>Viewer</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="general">
<div id="enlaces">
</div>
<div id="tablas_carpetas">
<div id="tablas">
</div>
<div id="carpetas">
<div id="botones">
<button id="principal_1">Redes Sociales</button>
<div id="resto" hidden>
<button>Facebook</button>
<button>Twitter</button>
<button>LinkedIn</button>
<button>Gooogle</button>
</div>
</div>
</div>
</div>
<div id="anuncios">
</div>
<div id="pie">
</div>
</div>
</body>
</html>

Set a location that an element can be draggable at

I have a jquery function that allows an element to be draggable and resizeable and it works fine. What I wanted to add to it was to set a location in which the element can be draggable and resizable at. To be more specific I wanted to make my element draggable between the space in 2 lines (v1 and vh) in my code. Is there any way to achieve this? Any help is appreciated. Thanks in advance.
$(".box").mouseup(function () {
$(this).find('iframe').fadeIn('slow');
}).mousedown(function () {
$(this).find('iframe').hide();
});
$(function () {
$(".box")
.resizable()
.draggable();
});
.box {
display: flex;
justify-content: center;
align-items: center;
width: 32%;
height: 30%;
background-color: #2b2d2f;
color: black;
position: absolute;
top: 1%;
}
.box h4{
color: white;
font-size: 20px;
text-align:center;
}
.vl {
height: 100%;
position: absolute;
right: 5%;
top: 0;
background-color: red;
width: 2.5px;
height: 100%;
overflow: hidden;
}
.vh {
width: 100%;
position: absolute;
top: 75%;
background-color: red;
height: 2.5px;
width: 100%;
overflow: hidden;
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
</head>
<body>
<div class="box">
<h4>box</h4>
</div>
<div class="vl">
</div>
<div class="vh">
</div>
</body>
</html>
The draggable() jQueryUI component has a containment parameter. One of its signatures allows you to provide 4 co-ordinates which equate to the bounding box the draggable element should be restricted to.
To calculate this you can retrieve the left and top of the vertical and horizontal lines respectively, subtracting the width/height of the .box. Try this:
jQuery($ => {
let $box = $('.box');
let $vl = $('.vl');
let $vh = $('.vh');
$box
.resizable()
.draggable({
containment: [
8, // default body padding, amend as necessary
8, // default body padding, amend as necessary
Math.ceil(parseFloat($vl.css('left'))) - Math.floor(parseFloat($box.width())),
Math.ceil(parseFloat($vh.css('top'))) - Math.floor(parseFloat($box.height()))
]
});
});
.box {
display: flex;
justify-content: center;
align-items: center;
width: 32%;
height: 30%;
background-color: #2b2d2f;
color: black;
position: absolute;
top: 1%;
}
.box h4 {
color: white;
font-size: 20px;
text-align: center;
}
.vl {
height: 100%;
position: absolute;
right: 5%;
top: 0;
background-color: red;
width: 2.5px;
height: 90%;
overflow: hidden;
}
.vh {
position: absolute;
top: 75%;
background-color: red;
height: 2.5px;
width: 95%;
overflow: hidden;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<div class="box">
<h4>box</h4>
</div>
<div class="vl"></div>
<div class="vh"></div>
One approach is wrap the box in a container that fits within the area you want and use containment: "parent"
function getContainerDimensions() {
const buffer = 6 // used in demo to prevent borders overlap
return {
width: $('.vl').offset().left - buffer,
height: $('.vh').offset().top - buffer
}
}
$(function() {
const $cont = $('<div id="container">').css(getContainerDimensions())
$(".box").wrap($cont)
.resizable({containment: "parent"})
.draggable({containment: "parent"});
});
body {
padding: 0;
margin: 0
}
#container {
border: 2px solid green
}
.box {
display: flex;
justify-content: center;
align-items: center;
width: 32%;
height: 30%;
background-color: #2b2d2f;
color: black;
position: absolute;
top: 1%;
}
.box h4 {
color: white;
font-size: 20px;
text-align: center;
}
.vl {
height: 100%;
position: absolute;
right: 5%;
top: 0;
background-color: red;
width: 2.5px;
height: 100%;
overflow: hidden;
}
.vh {
width: 100%;
position: absolute;
top: 75%;
background-color: red;
height: 2.5px;
width: 100%;
overflow: hidden;
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
</head>
<body>
<div class="box">
<h4>box</h4>
</div>
<div class="vl">
</div>
<div class="vh">
</div>
</body>
</html>

How can I correct this JavaScript

I'm practising with JavaScript and hiding the image and the button. The footer keeps coming to the top of the page every time I execute the command. How can I correct this? I've tried many different options and I can't seem to get it to work right like position: sticky, bottom:0; for example.
I'm extremely new to this coding thing so I'm pretty sure I have no idea what I'm doing.
jQuery(document).ready(function() {
$(".myButton").click(function(){
$(".poem").show();
$(".resize").show();
$(".main-image").hide();
});
$(".resize").click(function(){
$(".poem").hide();
$(".resize").hide();
})
})
#charset "utf-8";
/* CSS Document */
.main-image {
display: block;
width: 25%;
margin-bottom: 30px;
}
.container {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 100%;
}
.overlay-content {
position: absolute;
bottom: 15%;
text-align: center;
width: 25%;
}
.resize {
position: absolute;
z-index: 1;
top: 0;
right: 0;
}
footer {
background-color: brown;
border: solid;
position: sticky;
bottom: 0;
}
.myButton {
margin-left: 50%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>practice_overlay</title>
<link href="Overlay.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="script_storage.js"></script>
</head>
<body>
<div class="container">
<p class="introduction">Lorem Ispum</p>
<img class="main-image" src="Devry Web Design Intro Course/Pictures/crystal-tear-3.jpg">
<div class="overlay-content">
<button class="resize">X</button>
<h1>Hello World</h1>
</div>
<p class="poem">Lorem Ispum</p>
</div>
<button class="myButton">X</button>
<footer>Lorem Ispum</footer>
</body>
</html>
You could use CSS grid - with the setup in the snippet below, you can "safely" work inside the div.outer part of the layout, without making the other parts of your page "jumping around" :)
jQuery(document).ready(function() {
$(".myButton").click(function() {
$(".poem").show();
$(".resize").show();
$(".main-image").hide();
});
$(".resize").click(function() {
$(".poem").hide();
$(".resize").hide();
})
})
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
display: grid;
grid-template-rows: calc(100vh - 30px) 30px;
grid-template-columns: 100%;
}
.outer {
background: gray;
padding: 8px 16px;
overflow-y: scroll;
display: flex;
flex-direction: column;
}
.container {}
#image {
height: 30px;
width: 30px;
}
.myButton {
margin: 0 auto;
}
footer {
background-color: brown;
padding: 8px 16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<div class="outer">
<div class="container">
<p class="introduction">Introduction</p>
<img id="image" src="https://picsum.photos/30" alt="small image" />
<div class="overlay-content">
<button class="resize">X</button>
<h1>Hello World</h1>
</div>
<p class="poem">Lorem Ispum</p>
</div>
<button class="myButton">X</button>
</div>
<footer>
footer
</footer>
</div>

Internet explorer viewport width units error with img tag

So I've made a page intro , in which there are to svg files , one inside which is colored a figure and another out which is only outlined. The figure has an overflow hidden and it has an animation to increase it's width.
Something like this:
<div>
<figure> <img /> </figure> <-- Overflow hidden>
<img /> <-- Only borders
</div>
It looks good on all browsers but IE
And I've been playing with the widths of all the containers but I couldn't make it fit and make it responsive. Any idea ?
(jsFiddle)
$(window).ready(function() {
$('figure').animate({
width: "100vw",
}, 3000, function() {});
});
body {
background-color: red;
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
}
html {
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
}
#loading {
height: 100%;
width: 50vw;
}
#loading figure {
position: absolute;
overflow: hidden;
width: 0vw;
margin: 0;
padding: 0;
height: 100%;
}
#loading img {
width: 50vw;
position: absolute;
top: 0;
}
#loading h4 {
text-align: center;
color: #fff;
font-size: 3em;
font-weight: 300;
position: absolute;
top: 25vh;
width: 50vw;
z-index: 2;
}
<body>
<div id="loading">
<figure>
<img src="http://imgh.us/test-color.svg">
</figure>
<img src="http://imgh.us/test_68.svg">
</div>
</body>
Add 100% height on #loading img
#loading img {
height: 100%;
...
}

Categories