Develop Reference

How to listen scroll in angular and add/remove class based on the scroll position

I am new to Angular, working on a project where the second div should start scrolling one the first div reaches its bottom. I have manage to do it using Vanilla Javascript but not sure how I can achieve the same in Angular. Any help would be appreciated. Fiddle here
Styles
body {
margin: 0;
padding: 0;
}
.container {
padding-bottom: 5rem;
}
.container.nopadding {
padding-bottom: 0;
}
.container-2 {
background-color: #474752;
position: fixed;
height: 5rem;
overflow: hidden;
bottom: 0;
z-index: 1;
}
.container-2.auto {
position: static;
height: auto;
}
h1 {
text-align: center;
text-transform: uppercase;
}
HTML
<div class="overflow">
<div class="container">
Donec sollicitudin molestie malesuada. Pellentesque in ipsum id orci porta dapibus. Nulla quis lorem ut libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum
ac diam sit amet quam vehicula elementum sed sit amet dui. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ac diam sit amet quam vehicula elementum
sed sit amet dui. Curabitur aliquet quam id dui posuere blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet quam id dui posuere blandit. Proin eget tortor risus.
Donec sollicitudin molestie malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Pellentesque in ipsum id orci porta dapibus. Nulla quis lorem ut libero malesuada feugiat. Pellentesque
in ipsum id orci porta dapibus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum
ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur aliquet quam id dui posuere blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Curabitur aliquet quam id dui posuere blandit. Proin eget tortor risus. Donec sollicitudin molestie malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.Donec sollicitudin molestie malesuada. Pellentesque in ipsum id orci porta dapibus. Nulla quis lorem ut libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum
ac diam sit amet quam vehicula elementum sed sit amet dui. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ac diam sit amet quam vehicula elementum
sed sit amet dui. Curabitur aliquet quam id dui posuere blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet quam id dui posuere blandit. Proin eget tortor risus.
</div>
<div class="container-2">
<h1>
Container 2 title
</h1>
Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Sed porttitor lectus nibh. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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 aliquet quam id
dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Pellentesque in ipsum id orci porta dapibus.
</div>
Script
(function() {
let container = document.querySelector('.container');
let containerScroll = document.querySelector('.container-2');
let containersHeight = container.offsetHeight;
window.addEventListener('scroll', function() {
console.log("Into scroll");
if (Math.floor(window.scrollY) >= Math.floor(container.offsetTop + containersHeight - window.innerHeight)) {
containerScroll.classList.add('auto');
container.classList.add('nopadding');
}
else {
containerScroll.classList.remove('auto');
container.classList.remove('nopadding');
}
});
})();

Here is how it can ben done in angular (just translating your code to the Angular way):
demo
#Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
#ViewChild("firstContainer") containerOne: ElementRef;
#ViewChild("secondContainer") containerTwo: ElementRef;
constructor(private renderer: Renderer2) {}
#HostListener("window:scroll")
adjustHeights() {
console.log("Into scroll");
const containersHeight = this.containerOne.nativeElement.offsetHeight;
if (
Math.floor(window.scrollY) >=
Math.floor(
this.containerOne.nativeElement.offsetTop +
containersHeight -
window.innerHeight
)
) {
this.renderer.addClass(this.containerTwo.nativeElement, "auto");
this.renderer.addClass(this.containerOne.nativeElement, "nopadding");
} else {
this.renderer.removeClass(this.containerTwo.nativeElement, "auto");
this.renderer.removeClass(this.containerOne.nativeElement, "nopadding");
}
}
}
html:
<div class="overflow">
<div class="container" #firstContainer>
Donec sollicitudin molestie malesuada. Pellentesque in ipsum id orci porta dapibus. Nulla quis lorem ut libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum
ac diam sit amet quam vehicula elementum sed sit amet dui. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ac diam sit amet quam vehicula elementum
sed sit amet dui. Curabitur aliquet quam id dui posuere blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet quam id dui posuere blandit. Proin eget tortor risus.
Donec sollicitudin molestie malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Pellentesque in ipsum id orci porta dapibus. Nulla quis lorem ut libero malesuada feugiat. Pellentesque
in ipsum id orci porta dapibus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum
ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur aliquet quam id dui posuere blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Curabitur aliquet quam id dui posuere blandit. Proin eget tortor risus. Donec sollicitudin molestie malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.Donec sollicitudin molestie malesuada. Pellentesque in ipsum id orci porta dapibus. Nulla quis lorem ut libero malesuada feugiat. Pellentesque in ipsum id orci porta dapibus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum
ac diam sit amet quam vehicula elementum sed sit amet dui. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ac diam sit amet quam vehicula elementum
sed sit amet dui. Curabitur aliquet quam id dui posuere blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet quam id dui posuere blandit. Proin eget tortor risus.
</div>
<div class="container-2" #secondContainer>
<h1>
Container 2 title
</h1>
Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Sed porttitor lectus nibh. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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 aliquet quam id
dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Pellentesque in ipsum id orci porta dapibus.
</div>
css is the same.
I think it would be better to do this using CSS (probably some playing around with position: sticky), but I really haven't thought about it in depth, its just my instinct

