I just wanted to know how to prevent text from adapting when the parent's width is changed. If you run the code below and hover the mouse over the div, you can see how the text "adapts" to the parent's width while it changes. This is what I want to avoid. What I would expect to happen is that the text stays with its initial properties (I don't care if eventually some text disappears or becomes unreadable, because this "effect" is triggered when the user swipes left and the text disappears to the left). Thank you for your help!
.hello {
background: red;
border-radius: 20px;
transition: 2s;
width: 100%;
height: 200px;
}
.hello:hover {
width: 20%;
}
<div class="hello">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod elit diam, in condimentum eros scelerisque id. Cras tempus lectus tortor, ut elementum eros mollis consequat. Nullam ac odio eros. Phasellus at turpis tristique, facilisis neque
nec, auctor turpis. Nunc ac justo gravida, lobortis lectus a, tempus felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris vitae imperdiet sapien, eget interdum lacus.
</div>
I would set a static width so I can prevent, the .static-container from shrinking.. but it's not dynamic, like 100% would a workaround to this would be working with media queries, in order to make it responsive...
.hello {
background: red;
border-radius: 20px;
transition: 2s;
width: 400px;
height: 200px;
overflow:hidden;
}
.hello:hover {
width: 20%;
}
.static-container{
width:400px;
}
<div class="hello">
<div class="static-container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod elit diam, in condimentum eros scelerisque id. Cras tempus lectus tortor, ut elementum eros mollis consequat. Nullam ac odio eros. Phasellus at turpis tristique, facilisis neque
nec, auctor turpis. Nunc ac justo gravida, lobortis lectus a, tempus felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris vitae imperdiet sapien, eget interdum lacus.
</div>
</div>
You can make new div inside parent with absolute positioning
.hello {
background: red;
border-radius: 20px;
transition: 2s;
width: 100%;
height: 200px;
}
.hello:hover {
width: 20%;
}
.innerText {
position: absolute;
}
<div class="hello">
<div class="innerText">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod elit diam, in condimentum eros scelerisque id. Cras tempus lectus tortor, ut elementum eros mollis consequat. Nullam ac odio eros. Phasellus at turpis tristique, facilisis neque
nec, auctor turpis. Nunc ac justo gravida, lobortis lectus a, tempus felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris vitae imperdiet sapien, eget interdum lacus.
</div>
</div>
.hello {
background: red;
border-radius: 20px;
transition: 2s;
width: 100%;
height: 200px;
}
.hello:hover {
width: 20%;
}
p{
position:absolute;
}
<div class="hello">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod elit diam, in condimentum eros scelerisque id. Cras tempus lectus tortor, ut elementum eros mollis consequat. Nullam ac odio eros. Phasellus at turpis tristique, facilisis neque
nec, auctor turpis. Nunc ac justo gravida, lobortis lectus a, tempus felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris vitae imperdiet sapien, eget interdum lacus.
</p>
</div>
Hope this helps you.
.hello {
background: red;
border-radius: 20px;
transition: 2s;
width: 100%;
height: 200px;
overflow: hidden;
}
.hello:hover {
width: 20%;
white-space: nowrap;
text-overflow: ellipsis;
}
<div class="hello">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod elit diam, in condimentum eros scelerisque id. Cras tempus lectus tortor, ut elementum eros mollis consequat. Nullam ac odio eros. Phasellus at turpis tristique, facilisis neque
nec, auctor turpis. Nunc ac justo gravida, lobortis lectus a, tempus felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris vitae imperdiet sapien, eget interdum lacus.
</div>
Related
I am creating a custom scrollbar with absolute positioned divs at the right(for vertical) and bottom(for horizontal).
When there is a border radius on parent, both scrollbars edge gets hidden.
Is there a way we can align the child elements based on border-radius of parent?
Like this:
Below is my html:
<div class=“content-container”>
<div class=“content”>SOME OVERFLOW CONTENT</div>
<div class=“scrollbar-y”>
<div class=“scrollbar-track”>
<div class=“scrollbar-thumb”></div>
</div>
</div>
</div>
Below is my css:
.content-container {
position: relative;
height: 400px;
width: 600px;
}
.content {
height: 100%;
width: 100%;
overflow: auto;
}
.scrollbar-y {
position: absolute;
top: 0;
right: 0;
height: 100%;
}
.scrollbar-track {
width: 16px;
height: 100%;
border: 4px;
background: transparent;
position: relative;
}
.scrollbar-thumb {
top: 0; // calculated based on scroll event
width: 8px;
background: grey;
height: 42px; // calculated based on clientHeight and scrollHeight
}
Here. You have to set height of "scrollbar-button".
.container {
overflow-y: auto;
max-height: 170px;
border: 1px solid #b9b9b9;
border-radius: 20px;
padding: 10px;
}
.container::-webkit-scrollbar {
width: 6px;
}
.container::-webkit-scrollbar-track {
background: #7070705e 0% 0% no-repeat padding-box;
border-radius: 100px;
}
.container::-webkit-scrollbar-button {
height: 14px;
}
.container::-webkit-scrollbar-thumb {
background: #707070 0% 0% no-repeat padding-box;
border-radius: 100px;
}
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu tellus elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut at erat in purus fermentum sodales. Nulla vel nunc vel metus interdum venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce tincidunt porttitor massa, in aliquam mauris vehicula id. In non volutpat velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc nisi dolor, viverra et efficitur ornare, lobortis vel velit. Integer volutpat, justo eleifend cursus pellentesque, lectus turpis fringilla elit, sit amet ultrices est magna ac leo. Sed dolor ipsum, bibendum ac viverra vel, vehicula ac quam. Sed eu justo vitae turpis vehicula interdum.
Cras ultricies leo eu aliquet ullamcorper. Pellentesque eu placerat velit. Sed sit amet gravida metus, nec auctor lectus. Donec blandit purus id est vehicula gravida. Aenean viverra enim id leo pretium, rhoncus mollis magna fringilla. Ut ullamcorper tempus urna id efficitur. Integer sit amet mattis nibh, ac sagittis diam. Morbi feugiat lacinia tortor nec dapibus. Pellentesque lobortis nec risus ac lacinia. Maecenas iaculis nisl nec lacus vehicula vulputate. Sed nec tortor id dui condimentum pulvinar. Donec nulla nisi, convallis at consectetur gravida, suscipit eu ante. In bibendum congue nisi, eget ullamcorper lectus bibendum in. Integer semper tortor elementum dui vestibulum tincidunt. Suspendisse potenti. Mauris vel velit vel felis fringilla dignissim.
Sed mauris nunc, auctor ac velit at, tempor sagittis diam. Nullam volutpat rutrum faucibus. Mauris ultrices tempor tempor. Mauris varius mauris sed viverra sollicitudin. Praesent nec eros sed enim consequat commodo. Donec id dui at nisi elementum condimentum. Nulla luctus lacus eu aliquam condimentum. Morbi vel dapibus massa. In nibh lectus, commodo vel elit in, sagittis varius elit. Donec in ex lorem. Vivamus id mattis dolor, nec finibus augue. Curabitur ut justo eu velit congue maximus. Maecenas non augue erat. Nam euismod leo ut enim dignissim, vitae semper dolor rhoncus.
</div>
So I have this great little nugget of code that I am trying to rewrite into plain JavaScript and CSS without jQuery.
jQuery.extend(jQuery.easing,{
easeInExpo: function (x, t, b, c, d) {
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
}
});
var nset = false;
$('button#hmenu').click(function(){
if(!nset){
$('ul#nav').delay(35).slideDown(300,'easeInExpo');
$('button#hmenu').addClass('active');
nset = true;
} else {
$('ul#nav').slideUp(550);
nset = false;
$('button#hmenu').removeClass('active');
}
})
I'm looking at some CSS transitions that use easing but just wondering what the options are? In my code I have a slideDown and up easing functions. This is used in production for a mobile menu nav.
Update:
This github repo (You don't need jQuery) has a really comprehensive list of common jQuery functions, all rewritten in vanilla Javascript.
It includes animations, query selectors, ajax, events and other advanced jQuery features.
The slightly older youmightnotneedjquery.com is also very good, particularly if you need to support older IE versions.
You can achieve an easeInExpo style animation by using the following CSS, as provided by this website:
transition: all 500ms cubic-bezier(0.950, 0.050, 0.795, 0.035);
The below example illustrates this easing property on the height of a div. I've updated it to match the delay you've added in jQuery when clicked (35ms), the timings (300ms and 550ms respectively), and jQuery's default easing ('swing') – as provided by this answer – when it's closed:
let expandable = document.getElementById('expandable');
let expandButton = document.getElementById('expand-button');
expandButton.addEventListener('click', () => {
expandable.classList.toggle('expanded');
});
#expandable {
background: red;
transition: all 550ms cubic-bezier(.02, .01, .47, 1);
height: 0px;
width: 100px;
transition-delay: 0ms;
}
#expandable.expanded {
height: 100px;
transition-delay: 35ms;
transition: all 300ms cubic-bezier(0.950, 0.050, 0.795, 0.035);
}
<div id="expandable"></div>
<br />
<button id="expand-button">Toggle expand</button>
There's a little bit of magic needed here in order to get your collapsible component to expand to a variable height. If you are just expanding to the same height each time, say 100px, that's a simple as creating a single class such as "expanded" and then adding and removing that class as a boolean switch.
We'll still be using a boolean switch for variable heights, but we'll also need to get the heights of each expandable element using JavaScript, and then refresh those height values if the size of the user's window changes to account for text-wrapping, image resizing, etc.
We can achieve rather simply using custom CSS properties (variables), with a fallback value to unset, meaning that when to variable height is present, the box will expand to show all contents without an animation as a last resort, but in most if not all cases (and for all modern browsers) the custom CSS variable should be the ideal solution for unique values per section.
Here it is in action (below), with both a toggle and accordion example, with a cubic bezier easing function used to closely match the easeInExpo function you supplied in your original question. I pulled this easing function cubic-bezier(0.95, 0.05, 0.795, 0.035) from easings.net/en#easeInExpo where they have a pure CSS easing for easeInExpo and many others.
Simple Example
const expandables = document.querySelectorAll('.expandable');
const setInnerHeights = () => {
for (const expandable of expandables) {
expandable.style.setProperty('--inner-height', Array.from(expandable.children).map(child => child.offsetHeight).reduce((a, c) => a + c, 0) + 'px');
}
};
setInnerHeights();
document.addEventListener('click', e => {
if (e.target?.matches('.expand-trigger')) {
const expandable = e.target.nextElementSibling;
expandable.classList[expandable.classList.contains('expanded') ? 'remove' : 'add']('expanded');
}
});
window.addEventListener('resize', setInnerHeights);
html {
height: 100%;
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
min-height: 100%;
padding: 20px;
}
.expandable {
max-height: 0;
overflow: hidden;
transition: max-height 0.25s cubic-bezier(0.95, 0.05, 0.795, 0.035);
text-align: left;
}
.expandable > p {
margin: 0;
padding: 10px 0;
}
.expandable.expanded {
--content-height: calc(var(--inner-height) + 20px);
max-height: var(--content-height, unset);
}
<button class="expand-trigger">Expand #1</button>
<div class="expandable">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<button class="expand-trigger">Expand #2</button>
<div class="expandable">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mi purus, interdum id mattis et, posuere nec urna. Mauris in ornare sem. Phasellus non eros augue. Fusce tempus bibendum mauris, vel luctus est viverra eget. Cras vitae lectus magna. Integer vulputate est ut felis dictum consectetur. Nunc vitae enim at sem rhoncus aliquet et id risus. Etiam faucibus quis turpis eu pellentesque. Aliquam dictum lorem nec orci finibus commodo. Etiam tincidunt lacinia consectetur. Praesent tortor lorem, imperdiet sed varius vel, varius ac quam. Vestibulum aliquam lorem sem, sit amet imperdiet purus commodo eu. Integer a iaculis tortor.</p>
</div>
<button class="expand-trigger">Expand #3</button>
<div class="expandable">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mi purus, interdum id mattis et, posuere nec urna. Mauris in ornare sem. Phasellus non eros augue. Fusce tempus bibendum mauris, vel luctus est viverra eget. Cras vitae lectus magna. Integer vulputate est ut felis dictum consectetur. Nunc vitae enim at sem rhoncus aliquet et id risus. Etiam faucibus quis turpis eu pellentesque. Aliquam dictum lorem nec orci finibus commodo. Etiam tincidunt lacinia consectetur. Praesent tortor lorem, imperdiet sed varius vel, varius ac quam. Vestibulum aliquam lorem sem, sit amet imperdiet purus commodo eu. Integer a iaculis tortor.</p>
<p>Integer convallis lectus eu felis bibendum, vel lacinia metus imperdiet. Maecenas vulputate, quam vitae tempus pretium, erat felis euismod risus, nec blandit leo mi eget purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at neque laoreet, egestas dui ut, bibendum lorem. Maecenas elementum odio a congue facilisis. Vivamus risus urna, vestibulum egestas sem nec, lacinia volutpat metus. Suspendisse potenti. Suspendisse ullamcorper commodo libero, sed rhoncus nibh porta in. Donec mi felis, posuere luctus varius ac, faucibus vitae erat.</p>
</div>
Complex Example
const initAccordions = () => {
const getNode = selector => document.querySelector(selector),
getNodes = selector => Array.from(document.querySelectorAll(selector)),
findChildren = (node, selector) => Array.from(node.children).filter(e => e.matches?.(selector)),
findChild = (node, selector) => Array.from(node.children).find(e => e.matches?.(selector)),
_addInput = (node, position, id, checked) => node.insertAdjacentHTML(position, `<input type="radio" name="accordion-${id}"${checked ? ' checked="checked"' : ''}>`),
setInnerHeight = node => {
const height = Array.from(node.children).map(child => child.offsetHeight).reduce((a, c) => a + c, 0) + 'px';
node.style.setProperty('--inner-height', height);
},
accordions = Array.from(document.querySelectorAll('.accordion'));
let accordionIndex = 0;
for (const accordion of accordions) {
const isToggle = accordion.dataset?.type === 'toggle',
panels = findChildren(accordion, '.accordion--panel');
let panelIndex = 0;
for (const panel of panels) {
const title = findChild(panel, '.accordion--panel--title'),
content = findChild(panel, '.accordion--panel--content'),
addInput = (node, position, checked) => _addInput(node, position, accordionIndex + (isToggle ? '-' + panelIndex : ''), checked);
setInnerHeight(content);
addInput(title, 'beforebegin');
addInput(title, 'afterbegin', true);
panelIndex++;
}
accordionIndex++;
}
window.addEventListener('resize', () => {
const panelContents = Array.from(document.querySelectorAll('.accordion > .accordion--panel > .accordion--panel--content'));
for (const content of panelContents) setInnerHeight(content);
});
};
initAccordions();
html {
height: 100%;
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 100%;
padding: 20px;
}
.accordion--panel > [type=checkbox],
.accordion--panel > [type=radio], .accordion--panel--title > [type=checkbox],
.accordion--panel--title > [type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.accordion--panel > [type=checkbox]:checked,
.accordion--panel > [type=radio]:checked, .accordion--panel--title > [type=checkbox]:checked,
.accordion--panel--title > [type=radio]:checked {
display: none;
}
.accordion--panel {
border-radius: 7px;
}
.accordion--panel--title {
background-color: #ccc;
}
.accordion--panel--content {
box-shadow: inset 0 0 0 2px #ccc;
border-radius: 0 0 7px 7px;
}
.accordion {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
max-width: 500px;
}
.accordion--panel {
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.accordion--panel > [type=checkbox],
.accordion--panel > [type=radio] {
z-index: 1;
}
.accordion--panel--title, .accordion--panel--content {
padding-inline: 15px;
}
.accordion--panel--title {
position: relative;
padding-block: 10px;
}
.accordion--panel--content {
max-height: 0;
overflow: hidden;
transition: max-height 0.25s cubic-bezier(0.95, 0.05, 0.795, 0.035);
}
.accordion--panel--content--inner > p:first-child {
margin-top: 10px;
}
.accordion--panel--content--inner > p:last-child {
margin-bottom: 10px;
}
[type=checkbox]:checked ~ .accordion--panel--content, [type=radio]:checked ~ .accordion--panel--content {
--content-height: calc(var(--inner-height) + 20px);
max-height: var(--content-height, unset);
}
<h2>Accordion Demo</h2>
<div class="accordion" data-type="accordion">
<div class="accordion--panel">
<div class="accordion--panel--title">Title #1</div>
<div class="accordion--panel--content">
<div class="accordion--panel--content--inner">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="accordion--panel">
<div class="accordion--panel--title">Title #2</div>
<div class="accordion--panel--content">
<div class="accordion--panel--content--inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mi purus, interdum id mattis et, posuere nec urna. Mauris in ornare sem. Phasellus non eros augue. Fusce tempus bibendum mauris, vel luctus est viverra eget. Cras vitae lectus magna. Integer vulputate est ut felis dictum consectetur. Nunc vitae enim at sem rhoncus aliquet et id risus. Etiam faucibus quis turpis eu pellentesque. Aliquam dictum lorem nec orci finibus commodo. Etiam tincidunt lacinia consectetur. Praesent tortor lorem, imperdiet sed varius vel, varius ac quam. Vestibulum aliquam lorem sem, sit amet imperdiet purus commodo eu. Integer a iaculis tortor.</p>
</div>
</div>
</div>
<div class="accordion--panel">
<div class="accordion--panel--title">Title #3</div>
<div class="accordion--panel--content">
<div class="accordion--panel--content--inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mi purus, interdum id mattis et, posuere nec urna. Mauris in ornare sem. Phasellus non eros augue. Fusce tempus bibendum mauris, vel luctus est viverra eget. Cras vitae lectus magna. Integer vulputate est ut felis dictum consectetur. Nunc vitae enim at sem rhoncus aliquet et id risus. Etiam faucibus quis turpis eu pellentesque. Aliquam dictum lorem nec orci finibus commodo. Etiam tincidunt lacinia consectetur. Praesent tortor lorem, imperdiet sed varius vel, varius ac quam. Vestibulum aliquam lorem sem, sit amet imperdiet purus commodo eu. Integer a iaculis tortor.</p>
<p>Integer convallis lectus eu felis bibendum, vel lacinia metus imperdiet. Maecenas vulputate, quam vitae tempus pretium, erat felis euismod risus, nec blandit leo mi eget purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at neque laoreet, egestas dui ut, bibendum lorem. Maecenas elementum odio a congue facilisis. Vivamus risus urna, vestibulum egestas sem nec, lacinia volutpat metus. Suspendisse potenti. Suspendisse ullamcorper commodo libero, sed rhoncus nibh porta in. Donec mi felis, posuere luctus varius ac, faucibus vitae erat.</p>
</div>
</div>
</div>
</div>
<h2>Toggle Demo</h2>
<div class="accordion" data-type="toggle">
<div class="accordion--panel">
<div class="accordion--panel--title">Title #1</div>
<div class="accordion--panel--content">
<div class="accordion--panel--content--inner">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="accordion--panel">
<div class="accordion--panel--title">Title #2</div>
<div class="accordion--panel--content">
<div class="accordion--panel--content--inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mi purus, interdum id mattis et, posuere nec urna. Mauris in ornare sem. Phasellus non eros augue. Fusce tempus bibendum mauris, vel luctus est viverra eget. Cras vitae lectus magna. Integer vulputate est ut felis dictum consectetur. Nunc vitae enim at sem rhoncus aliquet et id risus. Etiam faucibus quis turpis eu pellentesque. Aliquam dictum lorem nec orci finibus commodo. Etiam tincidunt lacinia consectetur. Praesent tortor lorem, imperdiet sed varius vel, varius ac quam. Vestibulum aliquam lorem sem, sit amet imperdiet purus commodo eu. Integer a iaculis tortor.</p>
</div>
</div>
</div>
<div class="accordion--panel">
<div class="accordion--panel--title">Title #3</div>
<div class="accordion--panel--content">
<div class="accordion--panel--content--inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mi purus, interdum id mattis et, posuere nec urna. Mauris in ornare sem. Phasellus non eros augue. Fusce tempus bibendum mauris, vel luctus est viverra eget. Cras vitae lectus magna. Integer vulputate est ut felis dictum consectetur. Nunc vitae enim at sem rhoncus aliquet et id risus. Etiam faucibus quis turpis eu pellentesque. Aliquam dictum lorem nec orci finibus commodo. Etiam tincidunt lacinia consectetur. Praesent tortor lorem, imperdiet sed varius vel, varius ac quam. Vestibulum aliquam lorem sem, sit amet imperdiet purus commodo eu. Integer a iaculis tortor.</p>
<p>Integer convallis lectus eu felis bibendum, vel lacinia metus imperdiet. Maecenas vulputate, quam vitae tempus pretium, erat felis euismod risus, nec blandit leo mi eget purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at neque laoreet, egestas dui ut, bibendum lorem. Maecenas elementum odio a congue facilisis. Vivamus risus urna, vestibulum egestas sem nec, lacinia volutpat metus. Suspendisse potenti. Suspendisse ullamcorper commodo libero, sed rhoncus nibh porta in. Donec mi felis, posuere luctus varius ac, faucibus vitae erat.</p>
</div>
</div>
</div>
</div>
Other CSS easing functions are available at easings.net.
You can also customize your easing function visually using Chrome's DevTools by adding either the transition or transition-timing-function properties to any element with the value of ease, then clicking the square curve icon next to the word ease and dragging either of the circular handles.
I have bootstrap modal which contains scrollable div id=moreContent and modal is open when a button is clicked. but the problem if I close the div with the scroll bar and then I try to reopen the modal the scroll function is also called. what am I doing wrong here.
$(document).ready(function() {
$("#buttonId").click(function() {
$('#myModal').openModal();
});
$("#moreContent").scroll(function() {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this[0].scrollHeight) {
console.log("this should be called only if manually scrolled ??");
}
}
});
});
#myModal {
max-height: 700px;
height: 700px;
min-height: 700px;
max-width: 912px;
min-width: 912px;
width: 912px;
}
#moreContent {
overflow-y: auto;
max-height: 300px;
min-height: 300px;
}
<div id="myModal" class="modal confirm-dialog">
<div class="modal-content">
<div id="moreContent">
<div id="moreSupervisorContent"></div>
<div id="moreSubordinateContent" class="hidden"></div>
</div>
</div>
This is because your modal is changing the size of the document. When the document changes size, the scroll position changes, thus triggering a scroll event.
This is most likely due to the fact that your modal has a fixed height. Setting fixed sizes is typically a bad idea in web development since you can't predict how big someone's screen or browser will be.
To solve it, you should style your modal an absolute or fixed position, set it to 100% height and have it handle the overflow instead of #moreContent. The position will keep the document from growing and the modal will only show scrollbars if its content gets larger than it is.
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
background: rgba(0, 0, 0, 0.8);
overflow: auto;
}
.modal__content {
height: 700px;
width: 60%;
margin: 30px auto;
padding: 30px;
background: #CCC;
}
<div class="modal">
<div class="modal__content">
<h3>This is the modal content</h3>
<p>This is some content inside the modal and it is fixed to 700px height</p>
</div>
</div>
<h1>This is the page</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum luctus leo pharetra sodales. Donec quis imperdiet odio, interdum hendrerit libero. Phasellus sollicitudin pellentesque turpis, vitae sagittis augue sagittis sit amet. Aenean pretium augue in pharetra tempor. Aenean tempus vulputate dui, eget blandit eros vulputate a. Morbi et laoreet metus, non sollicitudin ex. Phasellus egestas, magna et malesuada bibendum, dolor nisl gravida nunc, sit amet pulvinar nisl leo eu neque. Etiam eget orci ac velit porttitor euismod. Aenean accumsan condimentum egestas. Donec dictum laoreet mi, eu auctor ante sagittis id. Integer lacinia bibendum porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum luctus leo pharetra sodales. Donec quis imperdiet odio, interdum hendrerit libero. Phasellus sollicitudin pellentesque turpis, vitae sagittis augue sagittis sit amet. Aenean pretium augue in pharetra tempor. Aenean tempus vulputate dui, eget blandit eros vulputate a. Morbi et laoreet metus, non sollicitudin ex. Phasellus egestas, magna et malesuada bibendum, dolor nisl gravida nunc, sit amet pulvinar nisl leo eu neque. Etiam eget orci ac velit porttitor euismod. Aenean accumsan condimentum egestas. Donec dictum laoreet mi, eu auctor ante sagittis id. Integer lacinia bibendum porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum luctus leo pharetra sodales. Donec quis imperdiet odio, interdum hendrerit libero. Phasellus sollicitudin pellentesque turpis, vitae sagittis augue sagittis sit amet. Aenean pretium augue in pharetra tempor. Aenean tempus vulputate dui, eget blandit eros vulputate a. Morbi et laoreet metus, non sollicitudin ex. Phasellus egestas, magna et malesuada bibendum, dolor nisl gravida nunc, sit amet pulvinar nisl leo eu neque. Etiam eget orci ac velit porttitor euismod. Aenean accumsan condimentum egestas. Donec dictum laoreet mi, eu auctor ante sagittis id. Integer lacinia bibendum porta.</p>
I have this situation:
.main-content {
background-color:blue;
width:100%;
height:3000px;
}
.fixed-menu {
height:50px;
background-color:pink;
position:fixed;
bottom:20px;
width:100%;
padding:20px;
}
<div class="container">
<div class="main-content">
</div>
<div class="fixed-menu">
Fixed menu at the bottom. The main content should stop above this bar, so the bar never overlaps the content when scrolling.
</div>
</div>
When scrolling down, the pink bar should not overlap the blue content. It should behave as if the blue content was an iframe positioned 60px from the bottom of the page, but without using an iframe, and only css.
Anyone knows if this is possible? https://jsfiddle.net/0e98os22/2/r
What you could do is put your content in an absolute div whose top, left and right are at 0, but with bottom:50px. Another div, your menu, also absolute, with bottom, left and right at 0, and with height: 50px. Then disable the page scrollbars using overflow:hidden.
html, body{
height: 100%;
}
body{
position: relative;
overflow: hidden;
}
.main-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 50px;
background: blue;
overflow: auto;
}
.fixed-menu {
background-color: pink;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
}
<div class="main-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis justo sollicitudin, facilisis ante eget, ornare magna. Donec semper convallis orci, vitae consectetur arcu. Maecenas eu risus nec quam consequat tempus eu eget lectus. Vestibulum ultricies libero sit amet quam hendrerit facilisis. Donec auctor lorem est, eget malesuada felis tincidunt vitae. Suspendisse erat justo, auctor eu est non, hendrerit gravida nunc. Cras gravida urna id mattis pulvinar. Curabitur mattis, nunc a lacinia accumsan, tellus est porta quam, eget tempor tellus orci a elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet congue eros. Cras a molestie urna, a volutpat mauris. In ac viverra nulla, in sagittis turpis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis justo sollicitudin, facilisis ante eget, ornare magna. Donec semper convallis orci, vitae consectetur arcu. Maecenas eu risus nec quam consequat tempus eu eget lectus. Vestibulum ultricies libero sit amet quam hendrerit facilisis. Donec auctor lorem est, eget malesuada felis tincidunt vitae. Suspendisse erat justo, auctor eu est non, hendrerit gravida nunc. Cras gravida urna id mattis pulvinar. Curabitur mattis, nunc a lacinia accumsan, tellus est porta quam, eget tempor tellus orci a elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet congue eros. Cras a molestie urna, a volutpat mauris. In ac viverra nulla, in sagittis turpis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis justo sollicitudin, facilisis ante eget, ornare magna. Donec semper convallis orci, vitae consectetur arcu. Maecenas eu risus nec quam consequat tempus eu eget lectus. Vestibulum ultricies libero sit amet quam hendrerit facilisis. Donec auctor lorem est, eget malesuada felis tincidunt vitae. Suspendisse erat justo, auctor eu est non, hendrerit gravida nunc. Cras gravida urna id mattis pulvinar. Curabitur mattis, nunc a lacinia accumsan, tellus est porta quam, eget tempor tellus orci a elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet congue eros. Cras a molestie urna, a volutpat mauris. In ac viverra nulla, in sagittis turpis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis justo sollicitudin, facilisis ante eget, ornare magna. Donec semper convallis orci, vitae consectetur arcu. Maecenas eu risus nec quam consequat tempus eu eget lectus. Vestibulum ultricies libero sit amet quam hendrerit facilisis. Donec auctor lorem est, eget malesuada felis tincidunt vitae. Suspendisse erat justo, auctor eu est non, hendrerit gravida nunc. Cras gravida urna id mattis pulvinar. Curabitur mattis, nunc a lacinia accumsan, tellus est porta quam, eget tempor tellus orci a elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet congue eros. Cras a molestie urna, a volutpat mauris. In ac viverra nulla, in sagittis turpis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis justo sollicitudin, facilisis ante eget, ornare magna. Donec semper convallis orci, vitae consectetur arcu. Maecenas eu risus nec quam consequat tempus eu eget lectus. Vestibulum ultricies libero sit amet quam hendrerit facilisis. Donec auctor lorem est, eget malesuada felis tincidunt vitae. Suspendisse erat justo, auctor eu est non, hendrerit gravida nunc. Cras gravida urna id mattis pulvinar. Curabitur mattis, nunc a lacinia accumsan, tellus est porta quam, eget tempor tellus orci a elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet congue eros. Cras a molestie urna, a volutpat mauris. In ac viverra nulla, in sagittis turpis.
</div>
<div class="fixed-menu">
Fixed menu at the bottom.
</div>
Fiddle: https://jsfiddle.net/0e98os22/8/
Template:
<div class="container">
<div class="main-content">
<img src="http://i.imgur.com/RRUe0Mo.png" />
<img src="http://i.imgur.com/RRUe0Mo.png" />
<img src="http://i.imgur.com/RRUe0Mo.png" />
</div>
<div class="fixed-menu">
Fixed menu at the bottom. The main content should stop above this bar, so the bar never overlaps the content when scrolling.
</div>
</div>
CSS:
body, html, .container {
height: 100%;
overflow: hidden;
}
.container {
position: relative;
}
.main-content {
position: absolute;
bottom: 100px;
width: 100%;
top: 0;
overflow-y: auto;
}
.main-content img {
width: 100%;
}
.fixed-menu {
position:fixed;
height:50px;
background-color:pink;
bottom:0px;
width:100%;
padding:20px;
}
I've made a simple landingpage, where you have four divs each taking up 25% screen width. When clicking one, all others become smaller and the clicked one expands. This works fine although it's not smooth.
Next, when closing all panels they should get back to the 25% width.
Since javascript is not my cup of tea, I would like to have some advice on this one.
The code is not efficient I guess, so if anyone comes up with a better solution that's fine.
Enough talks, here's a codepen with the current state of work: https://codepen.io/MaartenTe/pen/JKYzMx
$("#one").click(function() {
$(".content-1").animate({
width: 'toggle'
}, 500);
$(".content-2").hide(500);
$(".content-3").hide(500);
$(".content-4").hide(500);
$("#one").animate({
width: '5%'
});
$("#two").animate({
width: '5%'
});
$("#three").animate({
width: '5%'
});
$("#four").animate({
width: '5%'
});
})
$("#two").click(function() {
$(".content-2").animate({
width: 'toggle'
}, 500);
$(".content-1").hide(350);
$(".content-3").hide(350);
$(".content-4").hide(350);
})
$("#three").click(function() {
$(".content-3").animate({
width: 'toggle'
}, 500);
$(".content-1").hide(350);
$(".content-2").hide(350);
$(".content-4").hide(350);
})
$("#four").click(function() {
$(".content-4").animate({
width: 'toggle'
}, 500);
$(".content-1").hide(350);
$(".content-3").hide(350);
$(".content-2").hide(350);
})
body {
padding: 0;
margin: 0;
background-color: #000;
}
.container-fluid {
display: flex;
height: 650px;
}
.container-fluid div {
width: 25%;
text-align: center;
height: 100%;
min-height: 100%;
color: white;
}
div[class^="content-"] {
width: 100%;
color: black;
background-color: orange;
}
.content-1,
.content-2,
.content-3,
.content-4 {
display: none;
}
#one {
background-color: black;
}
#two {
background-color: blue;
}
#three {
background-color: red;
}
#four {
background-color: green;
}
.content-1 {
background: url(http://phpscript.be/caipi/wp-content/uploads/2016/06/slider1-copy.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.content-2 {
background: url(http://phpscript.be/caipi/wp-content/uploads/2016/06/slider2-copy.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.content-3 {
background: url(http://phpscript.be/caipi/wp-content/uploads/2016/06/slider-3.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.content-4 {
background: url(http://phpscript.be/caipi/wp-content/uploads/2016/06/slider1-copy.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div id="one" class="toggle">
1
</div>
<div class="content-1 color">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a vestibulum sapien. Curabitur rhoncus tortor urna. Duis a interdum lorem. Aenean mollis, tortor at blandit elementum, justo ligula malesuada ante, id blandit enim metus vel nisl. Maecenas
et vulputate mi. Sed quis eros sit amet ipsum consectetur tincidunt. Vivamus suscipit laoreet justo, a suscipit nunc ultricies nec. Fusce sollicitudin, mauris eu sollicitudin rhoncus, augue augue tristique nisl, sed lacinia velit magna sed neque.
Aliquam fermentum faucibus nulla a convallis. Integer cursus felis id ultricies semper. Cras eget euismod enim. Morbi rhoncus ante et malesuada hendrerit. Vestibulum euismod euismod tortor dapibus aliquet. Maecenas justo lorem, cursus eu metus id,
tincidunt cursus diam.
</div>
<div id="two" class="toggle">
2
</div>
<div class="content-2 color">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a vestibulum sapien. Curabitur rhoncus tortor urna. Duis a interdum lorem. Aenean mollis, tortor at blandit elementum, justo ligula malesuada ante, id blandit enim metus vel nisl. Maecenas
et vulputate mi. Sed quis eros sit amet ipsum consectetur tincidunt. Vivamus suscipit laoreet justo, a suscipit nunc ultricies nec. Fusce sollicitudin, mauris eu sollicitudin rhoncus, augue augue tristique nisl, sed lacinia velit magna sed neque.
Aliquam fermentum faucibus nulla a convallis. Integer cursus felis id ultricies semper. Cras eget euismod enim. Morbi rhoncus ante et malesuada hendrerit. Vestibulum euismod euismod tortor dapibus aliquet. Maecenas justo lorem, cursus eu metus id,
tincidunt cursus diam.
</div>
<div id="three" class="toggle">
3
</div>
<div class="content-3 color">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a vestibulum sapien. Curabitur rhoncus tortor urna. Duis a interdum lorem. Aenean mollis, tortor at blandit elementum, justo ligula malesuada ante, id blandit enim metus vel nisl. Maecenas
et vulputate mi. Sed quis eros sit amet ipsum consectetur tincidunt. Vivamus suscipit laoreet justo, a suscipit nunc ultricies nec. Fusce sollicitudin, mauris eu sollicitudin rhoncus, augue augue tristique nisl, sed lacinia velit magna sed neque.
Aliquam fermentum faucibus nulla a convallis. Integer cursus felis id ultricies semper. Cras eget euismod enim. Morbi rhoncus ante et malesuada hendrerit. Vestibulum euismod euismod tortor dapibus aliquet. Maecenas justo lorem, cursus eu metus id,
tincidunt cursus diam.
</div>
<div id="four" class="toggle">
4
</div>
<div class="content-4 color">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a vestibulum sapien. Curabitur rhoncus tortor urna. Duis a interdum lorem. Aenean mollis, tortor at blandit elementum, justo ligula malesuada ante, id blandit enim metus vel nisl. Maecenas
et vulputate mi. Sed quis eros sit amet ipsum consectetur tincidunt. Vivamus suscipit laoreet justo, a suscipit nunc ultricies nec. Fusce sollicitudin, mauris eu sollicitudin rhoncus, augue augue tristique nisl, sed lacinia velit magna sed neque.
Aliquam fermentum faucibus nulla a convallis. Integer cursus felis id ultricies semper. Cras eget euismod enim. Morbi rhoncus ante et malesuada hendrerit. Vestibulum euismod euismod tortor dapibus aliquet. Maecenas justo lorem, cursus eu metus id,
tincidunt cursus diam.
</div>
</div>
Echoing DBS' comment, it makes more sense here to leverage the CSS transition property. I'm not sure if jQuery natively supports something similar to slideDown() for shrinking elements' widths. The best you could do is toggle this CSS property on specified elements using jQuery, which would be an overkill here.
I've made a JSFiddle you can take a look at here. Essentially, when a user clicks a "content-toggler", it shrinks all of the togglers by setting their widths to 5%, finds the next sibling of the clicked toggler using .next(), and sets its width to 80%.
The content and their content togglers both leverage the CSS transition property which is documented here.
edited css:
changed width
div[class^="content-"] {
width: 0%;
color: black;
background-color: orange;
}
removed
.content-1,
.content-2,
.content-3,
.content-4 {
display: none;
}
and made some changes in your code to make it simpler
fiddle