Resource icon

Unmaintained Floating Sign in / Sign up box

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) ?
            $('#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', 'top':''});
    });
$('#loginBarHandle').hover(
        function(){ if ($(window).scrollTop() > 20) $(this).stop().animate({'opacity':'1'},400);},
        function(){ if ($(window).scrollTop() > 20) $(this).stop().animate({'opacity':'0.5'},400);}
    );
});
</script>

This will also change the opacity of the box when hovering it, as I originally didn't think this was necessary, but I saw it on another site and kinda figured some might want it.

EDIT: 06/09 2012
Noticed a small error in my code above. It was nothing major, it still works. The only difference is that the original code did not unset the top style element when the screen is back at the top, thus the box will be stuck at the top of the screen regardless of whether or not the login drop down is down (hard to explain)
  • Like
Reactions: Adam Howard
Top Bottom