Floating Sign in / Sign up box

[MagnusB]

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:

<script type="text/javascript">
$(function() {
    $(window).scroll(function(){
        ($(window).scrollTop() > 20) ?...

Read more about this resource...

 

[bogus]

Just saw that somewhere today and wanted it installed in my new board

Thanks a lot

 

[MagnusB]

No worries I have been wanting to share this for some time, but I just haven't gotten around to it...

 

[MagnusB]

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:

<script type="text/javascript">
$(function() {
    $(window).scroll(function(){
        ($(window).scrollTop() > 20) ?...

Read the rest of this update entry...

 

[Adam Howard]

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

<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]

They probably needed the top still set, so you can just change this:

<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

<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]

Hey MagnusB, I created an add-on for this template edit here.
http://xenforo.com/community/resources/floating-login-by-solid-mean.1065/

It's kind of overkill for such this kind of template edit, but I hope somebody finds it useful

 

[MagnusB]

Nice, I have already linked it in the description body

 

[Donny]

Can this be modified to float the sidebar?

 

[SneakyDave]

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.