Customize javascript scroll to top when opening popup.

  • Resolved Colin

    (@colinsafranek)


    10 years, 9 months ago

    Hi, first of all thanks so much for this free plugin! I really appreciate it’s simplicity and usefulness 🙂

    I have customized the CSS of the popup window so that it becomes “fixed” and assumes a height relative to the current viewport, also changing the “overflow” property to “scroll” because I think this creates a better user experience for reviewing a full length terms and conditions during checkout. My customizations are as follows:

    .simplepopup {
	position: fixed !important;
	top: 2% !important;
	top: 2vh !important;
	left: 50% !important;
	height: 96%;
	height: 96vh;
        max-height: 100%;
        overflow: scroll;
        -webkit-transform: translateX(-50%);
	   -moz-transform: translateX(-50%);
	     -o-transform: translateX(-50%);
	        transform: translateX(-50%);
}

    My only wish is that I could disable the plugin’s scroll-to-top behavior when the popup is opened. Currently, when a user clicks the terms and conditions link, the popup is opened and the window is scrolled to the very top of the page.

    Is there a way to change that behavior?

    Thanks in advance!

    – Colin

    https://ww.wp.xz.cn/plugins/woocommerce-checkout-terms-conditions-popup/

Viewing 5 replies - 1 through 5 (of 5 total)
  • DualCube

    (@dualcube)

    10 years, 8 months ago

    Hi Colin,

    I would suggest you to go through the inbuild java script present in assests >> frontend >> js folder >> simplepopup.js. You have to make some changes in the code of simplepopup.js file, which I have shown by using comments. Please go through it.

    positionPopup: function() {
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
    var popupWidth = object.width();
    var popupHeight = object.height();
    var topPos = (windowHeight / 2) – (popupHeight / 2) ;
    // to make changes on top, var topPos = (windowHeight / 2) – (popupHeight / 2) + 100 ;
    var leftPos = (windowWidth / 2) – (popupWidth / 2);
    //to make change in the left, var leftPos = (windowWidth/ 2) – (popupWidth/ 2) + 100 ;
    if(topPos < 30) topPos = 30;
    if(leftPos > 150) {
    leftPos = 150;
    }

    object.css({
    “position”: “absolute”,
    “top”: topPos, // or you can make change here for top also, “top”: 250,
    “left”: leftPos // or you can make change here for left also, “left”: 100,
    });
    },

    };

    Please let me know if this solve the issue.

    Thanks,
    Rimpa
    Team DualCube

    DualCube

    (@dualcube)

    10 years, 8 months ago

    Hello Colin,

    Just thought to check on your findings. Let us know if that code helped to solve your problem. For now I am marking this thread as resolved, Do reach us out if you have any further issues.

    Regards,
    Rimpa

    kittenpickles

    (@kittenpickles)

    10 years, 8 months ago

    Hello Rimpa – Please could you respond to the issue I am having, which I posted about days ago. Thank you.

    dwainetrain

    (@dwainetrain)

    10 years, 3 months ago

    Hello,

    I tried the method above, but it doesn’t appear to do anything. This is what I think. The issue is that when you click a link with a ‘#’ at the end, the jquery default behavour is to jump to the top of the page. I found a type of solution on this page, but I don’t know how to integrate it into the existing code:

    $(‘a.someclass’).click(function(e)
    {
    // Special stuff to do when this link is clicked…

    // Cancel the default action
    e.preventDefault();
    });

    Many thanks for this great plugin! It’s working wonderfully otherwise.

    Vegas Website Designs

    (@vegaswebsitedesigns)

    10 years, 1 month ago

    You are correct about the anchor link causing this behavior. Adding the following to your site’s js file will fix it.

    // Terms and conditions popup
    $(document).on(‘click’, ‘a.simple_popup_show’, function(e) {
    e.preventDefault();
    });

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Customize javascript scroll to top when opening popup.’ is closed to new replies.