Develop Reference

Multiple ellipsis not working in absolute div

In my div is the overlay of another absolutely positioned div. However the text is still going beyond the div.
var mainDiv = ".myclass";
var mainDivP = ".myclass p";
$(window).on("load",function(){ multiLine_ellipsis(mainDiv, mainDivP); });
function multiLine_ellipsis(mainDiv, mainDivP) {
$(mainDivP).each(function(index) {
var divh = $(mainDiv).height();
if ($(this).outerHeight() > divh) {
var returnText = $(this).text().replace(/\W*\s(\S)*$/, '...');
console.log(returnText);
$(this).text(returnText);
}
});
}
.myclass {
color: #FFFFFF;
font-family: "my-font";
font-size: 28px;
padding: 15px;
height: 100px;
word-wrap: break-word;
overflow: hidden;
position: relative;
}
.myOverlay {
background-image: url("https://dksa1a9fhenpv.cloudfront.net/website/images/overlay.png");
position: absolute;
width: 100%;
z-index: 1;
bottom: 0;
height: 100%;
}
.outerDiv{
width:231px;
height:173px;
position:relative;
}
p{margin:0 0 10px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outerDiv">
<div class="myOverlay">
<div class="myclass">
<p>jadu's best Accommodation/ abcd hddndehd lfjhgs</p>
</div>
</div>
</div>
I should get ... at the end of the statement but i am not getting it.

Your CSS hides the rest, just change font-size to 30px you will see some part of the hidden part.

Opening a div 'popup' from clicking a parent div

When clicking the 'test' div, it opens up the div price-list-test in a popup way like this:
However, I am stuck on trying to get the div to pop up on the 'right' alignment of the element rather than left, like this:
How can I achieve this?
$(document).ready(function() {
$(".test").each(function() {
$(this).click(function() {
var leftpos = $(this).offset() - window.screen.width;
$(this).children().css("left", leftpos.left);
$(this).children().css("display", "block");
});
})
});
.price-list-test {
width: 100px;
height: 100px;
background-color: red;
color: white;
display: none;
position: absolute;
}
.test {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
Open
<div class="price-list-test">
Test
</div>
</div>

Make 'test' class position relative, after that set 'price-list-test' left : 0%
.test {
postion: relative;
}
.price-list-test {
left: 0 %;
width: 100px;
height: 100px;
background-color: red;
color: white;
display: none;
position: absolute;
}

Using jQuery / JavaScript to float element to right

Fiddle
Hello,
I found sticky sidebar jQuery script, but the fixed element (sidebar) floats to the left once I start scrolling down. I am trying to keep it on the right-hand side the whole time. Also, I am trying to get some spacing around sidebar once it starts scrolling, as now it's just stuck to the very top.
I trust it's a simple fix but JavaScript is like a dark forest to me, I tried to change couple things, tried to look online but can't seem to find the answers or I just don't know how to look for them so I apologise if this has been asked before.
$( document ).ready(function() {
console.log( "document ready!" );
var $sticky = $('.sticky');
var $stickyrStopper = $('.sticky-stopper');
if (!!$sticky.offset()) { // make sure ".sticky" element exists
var generalSidebarHeight = $sticky.innerHeight();
var stickyTop = $sticky.offset().top;
var stickOffset = 0;
var stickyStopperPosition = $stickyrStopper.offset().top;
var stopPoint = stickyStopperPosition - generalSidebarHeight - stickOffset;
var diff = stopPoint + stickOffset;
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
if (stopPoint < windowTop) {
$sticky.css({ position: 'absolute', top: diff });
} else if (stickyTop < windowTop+stickOffset) {
$sticky.css({ position: 'fixed', top: stickOffset });
} else {
$sticky.css({position: 'absolute', top: 'initial'});
}
});
}
});
.container {
width: 1000px;
float: left
}
.header {
clear: both;
margin-bottom: 10px;
border: 1px solid #000000;
height: 90px;
}
.sidebar {
float: right;
width: 350px;
border: 1px solid #000000;
}
.content {
float: right;
width: 640px;
border: 1px solid #000000;
height: 800px;
}
.footer {
clear: both;
margin-top: 10px;
border: 1px solid #000000;
height: 820px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
<div class="header">
This is header
</div>
<div class="sidebar sticky">
This is side bar
</div>
<div class="content">
This is main content
</div>
<div class="footer">
<div class="sticky-stopper"></div>
This is my footer
</div>
</div>

I used the Sticky-Kit.js plugin. That worked for me. See below, it keeps your sidebar to the right the entire time and has the sticky effect you're after:
$(document).ready(function() {
console.log("document ready!");
$(".sidebar").stick_in_parent();
});
.container {
width: 1000px;
float: left
}
.header {
clear: both;
margin-bottom: 10px;
border: 1px solid #000000;
height: 90px;
}
.sidebar {
float: right;
width: 350px;
border: 1px solid #000000;
}
.content {
float: left;
width: 640px;
border: 1px solid #000000;
height: 800px;
}
.footer {
clear: both;
margin-top: 10px;
border: 1px solid #000000;
height: 820px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/leafo/sticky-kit/v1.1.2/jquery.sticky-kit.js"></script>
<div class="container">
<div class="header">
This is header
</div>
<div class="sidebar sticky">
This is side bar
</div>
<div class="content">
This is main content
</div>
<div class="footer">
<div class="sticky-stopper"></div>
This is my footer
</div>
</div>

You can use JQuery's css() method to apply css on scroll to the element to achieve the desired effect.
Change the JavaScript as follows:
if (stopPoint < windowTop) {
$sticky.css({ position: 'absolute', top: diff, right: '0px' });
} else if (stickyTop < windowTop+stickOffset) {
$sticky.css({ position: 'fixed', top: stickOffset, right: '0px' , margin: '10px 10px 0px 0px'});
} else {
$sticky.css({position: 'absolute', top: 'initial', right: "0px", margin: '0px'});
}
A css property of right:0px is applied to the element on scroll, since it's position becomes aboslute on scroll.
margin: 10px 10px 0px 0px was also applied to the element to provide additional spacing around it when scrolling. This is then sent to margin:0px when the scroll stops.
You will also need to adjust the css of the content css class, if you do not want your side bar sitting on top of the content area.
.content {
width: 550px;
border: 1px solid #000000;
height: 800px;
}
Here is an updated fiddle demonstrating these changes.

Adding/removing a class with jQuery when scrolling inside a div

I have a child <div> which has position: fixed; applied by adding a class of is-active when you scroll past the top of it's parent <div>.
Is it possible to fix the position of the child at the end of the parent as you scroll beyond the end of the parent? And then re-apply the class 'is-active' to the child when you scroll back up above the end of the parent?
Essentially I'd like the fixed position of the child to only be active within it's parent. I want to achieve what position: sticky; can do without the polyfill overhead and lack of browser support. Is this possible?
Here's what I have currently:
HTML:
<div class="outer">
<div class="nav">
</div>
</div>
<div class="end">
</div>
CSS:
.outer {
position: relative;
width: 100%;
height: 200rem;
margin: 10rem 0 0;
background: red;
}
.end {
width: 100%;
height: 40rem;
background: green;
}
.nav {
position: absolute;
top: 0;
left: 0;
width: 10rem;
height: 30rem;
background: blue;
&.is-active {
position: fixed;
top: 2rem;
left: 2rem;
}
}
jQuery:
var $nav = $('.nav');
var $outer = $('.outer');
$(function(){
$(window).scroll(function() {
var $scroll = $(window).scrollTop();
var $parentOffset = $outer.offset().top;
var $parentHeight = $outer.height();
var $navHeight = $nav.height();
if($scroll > $parentOffset && $scroll < ($parentHeight - $navHeight)) {
$nav.addClass('is-active');
}
else {
$nav.removeClass('is-active');
});
});
Here's Codepen with a working example also: https://codepen.io/abbasarezoo/pen/BwXBLv
Thanks for any help in advance!

i just changed it now sticky header is working
https://codepen.io/anon/pen/OxKPbj
if($scroll > $parentOffset && $scroll ) {
$nav.addClass('is-active');
}

Make a div scroll with page only in a certain place?

How can it be made so that a div scrolls with the page but only in a certain area of the page?
I can't work out how to do this with CSS for only part of the page, I think javascript may be the only option.
For e.g. There's three sections of a page, Top, Middle and Bottom.
There's a right floated div which should scroll with the user in the middle section and stop scrolling to be 'left in place' at the top of the middle section as well as the bottom of the middle section.
#Top {
background-color: grey;
width: 100%;
height: 400px;
}
#Middle {
background-color: green;
width: 100%;
height: 800px;
}
#Bottom {
background-color: blue;
width: 100%;
height: 400px;
}
#scrolling-section {
background-color: yellow;
width: 30%;
height: 150px;
float: right;
}
<div id="Top">
</div>
<div id="Middle">
<div id="scrolling-section">
This box should scroll along the green section but 'cut-off' and stop scrolling at the top and bottom of the green section
</div>
</div>
<div id="Bottom">
</div>
JSFiddle: fiddle

