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 8 of 8
  1. #1
    New Coder
    Join Date
    Mar 2011
    Location
    Pakistan
    Posts
    86
    Thanks
    20
    Thanked 0 Times in 0 Posts

    Pop-up show on page load

    I have already worked on this pop-up:
    https://defencedog.googlecode.com/sv...lcome_box.html

    but I still considers a lightweight replacement so here it goes
    https://defencedog.googlecode.com/sv...elcome/my.html

    as you can see the popup show at click event; I want it to load automatically when page loads & can't find the appropriate method:

    Here my failed tries...

    Code:
    $(document).ready(function () { 
      //id is the ID for the DIV you want to display it as modal window 
      launchWindow(dialog);  
      
    		//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();
    	});				
    });

  • #2
    New Coder
    Join Date
    Mar 2011
    Location
    Pakistan
    Posts
    86
    Thanks
    20
    Thanked 0 Times in 0 Posts
    hey anyone; if not exact solution just giv me some resource which I can study & revise my progress...I am here to learn

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,027
    Thanks
    203
    Thanked 2,539 Times in 2,517 Posts
    All modern browsers block unrequested popups.

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    Regular Coder
    Join Date
    Mar 2008
    Location
    London
    Posts
    152
    Thanks
    4
    Thanked 42 Times in 42 Posts
    using the reference of following link -
    https://defencedog.googlecode.com/sv...elcome/my.html

    i have just added one line at the end of $(document).ready() function, and things worked perfectly.

    Code:
    $(document).ready(function() {	
      // ...
      // other piece of code 
      // ...
      // at the end, just invoke the click event of particular popup
      $('a[name=modal]').click();
    });
    if you only want to see the popup and not link (as shown in the example), then you can hide that link by setting its display property to 'none'.

    Thanks & Regards,
    Niral Soni

  • Users who have thanked niralsoni for this post:

    defencedog (10-07-2011)

  • #5
    New Coder
    Join Date
    Mar 2011
    Location
    Pakistan
    Posts
    86
    Thanks
    20
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    All modern browsers block unrequested popups.

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Its not pop-up rather is a welcome note...

  • #6
    New Coder
    Join Date
    Mar 2011
    Location
    Pakistan
    Posts
    86
    Thanks
    20
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by niralsoni View Post
    using the reference of following link -
    https://defencedog.googlecode.com/sv...elcome/my.html

    i have just added one line at the end of $(document).ready() function, and things worked perfectly.
    Excellent.

    So if I have let just say two links:

    Code:
    <a href="#dialog" name="modal">Contact</a>
    <a href="#dialog2" name="modal">Link2</a>
    both will be initiated automatically because of
    Code:
    $('a[name=modal]').click();
    dialog2 css will be defined separately

    If I don't want the second one to initiate automatically I will :
    1]change its name tag e.g
    Code:
    <a href="#dialog2" name="modal2">Link2</a>
    2] rewrite the whole code, without .click()

    Code:
     $(document).ready(function() {	
    	 
    	//select all the a tag with name equal to modal
    	$('a[name=modal2]').click(function(e) {
    		//Cancel the link behavior
    		e.preventDefault();
    		
    		//Get the A tag
    		var id = $(this).attr('href');
    	
    		//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
    		$(id).css('top',  winH/2-$(id).height()/2);
    		$(id).css('left', winW/2-$(id).width()/2);
    	
    		//transition effect
    		$(id).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>
    this will make a very long code I believe, isn't their another way, though I don't need it but I must learn

  • #7
    Regular Coder
    Join Date
    Mar 2008
    Location
    London
    Posts
    152
    Thanks
    4
    Thanked 42 Times in 42 Posts
    following is a shorter way of doing this -

    Code:
    $('a[href=#dialog]').click();
    Thanks & Regards,
    Niral Soni

  • Users who have thanked niralsoni for this post:

    defencedog (10-08-2011)

  • #8
    New Coder
    Join Date
    Mar 2011
    Location
    Pakistan
    Posts
    86
    Thanks
    20
    Thanked 0 Times in 0 Posts
    All complete & thnx for helping.
    Also I have included cookies because welcome note shuldnt appear at every visit, just for one instance. This is to be achieved via:
    This to be included in head
    <script type="text/javascript" src="jquery.cookie.js"></script>
    Code:
    	//if close button is clicked
    	$('.window .close').click(function (e) {
    		e.preventDefault();	
    		$('#mask').hide();
    		$('.window').hide();
    		$.cookie('hidewelcome', 'collapsed', { expires: 1 , path: '/'});
    	});		
    	
    	//if mask is clicked
    	$('#mask').click(function () {
    		$(this).hide();
    		$('.window').hide();
    		$.cookie('hidewelcome', 'collapsed', { expires: 1 , path: '/'});
    	});		
    	
    	// COOKIES
        var hidewelcome = $.cookie('hidewelcome');
        if (hidewelcome == 'collapsed') {
    		e.preventDefault();
    		$('#mask').hide();
    		$('.window').hide();
        };

    Plus to hide welcome URL, we can simply do this

    <a href="#dialog" name="modal"></a>


  •  

    Posting Permissions

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