Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
Given a parent div that can scroll vertically and has possibly nested elements within it, how can I get the (innermost) element that currently occupies the top end of the parent div?
For example, suppose I have the parent div as the light blue area in the diagram below, and it has objects in it, that are colored blue or red, some parts of them being outside of the parent div (which should actually be hidden). I want to get the object colored in red.
I can probably do this by comparing the offsetTop of the child elements with that of the parent element, and recursively go inside.
Run the code snippet below to see one solution. Scroll the window to move the divs relative to the window, then click the button to see the id of the innermost div that is at the top of the window. This solution assumes all divs are "normally" nested, i.e. there is no re-arrangement of div vertical placement by fancy css work, no fixed positions, etc.
There are two versions below: the first uses jQuery, the second does not.
$("button#check").click(function() {
var topElem = $("body")[0]; // start at the outermost, i.e. the body
var checkChildDivs = function() { // define the recursive checking function
var children = $(topElem).children("div").not("div#info"); // get all child divs
if (children.length > 0) { // if there are any child divs
$(children).each(function(index, elem) { // check each of them
var posns = getPosns($(elem)); // get their top and bottom posns
// relative to the top of the screen
if ((posns.top <= 0) && (posns.bottom >= 0)) { // if the div overlaps the screen top
topElem = elem; // make this the new innermost div
checkChildDivs(); // check any deeper child divs
return false; // no need to check any lower sibling divs
}
});
}
};
checkChildDivs(); // initiate the checking recursion
$("div#info").text($(topElem).attr("id") || "none, i.e. body"); // report the innermost top div id
});
function getPosns($elem) {
var top = $elem.offset().top; // get the top of the div relative to the document
var hgt = $elem.outerHeight(); // get the height of the element
var wst = $(window).scrollTop(); // get the height of window hidden above the top of the screen
return { // return the top and bottom distances of the element
top: (top - wst), // relative to the top of the screen
bottom: (top - wst + hgt)
};
}
body {
background-color: blue;
}
div {
border: solid black 2px;
padding: 1em;
margin: 1em;
background-color: magenta;
}
div > div {
background-color: red;
}
div > div > div {
background-color: orange;
}
div >div > div > div {
background-color: yellow;
}
button#check {
position: fixed;
height: 2em;
}
div#info {
position: fixed;
background-color: white;
border-width: 1px;
opacity: 0.7;
top: 3em;
left: -0.2em;
height: 1.5em;
width: 15em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="check">Determine Id of Innermost Div at Screen Top</button>
<div id="info"></div>
<div id="a">a
<div id="aa">aa
<div id="aaa">aaa</div>
<div id="aab">aab
<div id="aaba">aaba</div>
<div id="aabb">aabb</div>
<div id="aabc">aabc</div>
</div>
<div id="aac">aac</div>
</div>
<div id="ab">ab
<div id="aba">aba</div>
<div id="abb">abb</div>
<div id="abc">abc</div>
</div>
<div id="ac">ac
<div id="aca">aca</div>
<div id="acb">acb</div>
<div id="acc">acc</div>
</div>
</div>
<div id="b">b
<div id="ba">ba
<div id="baa">baa</div>
<div id="bab">bab</div>
<div id="bac">bac</div>
</div>
<div id="bb">bb
<div id="bba">bba</div>
<div id="bbb">bbb</div>
<div id="bbc">bbc</div>
</div>
<div id="bc">bc
<div id="bca">bca</div>
<div id="bcb">bcb</div>
<div id="bcc">bcc</div>
</div>
</div>
<div id="c">c
<div id="ca">ca
<div id="caa">caa</div>
<div id="cab">cab</div>
<div id="cac">cac</div>
</div>
<div id="cb">cb
<div id="cba">cba</div>
<div id="cbb">cbb</div>
<div id="cbc">cbc</div>
</div>
<div id="cc">cc
<div id="cca">cca</div>
<div id="ccb">ccb</div>
<div id="ccc">ccc</div>
</div>
</div>
And here is a non-jQuery version of the same thing:
var doc = document;
doc.getElementById("check").onclick = function() {
var topElem = doc.getElementsByTagName("body")[0]; // start at the outermost, i.e. the body
var checkChildDivs = function() { // define the recursive checking function
var children = topElem.childNodes; // get all child nodes
if (children.length > 0) { // if there are any child nodes
[].forEach.call(children, function(elem, index, arr) { // check each of them
if (elem.toString() === "[object HTMLDivElement]" && elem.id !== "info") {
// only use divs that do not have id "info"
var posns = getPosns(elem); // get their top and bottom posns
// relative to the top of the screen
if ((posns.top <= 0) && (posns.bottom >= 0)) { // if the div overlaps the screen top
topElem = elem; // make this the new innermost div
checkChildDivs(); // check any deeper child divs
return false; // no need to check any lower sibling divs
}
}
});
}
};
checkChildDivs(); // initiate the checking recursion
doc.getElementById("info").innerHTML = (topElem.id || "none, i.e. body");
// report the innermost top div id
};
function getPosns(elem) {
var top = elem.getBoundingClientRect().top + window.pageYOffset - doc.documentElement.clientTop;
// get the top of the div relative to the document
var hgt = elem.offsetHeight; // get the height of the element
var wst = window.scrollY; // get the height of window hidden above the top of the screen
return { // return the top and bottom distances of the element
top: (top - wst), // relative to the top of the screen
bottom: (top - wst + hgt)
};
}
body {
background-color: blue;
}
div {
border: solid black 2px;
padding: 1em;
margin: 1em;
background-color: magenta;
}
div > div {
background-color: red;
}
div > div > div {
background-color: orange;
}
div >div > div > div {
background-color: yellow;
}
button#check {
position: fixed;
height: 2em;
}
div#info {
position: fixed;
background-color: white;
border-width: 1px;
opacity: 0.7;
top: 3em;
left: -0.2em;
height: 1.5em;
width: 15em;
}
<button id="check">Determine Id of Innermost Div at Screen Top</button>
<div id="info"></div>
<div id="a">a
<div id="aa">aa
<div id="aaa">aaa</div>
<div id="aab">aab
<div id="aaba">aaba</div>
<div id="aabb">aabb</div>
<div id="aabc">aabc</div>
</div>
<div id="aac">aac</div>
</div>
<div id="ab">ab
<div id="aba">aba</div>
<div id="abb">abb</div>
<div id="abc">abc</div>
</div>
<div id="ac">ac
<div id="aca">aca</div>
<div id="acb">acb</div>
<div id="acc">acc</div>
</div>
</div>
<div id="b">b
<div id="ba">ba
<div id="baa">baa</div>
<div id="bab">bab</div>
<div id="bac">bac</div>
</div>
<div id="bb">bb
<div id="bba">bba</div>
<div id="bbb">bbb</div>
<div id="bbc">bbc</div>
</div>
<div id="bc">bc
<div id="bca">bca</div>
<div id="bcb">bcb</div>
<div id="bcc">bcc</div>
</div>
</div>
<div id="c">c
<div id="ca">ca
<div id="caa">caa</div>
<div id="cab">cab</div>
<div id="cac">cac</div>
</div>
<div id="cb">cb
<div id="cba">cba</div>
<div id="cbb">cbb</div>
<div id="cbc">cbc</div>
</div>
<div id="cc">cc
<div id="cca">cca</div>
<div id="ccb">ccb</div>
<div id="ccc">ccc</div>
</div>
</div>
You can use this library : https://github.com/customd/jquery-visible .
Check my snippet for demo
$(function() {
$(window).on('scroll', function() {
$visible = null;
$('section > div').each(function() {
if (!$visible && $(this).visible(true)) {
$visible = $(this);
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
$('#answer').html('' + $visible.text());
});
});
#main1,
#main2,
#main3,
#main4 {
display: block;
padding: 10px;
}
body {
background: blue;
}
section > div {
display: block;
width: 100%;
background: lightblue;
margin-bottom: 10px;
}
section > div.active {
background: red;
}
#answer {
display: block;
position: fixed;
bottom: 0;
height: 30px;
width: 300px;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://opensource.teamdf.com/visible/jquery.visible.js"></script>
<section id="main1">
<div style="height:100px;">child 1</div>
</section>
<section id="main2">
<div style="height:100px;">child 2</div>
</section>
<section id="main3">
<div style="height:100px;">child 3</div>
</section>
<section id="main4">
<div style="height:300px;">child 4</div>
<div style="height:400px;">child 5</div>
</section>
<div id="answer"></div>
Related
Given example is working fine but red color is showing under Box2 only.
How to make sure if box1 is clicked then red should show below Box1,
if Box2 is clicked box should show below box 2.
CODEPEN
function hideshowmenu() {
var element = document.getElementsByClassName("box");
element[0].classList.toggle("bg-red");
}
.bg-red {
margin-top: 10px;
background-color: red;
height: 20px;
}
<div class="mainmenu " onclick="hideshowmenu()">BOX1</div>
<div id="box" class="box"></div>
<div class="mainmenu " onclick="hideshowmenu()">BOX2</div>
<div id="box" class="box"></div>
only one red should show at one time.
First, the box-id is duplicated, not allowed in HTML. Next, using Event Delegation makes your life easier. If you want the class of div.box after a clicked div.mainmenu element to be bg-red, the next snippet may be an idea (note: creates 100 div.mainmenu elements after the handler is assigned).
document.addEventListener(`click`, handle);
createSomeBoxes();
function handle(evt) {
if (evt.target.classList.contains(`mainmenu`)) {
//^ act only on div.mainmenu
const currentBox = document.querySelector(`.bg-red`);
currentBox && currentBox.classList.remove(`bg-red`);
return currentBox && currentBox.previousElementSibling === evt.target
? true : evt.target.nextElementSibling.classList.add(`bg-red`);
}
}
// for demo
function createSomeBoxes() {
let nBoxes = 0;
while(nBoxes++ < 100) {
document.body.insertAdjacentHTML(`beforeend`,
`<div class="mainmenu">BOX ${nBoxes}</div>
<div class="box"></div>`);
}
}
body {
margin: 2rem;
font: 12px/15px verdana, arial;
}
.mainmenu {
cursor: pointer;
}
.bg-red {
margin-top: 2px;
background-color: red;
height: 20px;
width: 20vw;
}
You only trigger [0]
I would delegate
I also removed ID since IDs need to be unique
const container = document.getElementById("container");
const boxes = container.querySelectorAll(".box")
container.addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("mainmenu")) {
const thisBox = tgt.nextElementSibling;
boxes.forEach(box => {
if (box != thisBox) box.classList.remove("bg-red");
})
thisBox.classList.toggle("bg-red");
}
})
.bg-red {
margin-top: 10px;
background-color: red;
height: 20px;
}
<div id="container">
<div class="mainmenu">BOX1</div>
<div class="box"></div>
<div class="mainmenu">BOX2</div>
<div class="box"></div>
</div>
First remove the id's, you dont need them (and theyre not unique so they arent valid anyways).
Then youll need to iterate trough all your .mainmenu items and bin a click to hide all boxes and open the one right besides the item you clicked.
document.querySelectorAll(".mainmenu").forEach(function(menuElement) {
menuElement.addEventListener("click", function() {
document.querySelectorAll(".box").forEach(function(boxElement) {
boxElement.classList.remove("bg-red");
});
this.nextElementSibling.classList.toggle("bg-red");
});
});
.bg-red {
margin-top: 10px;
background-color: red;
height: 20px;
}
<div class="mainmenu">BOX1</div>
<div class="box"></div>
<div class="mainmenu">BOX2</div>
<div class="box"></div>
<div class="mainmenu">BOX3</div>
<div class="box"></div>
<div class="mainmenu">BOX4</div>
<div class="box"></div>
<div class="mainmenu">BOX5</div>
<div class="box"></div>
<div class="mainmenu">BOX6</div>
<div class="box"></div>
<div class="mainmenu">BOX7</div>
<div class="box"></div>
You should use event object to get a target node, and then append div with the class after it. The after function will move the div each time.
<div class="mainmenu" onClick="hideshowmenu(event)">BOX1</div>
<div class="mainmenu" onClick="hideshowmenu(event)">BOX2</div>
const redBox = document.createElement('div');
redBox.classList.add('bg-red');
function hideshowmenu(event) {
const elem = event.target;
elem.after(redBox)
}
https://jsfiddle.net/hj0rgkfp/
Sorry for such a dumb question for you, I've got a list of elements with overflow-y:auto, like this:
I'd like to make them stick for just a little bit when I'm scrolling and pop off when the next one is pushing it from the bottom.
It's to avoid this which IMO doesn't look very good.
I know I have to use position:sticky but I don't know how to achieve this without the elements staying there definitely as I scroll down
Please excuse the lengthy code, as the HTML and parts of the CSS were just meant to make things stand out.
The actual core of it is the JavaScript code, along with the parts of CSS I didn't comment on.
Obviously the code's readability can be improved; However I've intentionally left the original functions, rather than writing custom ones (e.g. makeTopElement(element), or getTopPosition(element)), as the code snippet has already become pretty long vertically.
const items = document.getElementsByClassName('item');
const itemHeight = items[0].getBoundingClientRect().height;
let currentTopIndex = 0;
let prevY = 0;
document.onscroll = function() {
let currY = window.pageYOffset;
// Scrolling down
if (currY > prevY &&
currentTopIndex < items.length - 1 &&
items[currentTopIndex + 1].getBoundingClientRect().top < itemHeight) {
items[currentTopIndex].classList.remove('top');
items[currentTopIndex].style.top = 'auto';
items[currentTopIndex].style.bottom = 0;
currentTopIndex ++;
items[currentTopIndex].classList.add('top');
}
// Scrolling up
else if (currY < prevY &&
currentTopIndex > 0 &&
items[currentTopIndex - 1].getBoundingClientRect().top > 0) {
items[currentTopIndex].classList.remove('top');
currentTopIndex --;
items[currentTopIndex].classList.add('top');
items[currentTopIndex].style.top = 0;
items[currentTopIndex].style.bottom = 'auto';
}
prevY = currY;
};
.wrapper {
height: 500px;
}
.itemWrapper {
height: 100px;
position: relative;
}
.item {
position: absolute;
/* These properties are here just to make things pretty */
background-color: MintCream;
padding: 10px;
text-align: center;
border: 1px solid #00e673;
width: 100%;
}
.top {
position: sticky;
top: 0;
/* These properties are here just to make things pretty */
background-color: red;
border-color: #990000;
}
<div class="wrapper">
<div class="itemWrapper">
<div class="item top">
first
</div>
</div>
<div class="itemWrapper">
<div class="item">
second
</div>
</div>
<div class="itemWrapper">
<div class="item">
third
</div>
</div>
</div>
to make this you would use css-snap:
for the list class: add the following css:
.parent {
overflow: scroll;
height: 200px;
scroll-snap-type: y mandatory;
scroll-snap-points-y: repeat(50px);
}
.child {
height: 50px;
margin: 10px;
scroll-snap-align: start;
}
replace:
.parent with your list class,
height: 200px with your list height, notice that you should give it specific height,
scroll-snap-points-y: repeat(50px) replace 50px with height of children, in my case i used 50px because child class has height of 50px.
.child with your element class
height: 50px height of children element.
.parent {
overflow: scroll;
height: 200px;
scroll-snap-type: y mandatory;
scroll-snap-points-y: repeat(50px);
}
.child {
height: 50px;
margin: 10px;
scroll-snap-align: start;
}
.child:nth-child(even) {
background-color: #ccc;
}
.child:nth-child(odd) {
background-color: #ddd;
}
<div class="parent">
<div class="child"><h1>testing</h1></div>
<div class="child"><h1>testing</h1></div>
<div class="child"><h1>testing</h1></div>
<div class="child"><h1>testing</h1></div>
<div class="child"><h1>testing</h1></div>
<div class="child"><h1>testing</h1></div>
<div class="child"><h1>testing</h1></div>
<div class="child"><h1>testing</h1></div>
<div class="child"><h1>testing</h1></div>
<div class="child"><h1>testing</h1></div>
<div class="child"><h1>testing</h1></div>
<div class="child"><h1>testing</h1></div>
<div class="child"><h1>testing</h1></div>
<div class="child"><h1>testing</h1></div>
<div class="child"><h1>testing</h1></div>
<div class="child"><h1>testing</h1></div>
</div>
I have a two images and when you click on one, text (relevant to image) slides into view below the image. Currently the method for closing/toggling the text is to click on the image again.
If I click on the second image while the text on the first image is still visible, it closes the text. I then have to click on the second image again to see its text content appear.
I'd like to be able to click on the second image and either the text content just swaps OR it closes the text for the first image and opens the text for the second image (in just one click, not two).
Any input appreciated!
I have a fiddle here
JS:
var teamMember = document.getElementsByClassName("team-member");
var teamRow = document.getElementsByClassName("team-row");
var bioContainer = $( "<div class='container' id='bio-container'></div>" );
$(bioContainer).hide();
$(teamMember).click(function() {
$(this).toggleClass('member-selected');
$('.team-grid').toggleClass('member-active');
$(bioContainer).html("");
var thisBio = $(this).find(".team-bio");
var thisRow = $(this).parent(teamRow);
$(thisRow).after(bioContainer);
var bioHTML = $(thisBio).html();
$height = $(thisBio).outerHeight(true)
$(bioContainer).css('height', $height);
$(bioContainer).slideToggle( "slow", function() {
$(this).html(bioHTML);
});
});
HTML:
<section class="team-grid">
<div class="team-row">
<div class="col-sm-6 team-member">
<img src="https://www.catster.com/wp-content/uploads/2017/11/A-Siamese-cat.jpg">
<div class="team-bio">
<div class="team-bio-inner">
JOHN'S Bio
</div>
</div>
</div>
<div class="col-sm-6 team-member">
<img src="https://r.hswstatic.com/w_907/gif/tesla-cat.jpg">
<div class="team-bio">
<div class="team-bio-inner">
SALLY'S Bio
</div>
</div>
</div>
</div>
</section>
CSS:
.col-sm-6 {
width:50%;
float:left;
}
img {
width:100%;
height:200px;
object-fit:cover;
cursor:pointer;
}
.close-bio {
color:pink;
font-weight:bold;
}
.team-bio {
visibility: hidden;
padding: 80px 20%;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#bio-container {
background: #666;
width: 100%;
max-width: none;
position: relative;
float: left;
padding: 25px;
color:#fff;
font-size:20px;
}
Please check this answer,
Js Fiddle
var teamMember = document.getElementsByClassName("team-member");
var teamRow = document.getElementsByClassName("team-row");
var bioContainer = $( "<div class='container' id='bio-container'></div>" );
var bioContainerExpanded = false;
$(bioContainer).hide();
$(teamMember).click(function() {
if(bioContainerExpanded){
$(bioContainer).slideToggle( "slow", function() {});
bioContainerExpanded = false;
}
$('.team-grid').toggleClass('member-active');
// Resets bioContainer html to blank
$(bioContainer).html("");
$(this).toggleClass('member-selected');
// Assign 'this' team bio to variable
var thisBio = $(this).find(".team-bio");
// Assign 'this' row to variable (find teamRow parent of this teamMember)
var thisRow = $(this).parent(teamRow);
// Place bio after row
$(thisRow).after(bioContainer);
// Assign 'this' bio html to variable
var bioHTML = $(thisBio).html();
// Dynamically calculte height of the bio including padding
$height = $(thisBio).outerHeight(true)
//assign height to bioContainer before the toggle so that it slides smoothly
$(bioContainer).css('height', $height);
// Slide toggle the bioContainer
$(bioContainer).slideToggle( "slow", function() {
// Insert bioHTML into 'this' bioContainer
$(this).html(bioHTML);
});
bioContainerExpanded = true;
});
.col-sm-6 {
width:50%;
float:left;
}
img {
width:100%;
height:200px;
object-fit:cover;
cursor:pointer;
}
.close-bio {
color:pink;
font-weight:bold;
}
.team-bio {
visibility: hidden;
padding: 80px 20%;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#bio-container {
background: #666;
width: 100%;
max-width: none;
position: relative;
float: left;
padding: 25px;
color:#fff;
font-size:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="team-grid">
<div class="team-row">
<div class="col-sm-6 team-member">
<img src="https://www.catster.com/wp-content/uploads/2017/11/A-Siamese-cat.jpg">
<div class="team-bio">
<div class="team-bio-inner">
JOHN'S Bio
</div>
</div>
</div>
<div class="col-sm-6 team-member">
<img src="https://r.hswstatic.com/w_907/gif/tesla-cat.jpg">
<div class="team-bio">
<div class="team-bio-inner">
SALLY'S Bio
</div>
</div>
</div>
</div>
</section>
I'm super new to JS but I wanted a really simple accordion so I built one. For some reason I am at a loss when trying to add an easing effect to the opening / closing of it. Any help would be much appreciated. Thank you!
CodePen of Accordion
js code:
(function(){
// This class will be added to the expanded item
var activeItemClass = 'accordion-expanded';
var accordionItemSelector = '.accordion-section';
var toggleSelector = '.accordion-head';
$(toggleSelector).on('click', function() {
$(this)
.closest(accordionItemSelector) // go up to the accordion item element
.toggleClass(activeItemClass)
.siblings()
.removeClass(activeItemClass);
});
})();
Since you're using jQuery, why not this:
var accordionItemSelector = '.accordion-body';
var toggleSelector = '.accordion-head';
$(toggleSelector).on('click', function() {
if (!$(this).next(accordionItemSelector).is(":visible"))
$(toggleSelector).not($(this)).next(accordionItemSelector).slideUp();
$(this).next(accordionItemSelector).slideToggle();
});
UPDATED PEN
Here is working code for accordion :-
$(document).ready(function(){
$('.item').click(function (){
if($(this).next('.item-data').css('display') != 'block'){
$('.active').slideUp('fast').removeClass('active');
$(this).next('.item-data').addClass('active').slideDown('slow');
} else {
$('.active').slideUp('fast').removeClass('active');
}
});
});
and HTML
<div class='container'>
<div class='item'>Item 1</div>
<div class='item-data'>
<div>
This is the content for Accordion 1
</div>
</div>
<div class='item'>Item 2</div>
<div class='item-data'>
<div>
This is the content for Accordion 2
</div>
</div>
<div class='item'>Item 3</div>
<div class='item-data' >
<div>
This is the content for Accordion 3
</div>
</div>
<div class='item'>Item 4</div>
<div class='item-data' >
<div>
This is the content for Accordion 4
</div>
</div>
CSS
<style type="text/css">
.container
{
display:block;
width: 500px;
height : auto ;
margin: 0 auto;
}
.item
{
display : block;
width : inherit ;
height : 40px;
line-height : 40px;
background : #555 ;
border: 1px solid #000 ;
cursor: pointer;
color: #fff;
}
.item-data
{
display : none ;
width : inherit ;
height : auto ;
border: 1px solid #ccc;
}
.active {
background : #eee ;
color : #000 ;
}
.item-data div{
margin: 30px;
}
</style>
I would like to scroll to the bottom of the div content-main, so that the button Button is displayed at the bottom of the window. I tried the following:
<div class="container">
<div class="content-main">
dynamic content dynamic content.....
<button>Button </button>
</div>
<div class ="footer"></div>
</div>
<script>
var mainContentHeight = $(".content-main").height();
var footerHeight = $(".content-footer").height();
window.scrollTo(0, mainContentHeight - footerHeight);
</script>
This works differently, when I test it in two monitors with different size. How to display the button at the bottom of the window?
Instead binding scrollTo to the window object, bind it to the element you want to scroll:
var container = $('.container')[0];
var contentMain = $('.content-main')[0];
var mainContentHeight = $(".content-main").height();
var footerHeight = $(".content-footer").height();
container.scrollTo(0, mainContentHeight - footerHeight);
.container {
overflow: auto;
height: 100px;
}
.content-main {
height: 100%;
position: relative;
border: 1px solid #000;
height: 1000px;
}
.content-footer {
height: 50px;
}
button {
position: absolute;
bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="content-main">
dynamic content dynamic content.....
<button>Button </button>
</div>
<div class="content-footer"></div>
</div>