[SOLVED] Popup Box not working as it should

herghost · September 7, 2009

Hi all, I am using a simple js script to load a privacy page, however instead of opening in a box, the link works as a normal link and just opens a new tab.

This is the page where the link resides:

<?
session_start();
if(!session_is_registered(myusername)){
header("location:index.php");
}
?>

<html>
<head>
<title>Blue-print Financial Soloutions - Contact Us</title>
<script type="text/javascript" src="js/functionAddEvent.js"></script>
<script type="text/javascript" src="js/contact.js"></script>
<script type="text/javascript" src="js/xmlHttp.js"></script>
<script type="text/javascript" src="js/jump.js"></script>
   


<style type='text/css' media='screen,projection'>

fieldset { border:0;margin:0;padding:0; }
label { display:block; }
input.text,textarea { width:300px;font:12px/12px 'courier new',courier,monospace;color:#333;padding:3px;margin:1px 0;border:1px solid #ccc; }
input.submit { padding:2px 5px;font:bold 12px/12px verdana,arial,sans-serif; }

-->
</style>
    </head>
<?php include("nav.php"); ?>

<table width="700" height="40" border="0" align="center" cellpadding="10" cellspacing="0" bordercolor="4a0073" bgcolor="4a0073">
  <tr> 
    <td><h3>Contact us</h3></td>
  </tr>
</table>
<table width="700" border="1" align="center" cellpadding="10" cellspacing="0" bordercolor="4a0073" bgcolor="#FFFFFF">
  <tr> 
    <td width="675" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="15">
        <tr> 
          <td align="left" valign="top">
<h1 align="left"> </h1>
<h1 align="center">Contact our head office...</h1><br>
		<h2 align="center">Call : 01362 853477</h2>
            
</p>
		<div align="center"><span class="text"><font class="text">or email: 
              <a href="mailto:enquiry@blueprintmoney.com">enquiry@blueprintmoney.co.uk</a></font></span></div>
            <p align="center">Our head office staff will be happy to answer your 
              queries by telephone; <br>
              <strong>Monday to Saturday 9am - 5pm. </strong></p>
            <table width="425" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#4A0073">
		  <div id="contactFormArea">
	<form action="scripts/contact.php" method="post" id="cForm">
		<fieldset>
		  <tr>
				<td width="100%" height="20">
					<table width="100%" border="0" cellpadding="0" cellspacing="0" bordercolor="#4a0073">
						<td width="20" height="20"><img src="images/form_top_left.gif"></td>
						<td height="20" width="100%"></td>
						<td width="20" height="20"><img src="images/form_top_right.gif"></td>
					</table>
				</td>
			</tr>
			<tr>
				<td>
					<table width="425" border="0" align="center" cellpadding="5" cellspacing="5" bgcolor="#4A0073">
					  <tr class="white"> 
						  <td colspan="2"> <div align="center">Alternatively, complete the 
							  form below and we will get back to you at the earliest opportunity:</div></td>
					  </tr>
					  <tr class="whitebold"> 
						<td align="right"><label for="posName">Name:</label></td>
						<td><input class="text" type="text" size="25" name="posName" id="posName" /></td>
					  </tr>
                           <tr class="whitebold"> 
						<td align="right"><label for="posPhone">Phone:</label></td>
						<td><input class="text" type="text" size="25" name="posPhone" id="posPhone" /></td>
					  </tr>
					   <tr class="whitebold"> 
						<td align="right"><label for="posEmail">Email:</label></td>
						<td><input class="text" type="text" size="25" name="posEmail" id="posEmail" /></td>
					  </tr>
					  <tr class="whitebold"> 
						<td align="right"> <label for="posRegard">Postcode:</label></td>
						<td><input class="text" type="text" size="25" name="posRegard" id="posRegard" /></td>
					  </tr>
					  <tr class="whitebold"> 
						<td align="right"> <label for="posText">Nature of Enquiry:</label></td>
						<td><textarea cols="50" rows="5" name="posText" id="posText"></textarea></td>
					  </tr>
                          <tr class="whitebold">
                          <td><label for="selfCC">
				<input type="hidden" name="selfCC" id="selfCC" value="send" /> 
			</label></td>
                </tr>
                         
					  <tr class="white"> 
						<td valign="top" colspan="2" align="center">I am happy for blueprint financial solutions to contact me to discuss my requirements</td>
					  </tr>
					  <tr> 
						<td colspan="2" align="center"><label>
				<input class="submit" type="submit" name="sendContactEmail" id="sendContactEmail" value=" Send Email " />
			</label>

</td>
					  </tr>
				 </table>
			</td>
		  </tr>
		  <tr>
				<td>
					<table width="100%" border="0" cellpadding="0" cellspacing="0" bordercolor="#4a0073">
					<td width="20" height="20"><img src="images/form_bottom_left.gif"></td>
					<td height="20" width="100%"></td>
					<td width="20" height="20"><img src="images/form_bottom_right.gif"></td>
					</table>
				</td>
			</tr>
		  </fieldset>
	</form>
            </table>
            
            </p>
            
          <br>
         By submitting this form I agree to this<a href="privacy.html"
   onclick="return show_hide_box(this, 500, 500, '2px solid')">
Privacy Statement
</a><br></p>

          <p id="loadBar" style="display:none;">
	<strong>Please Wait - Sending contact form;</strong>
	<img src="img/loading.gif" alt="Loading..." title="Sending Email" />
</p>
<p id="emailSuccess" style="display:none;">
	<strong style="color:green;">Success! Your Email has been sent
	</strong><br></td>
        </tr>
      </table> 
     </td>
  </tr>
</table>
<?php include("bottom.php"); ?>

script is called on line 14 and box is meant to appear on the link code on line 126

and the jump.js script

<script type="text/javascript"><!--
/* Script by: www.jtricks.com
* Version: 20070301
* Latest version:
* www.jtricks.com/javascript/window/box.html
*/
// Moves the box object to be directly beneath an object.

function move_box(an, box)
{
    var cleft = 0;
    var ctop = 0;
    var obj = an;

    while (obj.offsetParent)
    {
        cleft += obj.offsetLeft;
        ctop += obj.offsetTop;
        obj = obj.offsetParent;
    }

    box.style.left = cleft + 'px';

    ctop += an.offsetHeight + 8;

    // Handle Internet Explorer body margins,
    // which affect normal document, but not
    // absolute-positioned stuff.
    if (document.body.currentStyle &&
        document.body.currentStyle['marginTop'])
    {
        ctop += parseInt(
            document.body.currentStyle['marginTop']);
    }

    box.style.top = ctop + 'px';
}

// Shows a box if it wasn't shown yet or is hidden
// or hides it if it is currently shown
function show_hide_box(an, width, height, borderStyle)
{
    var href = an.href;
    var boxdiv = document.getElementById(href);

    if (boxdiv != null)
    {
        if (boxdiv.style.display=='none')
        {
            // Show existing box, move it
            // if document changed layout
            move_box(an, boxdiv);
            boxdiv.style.display='block';

            bringToFront(boxdiv);

            // Workaround for Konqueror/Safari
            if (!boxdiv.contents.contentWindow)
                boxdiv.contents.src = href;
        }
        else
            // Hide currently shown box.
            boxdiv.style.display='none';
        return false;
    }

    // Create box object through DOM
    boxdiv = document.createElement('div');

    // Assign id equalling to the document it will show
    boxdiv.setAttribute('id', href);

    boxdiv.style.display = 'block';
    boxdiv.style.position = 'absolute';
    boxdiv.style.width = width + 'px';
    boxdiv.style.height = height + 'px';
    boxdiv.style.border = borderStyle;
    boxdiv.style.textAlign = 'right';
    boxdiv.style.padding = '4px';
    boxdiv.style.background = '#FFFFFF';
    document.body.appendChild(boxdiv);

    var offset = 0;

    // Remove the following code if 'Close' hyperlink
    // is not needed.
    var close_href = document.createElement('a');
    close_href.href = 'javascript:void(0);';
    close_href.onclick = function()
        { show_hide_box(an, width, height, borderStyle); }
    close_href.appendChild(document.createTextNode('Close'));
    boxdiv.appendChild(close_href);
    offset = close_href.offsetHeight;
    // End of 'Close' hyperlink code.

    var contents = document.createElement('iframe');
    //contents.scrolling = 'no';
    contents.overflowX = 'hidden';
    contents.overflowY = 'scroll';
    contents.frameBorder = '0';
    contents.style.width = width + 'px';
    contents.style.height = (height - offset) + 'px';

    boxdiv.contents = contents;
    boxdiv.appendChild(contents);

    move_box(an, boxdiv);

    if (contents.contentWindow)
        contents.contentWindow.document.location.replace(
            href);
    else
        contents.src = href;

    // The script has successfully shown the box,
    // prevent hyperlink navigation.
    return false;
}

function getAbsoluteDivs()
{
    var arr = new Array();
    var all_divs = document.body.getElementsByTagName("DIV");
    var j = 0;

    for (i = 0; i < all_divs.length; i++)
        if (all_divs.item(i).style.position=='absolute')
        {
            arr[j] = all_divs.item(i);
            j++;
        }

    return arr;
}

function bringToFront(obj)
{
    if (!document.getElementsByTagName)
        return;

    var divs = getAbsoluteDivs();
    var max_index = 0;
    var cur_index;

    // Compute the maximal z-index of
    // other absolute-positioned divs
    for (i = 0; i < divs.length; i++)
    {
        var item = divs[i];
        if (item == obj ||
            item.style.zIndex == '')
            continue;

        cur_index = parseInt(item.style.zIndex);
        if (max_index < cur_index)
        {
            max_index = cur_index;
        }
    }

    obj.style.zIndex = max_index + 1;
}

//--></script>

Whats the problem? Driving me nuts!

Cheers

Adam · September 8, 2009

         By submitting this form I agree to this<a href="privacy.html"
   onclick="return show_hide_box(this, 500, 500, '2px solid')">

The show_hide_box() function isn't returning false, and so the link is being followed. Can't see the function though it's stored in an external file; "jump.js"...

<script type="text/javascript" src="js/jump.js"></script>

herghost · September 8, 2009

Hi,

Thanks for the reply, the file jump.js is posted above, the last bit in my 1st post, or do you mean the function is not in the file?? Im confused!

cbolson · September 8, 2009

Hi,

The problem is not in the jump.js file, rather it is with one of the others.

Copying your code and removing the other js scripts the pop-up window opens correctly.

Chris

herghost · September 8, 2009

Thanks,

I know next to nothing in js, is there anything I should be looking for in the others that may cause this?

cbolson · September 8, 2009

Do you have an url available where we can see this error?

Do be able to identify the problem we would need to see *all* the files.

Chris

herghost · September 8, 2009

Currently no link as using a standard <a href> at the moment. I have attached the js files as a rar file if you have the time and patience to have a look for me!

[attachment deleted by admin]

cbolson · September 8, 2009

Sorry,

The problem was with thejum.js file.

You have opening and closeing javascript tags within the actual javascript file which is preventing it from working (I mistakeleny assumed that you had added them manually to the snippet that you posted earlier)

Remove the very first line:

<script type="text/javascript"><!--

And last line:

//--></script>

from jump.js and see of it works now

Chris

herghost · September 8, 2009

That did it! Many many thanks

Sign In

[SOLVED] Popup Box not working as it should

Recommended Posts

herghost

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

herghost

Link to comment

Share on other sites

cbolson

Link to comment

Share on other sites

herghost

Link to comment

Share on other sites

cbolson

Link to comment

Share on other sites

herghost

Link to comment

Share on other sites

cbolson

Link to comment

Share on other sites

herghost

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information