Develop Reference

Is it possible to align child items based on parents border-radius

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>

How to prevent text from adapting to parent's width?

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>

Scroll function called automatically when modal open and close

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>

Javascript - Adding a top fixed bar and push all the other elements down

I am trying to add top bar on a webpage which has 2 other elements that are top:0 and position:fixed. For example, think of a website with wp-admin bar and a menubar fixed on top.
I am creating a plugin & so I cannot modify the website's code, but can override styles.
Here is my CSS:
.bar-render-top
{
top:0px;
margin-top: 0px;
position: fixed;
z-index: 999999;
width:100% !important;
}
I can see the bar but the others are hidden under it. What I would like for them is to 'move down'. I could add custom css and find the elements' css and add margins, but since this is a plugin, it should work on any website. So I cannot add site-specific styles.
Ideally, this should behave like the mozbar chrome addon, which adds a topbar as an iframe.
Is this possible? Any help would be highly appreciated.
Thank much.
body {
background-color: white;
margin: 0;
padding: 0;
padding-top: 90px;
}
.fixed-bar {
width: 100%;
position: fixed;
top: 0;
height: 40px;
line-height: 40px;
text-align: center
}
.bar-1 {
background-color: gold;
}
.bar-2 {
background-color: pink;
margin-top: 40px;
}
.my-bar {
background-color: blue;
height: 40px;
line-height: 40px;
text-align: center;
color: white;
}
<div class="fixed-bar bar-1">
fixed bar one
</div>
<div class="fixed-bar bar-2">
fixed bar two
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales libero enim, sed convallis leo ornare eget. Nullam condimentum, diam ullamcorper sollicitudin fringilla, eros nisi placerat tellus, at volutpat velit felis eu ipsum. Suspendisse sed
nisl a orci dapibus euismod et eget odio. Maecenas elementum erat elit, et efficitur ex feugiat ac. Nam convallis blandit nisl, finibus pretium tortor vehicula at. Sed ultricies finibus consectetur. Nulla nec diam a velit pellentesque consequat ut
a lorem. Fusce eget massa lorem. In egestas risus non nisi condimentum facilisis. Quisque vulputate est ut odio vestibulum, at vulputate tellus lacinia. Ut interdum magna id velit lacinia, nec lobortis velit consequat. Ut et malesuada risus. In interdum
eleifend est auctor tincidunt. Nulla facilisi. Proin faucibus ex euismod, porta purus ut, volutpat nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut mattis volutpat tempus. Vivamus condimentum velit in
lacus ultrices ultricies. Morbi bibendum mauris ac pretium sagittis. Duis eget augue dapibus, convallis ante ut, accumsan ligula. Morbi cursus tellus viverra justo rutrum lobortis
</div>
<div class="my-bar">
this has to be on the top of any generic page
</div>

I ended up adding a margin-top to fixed elements at render and on scroll events.
My main top bar is rendered as <div id="appbar-container">...</div> id (to avoid being pushed too). Then I do it like that:
const APPBAR_HEIGHT = 64;
const translateFixed = () => {
Object.assign(document.body.style, {
position: "relative",
top: APPBAR_HEIGHT + "px",
});
for (let e of Array.from(document.body.getElementsByTagName("*"))) {
if (
e instanceof HTMLElement &&
e.getAttribute("id") !== "appbar-container"
) {
const position = getComputedStyle(e)
.getPropertyValue("position")
.toLocaleLowerCase();
const top = e.getBoundingClientRect().top;
if (position === "fixed" && top >= 0 && top <= APPBAR_HEIGHT) {
e.style.marginTop = APPBAR_HEIGHT + "px";
e.classList.add("appbar-offset");
} else if (e.classList.contains("appbar-offset")) {
e.style.marginTop = "0";
}
}
}
};
// Initial push
translateFixed();
// Push on scroll
document.addEventListener("scroll", translateFixed);
I am not very proud of it though to be honest and I think there is room for improvement... But, well, it works.

