I have a footer that remains fixed at the bottom of both long and short pages. Below is the CSS code for this footer:
.footer{
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background-color: white;
}
My goal is to achieve a 'reveal' or curtain effect similar to what can be seen on dartlang.org when scrolling down to the bottom of the page. I attempted to create this effect with a fixed footer but encountered issues.
In my Rails application, I render the footer using the following code in my application.html.erb file:
<%= render 'shared/footer' unless @disable_footer %>Unfortunately, the jQuery reveal footer does not seem to work properly with this setup either.
EDIT: Here is the code snippet for my footer. Please excuse its somewhat messy structure:
<footer class="footer" id="#myfooter">
<body>
<div style="background-color: white;">
<hr style="width: 100%;">
<div class="container">
<div class="row">
<div class="container-fluid">
<div class="col-md-6">
<h4>Consulting and Development</h4>
<ul style="font-weight: bold;">
<li><%= link_to "Training and Coaching", training_coaching_path%></li>
<li> <%= link_to "Business Development", business_development_path%></li>
<li> <%= link_to "Automotive Consulting", automotive_consulting_path%></li>
<li> <%= link_to "Environmental Consulting", environmental_safety_path%></li>
</ul>
</div>
<div class="col-md-6">
<h4>Quality Product Assurance</h4>
<ul style="font-weight: bold;">
<li><%= link_to "Product Inspection and Quality Resolution", containment_and_quality_path%></li>
<li><%= link_to "Auditing", auditing_path%></li>
</ul>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4">
<h4 style="text-decoration: underline;">Corporate Office Location:</h4>
<p>1</p>
<p></p>
</div>
<div class="col-md-4">
<h4 style="text-decoration: underline;">Mailing Address:</h4>
<p></p>
<p></p>
</div>
<div class="col-md-4" style="text-align: center">
<p>
<a href="mailto:hr"><i class="fa fa-envelope-o fa-2x" aria-hidden="false"></i></a>
<a href="https://www.linkedin.com/company/"><i class="fa fa-linkedin fa-2x" aria-hidden="false"></i></a>
<a href="https://www.facebook.com/"><i class="fa fa-facebook-square fa-2x" aria-hidden="false"></i></a>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="text-muted" style="text-align: center;"> - Copyright 2016 - All Rights Reserved</p>
<p class="text-muted" style="text-align: center;"> Homepage background image was <a href="http://www.freepik.com/free-vector/gear-icons-collection_792514.htm">Designed by Freepik</a></p>
</div>
</div>
</div>
</div>
</body>
</footer>