• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Floating Sign in / Sign up box

MagnusB

Well-known member
#1
MagnusB submitted a new resource:

Floating Sign in / Sign up box (version 1) - Makes the small sign in / sign up box float as you scroll

First off, some credits:
Cezz wrote the initial js for this, I only adapted it to work on the sign up sign in link, find it here:
http://xenforo.com/community/threads/floating-navigation-bar.19295/

First you need to create a new template for your style. So go to ACP -> Appearance -> Templates -> Create New Template. Call it float_login, and copy in this code:
Code:
<script type="text/javascript">
$(function() {
    $(window).scroll(function(){
        ($(window).scrollTop() > 20) ?...
Read more about this resource...
 

MagnusB

Well-known member
#4
MagnusB updated Floating Sign in / Sign up box with a new update entry:

Hover opacity change and minor fix

I just noticed that when click on the link while scrolled down the box will position it self at the top of the screen (top: 0px), I fixed this by removing the top attribute when you return to the top of the screen. If you have already applied this, just open the float_login template and change everything with:
Code:
<script type="text/javascript">
$(function() {
    $(window).scroll(function(){
        ($(window).scrollTop() > 20) ?...
Read the rest of this update entry...
 

Adam Howard

Well-known member
#5
I was helping someone and they had a custom skin. The new code doesn't work, but the old code did.

Should anyone still need the original fload_login

PHP:
<script type="text/javascript">
$(function() {
    $(window).scroll(function(){
        ($(window).scrollTop() > 20) ?
            $('#loginBarHandle').stop().animate({'opacity':'0.5'},400).css({'position':'fixed','top':'0px','z-index':'60','height':'20px', 'right' : '30px'}):
            $('#loginBarHandle').stop().animate({'opacity':'1'},400).css({'position':'absolute','top':'0px','height':'20px', 'right' : '0px'});
    });
});
</script>
 

MagnusB

Well-known member
#6
They probably needed the top still set, so you can just change this:
Code:
<script type="text/javascript">
$(function() {
    $(window).scroll(function(){
        ($(window).scrollTop() > 20) ?
            $('#loginBarHandle').stop().animate({'opacity':'0.5'},400).css({'position':'fixed','top':'0px','z-index':'60','height':'20px', 'right' : '30px'}):
            $('#loginBarHandle').stop().animate({'opacity':'1'},400).css({'position':'absolute','top':'','height':'20px', 'right' : '0px'});
    });
to
Code:
<script type="text/javascript">
$(function() {
    $(window).scroll(function(){
        ($(window).scrollTop() > 20) ?
            $('#loginBarHandle').stop().animate({'opacity':'0.5'},400).css({'position':'fixed','top':'0px','z-index':'60','height':'20px', 'right' : '30px'}):
            $('#loginBarHandle').stop().animate({'opacity':'1'},400).css({'position':'absolute','top':'0px','height':'20px', 'right' : '0px'});
    });
The only difference between the old one and this one (except the hover effect), is the fact that I "unset" the top style element when your screen is at the top position. That way the box stays below the log in drop down, instead of at the top of the screen.
 

SneakyDave

Well-known member
#10
This is basically an unmaintained addon, I will update it to reflect that. I'm not even sure if it works on Xf 1.4 or 1.5.

sorry, I thought this was regarding my addon of this javascript code. Don't know how easy it would be to transfer.