So here you have solution using jquery:
Listen to the scroll event and calculate how much the scrolling-section goes outside the Middle section while scrolling up / down.
Added position: relative to the scrolling-section.
Adjust the position of the scrolling-section accordingly.
$(document).scroll(function() {
var wrapper = $('#Middle');
var box = $('#scrolling-section');
var offsetTop = - wrapper.offset().top + $(window).scrollTop();
var offsetBottom = wrapper.offset().top - $(window).scrollTop() + wrapper.outerHeight() - box.outerHeight();
if (offsetBottom > 0 && offsetTop < 0) {
box.css({
'top': 0
});
} else if (offsetBottom > 0 && offsetTop > 0) {
box.css({
'top': offsetTop + 'px'
});
} else {
box.offset({
'top': $(window).scrollTop() + offsetBottom
});
}
});
#Top {
background-color: grey;
width: 100%;
height: 400px;
}
#Middle {
background-color: green;
width: 100%;
height: 800px;
}
#Bottom {
background-color: blue;
width: 100%;
height: 400px;
}
#scrolling-section {
position: relative;
background-color: yellow;
width: 30%;
height: 150px;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Top">
</div>
<div id="Middle">
<div id="scrolling-section">
This box should scroll along the green section but 'cut-off' and stop scrolling at the top and bottom of the green section
</div>
</div>
<div id="Bottom">
</div>
Let me know your feedback on this. Thanks!

