Can someone me to open the modal popup when a vistor requests the page for the very first time, a cokie hides it thereafter. I need to do a survey. They answer one question and are redirected so a close button or submit button is not needed. Im using php.
Thanks for the help.
Bruce
Are you allowed to use jQuery? I would user jQuery + jQuery-UI (http://jqueryui.com/demos/dialog/)
What you have to do is just define a Div element with the markup of the popup, and then invoke the popup method used by jQuery UI in the document ready event.
e.g.
$(document).ready(function() {$( "#dialog" ).dialog();});
and
<div id="dialog"> Here goes your survey form</div>
Also it is a good idea to load jQuery and jQuery-UI from a CDN, like google's, use these addresses:
https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js
Hope this helps
Related
I need to be able to ask users for help if they have been sitting idle on my php site for at least 30 seconds. I have the popup made and styled. It is on a page that currently uses a button to show the popup(for testing purposes). But now I need to remove the button and put in place some kind of javascript or php to open the modal after 30 seconds of user inactivity.
Here is some of the page that has the button to display the modal popup (I'm assuming this is where I would tell the site to wait for inactivity):
<body onload="javascript:fg_hideform('fg_formContainer','fg_backgroundpopup');">
<p>
This is an example page showing how to add the popup contact form to your website.
Click on the button below to open the popup.
</p>
<p>
<a href='javascript:fg_popup_form("fg_formContainer", "fg_form_InnerContainer","fg_backgroundpopup");'>
<img border='0' src='contact-us-button.png' width='213' height='39' /></a>
</p>
The page also includes the 2 files necessary to show and submit the popup contact form. I will show the code for those if it is necessary. Thank you so much!
Note: I found this plugin: http://www.erichynds.com/jquery/a-new-and-improved-jquery-idle-timeout-plugin/ but I'm not sure how to use it to keep a modal from being disabled once the mouse moves. I need a user to be able to fill out the contact form so it can be submitted.
I also tried using some javascript code from another post on stackoverflow but I am really really bad with javascript and have no clue what to do here.
does
<script type="text/javascript">
setTimeout(function() {
fg_popup_form("fg_formContainer", "fg_form_InnerContainer","fg_backgroundpopup");
}, 30000);
}
</script>
solve the problem?
I would like to create an AJAX pop up window that will serve as a login pop up when the user clicks "log in" to log in to a website. What algorithm and programming will I need to do this? I will be using PHP and MySQL.
I doubt you need ajax, you can simply have a hidden div that fades in when you click login.
<div id="login-trigger">login</div>
<div id="login" style="display:none;">... login form goes here ...</div>
Using jQuery:
$('#login-trigger').click(function(){ $('#login').fadeIn() })
Example here: http://jsfiddle.net/pu4rd/
Take a look at the jQuery Tools Overlay.
There you can render out a (hidden) div containing the login box and show it as an overlay-popup (or even load an "external" login page like HERE).
After someone completes a form on our website and clicks on submit s/he is directed to a landing page. I would like to change that flow so that upon submitting (1) URL1 opens as new window; and (2) user is redirected from current form page to URL2.
Can you help?
current code snippet -
if(! isset($RedirectOnSuccess))
$RedirectOnSuccess = 'oldURL';
I'm a tech newbie so need your help in piecing it together. I am using MODx and the web page itself calls the php script with the following -
[!FORM_SNIPPET?
&RedirectOnSuccess=oldURL
!]
do it with javascript. http://www.tizag.com/javascriptT/javascriptredirect.php & http://www.pageresource.com/jscript/jwinopen.htm
It likely depends on the context of your popup, but rather than using a traditional popup you might consider something less invasive and prone to ad-blocking such as a lightbox or other ajax-based display tools within the page. You can trigger the lightbox from a click event on the submit button, display your message with it, and then submit the form on close or confirm.
Avoid solutions where viewing the form result page is dependent on javascript as some (uncommon) users may have it disabled. If it is implemented as above, such users would miss your popup but the form would still go through.
You could use jQuery to implement this without modifying the php code that MODx uses to generate your form, and instead attach a click event to the form's submit button by putting javascript in the xhtml header. For example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="/colorbox/jquery.colorbox.js"></script>
<script type="javascript">
$("#FormID.input[type=submit]").click(function(e) {
/* prevent form from submitting */
e.preventDefault();
e.stopPropagation();
/* on colorbox close, submit form */
$(document).bind('cbox_close', function(){
e.submit(); // submit the form on close
});
/* open the colorbox */
.colorbox({href:"http://example.com/url1"});
});
</script>
I used ColorBox here, but the same idea should apply to other lightbox alternatives. I didn't browser test this, so be sure to test and adapt as necessary.
Given problems with popup blockers your best bet is to target a new window with HTML on the form upload.
<form target="_blank">
Then using JavaScript (perhaps via opener.location.href in the popup), you can redirect the main window to another URL.
Currently I'm working on a project using Zend framework and the message notification dialog box (using Facebox jquery).
I wanted to make my message notification dialog box to be smarter rather having the user click onto the link, before the Notification Message box appear. I wanted to make it if there's inbox messages then the message box appear else it doesn't appear on the screen.
I have 2 questions,
How can I make the message notfication dialog box popup when the page load . (without requiring the user click onto the link)
Second question how can I control the dialog box to display or not to display in Zend framework Controller?
Thanks so much in advance!
Here is my current code
When a user click onto the link, the Notification Message box appear on the screen
Notification Messages
Here the javascript code to Initialise the Facebox Modal window:
$('a[rel*=modal]').facebox(); // Applies modal window to any link with attribute rel="modal"
How can I make the message notfication dialog box popup when the page load . (without requiring the user click onto the link)
There are several way to do this, depending on your use case. If you want to notify users in "real time" you may use javascript setTimeout() or setInterval() functions to start a timer and trigger an ajax request to check for new message.
If you just want to do that on page load, well, a simple flag like var hasMessages = true; would do the trick.
In both case, consider writing a View Helper (see my second answer below)
Second question how can I control the dialog box to display or not to display in Zend framework Controller?
Controllers are not intended to "display" or "not display".
What you are probably looking for is View Helper
$(document).ready(function(){
$("a[rel=modal]").trigger("click");
});
$(document).ready(function(){
$(#dialog).dialog{
autoOpen:true; //#Dialog is div id of dialog box
}
I have this at above the body tag in my page --
<script type="text/javascript">
$(document).ready(function() {
$('#button').popupWindow({windowURL:'http://something',centerBrowser:1,width:400,height:300});
});
</script>
Is there a way to make this popup happen without the user actually clicking a button -- programmatically w/ code inserted into the middle of the page with php on page load?
Add the following next.
$("#button").trigger("click");
Or put it all on on chained line:
$('#button').popupWindow({...options...}).trigger("click");
For what it's worth, you can invoke this from a non-rendered element:
$("<div></div>").popupWindow({..options..}).click();
I think for security reasons a lot of browsers will not open a popup window without some kind of user action.
popupWindow is hard-coded to work with links, and only responds to "click" events. That said, if you want the popup to appear on page load, you could try editing line 6 of jquery.popupWindow from this;
$(this).click(function(){
to this;
$(this).ready(function(){
add an id to your body element;
<body id="popuptrigger">
and call the plugin;
$('body#popuptrigger').popupWindow({ ... });
This is untested, but even if it works it's not a very elegant solution. I'd suggest looking around for a popup plugin that allows you more flexibility. I use jqModal to load internal url requests for popup forms and can throughly recommend it. Your mileage mey vary though, so do a google search for "jquery modal" and check out some alternatives.
I'd suggest using a jQuery UI Dialog. That way you won't have to worry about how different browsers handle popups differently.
As stated by others, some browsers (notably Microsoft Internet Explorer) will refuse to open a JavaScript popup window unless it was triggered as a result of user interaction. You can easily fake this with a bit of jQuery:
// Create a 'fake' a tag, this will never be added to DOM.
$('<a href="#" />')
// Register a click handler which will open a new popup window.
.click(function () {
window.open(url, name, options);
})
// Simulate the click in jQuery - this will open the popup window.
.click();
I can't comment on the accepted solution, so I'll just post this here - regarding Jonathan Sampsons last proposition (which is really clever): on latest Firefox & Chrome the element, that triggers the click event, must be visible. So you can't really generated a non-rendered element.
Also, if you're using an element from your page, just choose one that doesn't have any other click event defined yet - otherwise all other click events will trigger, which might not be the desired outcome.