SOLVED: What's wrong with my fade in/out code?

This forum is for all Flare issues not related to any of the other categories.

SOLVED: What's wrong with my fade in/out code?

Postby RecPerch on Thu Apr 20, 2017 12:15 pm

SOLUTION:
There's nothing wrong with the code. It was some rogue COMMENT syntax in my css. And this is why I got out of computer programming in college. For want of a */ hours were lost....

First, GAH!

Thanks for letting me vent.

Second. I'm trying to fancify my "back to top" image so that it fades in when a user starts scrolling. I'm having three problems:
  • The image shows up on the left; see the css code below where I have "right: 0;" .
  • The image shows up at the very bottom of all of the text on the page instead of being static at the bottom-right of the screen. In other words, the user can't see the Back to Top image until they scroll all the way to the bottom of the text. See the css code below where I have "position: fixed;" .
  • The image displays immediately instead of displaying after a user starts to scroll; see the css code below where I have "display: none;" . After the user starts to scroll then the image fades in and out as expected.

Thoughts?

My Code

In the MasterPage file this is inside <body> </body> just before my footer information.

Code: Select all
<a class="backToTop" href="#"><img src="../Images/Shared/TOP.png" /></a>


In the css

Code: Select all
a.backToTop
{
   position: fixed;
   bottom: 0;
   right: 0;
   display: none;
}


In the javascript file, the file name is backToTop.js: <script src="../Scripts/backToTop.js"></script>

Code: Select all
$(window).scroll(function(){
      if ($(this).scrollTop() > 100) {
         $('.backToTop').fadeIn();
      } else {
         $('.backToTop').fadeOut();
      }
   });
Last edited by RecPerch on Fri Apr 21, 2017 6:43 am, edited 2 times in total.
RecPerch
Propeller Head
 
Posts: 26
Joined: Tue Jan 10, 2017 9:10 am
Location: Denver, CO

Re: What's wrong with my fade in/out code?

Postby GregStenhouse on Thu Apr 20, 2017 8:48 pm

When I try your code in the San Diego template, Top Nav output it works flawlessly in all browsers, with none of the problems you mention. The only exception is in when shrinking the browser so the mobile responsive layout shows, and then nothing appears at all.

Perhaps something else is interfering, e.g. a fixed footer or some other float/clear CSS setting?
GregStenhouse
Sr. Propeller Head
 
Posts: 325
Joined: Tue May 13, 2008 3:27 pm
Location: Christchurch, New Zealand

Re: What's wrong with my fade in/out code?

Postby RecPerch on Fri Apr 21, 2017 5:36 am

Thanks for testing, Greg! I'll look into that.

EDIT: Well, it's something in my custom stylesheet. Tried the default css and the TOP fade worked. Now to figure out where to even look in the stylesheet.

Gary
RecPerch
Propeller Head
 
Posts: 26
Joined: Tue Jan 10, 2017 9:10 am
Location: Denver, CO


Return to Flare's General Discussion

Who is online

Users browsing this forum: No registered users and 6 guests