Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    popup makes page scroll - help!

    Hello everybody..

    I have an add to cart button on my products and when clicked a popup opens that offers a choice to go to the checkout page or continue shopping.
    The problem is every time the popup opens the page behind it scrolls to the top. I need the page to stay where the button was clicked and not scroll.

    I've found posts where it's suggested to add return false to the onclick. But I tried that and it didn't help. Very possible I didn't do it correctly too.

    Can someone please review my code and let me know what I need to do?

    Code:
      <script type="text/javascript">
    
    $(document).ready(function() {	
    
    	
    		//Get the screen height and width
    		var maskHeight = $(document).height();
    		var maskWidth = $(window).width();
    	
    		//Set heigth and width to mask to fill up the whole screen
    		$('#mask').css({'width':maskWidth,'height':maskHeight});
    		
    		//transition effect		
    		$('#mask').fadeIn(1000);	
    		$('#mask').fadeTo("slow",0.8);	
    	
    		//Get the window height and width
    		var winH = $(window).height();
    		var winW = $(window).width();
                  
    		//Set the popup window to center
    		$('#dialog').css('top',  winH/2-$('#dialog').height()/2);
    		$('#dialog').css('left', winW/2-$('#dialog').width()/2);
    	
    		//transition effect
    		$('#dialog').fadeIn(2000); 
    
    	//if close button is clicked
    	$('.window .close').click(function (e) {
    		//Cancel the link behavior
    		e.preventDefault();
    		
    		$('#mask').hide();
    		$('.window').hide();
    	});		
    	
    	//if mask is clicked
    	$('#mask').click(function () {
    		$(this).hide();
    		$('.window').hide();
    	});			
    	
    });
    
    </script>
    
    
    
    <input type="reset" value="Add to Cart" name="add" onClick="window.location='/Merchant2/merchant.mv?Attributes=Yes&Quantity=1'"/><br/>                 
    <input type="reset" value="View Cart" name="view" onClick="window.location='/Merchant2/merchant.mv?Screen=BASK&Store_Code=ST'"/><br/>              
    <input type="reset" value="Check Out" name="checkout" onClick="window.location='/Merchant2/merchant.mv?Screen=ERS&Store_Code=ST'"/>

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,609
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Where is the button that invokes the popup (or the script, respectively)?

    If the click is invoked with jQuery you can do
    Code:
    ….click(function(e) {
      e.preventDefault();
      …
    }
    That preventDefault function prevents the default action, i. e. the link going somewhere.

    On the other hand, since the anchor isn’t linking anywhere anyway (as I assume by you saying that it jumps to the top which sounds like you have an href="#") you would be better off just removing that attribute altogether. Why have a link that’s not linking anything?

  • #3
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    Where is the button that invokes the popup (or the script, respectively)?

    If the click is invoked with jQuery you can do
    Code:
    ….click(function(e) {
      e.preventDefault();
      …
    }
    That preventDefault function prevents the default action, i. e. the link going somewhere.

    On the other hand, since the anchor isn’t linking anywhere anyway (as I assume by you saying that it jumps to the top which sounds like you have an href="#") you would be better off just removing that attribute altogether. Why have a link that’s not linking anything?
    Yes, I'm assuming it is using jquery because the script shows $(document) etc.
    There is no href tag used on the buttons either.

    I don't get that click function(e) you posted. Is that what you recommend after my clarification? If so, can you show me the parts you cut out and how it is used?

    Thanks

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,609
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Hang on, I’m not getting something here. Are you saying this “add to cart” button is invoking the popup?
    Code:
    <input type="reset" value="Add to Cart" name="add" onClick="window.location='/Merchant2/merchant.mv?Attributes=Yes&Quantity=1'"/>
    Because what I see there is that it just opens a new page.
    It would be really great to see a live example.


  •  

    Posting Permissions

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