0

Okay so i have an element that should be positioned at the bottom of my page. The issue is that on some pages i have elements that both slide down and up depending on a click() function. When the page loads the element is naturally positioned at the bottom as the page has enough content to push it down.

It get's tricky when the user clicks an element that makes the sibling slideup and therefor makes the element slide up along with it till it reaches the next "visible" element.

What i more or less want to do is to keep it at the bottom of the screen if there isn't much content, and when there is enough visible content it will just position itself relative to it's sibling above. Hope it 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> management@EXAMPLE.com
    </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 &copy; 2019';
        } else {
           echo 'example &copy; 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>
Admiralshoi
  • 3
  • 1
  • 3

1 Answers1

0

A solution is to add padding to the bottom of the body tag and use position:absolute;bottom:0 to place the footer inside the space created. If the amount of padding is known, you can define it in CSS otherwise just use a little JS.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
 footer {
  background-color:red;
  position: absolute;
  bottom: 0;
 }
 body {
  /*padding-bottom: 90px; use this if the footer height is known*/
  position: relative;
  min-height: 100vh;
  box-sizing:border-box;
 }
 
 /*for demo*/
 body {
  margin: 0;
 }
 h1 {
  margin: 0;
 }
  </style>
</head>
<body id="body">
<h1>Qui officia deserunt mollit anim id est laborum.
Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
Itaque earum rerum hic tenetur a sapiente delectus. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.
At vero eorunt mollitia. Esse cillum dolore eu fugiat nulla pariatur. Itaque earum rerum hic tenetur a sapiente delectus. Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</h1>
<button>Slide Togle</button>
<h2 id="slide">Qui officia deserunt mollit anim id est laborum.
Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
Itaque earum rerum hic tenetur a sapiente delectus. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.
At vero eorunt mollitia. Esse cillum dolore eu fugiat nulla pariatur. Itaque earum rerum hic tenetur a sapiente delectus. Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</h1>

<footer id="footer">At vero eos et accusamus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Nihil molestiae consequatur, vel illum qui dolorem eum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque earum rerum hic tenetur a sapiente delectus. Quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat.
</footer>

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script>
 var h = document.getElementById('footer').scrollHeight;
 document.getElementById('body').style.paddingBottom  = h+'px';
 
 $('button').click(function(){
  $('#slide').slideToggle("slow");
 });
</script>
</body>
</html>
Clinton Schram
  • 76
  • 3