Creating a Team Page with on-click bio

I need to create a pretty simple table that has pictures of our team members (4 total). When one of these images is clicked, I want a 'modal(correct term?)' to open beneath the images and include their biographies, titles, etc. I have included my code below to something that is close to functional, but I cannot figure out how to make one close when the other opens properly.
<script type="text/javascript">
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
</script>
<div class="spoiler">
<img onclick="showSpoiler(this);" src="https://via.placeholder.com/300" />
<div class="inner" style="display:none;">
<h1>John Doe</h1>
<p>President</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere tempus odio, in ornare lacus pulvinar quis. Aliquam sed risus non nisi euismod dignissim quis quis diam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere tempus odio, in ornare lacus pulvinar quis. Aliquam sed risus non nisi euismod dignissim quis quis diam. Nullam venenatis sit amet massa eget bibendum. Maecenas odio mi, tristique et viverra ac, ornare id enim. Aliquam et felis nibh. Etiam pharetra, nisi a scelerisque consectetur, nibh quam volutpat dui, nec faucibus ante nunc vel nisi. Fusce rutrum tempor auctor. Donec feugiat tellus in feugiat ultrices. Nulla et neque tristique, dictum metus in, dapibus eros. Duis interdum erat eget pellentesque tristique.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="spoiler">
<img onclick="showSpoiler(this);" src="https://via.placeholder.com/300" />
<div class="inner" style="display:none;">
This is a spoiler!
</div>
</div>
<div class="spoiler">
<img onclick="showSpoiler(this);" src="https://via.placeholder.com/300" />
<div class="inner" style="display:none;">
This is a spoiler!
</div>
</div>
<div class="spoiler">
<img onclick="showSpoiler(this);" src="https://via.placeholder.com/300" />
<div class="inner" style="display:none;">
This is a spoiler!
</div>
</div>
JSFIDDLE: https://jsfiddle.net/hLkgcqxr/1/
My ideas is that when the user clicks '1' it opens below, and when they click '2' it changes to the biography of user 2.
Please let me know if there's any additional info needed in order to push me in the right direction - I know it can be a bit confusing :)

