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

Discussion in 'Add-on Releases' started by SneakyDave, Sep 30, 2012.

  1. SneakyDave

    SneakyDave Well-Known Member

    Shelley likes this.
  2. Edrondol

    Edrondol Well-Known Member

    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 likes this.
  3. SneakyDave

    SneakyDave Well-Known Member

    Ha, yeah, those forums have been almost abandoned after their experiment with syndication. It's more of a repository now.
     
  4. Eoj Nawoh

    Eoj Nawoh Active Member

    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?
     
  5. MagnusB

    MagnusB Well-Known Member

    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.
     
    Eoj Nawoh and SneakyDave like this.
  6. SneakyDave

    SneakyDave Well-Known Member

    The template name is S"olidMean_floating_login". Replace the contents of it with what Magnus B posted, and see if that resolves the problem.
     
    Eoj Nawoh likes this.
  7. Brandon Sheley

    Brandon Sheley Well-Known Member

    Do you mind including screenshots.. your demo is blocked for me?
     
  8. psTubble27

    psTubble27 Well-Known Member

    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.
     
  9. Eoj Nawoh

    Eoj Nawoh Active Member

    Alright, it sorta worked. It looks very nice while scrolling, however at the top, it's still being blocked by the search. Anyway to fix this or return it to initial position?

    http://puu.sh/1YP6Q
     
  10. MagnusB

    MagnusB Well-Known Member

    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.
     
  11. SneakyDave

    SneakyDave Well-Known Member

    I've added a couple of screen shots to the first post, but it's hard to describe without seeing it.

    Also, I think this add-on is already compatible with the "Add on Installer", but I'd somebody to confirm that first, before adding the logo to the first post.

    http://xenforo.com/community/resources/add-on-installer.960/
     
    Brandon Sheley likes this.
  12. Eoj Nawoh

    Eoj Nawoh Active Member

    Which value am I changing? I changed the code and it does the same thing currently.
     
  13. MagnusB

    MagnusB Well-Known Member

    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; }
     
  14. Eoj Nawoh

    Eoj Nawoh Active Member

    http://puu.sh/1YUqt

    Still didn't work. I must be missing something...
     
  15. MagnusB

    MagnusB Well-Known Member

    Do you have a link? I need to see what is happening
     
  16. Eoj Nawoh

    Eoj Nawoh Active Member

  17. MagnusB

    MagnusB Well-Known Member

    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.
     
  18. Eoj Nawoh

    Eoj Nawoh Active Member


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


    It works, thank you!
     
  19. MagnusB

    MagnusB Well-Known Member

    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 :)
     
  20. Eoj Nawoh

    Eoj Nawoh Active Member

    Unfortunately that didn't change anything.
     

Share This Page