JavaScript - Popup Form

When you go to my site at www.nandahosting.co.uk there is a "customer login" popup at the top right hand corner with a remember me tick box.

How can i get it so if they have ticked the remember me tick box, to automatically redirect to the page instead of putting there details in again. the output page for the login button is (www.nandahosting.co.uk/front-page) which u can only access if logged in.

the css for the popup is

Code:

function toggle(div_id) {
	var el = document.getElementById(div_id);
	if ( el.style.display == 'none' ) {	el.style.display = 'block';}
	else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
	if (typeof window.innerWidth != 'undefined') {
		viewportheight = window.innerHeight;
	} else {
		viewportheight = document.documentElement.clientHeight;
	}
	if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
		blanket_height = viewportheight;
	} else {
		if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
			blanket_height = document.body.parentNode.clientHeight;
		} else {
			blanket_height = document.body.parentNode.scrollHeight;
		}
	}
	var blanket = document.getElementById('blanket');
	blanket.style.height = blanket_height + 'px';
	var popUpDiv = document.getElementById(popUpDivVar);
	popUpDiv_height=blanket_height/2-150;//150 is half popup's height
	popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
	if (typeof window.innerWidth != 'undefined') {
		viewportwidth = window.innerHeight;
	} else {
		viewportwidth = document.documentElement.clientHeight;
	}
	if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
		window_width = viewportwidth;
	} else {
		if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
			window_width = document.body.parentNode.clientWidth;
		} else {
			window_width = document.body.parentNode.scrollWidth;
		}
	}
	var popUpDiv = document.getElementById(popUpDivVar);
	window_width=window_width/2-150;//150 is half popup's width
	popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
	blanket_size(windowname);
	window_pos(windowname);
	toggle('blanket');
	toggle(windowname);		
}

the html code for the "customer login" link is
Code:

					<ul id="toplinkslilo">
							<li>
								<p><a class="custloginpu" href="#" onclick="popup('popUpDiv')">Customer Login</a></p>
							</li>
							<li>
								<p><a href="<%= url_prefix %>blog">Blog</a></p>
							</li>
							<li>
								<p><a href="<%= url_prefix %>forum">Forum</a></p>
							</li>
					</ul>

the form for whats inside the popup


Code:

			<div id="blanket" style="display:none;"></div>
			<div id="popUpDiv" style="display:none;">
				<div id="tbright">
					<a href="#" onclick="popup('popUpDiv')"><img src="<%= url_prefix %>./theme-images/xclose.png" alt="close" style="float: right; width: 30px; height:26px;" class="close"/></a>
					<h4>Customer Login</h4>
					<form method='post' action="http://www.nandahosting.co.uk/front-page">
						<div id="boxleft">
							<p><label for="username2">Username:</label><input name='username' type='text' value='' id='username2'/></p>
							<p><label for="password">Password:</label><input type='password' name='password' value='' id='password'/></p>
							<p><label for="permanent">Remember me?</label><input type='checkbox' name='permanent' style="margin: 0 0 20px 10px; width: 13px; float: right; height: 13px;" value='1' id='permanent'/></p>
						</div>
					
						<div id="boxright">
							<input name="" type="submit" class="btn" value="Login" style="position: relative;"/>
							<p class="link"><b>New Customer? - </b><a href="<%= url_prefix %>register">Create an account</a></p>
							<p class="link"><a href="<%= url_prefix %>password-reminder">Forgotten your Password?</a></p>
						</div>
					
					</form>
				</div>
			</div>

I have literally been searching on google for the past few days, trying new things and everything. i have honestly really tried my hardest but i can't get around it. would really appreciate if someone could help me. Also i will try and give something to the person who gets this to work for me as it will be worth it as i cannot do it myself.

thankyou so much

I have three buttons on my form. The user has to be logged in for the buttons to do anything. Is it possible to get an alert to popup on the form page without the form action occuring? If so, how do I go about it?

Hi there

i have a simple form in a popup window that was called like this:
Code:

document.onkeyup = KeyCheck;       
 