Some Javascript is needed in order to read the point where you want to change the state of the div you wish to address. You can do this with the getBoundingClientRect() method. I have worked out a fiddle that will show you.
What happens is that you read the position of #Middle. I have added an input field that shows you the value. The change will be when the position hits zero. You then change the CSS properties of the #scrolling-section.
You will see some added readings of the element to ensure that it can be positioned in place and will keep its original width;
var scrollposition = document.getElementById("Middle");
var scrollsection = document.getElementById("scrolling-section");
var scrollsection_offsetLeft = scrollsection.offsetLeft;
var scrollsection_width = scrollsection.offsetWidth;
var valy = document.getElementById("posy");
window.addEventListener("scroll", function(event) {
valy.value = scrollposition.getBoundingClientRect().y || scrollposition.getBoundingClientRect().top;
if (valy.value <= 0) {
scrollsection.style.position = "fixed";
scrollsection.style.top = "0px";
scrollsection.style.left = scrollsection_offsetLeft + "px";
scrollsection.style.width = scrollsection_width + "px";
} else {
scrollsection.style.position = "static";
scrollsection.style.top = "auto";
scrollsection.style.left = "auto";
}
}, false)
#posy {
position: fixed;
top: 0;
}
#Top {
background-color: grey;
width: 100%;
height: 400px;
}
#Middle {
background-color: green;
width: 100%;
height: 800px;
}
#Bottom {
background-color: blue;
width: 100%;
height: 400px;
}
#scrolling-section {
background-color: yellow;
width: 30%;
height: 150px;
float: right;
}
<input type="text" id="posy" />
<div id="Top">
</div>
<div id="Middle">
<div id="scrolling-section">
This box should scroll along the green section but 'cut-off' and stop scrolling at the top and bottom of the green section
</div>
</div>
<div id="Bottom">
</div>

I'm on my mobile but if you add
#scrolling-section {
position: fixed;
background-color: yellow;
width: 30%;
height: 150px;
right: 8px;
}
This will scroll with the page but really there will need to be an event listener that will trigger when #scrolling-section appears on the screen possibly adding the attribute position:fixed; then another event listener when the #bottom appears calculates the size of #middle set margin-top & position:absolute; hope this helps point in the right direction.