Jump to content

[SOLVED] Popup Box not working as it should

herghost

By herghost
in Javascript Help

 Share

Recommended Posts

herghost Advanced Member

herghost

Posted
Posted

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

Link to comment
Share on other sites
Adam Advanced Member

Adam

Posted
Posted 

         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>

Link to comment
Share on other sites
cbolson Newbie

cbolson

Posted
Posted

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

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.