function KeyCheck(e)
{
 var KeyID = (window.event) ? event.keyCode : e.keyCode;
	switch(KeyID)
	{
		      case 40:
window.open("?page_id=9","MS_PopUp","width=800,left=100,top=100,height=630,toolbar=1,location=1,directories=1,status=1,menubar=1,scrollbars=1,resizable=0,copyhistory=1");
		      break;
        }
}

This works well enough. The form has a four fields:
Code:

<form name="contact_form" id="form1" method="post" action="?page_id=41">
 <fieldset>
  <label class="label" for="name">Your Name: </label>
  <input tabindex="1" type="text" id="name" name="name" class="input" onload="focus()" /><span id="error_name">&nbsp;</span><br />
  <label class="label" for="email">Your Email: </label>
  <input tabindex="2" type="text" id="email" name="email" class="input" /><span id="error_email">&nbsp;</span><br />
  <label class="label" for="website">Your Website: </label>
  <input tabindex="3" type="text" id="website" name="website" class="input" /><span id="error_website">&nbsp;</span><br />
  <label class="label" for="problem">Your Problem: </label>
 <textarea tabindex="4" class="textarea" name="problem" id="problem" rows="5" cols="10"></textarea><span id="error_problem">&nbsp;</span><br />
</fieldset>
<div class="buttons">
 <input tabindex="6" type="button" value="Reset" onclick="resetForm()" />
 <input tabindex="5" type="button" value="Send" onclick="popupmail()" />
</div>
</form>

and the function 'popupmail()' ends with
Code:

document.contact_form.submit() ;

which i used on numerous forms before.
after submit, the action URL (?page_id=41) is displayed in the popup window location bar but the page is not! 'page not found'. if i copy & paste the URL and refresh, the page is found.

this may not be a JS problem but maybe a popup window limitation. but what do i know? also, this is a wordpress site but i cant see how this is related to wordpress. any idea?

I am having trouble getting this code to work correctly. What I am trying to do is on my site i will have a button that will open this popup window with a login form and what i would like it to do is when the form is submitted i want the window to close and the main page to redirect to whatever page i would like it sent to. And if the login information is wrong i would like the popup window to stay open and say that it is wrong in red letters at the top.

Here is the code for the popup window:

PHP Code:
<?php
if($target == "LogIn") {

if($view == "Form") {
echo '
<script language="JavaScript" src="window.js">
</SCRIPT>
<style type="text/css">
<!--
body {
    background-color: #000000;
}
-->
</style>
<FORM action="index.php?act=Login&CODE=50" onSubmit="javascript:login();" method="post" name="mlogin">
  <p>
    <font face="verdana" color="#76a5d5" size="1"><B> Username: </b></font><INPUT class="textInput1" style="border: 1px solid #76A5D5; font-family: verdana, helvetica, sans-serif; font-size: 11px; padding: 2px; vertical-align: middle; margin: 0; width: 80px" type="username" size="25" name="username" value="Username"/>
    <br>    
    <FONT face="verdana" color="#76a5d5" size="1"><B> Password:&nbsp; </b></font><INPUT class="textInput1" style="border: 1px solid #76A5D5; font-family: verdana, helvetica, sans-serif; font-size: 11px; padding: 2px; vertical-align: middle; margin: 0; width: 80px" type="password" size="25" name="password" value="*******"/> <INPUT type="image" src="images/login.jpg" ALT="Click Here to Login!" BORDER="0" ALIGN="middle" value="submit" name="submit">
  </p>
</form>';
}
}
?>

Code for the javascript:

PHP Code:
//Open up a new window with specific dimensions
function info(URL) {
    day = new Date();
    id = day.getTime();
    eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=300,height=100,left = 300,top = 500');");
}

<!--
    function login() {
        setTimeout('window.close()',2000);
        opener.location.href='/main/index.php';
    }
//--> 


Any help would be greatly appreciated

I'm trying to create a popup sign up form that will only popup every week. I don't want it to popup every time someone visits the site.

