...

View Full Version : Pop-up show on page load



defencedog
10-06-2011, 09:21 AM
I have already worked on this pop-up:
https://defencedog.googlecode.com/svn/welcomebox/jquery_welcome_box.html

but I still considers a lightweight replacement so here it goes
https://defencedog.googlecode.com/svn/simplewelcome/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...


$(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();
});
});

defencedog
10-07-2011, 02:29 PM
hey anyone; if not exact solution just giv me some resource which I can study & revise my progress...I am here to learn

Philip M
10-07-2011, 03:54 PM
All modern browsers block unrequested popups.

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

niralsoni
10-07-2011, 05:35 PM
using the reference of following link -
https://defencedog.googlecode.com/svn/simplewelcome/my.html

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



$(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

defencedog
10-07-2011, 07:54 PM
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...

defencedog
10-07-2011, 08:09 PM
using the reference of following link -
https://defencedog.googlecode.com/svn/simplewelcome/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:


<a href="#dialog" name="modal">Contact</a>
<a href="#dialog2" name="modal">Link2</a>
both will be initiated automatically because of

$('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

<a href="#dialog2" name="modal2">Link2</a>
2] rewrite the whole code, without .click()


$(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

niralsoni
10-07-2011, 09:58 PM
following is a shorter way of doing this -


$('a[href=#dialog]').click();

Thanks & Regards,
Niral Soni

defencedog
10-08-2011, 10:09 AM
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>

//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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum