Having an element positioned at the bottom of a page can sometimes be tricky, especially when there are elements that slide up and down based on user interactions. On pages with enough content to push the element down naturally, everything works fine.
The challenge arises when a user triggers an action that causes a sibling element to slide up, subsequently making our target element slide up as well until it reaches the next visible element.
My goal is to have the element stay at the bottom of the screen if there isn't much content, but adjust its position relative to the sibling above when there is enough visible content. I hope this explanation makes sense!
This is the footer
<footer>
<div class='container'>
<span>
<h2><b>Contact</b></h2>
<b>Telephone:</b> +45 000000<br/>
<b>Email:</b> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9d4d8d7d8dedcd4dcd7cdf9fce1f8f4e9f5fc97dad6d4">[email protected]</a>
</span>
<span>
<h2><b>FAQ</b></h2>
Some text<br/>
Some other text
</span>
<span>
<h2><b>Some header</b></h2>
<?php
if(date('Y') == '2019'){
echo 'example © 2019';
} else {
echo 'example © 2019-'.date('Y');
}
?>
</span>
</div>
</footer>
--- CSS ---
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
footer
{
color: #FFF;
background: #d99741;
padding: 20px;
margin-top: 20px;
}
footer span
{
float: left;
text-align: center;
width: 30%;
padding: 10px;
}
footer h2
{
position: relative;
margin-top: -10px;
}
--- Html for the sibling above ---
echo "
<section id='displayevents'>
<div class='container'>
<div class='eventCountry'>
<p>".$trim."</p>
</div>
<div class='framework''>
<div class='imageFrames'>
<img src='".$image[0]."' />
<h3>".$club[0]."</h3>
</div>
<div class='imageFrames'>
<img src='".$image[1]."' />
<h3>".$club[1]."</h3>
</div>
<div class='imageFrames'>
<img src='".$image[2]."' />
<h3>".$club[2]."</h3>
</div>
</div>
</div>
</section>
";
--- javascript that slides up and down ---
<script type='text/javascript'>
$(document).ready(function(){
//Hides all .framework and then shows the first
var getamount = $('.framework');
for(var x=0;x<=getamount.length;x++){
$(getamount[x]).hide();
}
$('.framework').first().show();
//Creates a function that will handle the display of each .framework. Only
one at a time.
function openSection(element){
var display = element.css('display');
var find = $('.framework');
var getAttr;
if(display != 'none'){
$(element).slideUp(500);
} else{
for(var x=0;x<=find.length;x++){
getAttr = $(find[x]).css('display');
if(getAttr != 'none'){
$(find[x]).slideUp(500);
}
}
$(element).slideDown(500);
}
}
//Create clickfunction to .eventCountry and call function to hide/show
content
$('.eventCountry').click(function(){
openSection($(this).next());
});
});
</script>