vertically center div in page with sticky footer - javascript

I'm trying to vertically align a div in IE11. I have tried to use the answer of #billbad here
The difference between my axample and many other examples on the internet is that they don't use a sticky footer and I think is what is causing me the error.
HTML
<div class="wrapper">
<div class="art-header"></div>
<div class="outer-container">
<div class="middle-container text-center">
<div class="contner">
<button type="button" class="btn btn-primary text-center" (click)="addLine()">Primary</button>
<ul>
<li *ngFor="let line of name" >
{{ line }}
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="rmpm-footer">
<p>Footer</p>
</div>
</div>
A part of CSS
.contner {
min-height: 242px;
max-height: 100%;
width: 604px;
padding-top:10px;
background-color: #FFFFFF;
box-shadow: 0 1px 1px 1px rgba(0,0,0,0.1);
padding-bottom: 12px;
transition: max-height .4s;
-webkit-transition: .4s;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
}
.middle-container {
display: table-cell;
vertical-align: middle;
}
.outer-container {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
Actually the div is not well centred and footer height is resized. that's not what I'm looking for.
Expected behavior is when I add lines the div still centred then footer get down when the div became bigger than initial page height.
I have created a stackblitz example you can check directly my code there.

Try by using margin-topinstead display: table-cell
.middle-container {
margin-top: 40%;
}

Related

Scrollable part of page

I want to have a similar effect like on this page: https://melaniedaveid.com/ (half of the page is scrollable).
I can make a sticky box, but there are certain things that I don't know how to make, such as the text. The text must be bigger than the box, but if overflow: hidden, then it is not scrollable. If it's overflow: scroll, it scrolls only if the mouse is hovering over the section, but I want the mouse to be able to scroll anywhere on the page.
body {
display: flex;
}
.example {
width: 50%;
}
.block {
background: #888888;
height: 300px;
/* margin: 1em; */
border: 1px solid black;
}
.block.one {
height: 100px;
}
.box {
width: 100%;
height: 100px;
background: orange;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
}
.sticky {
position: sticky;
top: 10px;
}
.orange{
background: orange;
}
<div class="example">
<div class="block one"></div>
<div class="block">
<p class="box sticky"> </p>
</div>
<div class="block"></div>
</div>
<div class="example">
<div class="block one"></div>
<div class="block orange"></div>
<div class="block"></div>
</div>
Is this how you want it?
To create the sticky effect use position: sticky.
Code:
#wrapper {
display:flex;
flex-direction:row;
}
#sticky {
position: sticky;
position: -webkit-sticky;
background: #f83d23;
width: 50%;
height: 300px;
top: 0;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 6px #000;
color: #fff;
}
#para{
width:50%;
margin:10px;
}
<div id="wrapper">
<div id="sticky">
sticky
</div>
<div id="para">
This is a para
</div>
</div>

Why does the image inside a scaled div become smaller instead of scaling with its parent?

I'm trying to create a hover effect on a div, which scales the whole div slightly. That works well so far, but when i put an image inside that div, it becomes smaller instead of scaling with its parent.
I created a fiddle to illustrate the issue: Fiddle
<main>
<div class=" w-100 row">
<div class="col-6">
<div class="base square clickable">
<div class="content">
<div class="d-flex align-items-center justify-content-around flex-column h-100">
<img src="test.jpg" alt="Company" width="50%">
<h4 class="mt-2">Company Name</h4>
<h5 class="mt-2">Zusatz info</h5>
</div>
</div>
</div>
</div>
</div>
</main>
.base {
background-color: grey;
border-radius: 30px;
}
.square {
padding-bottom: 100%;
margin: 10px;
}
.content {
position: absolute;
top: 15px;
bottom: 15px;
left: 15px;
right: 15px;
text-align: center;
}
.base img {
border-radius: 50%;
height: auto;
}
.base.clickable {
transition: transform 300ms;
}
.base.clickable:hover {
cursor: pointer;
transform: scale(1.05);
}
Does anyone have an idea why the image doesn't scale properly?
content{position: absolute;}
remove the element from the normal document flow
so it does not scale with its parent

Adjust bootstrap button height based on amount of text

How can I adjust my button height based on the text? This is different to the other questions asked based on the fact that I am using BootStrap classes and am unaware if this is affecting the result.
I would have thought it would have been something similar to doing this:
display: inline-block;
width: 50px;
height: 100px;
word-break: break-word;
overflow: hidden;
but none of the above has worked. Does anyone have a solution to this?
Here is my HTML:
<div class="accordion collapsible-views" id="accordionExample">
<div class="card">
<div class="card-header" id={{collapseCard.headingId}}>
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" attr.data-target="#{{collapseCard.btnTargetId}}" aria-expanded="true" attr.aria-controls={{collapseCard.btnTargetId}}>
{{collapseCard.btnTitle}}
</button>
</h5>
</div>
And here is my CSS:
.btn {
width: 100%;
background: url(/assets/images/drop-down-icon.png) 100% no-repeat;
text-align: left;
}
.card-header {
border-bottom: 0px;
border-radius: 10px;
padding-left: 12px;
}
.card {
border-radius: 10px;
border: none;
}
Button height should be adjusted

Show div on image hover Jquery