I'm new to Javascript as a whole and can't seem to figure out how to set a cookie for a week and if there is no cookie (or the cookie has expired) it will popup automatically.

If anyone can point out what I'm doing wrong it would be greatly appreciated. I feel like I'm so close and that the solution is staring me in the face.

Here's the code that I have so far:

function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + 5);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

function checkCookie()
{
var username=getCookie(exdate);
if (exdate!=null && exdate!="")
{
//Do Nothing
}
else
{

$(document).ready(function() {

var id = '#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);

//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();

//Set the popup window to center
$(id).css('top', winH/100-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);

//transition effect
$(id).fadeIn(1000);
$(id).animate({top:"+=300px"},1000);

//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('.window').animate({right:"+=150px"}).animate({left:"1500px"}).fadeOut(50);
$('#mask').hide();
});

//if NO Thanks button is clicked
$('.window .noThanks').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('.window').animate({right:"+=150px"}).animate({left:"1500px"}).fadeOut(50);
$('#mask').hide();
});

//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});

function hideHolder() {
$('.place-holder').hide();
}
function showHolder() {
if($('.name-field').val() == '') {
$('.place-holder').show()
}
}
$('.name-field').focus(hideHolder);
$('.name-field').blur(showHolder);
$('.place-holder').click(function () {
$('.name-field').trigger('focus');
});
});
}
}

Thank you for your help. :-)

Hi,

I'm kinda hoping this is possible but haven't found any reference to it...

I have a parent page that opens a popup on click that launches a sidebar navigation on the right of the screen and resizes the parent page. What I am wanting to do is create a second popup (approx 250px high) that opens below the navigation (which is only around 600px high) but I have noticed that even when you have no status bar in the popup windows, they can still end up overlapping because of additional tools or plugins that the viewer has in their browser.

Is there any way to get the popups to butt up against each other instead of overlapping? More like a relative popup?

Any assistance would be appreciated. :-)

I found this popup window, and it works for my project, now i would like to include a close option to the popup window. Either "close", a button, or click aywhere. Here is the coding I am currently using:

<script type="text/javascript">
function openWin(image, w, h){
var wh='width='+w+',height='+h
var tmpPage=window.open('','',wh)
tmpPage.document.write('<body style="margin:0;padding:0;"><img src="'+image+'" width="'+w+'" height="'+h+'">')
tmpPage.document.close()
}
</script>

<a href="1379_files/image296.jpg" target="_blank" onclick="openWin(this.href, 1253, 940);return false;"><img src="1379_files/image296.jpg" width="348" height="261" border="0"></a>


<a href="1379_files/image298.jpg" target="_blank" onclick="openWin(this.href, 1253, 940);return false;"><img src="1379_files/image298.jpg" width="348" height="261" border="0"></a>

<p>



<a href="1379_files/image300.jpg" target="_blank" onclick="openWin(this.href, 1253, 940);return false;"><img src="1379_files/image300.jpg" width="348" height="261" border="0"></a>

This opens 3 pictures, that when clicked opens the popup of the same picture, only full screen.

hi currently i am using this to goto new page:

Code:

  <div    onClick="document.location='nextpage.html';"   class="active">sometext</div>

how can i make it a popup to that page if i click anywhere in the div, thanks for any help.

I am trying to have a photo gallery where you click on a thumbnail and it automatically changes the larger image in the cell next to it. That function is working. I am now trying to add a popup feature on the larger image that will pull an additional image and I cant seem to get it to work. In addition the text that appears under the large image is the same text no matter which image you click on. Please tell me what is wrong with my code...Thank you

