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

Floating Login by Solid Mean [Deleted]

Edrondol

Well-known member
#2
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!
 

SneakyDave

Well-known member
#3
Ha, yeah, those forums have been almost abandoned after their experiment with syndication. It's more of a repository now.
 

Eoj Nawoh

Active member
#4
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?
 

MagnusB

Well-known member
#5
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.
 

psTubble27

Well-known member
#8
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.
 

MagnusB

Well-known member
#10
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.
 

Eoj Nawoh

Active member
#12
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.
Which value am I changing? I changed the code and it does the same thing currently.
 

MagnusB

Well-known member
#13
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; }
 

MagnusB

Well-known member
#17
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.
 

Eoj Nawoh

Active member
#18
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.

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


It works, thank you!
 

MagnusB

Well-known member
#19
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 :)
 

Eoj Nawoh

Active member
#20
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 :)
Unfortunately that didn't change anything.