I've spent a good 30 minutes on S.O to find a solution but still can't find it. Probably due to the fact that I don't know exactly what to look for.
Basically I have div which contains and image and a text. The text should appear on the image only after I hover on the image. The HTML and CSS structures are all good and I'm having problem with the JQuery on hover function, mainly to know how to select the inner div (and not actually how to use the hover function itself).
What I'm trying to do is when I hover on an image div (img-container), it shows the text (hover-img) on that image.
Below are my code:
HTML
<div id="content" class="col-12">
<!-- Image Gallery -->
<div class="col-lg-4 col-md-6 col-xs-12 img-container">
<img class="img-gal" src="#" />
<div class="hover-img">
<p class="img-text">Text on Hover</p>
</div>
</div>
</div
CSS
.img-container{
float:left;
margin: 0;
padding: 0;
cursor: pointer;
position: relative;
}
.img-gal{
width: 100%;
height: auto;
position: relative;
}
.hover-img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index:10;
color: #fff;
display: none;
}
.img-text{
text-align: center;
position: relative;
top: 50%;
font-weight: 300;
font-size: 1em;
letter-spacing: 2px;
}
JS
//Hover Image. Need to show the Text when hovering on an image
$('.img-container').hover(function(){
//Stuck here. How to show the text? fadeIn()? But what?
},function(){
//Stuck here. How to show the text? fadeOut()? But what ?
});
Thanks
You can achieve this with pure CSS:
.hover-img {
display: none;
position: absolute;
top: 0;
}
.img-gal:hover ~ .hover-img, .hover-img:hover {
display: block;
}
<div id="content" class="col-12">
<!-- Image Gallery -->
<div class="col-lg-4 col-md-6 col-xs-12 img-container">
<img class="img-gal" src="https://www.gravatar.com/avatar/0104050baad43a135d1084a1b3ec35d4?s=32&d=identicon&r=PG&f=1" />
<div class="hover-img">
<p class="img-text">Text on Hover</p>
</div>
</div>
</div
As other mentioned, no need for jQuery here,
you can achieve this with html/css only, using css transition and by changing the opacity and position of the text layer.
https://jsfiddle.net/86bjzedh/
check this fiddle for a working example
CSS:
.gallery li {
overflow: hidden;
background-size: 100% 100%;
float: left;
display: block;
width: 200px;
height: 200px;
margin: 5px;
}
.gallery span {
display: block;
width: 100%;
height: 100%;
opacity: 0;
transform: translateY(100%);
transition: .3s linear all;
text-align: center;
color: #000;
font-size: 15px;
font-family: tahoma;
background-color: rgba(255, 255, 255, .8);
padding-top: 30px;
box-sizing: border-box;
}
.gallery li:hover span {
transform: translateY(0);
opacity: 1;
}
HTML:
<ul class="gallery">
<li style="background-image:url(https://cdn.pixabay.com/photo/2018/01/17/10/22/key-3087900__180.jpg)">
<span>Style 1</span>
</li>
<li style="background-image:url(https://cdn.pixabay.com/photo/2018/02/16/02/03/pocket-watch-3156771__180.jpg">
<span>Style 2</span>
</li>
<li style="background-image:url(https://cdn.pixabay.com/photo/2018/04/20/02/47/hong-kong-3334945__180.jpg)">
<span>Style 2</span>
</li>
<li style="background-image:url(https://cdn.pixabay.com/photo/2018/01/17/10/22/key-3087900__180.jpg)">
<span>Style 1</span>
</li>
<li style="background-image:url(https://cdn.pixabay.com/photo/2018/02/16/02/03/pocket-watch-3156771__180.jpg">
<span>Style 2</span>
</li>
<li style="background-image:url(https://cdn.pixabay.com/photo/2018/04/20/02/47/hong-kong-3334945__180.jpg)">
<span>Style 2</span>
</li>
</ul>
You do this only with CSS. Add this line to your css
.img-gal:hover + .hover-img {
display:block;
}
if you want to smooth effect add this line to .hover-img. and remove display:none
.hover-img {
visibility: hidden;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
and on image hover like this
.img-gal:hover + .hover-img {
visibility: visible;
opacity: 1;
}

how can i horizontally center this div with sensitive javascript in it?

on this webpage if you scroll down to the first inline image, i have a before/after javascript slider happening.
however, the normal centering options don't seem to be working for me and end up breaking the slider. any help would be appreciate.
HTML:
<div class="before_after_slider">
<div class="photo">
<div class="after">
<img src="center_before.jpg" width="1000px" height="600px" alt="after" />
</div>
<div class="before">
<img src="center_after.jpg" width="1000px" height="600px" alt="before" />
</div>
</div>
</div>
<div class="caption">
<p>Roll over the photo with your cursor to see the before/after images. </p>
</div>
CSS:
.before_after_slider {
position: relative;
padding-bottom: 10px;
width: 55%;
margin: 0 auto;
& > * {
position: relative;
}
}
.after {
overflow: hidden;
position: absolute;
top: 0px;
width:1000px;
height:600px;
}
.caption {
font-family: helvetica;
font-weight: 100;
line-height: 140%;
letter-spacing: 0px;
font-size: 13px;
width: 55%;
margin: 0 auto;
padding-top: 0px;
padding-bottom: 30px;
}
There are many problems with this. Like the outer containers have a width less than the inner elements.
But for now you can try this.
.before_after_slider{
width:1000px;
}
same as your images

Categories

Resources