This logic relies on a css rule that makes the inner elements hidden, so long as the parent spoiler does not have a class of active.
All our logic does is, when an outer is clicked, it removes the active class from any spoiler that already has it, and then adds the active class to the spoiler the outer belongs to.
var $spoilers = $('.spoiler').on('click', '.outer', function(e){
$spoilers.removeClass('active');
$spoilers.has(e.target).addClass('active');
});
.spoiler:not(.active) .inner { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="spoiler">
<img class="outer" src="https://via.placeholder.com/300" />
<div class="inner">
<h1>John Doe</h1>
<p>President</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere tempus odio, in ornare lacus pulvinar quis. Aliquam sed risus non nisi euismod dignissim quis quis diam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere tempus odio, in ornare lacus pulvinar quis. Aliquam sed risus non nisi euismod dignissim quis quis diam. Nullam venenatis sit amet massa eget bibendum. Maecenas odio mi, tristique et viverra ac, ornare id enim. Aliquam et felis nibh. Etiam pharetra, nisi a scelerisque consectetur, nibh quam volutpat dui, nec faucibus ante nunc vel nisi. Fusce rutrum tempor auctor. Donec feugiat tellus in feugiat ultrices. Nulla et neque tristique, dictum metus in, dapibus eros. Duis interdum erat eget pellentesque tristique.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="spoiler">
<img class="outer" src="https://via.placeholder.com/300" />
<div class="inner">
This is a spoiler!
</div>
</div>
<div class="spoiler">
<img class="outer" src="https://via.placeholder.com/300" />
<div class="inner">
This is a spoiler!
</div>
</div>
<div class="spoiler">
<img class="outer" src="https://via.placeholder.com/300" />
<div class="inner">
This is a spoiler!
</div>
</div>

Readmore.js doesn't works

I try to use Readmore.js, a jQuery plugin for collapsing and expanding long blocks of text with "Read more" and "Close" links, for the first time and can't really understand the reason why nothing changes.
I try to get article contents collapsed and Read more button to appear.
I checked twice if the source files are there for both jQuery and readmore.
$('article').readmore();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://fastcdn.org/Readmore.js/2.1.0/readmore.min.js"></script>
<article>
<p class="giftheading"><b>Name Surname</b> celebrates <b>Event</b> in <b>5</b> days!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis consectetur nunc facilisis imperdiet. Donec sed arcu augue. Vestibulum tristique lobortis nulla eget pellentesque. Quisque consectetur vitae dui a porttitor. Suspendisse vel imperdiet
dui, semper maximus sem. Aliquam in quam ornare, fringilla tellus sit amet, sodales ligula.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis consectetur nunc facilisis imperdiet. Donec sed arcu augue. Vestibulum tristique lobortis
nulla eget pellentesque. Quisque consectetur vitae dui a porttitor. Suspendisse vel imperdiet dui, semper maximus sem. Aliquam in quam ornare, fringilla tellus sit amet, sodales ligula.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis consectetur nunc facilisis imperdiet. Donec sed arcu augue. Vestibulum tristique lobortis nulla eget pellentesque. Quisque consectetur vitae dui a porttitor. Suspendisse vel imperdiet
dui, semper maximus sem. Aliquam in quam ornare, fringilla tellus sit amet, sodales ligula.</p>
</article>

Your code works with an older version of jQuery (1.11.1):
$('article').readmore();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://fastcdn.org/Readmore.js/2.1.0/readmore.min.js"></script>
<article>
<p class="giftheading"><b>Name Surname</b> celebrates <b>Event</b> in <b>5</b> days!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis consectetur nunc facilisis imperdiet. Donec sed arcu augue. Vestibulum tristique lobortis nulla eget pellentesque. Quisque consectetur vitae dui a porttitor. Suspendisse vel imperdiet
dui, semper maximus sem. Aliquam in quam ornare, fringilla tellus sit amet, sodales ligula.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis consectetur nunc facilisis imperdiet. Donec sed arcu augue. Vestibulum tristique lobortis
nulla eget pellentesque. Quisque consectetur vitae dui a porttitor. Suspendisse vel imperdiet dui, semper maximus sem. Aliquam in quam ornare, fringilla tellus sit amet, sodales ligula.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis consectetur nunc facilisis imperdiet. Donec sed arcu augue. Vestibulum tristique lobortis nulla eget pellentesque. Quisque consectetur vitae dui a porttitor. Suspendisse vel imperdiet
dui, semper maximus sem. Aliquam in quam ornare, fringilla tellus sit amet, sodales ligula.</p>
</article>
It also works with 2.1.1 version:
$('article').readmore();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://fastcdn.org/Readmore.js/2.1.0/readmore.min.js"></script>
<article>
<p class="giftheading"><b>Name Surname</b> celebrates <b>Event</b> in <b>5</b> days!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis consectetur nunc facilisis imperdiet. Donec sed arcu augue. Vestibulum tristique lobortis nulla eget pellentesque. Quisque consectetur vitae dui a porttitor. Suspendisse vel imperdiet
dui, semper maximus sem. Aliquam in quam ornare, fringilla tellus sit amet, sodales ligula.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis consectetur nunc facilisis imperdiet. Donec sed arcu augue. Vestibulum tristique lobortis
nulla eget pellentesque. Quisque consectetur vitae dui a porttitor. Suspendisse vel imperdiet dui, semper maximus sem. Aliquam in quam ornare, fringilla tellus sit amet, sodales ligula.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis consectetur nunc facilisis imperdiet. Donec sed arcu augue. Vestibulum tristique lobortis nulla eget pellentesque. Quisque consectetur vitae dui a porttitor. Suspendisse vel imperdiet
dui, semper maximus sem. Aliquam in quam ornare, fringilla tellus sit amet, sodales ligula.</p>
</article>

Readmore doesn't initiate on a block unless its height is larger than the collapsedHeight plus heightMargin. Using no options this works out to be 216px.

Jumptron background image disappears when I scroll down

I am using bootstrap jumptron and a background image. As I scroll down the background image disappears leaving the jumptron div class only showing the heading. How can it be fix so when I scroll down the image doesn't desappear. The other content works proper, The following files provide more detail. The following files are in a Rails 5 app.
index.html.erb
<div class="bg"></div>
<div class="jumbotron">
<h1>Organize and Mobilize</h1>
</div>
<div class="container">
<div class="row">
<h2>We need you to take action</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
<hr>
<div class="row">
<h2>Page Content</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
<h2>Page Content</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
<h2>Page Content</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
<hr>
<div class="row">
<h2>Page Content</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-12 text-center"><p>The End.</p></div>
</div>
</div>
bootstrap_and_overrides.css
/*
=require twitter-bootstrap-static/bootstrap
Static version of css will use Glyphicons sprites by default
=require twitter-bootstrap-static/sprites
*/
body { padding-top: 50px; }
.bg {
background: url('protest.jpg') no-repeat center center;
position: fixed;
width: 100%;
height: 450px; /*same height as jumbotron */
top:0;
left:0;
z-index: -1;
}
.jumbotron {
margin-bottom: 50px;
height: 350px;
color: white;
text-shadow: black 0.3em 0.3em 0.3em;
background:transparent;
}
and cable.js
// Action Cable provides the framework to deal with WebSockets in Rails.
// You can generate new channels where WebSocket features live using the rails generate channel command.
//
//= require action_cable
//= require_self
//= require_tree ./channels
(function() {
this.App || (this.App = {});
App.cable = ActionCable.createConsumer();
}).call(this);
var jumboHeight = $('.jumbotron').outerHeight();
function parallax(){
var scrolled = $(window).scrollTop();
$('.bg').css('height', (jumboHeight-scrolled) + 'px');
}
$(window).scroll(function(e){
parallax();
});
This is the image before I scroll the page:

You shouldn't put an image as the background of the jumbotron, that's not what it's for.
Instead, make the jumbotron background color transparent, then add the background image to the div outside of the container.
ie. in HAML
#YourDivToApplyBackground
.container
.row
.col-md-12
.jumbotron
%h1 Your Page Title
This is how your code should look for bootstrap.

jQuery - two columns - sortable and cookie?

On my page I have two kind of columns with several conainers in it.
Now I want to be able to sort these containers in these two columns.
This was not really a problem.
I can sort my containers in the two colums and toggle it on or off.
But now my problem:
I want to sort my containers on reload.
I want to sort and toggle them the same order like before reload.
So I need a cookie. But I have no idea how to do this.
Please have a look at my code:
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.sortable.js"></script>
<style>
body{
font-size:12px;
font-family:helvetica,verdana,arial,sans-serif;
}
h3{
margin:0;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
font-size:12px;
font-weight:bold;
}
#box-left{
width:300px;
float:left;
}
#box-right{
width:300px;
float:left;
}
.box-border{
border:1px solid #333;
margin-left:5px;
margin-right:5px;
margin-top:10px;
}
.container-header{
background:#efefef;
cursor:move;
}
.container-header span{
cursor:pointer;
float:right;
margin-top:-20px;
margin-right:5px;
text-decoration:underline;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".sortable-column").sortable({
connectWith: '.sortable-column'
});
});
function toggleContent(container_id){
$('#' + container_id + ' .container-content').toggle();
}
</script>
<div id="box-left" class="sortable-column">
<div id="container1" class="box-border">
<div class="container-header">
<h3>Box Nummer 1</h3>
<span onclick="toggleContent('container1')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
<div id="container2" class="box-border">
<div class="container-header">
<h3>Box Nummer 2</h3>
<span onclick="toggleContent('container2')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
<div id="container3" class="box-border">
<div class="container-header">
<h3>Box Nummer 3</h3>
<span onclick="toggleContent('container3')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
<div id="container4" class="box-border">
<div class="container-header">
<h3>Box Nummer 4</h3>
<span onclick="toggleContent('container4')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
</div>
<div id="box-right" class="sortable-column">
<div id="container5" class="box-border">
<div class="container-header">
<h3>Box Nummer 5</h3>
<span onclick="toggleContent('container5')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
<div id="container6" class="box-border">
<div class="container-header">
<h3>Box Nummer 6</h3>
<span onclick="toggleContent('container6')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
<div id="container7" class="box-border">
<div class="container-header">
<h3>Box Nummer 7</h3>
<span onclick="toggleContent('container7')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
<div id="container8" class="box-border">
<div class="container-header">
<h3>Box Nummer 8</h3>
<span onclick="toggleContent('container8')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
<div id="container9" class="box-border">
<div class="container-header">
<h3>Box Nummer 9</h3>
<span onclick="toggleContent('container9')">toggle</span>
</div>
<div class="container-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat adipiscing neque et convallis. Praesent semper dictum imperdiet. Fusce ultrices, felis ut lobortis facilisis, sapien sem hendrerit leo, nec convallis odio enim vitae risus.</p>
</div>
</div>
</div>
How can I set the cookie? I don't know much about javascript, sry.

If you already use jQuery, take a look at the cookie plugin:
http://plugins.jquery.com/project/cookie
I used it in a project, and it was very useful.
And of course, to see if it worked, you can use the cookie plugin for firebug, Firecookie