Develop Reference

Why is the expanding card preview text increasing after being opened and closed?

I have found this Codepen that I wish to use and it's perfect apart from the fact that once you open and close a card, the preview text reveals more than before it was opened.
https://codepen.io/Beardwig/pen/RZExaj
I think it has something to do with this class however I'm not entirely sure
<div class='expd-truncate'>
This is the link to the Codepen, any help is greatly appreciated.
Thanks

The text is truncated by javascript.
When closing the card, the javascript function that truncates again the text is called too much early:
$('.expd-truncate',thisCard).snipper({height: '60px'});
should be called at the very end of your code

The problem is not the class, nor in fact the CSS at all, but rather that after expanding and contracting the card there is too much content inside of the div.expd-truncate and the p tag within it - prior to the expansion it is a call to the .snipper method when the document is ready which truncates that content and appends an ellipsis to keep the content from being too long. I'm referring to this part of the code on line 74 of the CodePen:
$(document).ready(function(){
$('.expd-truncate').snipper({height: '60px'});
});
The bug is caused by the .snipper method being called prior to the alteration of the classes governing the display of the content being snipped when the button to retract/un-expand the card is clicked. Thus, when the card is retracted, the content gets snipped, then the classes are changed and the layout changes accordingly and the content reflows, and now the content is ultimately a different height than it was when it was snipped.
So the solution is to simply call the .snipper method after the alteration of the classes (ie line 117 ($('.expd-truncate',thisCard).snipper({height: '60px'});) should be below lines 118-121).
See this fork I made of the CodePen above for a working demonstration:
https://codepen.io/anon/pen/GBezWG
Or check out the JS in this working snippet, which is equivalent but with plain HTML and CSS:
(function($){
"use strict"
$.fn.snipper = function(options) {
var opts = $.extend({}, $.fn.snipper.defaults, options),
trimText = function($el, height, ellipsis) {
// Make sure HTML entities only count as one character
var ellipsisNumChars = ellipsis.replace(/&[^;]+?;/g, '.').length;
while ($el.outerHeight() > height) {
if ($el.text().length <= ellipsisNumChars) {
break;
}
$el.html(function(i, text) {
if (/\s/.test(text)) {
return text.replace(/\s*(\S)*$/, ellipsis);
}
// If there is just one really long string without spaces
// start stripping the last character and concatinating the ellipsis
return text.replace(new RegEx('.{' + (ellipsisNumChars + 1) + '}$'), ellipsis);
});
}
};
this.each(function(){
var $el = $(this),
fullText = opts.fullText || $el.data('snipper:fullText'),
height = opts.height,
ellipsis = opts.ellipsis || '';
// If height is a function get its return value
if (typeof(height) === 'function') {
height = height.apply(this);
}
if (!height) {
return;
}
height = parseInt(height, 10);
if (isNaN(height)) {
return;
}
if (fullText) {
if (typeof(fullText) === 'function') {
fullText = fullText.apply(this);
}
$el.html(fullText);
} else {
$el.data('snipper:fullText', $el.html());
}
trimText($el, height, ellipsis);
});
return this;
};
$.fn.snipper.defaults = {
ellipsis: '…'
};
}(jQuery))
//none/grow pulse/grow, bounceIn/grow, BounceInUp/slide, fadeInUp/slide, lightSpeedIn/slide, rotateInUpLeft/fade, rollIn/slide, zoomIn/fade, slideInUp/slide
var speed = 300,
animClassIn = "pulse",
animClassOut = "fadeIn",
expandStyle = "grow";
$(document).ready(function(){
$('.expd-truncate').snipper({height: '60px'});
});
//
//Expand
//
$(document).on("click",".wrap-expd-card .expd-card-toggle" , function() {
var thisCard = $(this).closest(".expd-card"),
cardLeft = thisCard.offset().left,
cardTop = thisCard.offset().top - $(window).scrollTop();
$('.expd-truncate',thisCard).snipper({height: '9999px'});
thisCard.parent(".wrap-expd-card").addClass("expd-hold");
thisCard.prependTo("body");
$("body").addClass("expd-body");
thisCard.addClass("expd-pre-anim").css({left: cardLeft, top: cardTop});
thisCard.removeClass("out-anim "+animClassOut);
thisCard.css('opacity');
if(expandStyle == "grow") {
thisCard.removeClass("expd-pre-anim").addClass("expd-active").css({left: 0, top: 0, transition: "all "+speed+"ms ease", opacity: 1});
thisCard.addClass(animClassIn);
} else if (expandStyle == "slide") {
thisCard.animate({
top: '100%'
}, 100, function () {
thisCard.removeClass("expd-pre-anim").addClass("expd-active");
}).promise().done(function () {
thisCard.addClass(animClassIn);
});
} else if (expandStyle == "fade") {
thisCard.removeClass("expd-pre-anim").addClass("expd-active").css({left: 0, top: 0,opacity: 1, transition: "opacity "+speed+"ms"});
thisCard.addClass(animClassIn);
}
});
//
//Retract
//
$(document).on("click",".expd-body .expd-card-toggle", function() {
var thisCard = $(this).closest(".expd-card"),
cardLeft = $(".expd-hold").offset().left,
cardTop = $(".expd-hold").offset().top - $(window).scrollTop();
thisCard.removeClass("expd-active "+animClassIn).addClass("expd-pre-anim").css({left: cardLeft, top: cardTop, opacity: 0});
thisCard.animate({scrollTop:0},speed);
//setTimeout(function(){
thisCard.removeClass("expd-pre-anim").css({left: 0, top: 0, opacity: 1});
thisCard.appendTo(".wrap-expd-card.expd-hold").addClass(animClassOut);
$(".wrap-expd-card").removeClass("expd-hold");
$("body").removeClass("expd-body");
$('.expd-truncate',thisCard).snipper({height: '60px'});
//}, 0);//
});
body {
background: #333;
}
.expd-card,
.expd-card * {
box-sizing: border-box;
}
.wrap-expd-card {
width: 320px;
height: 320px;
float: left;
margin: 16px;
}
.expd-card.fadeIn {
animation-duration: 300ms;
animation-delay: 0ms;
}
.expd-card {
font-family: Roboto, sans-serif;
color: #7c7c7c;
background: #fff;
position: relative;
width: 320px;
height: 320px;
border: 1px solid #ccc;
overflow: hidden;
animation-duration: 400ms;
animation-delay: 200ms;
animation-iteration-count: 1;
}
.expd-card .expd-card-body-wrap {
max-width: 960px;
margin: 0 auto;
}
.expd-card .expd-card-body-wrap .expd-card-img {
height: 0px;
padding-bottom: 56.25%;
background: #bbb;
}
.expd-card .expd-card-body-wrap .expd-card-content {
margin: 18px 16px;
position: relative;
}
.expd-card .expd-card-body-wrap .expd-card-content .expd-card-toggle {
position: absolute;
cursor: pointer;
height: 40px;
width: 40px;
background: #f00;
right: 16px;
top: -36px;
border-radius: 50%;
}
.expd-card .expd-card-body-wrap .expd-card-content .expd-heading h2 {
color: #383838;
font-size: 20px;
margin: 0;
}
.expd-card .expd-card-body-wrap .expd-card-content .expd-heading strong {
color: #585858;
font-size: 14px;
}
.expd-card .expd-card-body-wrap .expd-card-content p {
font-size: 14px;
margin: 10px 0px;
}
.expd-body {
overflow: hidden;
}
.expd-card.expd-pre-anim {
position: fixed;
z-index: 99;
}
.expd-card.expd-active {
position: fixed;
z-index: 99;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
height: 100% !important;
overflow: scroll;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>fiddle</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body class="">
<div class="wrap-expd-card">
<div class="expd-card animated fadeIn" style="left: 0px; top: 0px; transition: all 300ms ease 0s; opacity: 1;">
<div class="expd-card-body-wrap">
<div class="expd-card-img">
</div>
<div class="expd-card-content">
<div class="expd-card-toggle">
</div>
<div class="expd-heading">
<h2>Lorem Ipsum</h2>
<strong>Subtitle</strong>
</div>
<div class="expd-truncate">
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p>
<p>Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
<p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada.</p>
<p>Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus.</p>
</div>
</div>
</div>
</div>
</div>
<div class="wrap-expd-card">
<div class="expd-card animated">
<div class="expd-card-body-wrap">
<div class="expd-card-img">
</div>
<div class="expd-card-content">
<div class="expd-card-toggle">
</div>
<div class="expd-heading">
<h2>Lorem Ipsum</h2>
<strong>Subtitle</strong>
</div>
<div class="expd-truncate">
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p>
<p>Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
<p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada.</p>
<p>Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus.</p>
</div>
</div>
</div>
</div>
</div>
<div class="wrap-expd-card">
<div class="expd-card animated">
<div class="expd-card-body-wrap">
<div class="expd-card-img">
</div>
<div class="expd-card-content">
<div class="expd-card-toggle">
</div>
<div class="expd-heading">
<h2>Lorem Ipsum</h2>
<strong>Subtitle</strong>
</div>
<div class="expd-truncate">
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p>
<p>Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
<p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada.</p>
<p>Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Grow Canvas to fit following div

I have a canvas which I want to be 100% screen width and at least 100% screen height, but more if the following div goes beyond the bottom of the screen.
I am filling the canvas using Trianglify.
var pattern = Trianglify({
cell_size: 25,
x_colors: 'Greens'
});
pattern.canvas(document.getElementById('container1'));
setInterval(function() {
// method to be executed;
var pattern = Trianglify({
cell_size: 25,
x_colors: 'Greens'
});
pattern.canvas(document.getElementById('container1'));
}, 1000);
canvas#container1 {
position: absolute;
width: 100vw;
min-height: 100vh;
}
.screen-container {
min-height: 100vh;
position: relative
}
.trianglify-container {
background-color: transparent;
color: #fff;
text-align: center;
padding-top: 20vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/1.0.1/trianglify.min.js"></script>
<canvas id="container1"></canvas>
<div class="screen-container trianglify-container">
<div class="container">
...
</div>
</div>
EDIT
The important thing for me is that the div immediately following the canvas needs to have the canvas covering all of it's background and cover at least 1 screen. It there is a different way to achieve this I'm happy to adapt my approach.

Is this result what you want?
-- Long content --
var pattern = Trianglify({
cell_size: 25,
x_colors: 'Greens'
});
pattern.canvas(document.getElementById('container1'));
setInterval(function() {
// method to be executed;
var pattern = Trianglify({
cell_size: 25,
x_colors: 'Greens'
});
pattern.canvas(document.getElementById('container1'));
}, 1000);
.outer-wrapper{
min-height: 100vh;
position: relative;
}
canvas#container1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.screen-container {
/*min-height: 100vh;*/
position: relative;
}
.trianglify-container {
background-color: transparent;
color: #fff;
text-align: center;
/*padding-top: 20vh;*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/1.0.1/trianglify.min.js"></script>
<div class="outer-wrapper">
<canvas id="container1"></canvas>
<div class="screen-container trianglify-container">
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper lacinia semper. Pellentesque dignissim tempus nisi sit amet porttitor. Sed laoreet, nisi eu auctor cursus, tellus turpis porta diam, ac fermentum enim odio auctor dolor. Duis in nunc rhoncus, vestibulum est at, fermentum ligula. Suspendisse dui dui, luctus id lacus eu, tempor venenatis sem. Ut pellentesque sodales turpis quis efficitur. Donec vulputate placerat orci, vitae porttitor nunc. Etiam risus nibh, porta porta libero in, tempor auctor dolor. Quisque id augue at dui egestas vulputate.
Praesent tristique eu urna non faucibus. Nunc leo urna, euismod in neque vitae, elementum consequat libero. Integer in dignissim nunc, id scelerisque metus. Etiam ut ipsum iaculis, ullamcorper eros nec, elementum odio. Donec ornare lorem a semper porttitor. Suspendisse tincidunt mauris nec dui rhoncus, in semper augue blandit. Integer laoreet, velit sed molestie malesuada, enim quam mollis sapien, ullamcorper sollicitudin mi mi non urna. Mauris eu dignissim lectus.
Aliquam lacus tortor, dictum quis pulvinar volutpat, tincidunt id leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce fermentum aliquam neque vitae bibendum. Nulla volutpat luctus urna et faucibus. Fusce convallis nulla tortor, vel ornare ante scelerisque in. Vivamus justo odio, porta nec vulputate ut, volutpat quis ipsum. Praesent id volutpat justo, sit amet euismod dui. In eget erat massa. Aliquam ultrices egestas ipsum, ac tincidunt diam gravida ac. Nullam tortor dui, viverra scelerisque vehicula varius, luctus in ipsum. Nulla dolor est, mattis in pellentesque at, interdum ac nibh.
Ut bibendum tellus varius orci aliquet luctus. Duis tortor nisl, suscipit at ornare ut, scelerisque nec dolor. Ut efficitur facilisis nulla a rutrum. Donec ut sodales odio, sed venenatis leo. Ut scelerisque eros in gravida fringilla. Aliquam fringilla vitae orci sed tincidunt. Aenean efficitur nibh elit, id sollicitudin enim mattis ut.
Praesent hendrerit ex eget quam ultrices, eget iaculis nunc pellentesque. In in orci interdum sapien bibendum sagittis. Mauris at massa quis nisi commodo facilisis at vel ligula. Vestibulum vitae aliquet lorem, vel faucibus lacus. Integer tortor nulla, rutrum dictum elit a, iaculis scelerisque nulla. Suspendisse massa eros, cursus quis enim a, volutpat aliquam quam. Fusce tristique tortor id laoreet blandit. Donec laoreet enim felis, consequat faucibus ante auctor vitae. Duis sollicitudin euismod dolor, in accumsan ipsum. Mauris tempus ligula nec nisl ornare dictum. Quisque luctus dolor magna. Maecenas et neque eu mi pellentesque maximus eu sit amet purus. Fusce eu porta tellus.
</div>
</div>
</div>
-- Same code, this time with a shorter content --
var pattern = Trianglify({
cell_size: 25,
x_colors: 'Greens'
});
pattern.canvas(document.getElementById('container1'));
setInterval(function() {
// method to be executed;
var pattern = Trianglify({
cell_size: 25,
x_colors: 'Greens'
});
pattern.canvas(document.getElementById('container1'));
}, 1000);
I just wraped them both inside a wrapper div that has `min-height: 100%`. The wrapper div will expand with the content if it get longers, while the canvas always fill the wrapper div.
.outer-wrapper{
min-height: 100vh;
position: relative;
}
canvas#container1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.screen-container {
/*min-height: 100vh;*/
position: relative;
}
.trianglify-container {
background-color: transparent;
color: #fff;
text-align: center;
/*padding-top: 20vh;*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/1.0.1/trianglify.min.js"></script>
<div class="outer-wrapper">
<canvas id="container1"></canvas>
<div class="screen-container trianglify-container">
<div class="container">
Short content
</div>
</div>
</div>

https://jsfiddle.net/hbe5j4m9/4/
Like this?
I Updated the .screen-container to contain the height of the canvas
.screen-container {
min-height: 100%;
position: relative
}

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>

div like fixed but with position:absolute

I need something like this, but with position:absolute not fixed.
Is it possible with JavaScript to change top when user scrolling page?
var elementPosition = $('#div2').offset();
var div1 = $('#div1');
var main=$('#main');
var spacer = $('#spacer');
$(window).scroll(function(){
if($(window).scrollTop() > elementPosition.top){
var left = Math.ceil(div1.offset().left + div1.outerWidth()) + 'px';
console.log(main.width(), div1.width())
var width = main.width() - div1.outerWidth() + 'px';
$('#div2').css({
position: 'fixed',
left: left,
width: width
});
} else {
$('#div2').css({
'position':'static',
width: 'auto'
});
}
});
body{
margin: 0;
width: 100%;
}
* { box-sizing: border-box;}
#main{
width:80%;
margin:0 auto;
}
#div1{
width: 10%;
border: solid 1px #000000;
background-color: #0066CC;
float: left;
}
#div2{
height: 30px;
border: solid 1px #000000;
background-color: #66CC00;
}
#spacer {
width: 90%;
min-height:30px;
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="main">
<div id="div1">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.</div>
<div id="spacer">
<div id="div2">div2</div>
</div>
</div>
</body>

Change to this:
$('#div2').css({
position: 'absolute',
top: $(window).scrollTop(),
left: left,
width: width
});
Instead of (previous):
$('#div2').css({
position: 'fixed',
left: left,
width: width
});

Running a function to change images every time <h4> reaches middle of window

I'm completely blocked with this issue. I need to run a function which changes the image every time my h4 reaches the middle of window. In my case, one image per h4, changing it when user scrolls down or scrolls up. That's to say, each img will belong to a h4. Up to now, I've achieved change the opacity per h4 but I don't get change the image. Here's my html:
<div id="column-left">
<h4 class="active">Targets</h4>
<h4>Valors</h4>
<h4>Me </h4>
</div>
<div id="column-right">
<img src="img/about/map.jpg" class="active" alt="Map"/>
<img src="img/about/bridge.jpg" alt="Bridge"/>
<img src="img/about/road.jpg" alt="Road"/>
</div>
Here's my code:
var findMiddleElement = (function(docElm){
var viewportHeight = docElm.clientHeight,
elements = $('h4');
$('h4').first().css('opacity','1','important');
return function(e){
var middleElement;
if( e && e.type == 'resize' )
viewportHeight = docElm.clientHeight;
elements.each(function(){
var pos = this.getBoundingClientRect().top;
// if an element is more or less in the middle of the viewport
if( pos > viewportHeight/2.5 && pos < viewportHeight/1.5 ){
middleElement = this;
console.log('I am in the middle');
changeImage();
return false; // stop iteration
}
});
$(middleElement).css({opacity:'1', transition : 'opacity 1s ease-in-out'});
}
})(document.documentElement);
$(window).on('scroll resize', findMiddleElement);
function changeImage(){
console.log('I am ready to change the image');
$('img').each(function(){
$('.active').removeClass('active');
$(this).addClass('active');
});
}
And here's the fiddle:
jsfiddle.net/antoniobarcos/owv1ysto/4/
Thanks in advance.

Your changeImage() just assigns the active class to the last image element on the page. You don't have any css rule, regarding the behaviour of that class on an image element, so obviously it does not affect anything. I see two possible solutions:
Send the index of the current h4 element (you are looping through them) to the changeImage function and select the img:nth-child(idx + 1) element to apply the active class. It would also require some css like img { display: none; } img.active { display: block; }. In my opinion this is not very flexible.
Add some attribute, e.g. data-image, with the source for the image, corresponding to each of h4 element. Then, you would have only one image element in the right-column and your code would look like something similar to this:
/* CHANGE MI IMAGE PLEASE */
var findMiddleElement = (function(docElm) {
var viewportHeight = docElm.clientHeight,
elements = $('h4');
$('h4').first().css('opacity', '1', 'important');
return function(e) {
var middleElement;
if (e && e.type == 'resize') viewportHeight = docElm.clientHeight;
elements.each(function(idx) {
var pos = this.getBoundingClientRect().top;
// if an element is more or less in the middle of the viewport
if (pos > viewportHeight / 2.5 && pos < viewportHeight / 1.5) {
middleElement = this;
console.log('I am in the middle');
changeImage($(this).data('image'));
return false; // stop iteration
}
});
$(middleElement).css({
opacity: '1',
transition: 'opacity 1s ease-in-out'
});
};
})(document.documentElement);
$(window).on('scroll resize', findMiddleElement);
// You probably don't need a function with one line
function changeImage(src) {
console.log('I am ready to change the image');
$('img').attr('src', src);
}
html,
body {
width: 100%;
height: 100%;
font-size: 0;
margin: 0;
padding: 0;
background-color: #000;
}
h4 {
text-transform: uppercase;
}
.left-column {
display: inline-block;
width: 40%;
height: 100%;
height: 100%;
background-color: #000;
font-size: 16px;
color: #FFF;
padding: 20px;
box-sizing: border-box;
}
.right-column {
display: inline-block;
width: 60%;
height: 100%;
height: 100%;
background-color: black;
position: fixed;
}
.right-column img {
min-width: 100%;
min-height: 100%;
}
h4 {
opacity: .2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left-column">
<h4 data-image="http://i2.cdn.turner.com/cnn/dam/assets/130530161523-100-beaches-crane-beach-horizontal-gallery.jpg"> Targets </h4>
<p>Nunc vitae turpis sem. Aliquam augue ligula, lacinia quis massa volutpat, fermentum ornare quam. Donec lacinia lorem orci, sit amet facilisis arcu posuere eu. Proin eu mauris ligula. Pellentesque fringilla, nisl eu ullamcorper hendrerit, nisl neque
auctor turpis, nec placerat justo massa vel erat. Vestibulum quis metus et tellus feugiat hendrerit. Nunc volutpat in turpis id imperdiet. Duis odio massa, maximus at pulvinar eu, semper sed eros. Praesent consectetur eros a neque accumsan, at semper
libero pharetra. Sed tempor, nunc quis gravida congue, lacus nisi aliquam urna, sed hendrerit risus risus eget ipsum. Vivamus eu consequat risus. Fusce tempus rhoncus odio non gravida. Nunc in ante lacus.</p>
<h4 data-image="http://www.jeremynoeljohnson.com/wp-content/uploads/2014/12/mountain.jpg"> Valors </h4>
<p>Maecenas sollicitudin ligula nibh, at rutrum leo sagittis non. Sed quis ornare elit, eget sodales quam. Suspendisse arcu elit, rhoncus vel neque a, faucibus aliquam massa. Mauris tincidunt dui a ipsum suscipit malesuada. Donec lacus justo, porttitor
vel vehicula in, placerat rutrum mi. Etiam non fermentum massa, nec congue justo. Duis sed ex molestie, varius tellus sit amet, molestie nunc. Phasellus aliquam magna nunc, ut lacinia massa egestas molestie. Nullam fringilla porta massa sed rhoncus.
Curabitur non ullamcorper odio, eu feugiat urna. Integer a mattis magna, in sollicitudin arcu. Fusce consectetur eu orci at sagittis. Maecenas vel ligula consectetur, placerat nibh quis, gravida augue. In risus ex, volutpat in risus at, efficitur
congue urna. Sed posuere mollis consectetur.</p>
<h4 data-image="http://collabcubed.files.wordpress.com/2012/10/high-trestle-trail-bridge_kevin_eberle_booneiowa_collabcubed.jpg"> Me </h4>
<p>Maecenas sollicitudin ligula nibh, at rutrum leo sagittis non. Sed quis ornare elit, eget sodales quam. Suspendisse arcu elit, rhoncus vel neque a, faucibus aliquam massa. Mauris tincidunt dui a ipsum suscipit malesuada. Donec lacus justo, porttitor
vel vehicula in, placerat rutrum mi. Etiam non fermentum massa, nec congue justo. Duis sed ex molestie, varius tellus sit amet, molestie nunc. Phasellus aliquam magna nunc, ut lacinia massa egestas molestie. Nullam fringilla porta massa sed rhoncus.
Curabitur non ullamcorper odio, eu feugiat urna. Integer a mattis magna, in sollicitudin arcu. Fusce consectetur eu orci at sagittis. Maecenas vel ligula consectetur, placerat nibh quis, gravida augue. In risus ex, volutpat in risus at, efficitur
congue urna. Sed posuere mollis consectetur.</p>
</div>
<div class="right-column">
<img src="http://i2.cdn.turner.com/cnn/dam/assets/130530161523-100-beaches-crane-beach-horizontal-gallery.jpg" />
</div>
Note that when you scroll back up, the image won't change to the first one, since the first h4 element is not in the middle. You should fix that case, if it is not desired behaviour.