Floating Login by Solid Mean [Deleted]

TnTU?!? Omaha represent! Been listening to the guys since they first got here. I've even been on their show when they were in the old John Galt building.


Small bloody world!
 
Ha, yeah, those forums have been almost abandoned after their experiment with syndication. It's more of a repository now.
 
Thank you so much for this addon, I like it a lot and it's helped some of our users and new members. I do have one error though.

http://puu.sh/1YHtV
http://puu.sh/1YHuc
http://puu.sh/1YHum

Our log in/ sign up button is in the top center when first moved, as you scroll down it goes to the right, but then when you move back it, it gets clipped into the Search box. Is there anything to remedy this situation and perhaps make the moving sign up/log in button larger?
 
The clipping can be solved by setting a z-index above 7500, which is the one for the quick search.

The jQuery script in this will set the right css property when you scroll, which it needs to, cause it is breaking out of the content container. You will most likely see that it sets it self to the right when you scroll back up again.


You need to tweak the function, I can't remember the template name, but it is this part:
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'});
    });
 
$('#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>

The 'right' : '30px' is where it sets the right css property when you are scrolling, the other is when you are back at the top.
 
I thought this was something different, from the title of it. What we need is an add-on that makes the login popup float above the forum, rather than appearing at the top and pushing everything down (which can be needlessly and heavily resource-intensive).

Something like what Tumblr used to have, before their recent change.
 
Code: 
            $('#loginBarHandle').stop().animate({'opacity':'0.5'},400).css({'position':'fixed','top':'0px','z-index':'60','height':'20px', 'right' : '30px'}):

Change that line to:
Code: 
            $('#loginBarHandle').stop().animate({'opacity':'0.5'},400).css({'position':'fixed','top':'0px','height':'20px', 'right' : '30px'}):
If you already set a z-index through css, if not just change the value to something above 7500.
 
MagnusB said:
Code: 
            $('#loginBarHandle').stop().animate({'opacity':'0.5'},400).css({'position':'fixed','top':'0px','z-index':'60','height':'20px', 'right' : '30px'}):

Change that line to:
Code: 
            $('#loginBarHandle').stop().animate({'opacity':'0.5'},400).css({'position':'fixed','top':'0px','height':'20px', 'right' : '30px'}):
If you already set a z-index through css, if not just change the value to something above 7500.
Click to expand...

Which value am I changing? I changed the code and it does the same thing currently.
 
The problem is the z-index. For the quick search it is 7500, and I've set it to 60 in the jQuery. If you change per my suggestion above, add this to extra.css or wherever:
Code: 
#loginBarHandle { z-index: 8000; }
 
Your style is different, you need to replace the jQuery function with 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', 'margin' : '0px auto'}):
            $('#loginBarHandle').stop().animate({'opacity':'1'},400).css({'position':'absolute','top':'0px','height':'20px', 'margin' : '0px auto'});
    });
 
$('#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>

I couldn't really test my z-index theory, cause it is set during document load.
 
MagnusB said:
Your style is different, you need to replace the jQuery function with 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', 'margin' : '0px auto'}):
            $('#loginBarHandle').stop().animate({'opacity':'1'},400).css({'position':'absolute','top':'0px','height':'20px', 'margin' : '0px auto'});
    });
 
$('#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>

I couldn't really test my z-index theory, cause it is set during document load.
Click to expand...


http://screencast.com/t/2jWC01xzR


It works, thank you!
 
If you are happy with that, I won't pester you, but I see that it still jumps a few pixels to the right when you scroll down. What if you try this one instead:
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'}):
            $('#loginBarHandle').stop().animate({'opacity':'1'},400).css({'position':'absolute','top':'0px','height':'20px'});
    });
 
$('#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>
I think the margin code I added in to center it is doing something strange and centering it somewhere other than where I expected it to o_O

BTW, be sure to add a review if you like the resource :)
 
MagnusB said:
If you are happy with that, I won't pester you, but I see that it still jumps a few pixels to the right when you scroll down. What if you try this one instead:
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'}):
            $('#loginBarHandle').stop().animate({'opacity':'1'},400).css({'position':'absolute','top':'0px','height':'20px'});
    });
 
$('#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>
I think the margin code I added in to center it is doing something strange and centering it somewhere other than where I expected it to o_O

BTW, be sure to add a review if you like the resource :)
Click to expand...

Unfortunately that didn't change anything.
 
You must log in or register to reply here.
Top Bottom