IT'S BAAAACK: What's wrong with my fade in/out code?

This forum is for all Flare issues not related to any of the other categories.
Post Reply
RecPerch
Propeller Head
Posts: 43
Joined: Tue Jan 10, 2017 9:10 am
Location: Denver, CO

IT'S BAAAACK: What's wrong with my fade in/out code?

Post by RecPerch »

Scroll down to see what's the what with r2018 and the new side navigation skin

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 Wed May 09, 2018 12:45 pm, edited 3 times in total.
GregStenhouse
Sr. Propeller Head
Posts: 330
Joined: Tue May 13, 2008 3:27 pm
Location: Christchurch, New Zealand

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

Post by GregStenhouse »

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?
RecPerch
Propeller Head
Posts: 43
Joined: Tue Jan 10, 2017 9:10 am
Location: Denver, CO

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

Post by RecPerch »

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: 43
Joined: Tue Jan 10, 2017 9:10 am
Location: Denver, CO

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

Post by RecPerch »

Upgraded to r2018 and am trying out the new side navigation skin.

Had some problems with the skin I've worked through, but the "back to top" image and fade in/out code stopped working.

First, the FIXED position isn't fixing it in the correct place (see the code in the original post above). Instead of right bottom, it's now top left (I removed the display:none to test it).

Second, it's not fixed, scrolling off the page with the main content.

Third ... actually, the fade in/out might be working, I can't tell because it scrolls off the screen :wink:

Fourth, it's definitely the skin. When I use the TOP navigation skin, it works as expected. Will reply with whatever fix I find.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

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

Post by NorthEast »

I use almost identical code in my projects.

The problem is that the script is checking for the whole window to scroll down before showing the back to top link.

Code: Select all

$(window).scroll(function(){
But when you use the side navigation skin, the whole window does not scroll, as the content is displayed in two panels.
So to check when the topic container scrolls down, you need to use div.body-container.

Code: Select all

$('div.body-container').scroll(function(){
Works fine for me. I'd guess the CSS issues are related to your own stylesheets - use F12 to inspect and diagnose the problem.
RecPerch
Propeller Head
Posts: 43
Joined: Tue Jan 10, 2017 9:10 am
Location: Denver, CO

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

Post by RecPerch »

Thanks, Dave.

You were right about the CSS/fixed position problem and that's now fixed.

As for the fade in/out, my custom stylesheet doesn't have a div.body-container defined in it. I see that the sidenav stylesheet has "html.home-topic .body-container." I linked the sidenav CSS to my own, but that didn't get the fade in/out to work (after literally adding 'div.body-container' to the script).

Now if div.body-container is a "variable" name for a div used to contain the body content of the page, then I'm at a loss. I assume that the bodyProxy in my master page displays that content. The bodyProxy in my master page does not have a div around it. As a test, I added a div+class around my bodyProxy, defined that div in my CSS, and added that div in lieu of 'div.body-container' ... but that didn't work either.

As you can see, I'm not knowledgeable enough to change your suggestion into what I need :(
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

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

Post by NorthEast »

The div.body-container is what Flare creates in the output. To find that out, I pressed F12 and inspected the output.

I didn't edit my CSS or make any other changes - I only changed that one reference in the script.
whunter
Sr. Propeller Head
Posts: 429
Joined: Thu Mar 12, 2009 4:49 pm
Location: Portland, OR

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

Post by whunter »

I have been following this topic with much interest. I implemented the original solution in my topnav output and it worked (yay!).

Then I decided to experiment with sidenav, so I made the change to the script to use the div.body-container reference. It didn't work.

I am not adding much to the conversation other than to give anecdotal evidence of someone else who is having problems making this work in sidenav. :) And to give thanks for the working topnav solution and the attempts to provide a fix for sidenav.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

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

Post by NorthEast »

It works absolutely fine for me with side nav, so I'm not sure what to suggest other than press F12 to diagnose the problem - check the console log and the HTML/CSS for the 'back to top' link.
RecPerch
Propeller Head
Posts: 43
Joined: Tue Jan 10, 2017 9:10 am
Location: Denver, CO

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

Post by RecPerch »

Well, still confused.

To diagnose, I copied my "backtotop" elements over to the default side nav template project I created (in theory, this is baseline side navigation). The "fade in" still didn't work. To be clear, the "back to top" element does work if I keep it displayed, but I can't get it to fade in when scrolling.

I copied the javascript over.

Code: Select all

$('div.body-container').scroll(function(){
		if ($(this).scrollTop() > 100) {
			$('.backToTop').fadeIn();
		} else {
			$('.backToTop').fadeOut();
		}
	});
I copied the backtotop element to the CSS.

Code: Select all

a.backToTop
{
	position: fixed;
	bottom: 10px;
	right: 30px;
	display: none;
	z-index: 9999;
}
I copied the TOP.png graphic over.
I copied the following into the master page:

Code: Select all

    <head>
		<script src="../Scripts/backToTop.js">
		</script>
	</head>
    <body>
		<a name="top"></a>
		<a class="backToTop" href="#top"><img src="../Images/TOP.png" alt="" title="" /></a>
        <MadCap:breadcrumbsProxy />
        <MadCap:bodyProxy />
    </body>
whunter
Sr. Propeller Head
Posts: 429
Joined: Thu Mar 12, 2009 4:49 pm
Location: Portland, OR

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

Post by whunter »

***retraction -- I inadvertently replaced the script with an earlier version that still uses "window" -- never mind!***

I just wanted to share this observation in case it helps pinpoint what isn't working in Side Nav. I left the scripts and such in my project in the hopes of fixing it someday. I noticed today that when I preview a topic in Flare (with the Side Nav target as the primary target), and scroll the preview, I get the fade in / fade out of the Back to Top image. But when I build the actual Side Nav target, it doesn't show.
PoojaTiwari
Jr. Propeller Head
Posts: 8
Joined: Thu Sep 12, 2019 10:26 pm

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

Post by PoojaTiwari »

Hey,

I am facing similar issue in my project. I want to add a class on .tab-bar for header on scroll. I am using Side Navigation Structure. the function is :

Code: Select all

$(window).scroll(function(){
		if ($(this).scrollTop() > 50) {
			$('.title-bar.tab-bar').addClass('fixed');
		} else {
			$('.title-bar.tab-bar').removeClass('fixed');
		}
});
I have change the position fixed to Absolute due to design requirement and need to add this on scroll. I have used this many times in top navigation. But I am stuck here with this.
Please share suggestion to fix this.

Thanks,
Madcap Certified Advanced Developer
:flare:Image
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

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

Post by NorthEast »

PoojaTiwari wrote:I am facing similar issue in my project. I want to add a class on .tab-bar for header on scroll. I am using Side Navigation Structure.
Did you read this post in the thread?
viewtopic.php?f=13&t=28915&p=139602#p131981

I'm not sure what you're trying to achieve by adding a "fixed" class though, as the header is always fixed when using Side Navigation.
Post Reply