If you know the height of your bar, you can wrap all the content of the page with your own block, add some margin above it, and then add your bar using JS. Also it would be nice to set a background color to your bar. Here is an example using jQuery:
$('body').children().wrapAll('<div class="bar-render-content" />');
$('body').prepend('<div class="bar-render-top">Test bar</div>');
.bar-render-top
{
top:0px;
margin-top: 0px;
position: fixed;
z-index: 999999;
width:100% !important;
margin-bottom:50px;
background-color: lightgrey;
}
.bar-render-content
{
margin-top:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<div class="any">
Any text
</div>
<div class="content">
Lorem ipsum porttitor malesuada fusce adipiscing gravida eu sit tellus nam justo sem metus, elementum lorem adipiscing. Enim commodo malesuada porttitor ultricies diam, auctor congue sodales eros sem quisque, risus magna donec integer, lorem donec diam magna vivamus. Adipiscing bibendum pellentesque curabitur orci proin tempus sapien amet: lorem tempus. Quam nam, ipsum magna justo nam lorem nam, eu a fusce donec sed eget metus mauris ligula sagittis rutrum ultricies non at. Sed quisque lectus duis, ut magna malesuada: vivamus — in sagittis porta tempus: curabitur odio — magna risus, sapien — elementum, maecenas porttitor risus integer.
Urna amet orci auctor elementum, magna justo arcu a auctor bibendum sem proin auctor amet justo metus morbi odio maecenas porttitor. Porta magna integer porttitor tellus eros nec ultricies magna rutrum curabitur, porttitor integer nam, sem non orci non nulla.
</div>
</body>

custom scrollbar using enscroll.js

i am creating a custom scrollbar using This plugin. my code does not work same as I see in the demos, if I copy and paste it as same.
here is my code live example Fiddle
My goal is to create a scrollbar like this Link. you can see a slim, thin and nice scrollbar in the sidebar and also in the body...
this is what I try...
html
<div id="scrollbox3">
<h1>New Scrolling Window</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a justo erat, volutpat hendrerit dolor. Sed urna nibh, dapibus at egestas non, vulputate ut quam. Morbi a erat tristique tellus varius venenatis. Aenean lacinia sem eget turpis fringilla commodo. Sed lorem nisi, viverra a interdum nec, varius eu enim. Donec ornare, nunc quis eleifend iaculis, nulla eros mollis tellus, quis faucibus risus odio non lectus. Maecenas ac velit non metus rhoncus commodo. Nunc ligula est, ultricies sed mattis sed, dapibus at arcu. Maecenas lacinia nisl ut sem bibendum ac condimentum purus facilisis. Curabitur ut nibh lobortis libero interdum vehicula vel quis nulla.</p>
<p>Suspendisse et massa urna. Donec eu lorem nec felis dapibus aliquam viverra in quam. Suspendisse ultrices, nisi ac venenatis porttitor, erat turpis dapibus augue, sed rutrum nunc ante sed enim. Aliquam et tempus mi. Nullam malesuada, nunc a eleifend pretium, justo lorem tempus justo, id adipiscing dolor ipsum sed velit. Maecenas odio massa, feugiat vel sodales ut, placerat at quam. Cras viverra diam vitae diam elementum vitae aliquet erat tincidunt. Quisque fringilla neque in lacus tempor cursus. Curabitur eget nulla et nisi dignissim tempor vel non risus. Mauris ac ipsum metus, a auctor massa. Nunc eros ante, ullamcorper a mollis nec, aliquam sed est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
css
.track3 {
width: 10px;
background: rgba(0, 0, 0, 0);
margin-right: 2px;
border-radius: 10px;
-webkit-transition: background 250ms linear;
transition: background 250ms linear;
}
.track3:hover,
.track3.dragging {
background: #d9d9d9; /* Browsers without rgba support */
background: rgba(0, 0, 0, 0.15);
}
.handle3 {
width: 7px;
right: 0;
background: #999;
background: rgba(0, 0, 0, 0.4);
border-radius: 7px;
-webkit-transition: width 250ms;
transition: width 250ms;
}
.track3:hover .handle3,
.track3.dragging .handle3 {
width: 10px;
}
javascript
$('#scrollbox3').enscroll({
showOnHover: true,
verticalTrackClass: 'track3',
verticalHandleClass: 'handle3'
});
can someone please check it out...

You would need to include the following js as well:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://enscrollplugin.com/releases/enscroll-0.6.1.min.js"></script>