this is in the header
function changeImage(filename,filename2,txt){
document.getElementById('mainimage').src=filename;
document.getElementById('image2').src=filename2;
document.getElementById('ImgTxt').innerHTML=txt;
}
function popUp(popupimage) {
newwindow=window.open(popupimage,"name","height=500,width=500");
if (window.focus) {newwindow.focus()}
return false;
}
This is in the body tag
<table width="750" border="0" align="center" cellpadding="2" cellspacing="0"><tr bgcolor="#000000"><td valign="top" align="left" width="200" style="padding-top:20px"><img src="images/mini/bobov_reb_shloime_mini.jpg" alt="" class="thumb" onclick="changeImage('images/bobov_reb_shloime.jpg','images/originals/bobov_reb_shloime.jpg','Bobover Rebbe')" /><img src="images/mini/reb_svei_mini.jpg" alt="" class="thumb" onclick="changeImage('images/reb_svei.jpg','images/originals/reb_svei_mini.jpg','Reb Svei with Talmidim')" /><img src="images/mini/rogotchover_mini.jpg" alt="" width="63" class="thumb" onclick="changeImage('images/rogotchover.jpg','images/originals/rogotchover.jpg','Rogotchover')" /></td>
<td align="center" valign="top" width="500" height="600" bgcolor="#000000" style="padding-top:20px;"><p><img src="images/bobov_reb_shloime.jpg" name="mainimage" width="424" border="0" id="mainimage" onClick="popUp(this.src)" /><br /><p>
<span id="ImgTxt" class="text">Bobov Rebbe</span>
</p></td></tr></table>

I am having a heck of a time closing this popup window when i logoff the site.

i open it by

Code:

shoutwindow = window.open("<?=$MY_LINK_ROOT?>/shoutbox/minichat.php", "shoutwindow", "location=0,status=0,scrollbars=0,menubar=0,resizable=0  width=300,height=310");

when i click logoff the site i want the popup to close also

here is the logoff php

Code:

session_start();

         //only for testing will remove this

    if(!shoutwindow.closed)  

      {  

         echo "window open";
               self.close(); 

           
           //shoutwindow.close ();  // also tried both these didnt work
           //  window.close();

      }  

      else  

      {  

         echo "Window already closed";           

      }  

 


mysql_close($link);
unset($_SESSION['Sess_UserId']);

// Unset all of the session variables.

session_unset();

// Finally, destroy the session.

session_destroy();

echo "<script> location.href='$MY_LINK_ROOT'</script>";

exit;

?>

what am i missing here lol ? thanks

UPDATE: i just had an idea, can i mix a href and an onClick together so that both are executed like this (i never tried it before)

Code:

the reason i use self.close is because i heard that it always closes the child not the parent.

<a href="logoff.php" onClick="self.close()" return:true;>Log Off</a>

the return true will make it execute the href as well right?

Hello everyone, I need help to show popup only once a day per user!
The Problem is that the users of my blog gets mad when the popup displays, so i only want to show it once a day. please add the codes to it fully and send it back over thanks!

