Skip to main content
R
REELHERO
Inspiring
August 4, 2020
Answered

copyright footer in overlay

  • August 4, 2020
  • 1 reply
  • 2366 views

im trying to slide up the copyright on the overlay

 

i think you were saying adjust the html to be outside the overlay? however, i only want the copyright to show on the overlay (my particular audience doesnt like it shoved in their face--having on the overlay keeps it there but only when you jockey through the menu)--

 

is there a way to make it an nth child of the menu but have it at the bottom not following the previous li rules or another solution?

 

    This topic has been closed for replies.
    Correct answer osgood_

    ok i couldnt help it - i created a flexbox version no more floats or absolute positioning 

     

    http://toddheymandirector.com/reel/index_flex.html

     

    how  do i make the footer position 'static' once it gets near to the images and then fixed once it is a certain distance away from the images?


    Just as a simple example of what you would like to happen have a play around with the code below. Once the 'slide up' footer gets to the thumbnail boxes, by way of a user resizing the depth of the browser window, its position is rendered as 'static' which will put it in the normal flow of the code, which means it will not overlap the thumbnails. If you then increase the depth of the browser window the footer will render as 'fixed' which means it will stick to the bottom of the browser window.

     

     

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sticky Footer</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.header-main {
width: 90%;
margin: 0 auto;
}
.header {
text-align: center;
padding: 40px 0;
}
.main {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.thumbnail {
display: flex;
justify-content: center;
align-items: center;
width: 32%;
background-color: #f2f2f2;
margin: 0 0 30px 0;
height: 230px;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
transform: translateY(100%);
transition: all .75s ease;
text-align: center;
padding: 15px 0;
}
.slideUp {
transform: translateY(0);
}
.static {
position: static;
}

</style>
</head>
<body>
<section class="header-main">
<header class="header">
LOGO/NAV
</header>
<section class="main">
<div class="thumbnail">
<span>THUMBNAIL</span>
</div>
<div class="thumbnail">
<span>THUMBNAIL</span>
</div>
<div class="thumbnail">
<span>THUMBNAIL</span>
</div>
<div class="thumbnail">
<span>THUMBNAIL</span>
</div>
<div class="thumbnail">
<span>THUMBNAIL</span>
</div>
<div class="thumbnail">
<span>THUMBNAIL</span>
</div>
</section>
<!-- end main -->
</section>
<!-- end header-main -->

<footer class="footer">
FOOTER
</footer>

<!-- end footer -->


<script>
const footer = document.querySelector('.footer');
const headerMain = document.querySelector('.header-main');
const headerMainHeight = headerMain.offsetHeight;

setTimeout(function() {
footer.classList.add('slideUp');
}, 1000)

window.addEventListener('resize', function() {
const distanceToTop = footer.getBoundingClientRect().top;
if(distanceToTop < headerMainHeight) {
footer.classList.add('static');
}
});

window.addEventListener('resize', function() {
const distanceToBottom = window.innerHeight - footer.offsetTop
if(distanceToBottom > 10) {
footer.classList.remove('static');
}
});

</script>
</body>
</html>

     

    1 reply

    O
    osgood_
    Legend
    August 4, 2020

    Can one of you moderators (if your not all sleeping) reinstate my post reference - FAO 'reelhero'

     

    Why the heck was it deleted in the first instance. Im trying to help your users and some ass in the back-room is just tossing around deleting posts.

      O
      osgood_
      Legend
      August 4, 2020

      Ok lets try this for the 3rd time.

       

      Remove your current copyright <div> from the overlayz <div>.

       

      Use the below html and insert it directly AFTER the opening <body> tag:

      <div class="copyright">
      <a>© 2020 Todd Heyman // All Rights Reserved</a>
      </div>

       

      Then add the css selectors below: (sorry about the z-index number - you know why);

       

      .copyright {
      display: flex;
      justify-content: center;
      width: 100%;
      position: fixed;
      bottom: 0;
      z-index: 30000000000000000000000000;
      transform: translateY(100%);
      padding: 20px 0;
      color: #fff;
      transition: all 1s ease;
      }
      .copyrightSlideUp {
      transform: translateY(0)
      }

       

      Next add the block of Javascript below to the foot of your page:

       

      <script>
      function copyrightUp() {
      const copyright = document.querySelector('.copyright');
      copyright.style.opacity = 0;
      setTimeout(function(){
      copyright.style.opacity = 1;
      copyright.classList.toggle('copyrightSlideUp')
      }, 2000)
      }
      </script>

       

      Locate the current block of Javascript and add the line in red. This will call the function 'copyrightUp()' when the hamburger is toggled.

       

      <script id="rendered-js">
      $('#toggle').click(function () {
      $('#overlayz').addClass('open');
      copyrightUp();
      });
      </script>

       

      Thats it.

      R
      REELHEROAuthor
      Inspiring
      August 4, 2020

      gorgeous:

      http://toddheymandirector.com/

      i styled it and sped it up a hair --

       

      im decent with css but java has me perplexed...

       

      though i will say, I've instinctively been analyzing your script and i see the intentions and mechanics..

      so helpful!

       

      its not done but I put a mobile version up as well 

       

      if you go to the above link on a phone it will redirect

      the scaling is wrong but if you keep your phone vertical it should work for now-

      (i know I should make it responsive instead - thats the next lesson as soon as I book another commercial!) 

       

      thank you immensely for the time youve given me! so so grateful..

       

       

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices