How to set image size relative to other element [duplicate] - javascript

This question already has answers here:
How can you set the height of an outer div to always be equal to a particular inner div?
(2 answers)
Closed 2 years ago.
I got a div containing an unordered list and an image.
Currently, the image is bigger, thus increasing the size of the div.
I want the image to have the same height as the unordered list, like this:
How can I do this using HTML/CSS/js?
.container {
display: flex;
}
.list {
list-style-type: none;
}
.picture{
max-width: 100%;
height: auto;
}
<div class="container">
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/Sample_abc.jpg" class="picture" />
</div>
</div>
Example:
https://jsfiddle.net/ck26ybg4/

There is another way to get rid of img and add a picture as a background image, for example:
.container {
width: 50%;
display: grid;
grid-auto-flow: column;
border: 1px solid red;
margin-bottom: 10px; /* demo only */
}
.list {
margin: 0;
padding: 0;
}
.picture{
border: 1px solid green;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
<div class="container">
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div class="picture" style="background-image:url(https://via.placeholder.com/728x90.png)"></div>
</div>
<div class="container">
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div class="picture" style="background-image:url(https://via.placeholder.com/728x90.png)"></div>
</div>

You can just make the picture container relative and add position: absolute to the image, so it won't affect the flow of the document.
.container {
display: flex;
}
.picture-container {
position: relative;
}
.picture{
position: absolute;
height:100%;
}
<div class="container">
<ul class="list">
<li>Point</li>
<li>Point</li>
<li>Point</li>
</ul>
<div class="picture-container">
<img class="picture" src="https://dummyimage.com/150/efefef/242424"></img>
</div>
</div>

You can use object-fit so the image adapts to the container
The object-fit property defines how an element responds to the height and width of its content box.
For example .picture { object-fit: 'fill' }

Related

Position child element directly under and justified right to the parent element

I am creating a dropdown menu component using React. I would like to know the CSS required to position the menu element directly under the ".menu-trigger" button, with its right border aligned to its parent's (".menu-container"), right border. I would like this CSS to be able to position a menu element of any reasonable size like this.
I believe I want to position the ".menu" component absolutely, relative to the parent, ".menu-container", element.
Below is a stripped down version of html and css:
<body>
<div className="menu-container">
<button className="menu-trigger">
<span>Drop Down Menu</span>
</button>
<nav className="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
</div>
</body>
<style>
.menu ul {
list-style: none;
}
.menu-container {
position: relative;
display: inline-block;
}
.menu {
position: absolute;
top: 100%;
}
</style>
**** Edit ****
Solved using flexbox solution:
.menu-container {
display: inline-flex;
flex-direction: column;
align-items: flex-end;
}
Here's how to right-align using flexbox:
.menu-container {
width: 50%;
display: flex; /* flexbox container */
flex-direction: column; /* children in columns */
align-items: flex-end; /* children right-aligned */
background-color: #e0e0e0;
}
.menu-trigger {}
.menu {
background-color: #c0c0c0;
}
.menu ul {
list-style: none;
margin: 0 .5rem;
}
<body>
<h4>Right-alignment using flexbox</h4>
<div class="menu-container">
<button class="menu-trigger">
<span>Drop Down Menu</span>
</button>
<nav class="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
</div>
</body>

jQuery: "data-target" toggle function – show only one content area

In general, my code (below) works. But: If you click at first "Link 1", and then for example "Link 2", only the content for Link 2 should be visible.
How is it possible to code that?
$("li").click(function() {
$($(this).data("target")).toggle();
// hide all other content areas
})
body {
display: flex;
cursor: default;
}
.left,
.right {
width: 50%;
height: 100vh;
overflow-y: scroll;
}
.left {
background-color: azure;
}
.content {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left">
<ul>
<li data-target=".one">Link 1</li>
<li data-target=".two">Link 2</li>
<li data-target=".three">Link 3</li>
</ul>
</div>
<div class="right">
<div class="content one">Content for Link 1</div>
<div class="content two">Content for Link 2</div>
<div class="content three">Content for Link 3</div>
</div>
Would be very thankful for help! <3
If you're looking to keep the ability to toggle the one you clicked, you can use
var target = $($(this).data("target"));
$(".content").not(target);
target.toggle();
to find all the content divs except the target one.
If you just want to show the clicked one then you can hide all the others, (as provided in the other answer).
Updated snippet:
$("li").click(function() {
var target = $($(this).data("target"));
$(".content").not(target).hide();
target.toggle();
})
body {
display: flex;
cursor: default;
}
.left,
.right {
width: 50%;
height: 100vh;
overflow-y: scroll;
}
.left {
background-color: azure;
}
.content {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left">
<ul>
<li data-target=".one">Link 1</li>
<li data-target=".two">Link 2</li>
<li data-target=".three">Link 3</li>
</ul>
</div>
<div class="right">
<div class="content one">Content for Link 1</div>
<div class="content two">Content for Link 2</div>
<div class="content three">Content for Link 3</div>
</div>
You're targetting a single <div> each time... there's nothing in your code to "reset" the other ones.
Try this, which first hides all the <div> elements, and then shows your selected one...
$("li").click(function() {
$(".content").hide();
$($(this).data("target")).show();
})
$("li").click(function() {
$(".content").hide();
$($(this).data("target")).show();
})
body {
display: flex;
cursor: default;
}
.left,
.right {
width: 50%;
height: 100vh;
overflow-y: scroll;
}
.left {
background-color: azure;
}
.content {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left">
<ul>
<li data-target=".one">Link 1</li>
<li data-target=".two">Link 2</li>
<li data-target=".three">Link 3</li>
</ul>
</div>
<div class="right">
<div class="content one">Content for Link 1</div>
<div class="content two">Content for Link 2</div>
<div class="content three">Content for Link 3</div>
</div>
Note, if you need the content to disappear if you click the <li> a second time, this will not work, as it will always show the item you've clicked.
If you need it to disappear, see the answer by freedomn-m

Sidebar With Expanding Menus. [Diagram Provided]

I have spent about an hour trying to find a solution that can work, however, none of them come close to my desired goal. I am not expecting someone to spend the time creating it for me (its a lot of work), but I want to know how I can achieve it. Links or js fiddle would be amazing.
So this sidebar I am working on. It should have three states.
The first and second state show up on table onwards.
The default state is when the sidebar is loaded.
The second state is what happens when the user clicks on one of the icon images that are seen in the first image. It now expands to show the additional navigation. (Ex. Icon says Friends, and the new menu that appears has a list of like 10 people).
The Third state only appears on mobile. It basically eliminated the icon sidebar seen in the Default State (first image)
I appreciate any advice on how to solve this. I have tried so many different things and none come close to what I want.
Is this what you are looking for?
var titles = $('.title');
titles.each(function() {
$(this).on('click', function() {
$(this).next().toggleClass('active')
})
});
$('.toggle').on('click', function() {
$('.sidebar').toggleClass('hide');
});
.toggle {
position: fixed;
z-index: 1000;
}
.sidebar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 200px;
padding-top: 20px;
border-right: 1px solid black;
}
.group {
margin-top: 16px;
}
.title {
cursor: pointer;
border-bottom: 1px dashed black;
}
.list {
max-height: 0;
overflow: hidden;
}
.list li {
margin-top: 4px;
}
.active {
max-height: 400px;
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle">Button</button>
<div class="sidebar">
<section class="group">
<h3 class="title">Click me first.</h3>
<ul class="list">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</section>
<section class="group">
<h3 class="title">Maybe click me.</h3>
<ul class="list">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</section>
<section class="group">
<h3 class="title">Nope - click me!</h3>
<ul class="list">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</section>
</div>

Setting up an offset with anchor tags for a div

I have made a single page which has a navbar and with links pointing to section id in the page.
However, when I click on the link the section of the page scrolls down till the top of the section and due to my sticky navbar, the top part of my section goes behind it.
How do I create an offset height which would match my navbar height so that the div is visible at the right position?
Here is my a screenshot of what is happening.
Also, is there a way to smoothly scroll till the section? What is the easiest method to achieve this?
My example code:
HTML:
<nav>
<ul>
<li>Section 1</li>
<li>Sction 2</li>
<li>Section 3</li>
</ul>
</nav>
<div id="section1">Section 1</div>
<div id="section2">Section 2</div>
<div id="section3">Section 3</div>
Offsetting anchor hash tag links to adjust for fixed header
HTML :
Goto Section I
<!-- Some more content -->
<h3 id="section1" class="offset">Section I</h3>
<p>Section specific content</p>
CSS:
.offset:before {
display: block;
content: " ";
height: 150px; /* Give height of your fixed element */
margin-top: -150px; /* Give negative margin of your fixed element */
visibility: hidden;
}
Give padding-top to that section which is equal to the header height. Like if your header has a height: 40px then give padding-top: 40px to that section.
Have a look at the snippet below:
body {
margin: 0;
padding-top: 50px;
}
nav {
background: #eee;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
li {
padding: 15px;
}
.sec {
height: 200px;
margin-bottom: 30px;
background: #ff0;
padding-top: 48px;
}
<nav>
<ul>
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
</nav>
<div id="section1" class="sec">Section 1</div>
<div id="section2" class="sec">Section 2</div>
<div id="section3" class="sec">Section 3</div>
Hope this helps!

Why My tab code Not working perfectly?

I trying to apply Tab concept to my web page.e.g for tab names are Monday...Tue.. upto sunday. each tab are contains one image file based on the days (size 460*620).when i run my page it shows all images, what i need is as per the tab image will be display. but here shows all images.
HTML:
<!--tab code-->
<div class="tabs" style="margin-top:100px;">
<ul>
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
</ul>
<div class="tabInner">
<div id="item1"> <img src="order/Order/image/daily_buffet/40820-sunday.png"/></div>
<div id="item2"> <img src="order/Order/image/daily_buffet/50557-tuesday.png"/></div>
<div id="item3"> blabla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3 </div>
</div>
</div>
<!--end of tab code-->
CSS:
<!--tab code-->
.tabs ul {
list-style: none;
}
.tabs ul li {
float: left;
background: #eee;
border: 1px #aaa solid;
border-bottom: none;
margin-right: 10px;
padding: 5px;
}
.tabs ul li.active {
margin-bottom: -1px;
padding-bottom: 6px;
}
.tabInner {
clear: both;
border: 1px solid #aaa;
height: 200px;
overflow: hidden;
background: #eee;
}
.tabInner div {
height: 200px;
padding: 10px;
}
<!--end of tab code-->
Try this, its working for me. Have you included Jquery into your project? check that once or update the hosted URL.
html
<!--tab code-->
<div class="tabs" style="margin-top:100px;">
<ul>
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
</ul>
<div class="tabInner">
<div id="item1"> <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/></div>
<div id="item2"> <img src="http://sites_jupiterbase2.jumbowp.com/wp-content/uploads/2014/08/thumbnail-placeholder-Copy.jpg"/></div>
<div id="item3"> blabla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3bla3 </div>
</div>
</div>
<!--end of tab code-->
https://jsfiddle.net/hpx0ymcL/1/

Categories