[CODE]<link href='http://pwnagesource.netii.net/java/jquery.fancybox.css' media='screen' rel='stylesheet' type='text/css'/>
<!--[if lte IE 6]><link href="java/jquery.fancybox_ie.css" media="screen" rel="stylesheet" type="text/css" /><![endif]-->
<script src='http://pwnagesource.netii.net/java/jquery-1.4.3.min.js' type='text/javascript'/>
<script src='http://pwnagesource.netii.net/java/jquery.fancybox-1.3.4.js' type='text/javascript'/>
<script type="text/javascript">
$j = jQuery.noConflict();
$j.fn.countDown = function(settings,to) {
settings = jQuery.extend({
startFontSize: '14px',
endFontSize: '14px',
duration: 1000,
startNumber: 10,
endNumber: 0,
callBack: function() { }
}, settings);
return this.each(function() {
//where do we start?
if(!to && to != settings.endNumber) { to = settings.startNumber; }
//set the countdown to the starting number
$j(this).text(to).css('fontSize',settings.startFontSize);
//loopage
$j(this).animate({
'fontSize': settings.endFontSize
},settings.duration,'',function() {
if(to > settings.endNumber + 1) {
$j(this).css('fontSize',settings.startFontSize).text(to - 1).countDown(settings,to - 1);
}
else
{
settings.callBack(this);
}
});
});
};
</script>
<script type="text/javascript">
$j(function() {
$j.fancybox(
"<div style='margin-left: 20px;'></br><h3 style='background-color: #000; padding: 8px; color: white; text-shadow: white 1px 2px 2px;-moz-text-shadow: black 1px 2px 2px;-webkit-text-shadow: black 1px 2px 2px;font-weight: bold;font-family: \"Trebuchet MS\", Helvetica, Geneva, san-serif; font-size: 20px; '>TheEmoLab" | Subscribe To Our Newsletter!</h3><center></br><td align='left'> <p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Get Free Email Updates Daily!</p></td><form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=theemolab/feed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'><input name='uri' type='hidden' value='theemolab/feed'/><input name='loc' type='hidden' value='en_US'/><input class='mbttext' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/><input alt='' class='mbtbutton' title='' type='submit' value='Submit'/></form></tr></tbody></table></center></br><hr style='padding-bottom: 0; margin: 0 0 7px 0;' /><p style='padding-bottom:0;text-align: center; font-weight: bold;margin-top: 0; padding-top:0;'>This dialog box will close in <span id='dialog_close_countdown'>30</span> seconds.</p></div>",
{
'autoDimensions' : false,
'width' : 500,
'height' : 215,
'overlayOpacity' : '0.8',
'overlayColor' : '#000',
'onComplete' : function() {
$j('#dialog_close_countdown').countDown({
startNumber: 30,
callBack: function(me) { $j.fancybox.close(); }
});
}
});
});
</script>[ICODE]

Hi All

How popup windows are made using Javascript? I am not talking about the popups cretaed using window.open. I am talking about the window which appears to display some advertisements in most of the sites.

Charles

Hello all!
I wanted to say hey as this is my first post!
I will probably stick around for a little, but I need help first.

I'm trying to make a code for something on a forum. It will prompt the user for a yes or cancel, then save a cookie with their answer.
Then the next time the script is called, it will check for the cookie. If there is one saved, it won't prompt and use that value.
Here's my breakdown (hope this is right)

1. Have a popup box that prompt for a 'yes' or 'cancel'
Code:

if(window.confirm("Use WHATEVER theme?"))
{
* * location.href = "URL HERE";
}

Got that!

2. Save a cookie with the answer
Here is where I need the help.
I really don't have a clue other than the fact that you use setCookie(name, value, expire). I'm guessing that there will need to be something special in the value section.

3. When the script is loaded, it will check for the cookie saved and do whatever was saved
Again, I need help. I know I'll need the getCookie function, but I dont know what else.


As you can see, I'm rather hazy in the cookies department.
If you ha any trouble and now understand it, please direct me to where you learned it as I am willing and wanting to learn this inportant function of JavaScript!

I tried to provide as much detail as possible, but if you have questions ask!

Any help would be greatly appreciated, whether or not it's the code I need. Whether it is direction or step by step help, I will still value it!

Thanks!

Ok, I'm not a javascript expert, but I'm using a Drupal module called Calendar which uses some javascript to popup links in a DIV instead of going to a new page. This appears to work by adding class="popup" to links on the calendar.

I want to use the same functionality to link to calendar events from other areas on the site, not just on the calendar. It looks like the javascript file is loaded on every page of the site, but adding class="popup" only results in an empty DIV with a close button, without actually loading the content. Can anyone please help me solve this?


A link to what I'm working on is he http://67.220.206.170/~jazzbone/?q=home. The upcoming events section is a block from the Calendar view (created by the Calendar module), however it does not do popups by default like the calendar page, so I've tried adding class="popup" to these links to make it work. You can see in the main body of the page is a test link with class="popup" as a test as well. I want them to behave like the popups on the event calendar page.

I think this is the javascript file in question: http://67.220.206.170/~jazzbone/site...r/jcalendar.js

I know this is a lot, and I'm a newbie here, but I appreciate any help, thanks.

Hi,
Im new with java script.
I have a doubt.
Im building an html web site.
How to create a image pop up while opening a page, with a close button.
Pls anyone share the code.

thanks