SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Transition with jQuery popup

    Hello,

    I have a popup that appears when clicking on the login link on this page

    You will see when you click the link, the background fades, the scroll bars are lost and a popup is displayed. It works fine but i don't quite like the fact that i have had to remove the scroll bars. This was because when the use scrolled down the page the background was not faded like the top of the page.

    There is a bug in IE7 as the scroll bars still appear.

    So i was hoping that there would be either a css fix or jQuery fix for this? If i keep the scroll bars, when the user scrolls down the page when the popup is displaying i need the whole page to remain faded?

    Is this possible anyone?

    Many thanks,
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    In the popup.js file what you can do is this, find the following lines which is in the centerPopup() function...

    Code JavaScript:
    $("#backgroundPopup").css({
        "height": windowHeight
    });
    and change it to the following...
    Code JavaScript:
    $("#backgroundPopup").css({
        "height": $(document).height()
    });
    What this will do instead is take the document height and not the client height as the document height will always change while the client height is a static height set when the page loads.

    Next remove the 2 lines that remove and add the page overflow as they won't be needed anymore, the last thing you can do which is something i find cool is smooth follow me elements. Essentially what that means is you can have an element such as your login box follow you and it will work all the way back in IE 6. See the below example on how to do this.

    Code JavaScript:
    var popupStatus = false; // true = enabled | false = disabled
     
    function loadPopup() {
        // Load the popup only if it is disabled
        if (!popupStatus) {
            $('#backgroundPopup').css('opacity', '0.7');
            $('#backgroundPopup, #popupContact').fadeIn('slow');
     
            $(window).unbind('scroll').scroll(function() {
                $('#popupContact').stop().animate({
                    top: $(document).scrollTop() + ($('#popupContact').height() / 2)
                }, 'slow');
            });
     
            popupStatus = true;
        }
    }
     
    function disablePopup() {
        // Disable the popup only if it is enabled
        if (popupStatus) {
            $('#backgroundPopup, #popupContact').fadeOut('slow');
            popupStatus = false;
        }
    }
     
    function centerPopup() {
        // Request some client data for centering
        var windowWidth = document.documentElement.clientWidth;
        var windowHeight = document.documentElement.clientHeight;
        var popupHeight = $('#popupContact').height();
        var popupWidth = $('#popupContact').width();
     
        $('#popupContact').css({
            position: 'absolute',
            top: windowHeight / 2 - popupHeight / 2,
            left: windowWidth / 2 - popupWidth / 2
        });
     
        $('#backgroundPopup').css('height', $(document).height());
    }
     
    $(function() {
     
        $('#inner-header-right-login').click(function() {
            centerPopup();
            loadPopup();
        });
     
        $('#popupContactClose, #backgroundPopup').click(function() {
            disablePopup();
        });
     
        $(window).keypress(function(e) {
            if (e.keyCode == 27 && popupStatus) {
                disablePopup();
            }
        });
     
    });
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  3. #3
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Legend, thanks for that SgtLegend

    I love the scroll to thing where the box slides down with the page as the user scrolls.

    Theres a slight but as sometimes the box doesn't disappear when clicking on the 'x' button. I will see if i can figure this one out.

    Thanks again
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Your welcome, the scrolling animation effect i only started using last night so i guess you had luck on your side , as for the closing issue i think its because i grouped both close button and backgroundPopup selectors together. If you swap this back to your old cold it should hopefully work fine again. See the below code for reference as to what I'm taking about.
    Code JavaScript:
    $('#popupContactClose, #backgroundPopup').click(function() {
        disablePopup();
    });
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  5. #5
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes thats exactly what it was

    Thanks again, there's so many places i can use this scroll effect, can't thank you enough for this
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  6. #6
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Your very welcome
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •