Jump to content

** Pop Out box has a strange block of nothing at the top **


brysonprice

Recommended Posts

On the CONTACT page, there is a GMAIL logo. When this logo is clicked, a box pops out and the background becomes greyed-out. I like the box, but there is a block of nothing at the top of the box! Where is this coming from?

 

******* I have 2 GMAIL logos, CLICK THE ONE ON THE RIGHT FOR THE CONTACT FORM POP OUT BOX TO APPEAR ********

 

here is a pic of the problem:

 

problem4a-contactbox.jpg

 

 

here is the code:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Bryson Price Music</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
   <title>bryson price contact</title>
       <script type="text/javascript">
var GB_ROOT_DIR = "./greybox/";
function MM_swapImgRestore() { //v3.0
 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
   var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
   if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
 var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
   d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
 if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
       </script>

   <script type="text/javascript" src="greybox/AJS.js"></script>
   <script type="text/javascript" src="greybox/AJS_fx.js"></script>
   <script type="text/javascript" src="greybox/gb_scripts.js"></script>
   <link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />

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

</head>
<body onload="MM_preloadImages('img/rollyoutube.png','img/rolltwitter.png','img/rollfacebook.png','img/rollgmail.png')">
<div class="header"><span class="Biography"><img src="img/contact.png" alt="biography" width="435" height="107" vspace="50" /></span>
</div>
<div id="wrapper">
 <div class="Biography" id="biography">
 </div>    
 <div class="belowheader" id="belowheader"><img src="img/newbelowheadcontact.png" width="390" height="123" alt="belowheader" />
 </div>
<div class="biobody" id="biobody">
 <div class="youtubetwitter"><a href="www.youtube.com/brysonprice" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('youtube','','img/rollyoutube.png',1)"><img src="img/youtube.png" name="youtube" width="213" height="87" border="0" id="youtube" /></a><a href="www.twitter/brysonprice" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('twitter','','img/rolltwitter.png',1)"><img src="img/twitter.png" name="twitter" width="213" height="87" border="0" id="twitter" /></a></div>
 <div class="facebook"><a href="www.facebook.com/brysonprice" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('facebook','','img/rollfacebook.png',1)"><img src="img/facebook.png" name="facebook" width="217" height="91" border="0" id="facebook" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('gmailroll','','img/rollgmail.png',1)"><img src="img/gmail.png" name="gmailroll" width="213" height="87" border="0" id="gmailroll" /></a><a href="form.html" title="Google" rel="gb_page_center[640, 480]"><img src="img/gmail.png" width="213" height="87" alt="gmail" /></a><script type="text/javascript">
GB_myShow = function(caption, url, /* optional */ height, width, callback_fn) {
   var options = {
       caption: caption,
       height: height || 500,
       width: width || 700,
       fullscreen: false,
       show_loading: false,
       callback_fn: callback_fn
   }
   var win = new GB_Window(options);
   return win.show(url);
}
   </script></div>
 </div>
</div>



</body>
</html>

Edited by brysonpice
Link to comment
Share on other sites

I took a look at the .zip which you linked to. It looks like the popup box's caption/close button table has a class of .header, which is conflicting with your header area which also uses a class of .header. In this case, you have specified that the .header class have a height of 170px, so that applies to wherever the header class is used.

 

You have a couple options...

-- Use a different class name for your header area (probably easiest)

-- Modify the popup script (if you know how) to use a different class name for the .header area

-- override the popup box's height by adding this to your stylesheet:

 

#GB_Window .header { height:24px; /* change height as necessary */ }

Link to comment
Share on other sites

-- Use a different class name for your header area (probably easiest)

 

 

I tried doing the first suggestion, but when I changed my header to a different name in the .css style sheet, the header went missing from my pages. Do I have to go in and manually change the name somewhere else after I change the name on my style sheet?

 

thanks for figuring this problem out for me ^_^ . You have been a GREAT HELP!

Link to comment
Share on other sites

You would need to change the class name both within your CSS file, and any instances within your pages. For example:

 

<div class="header"><span class="Biography"><img src="img/contact.png" alt="biography" width="435" height="107" vspace="50" /></span>
</div>

 

Do you what part of the code would change the box size?

 

You don't know how much I appreciate your help! I've been trying to figure this out for a while :D

Link to comment
Share on other sites

You set the size when you initialize the Graybox:

 

GB_myShow = function(caption, url, /* optional */ height, width, callback_fn) {
   var options = {
       caption: caption,
       height: height || 500,
       width: width || 700,
       fullscreen: false,
       show_loading: false,
       callback_fn: callback_fn
   }
   var win = new GB_Window(options);
   return win.show(url);
}
   </script>

 

You should be able to change the "500"/"700" to whatever height/width you need.

Link to comment
Share on other sites

You set the size when you initialize the Graybox:

 

GB_myShow = function(caption, url, /* optional */ height, width, callback_fn) {
   var options = {
       caption: caption,
       height: height || 500,
       width: width || 700,
       fullscreen: false,
       show_loading: false,
       callback_fn: callback_fn
   }
   var win = new GB_Window(options);
   return win.show(url);
}
   </script>

 

You should be able to change the "500"/"700" to whatever height/width you need.

 

that's exactly what I thought, but when I change it, even setting the height and width to 0, it doesn't do anything

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  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.

Loading...
×
×
  • Create New...