Chris Barnhill
Reputation: 2017
Div with "display: none" style appears anyway
I have a div with the id "hubspot-contact-form". This div has a display style of none. But when the page loads, the div appears anyway. Can anyone help me figure out how to hide this form when the page loads? Here is the whole page. Thanks.
<?php
include ('includes/secure.php');
include ('includes/globals.php');
$thisPage = "contact";
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<?php include ('includes/pageTitle.php') ?>
<script type="text/javascript" src="js/browserDetect.js"></script>
<script type="text/javascript">
<!--
if (BrowserDetect.browser == "Explorer")
{
document.write("<link href='css/stylesIE.css' rel='stylesheet' type='text/css'>");
} else {
document.write("<link href='css/styles.css' rel='stylesheet' type='text/css'>");
}
// -->
</script>
<script type="text/JavaScript">
function show(id)
{
if (document.getElementById(id).style.display == 'none')
{
document.getElementById(id).style.display = '';
}
}
function hide(id)
{
document.getElementById(id).style.display = 'none';
}
</script>
<script language="JavaScript" type="text/JavaScript"><!--
function validateForm() {
with (document.contactForm) {
var alertMsg = "The following REQUIRED fields\nhave been left empty:\n";
if (name.value == "") alertMsg += "\nYour Name";
if (email.value == "") alertMsg += "\nEmail Address";
checkemail = email.value
AtPos = checkemail.indexOf("@")
StopPos = checkemail.lastIndexOf(".")
if (AtPos == -1 || StopPos == -1) {
alertMsg += "\nProvide a Valid Email Address";
}
if (subject.options[subject.selectedIndex].value == "") alertMsg += "\nSubject";
if (comments.value == "") alertMsg += "\nMessage/Comments";
if (alertMsg != "The following REQUIRED fields\nhave been left empty:\n") {
alert(alertMsg);
return false;
} else {
return true;
} } }
// --></script>
<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>
</head>
<body class="site">
<DIV ID="dek"></DIV>
<SCRIPT TYPE="text/javascript">
<!--
//Pop up information box II (Mike McGrath ([email protected], http://website.lineone.net/~mike_mcgrath))
//Permission granted to Dynamicdrive.com to include script in archive
//For this and 100's more DHTML scripts, visit http://dynamicdrive.com
Xoffset=-60; // modify these values to ...
Yoffset= 20; // change the popup position.
var old,skn,iex=(document.all),yyy=-1000;
var ns4=document.layers
var ns6=document.getElementById&&!document.all
var ie4=document.all
if (ns4)
skn=document.dek
else if (ns6)
skn=document.getElementById("dek").style
else if (ie4)
skn=document.all.dek.style
if(ns4)document.captureEvents(Event.MOUSEMOVE);
else{
skn.visibility="visible"
skn.display="none"
}
document.onmousemove=get_mouse;
function popup(msg,bak){
var content="<TABLE WIDTH=250 BORDER=0 class='infoBox'><TD ALIGN=left class='infoBoxText'>"+msg+"</TD></TABLE>";
yyy=Yoffset;
if(ns4){skn.document.write(content);skn.document.close();skn.visibility="visible"}
if(ns6){document.getElementById("dek").innerHTML=content;skn.display=''}
if(ie4){document.all("dek").innerHTML=content;skn.display=''}
}
function get_mouse(e){
var x=(ns4||ns6)?e.pageX:event.x+document.body.scrollLeft;
skn.left=x+Xoffset;
var y=(ns4||ns6)?e.pageY:event.y+document.body.scrollTop;
skn.top=y+yyy;
}
function kill(){
yyy=-1000;
if(ns4){skn.visibility="hidden";}
else if (ns6||ie4)
skn.display="none"
}
//-->
</SCRIPT>
<div id="container">
<div id="header">
<?php include ('includes/header.php') ?>
</div>
<table border="0" cellpadding="0" cellspacing="0" height="500" class="showborder">
<tr>
<td align="left" valign="top" width="619">
<img src="images/contactTITLE.gif" border="0" alt="Contact AOP"><br />
<div id="scrollBorder">
<div id="boxScroll">
<table border="0" cellpadding="0" cellspacing="0" width="598">
<tr>
<td align="left" valign="top" class="text">
<?php showStatus($_REQUEST['status']) ?>
<?php include ('includes/pageContent.php') ?>
<br><br>
<script type='text/javascript' language='javascript'>/* <![CDATA[ */
HubSpotFormSpamCheck_LeadGen_ContactForm_29555_m0 = function() {
var key = document.getElementById('LeadGen_ContactForm_29555_m0spam_check_key').value;
var sig = '';
for (var x = 0; x< key.length; x++ ) {
sig += key.charCodeAt(x)+13;
}
document.getElementById('LeadGen_ContactForm_29555_m0spam_check_sig').value = sig;
// Set the hidden field to contain the user token
var results = document.cookie.match ( '(^|;) ?hubspotutk=([^;]*)(;|$)' );
if (results && results[2]) {
document.getElementById('LeadGen_ContactForm_29555_m0submitter_user_token').value = results[2];
} else if (window['hsut']) {
document.getElementById('LeadGen_ContactForm_29555_m0submitter_user_token').value = window['hsut'];
}
return true;
};
showContactForm = function() {
//debugger;
var formDiv = document.getElementById('hubspot-contact-form');
var formType = document.getElementById('subject').value;
if(formType == 'General Feedback' || formType == 'General Patent Study' || formType == 'Specific Patent Study') {
formDiv.style.display = 'block';
} else {
//formDiv.innerHTML = '';
}
}
/*]]>*/</script>
<tr>
<td align="left">
* Subject:<br><br>
</td>
<td width="10"></td>
<td align="left">
<select name="subject" id="subject" class="field">
<?php if ($_REQUEST['subject'] != "") { ?>
<?=$_REQUEST['subject']?>
<?php } ?>
<option value="">--SELECT--</option>
<option value="General Feedback" onclick="showContactForm()">General Feedback</option>
<option value="Website/Technical" onclick="showContactForm()">Website/Technical</option>
<option value="General Patent Study" onclick="showContactForm()">General Patent Study</option>
<option value="Specific Patent Study" onclick="showContactForm()">Specific Patent Study</option>
<option value="Profit Sharing" onclick="showContactForm()">Profit Sharing</option>
</select><br><br>
</td>
</tr>
<div id="hubspot-contact-form" style="display: none;">
<form action="http://info.articleonepartners.com/Default.aspx?app=iframeform&hidemenu=true&ContactFormID=29555" method="post">
<input type="hidden" name="FormSubmitRedirectURL" id="FormSubmitRedirectURL" value="http://www.articleonepartners.com/contact.php?status=contact_request_has_been_sent" >
<input type="hidden" name="Lead_Src" id="LeadSrc" value="Contact Us" />
<input type="hidden" id="LeadGen_ContactForm_29555_m0submitter_user_token" name="LeadGen_ContactForm_29555_m0submitter_user_token" value="" />
<input type="hidden" name="ContactFormId" value="" />
<input type="hidden" id="LeadGen_ContactForm_29555_m0spam_check_key" name="LeadGen_ContactForm_29555_m0spam_check_key" value="hjdrmdpfjkflkpjigdjonkqqpjinqssqr" />
<input type="hidden" id="LeadGen_ContactForm_29555_m0spam_check_sig" name="LeadGen_ContactForm_29555_m0spam_check_sig" value="" />
<div class='ContactFormItems FormClassID_29555'>
<table border="3" cellspacing="0" cellpadding="2" class="showborder">
<tr>
<td align="right">First Name <span style="color: red"> *</span><br /><br /></td>
<td width="40"></td>
<td align="left"><input type="Text" name="LeadGen_ContactForm_29555_m0:FirstName" class="field StandardI AutoFormInput LeadGen_ContactForm_29555_m0_AutoForm" id="LeadGen_ContactForm_29555_m0_FirstName" value="" /><br /><br /></td>
</tr>
<tr>
<td align="right">Last Name <span style="color: red"> *</span><br /><br /></td>
<td width="40"></td>
<td align="left"><input type="Text" name="LeadGen_ContactForm_29555_m0:LastName" class="field StandardI AutoFormInput LeadGen_ContactForm_29555_m0_AutoForm" id="LeadGen_ContactForm_29555_m0_LastName" value="" /><br /><br /></td>
</tr>
<tr>
<td align="right">Email (we will keep your email completely private) <span style="color: red"> *</span></td>
<td width="40"></td>
<td align="left"><input type="Text" name="LeadGen_ContactForm_29555_m0:Email" class="field StandardI AutoFormInput LeadGen_ContactForm_29555_m0_AutoForm" id="LeadGen_ContactForm_29555_m0_Email" value="" /><br /><br /></td>
</tr>
<tr>
<td align="right">Phone (optional)<br /><br /></td>
<td width="40"></td>
<td align="left"><input type="Text" name="LeadGen_ContactForm_29555_m0:Phone" class="field StandardI AutoFormInput LeadGen_ContactForm_29555_m0_AutoForm" id="LeadGen_ContactForm_29555_m0_Phone" value="" /><br /><br /></td>
</tr>
<tr>
<td align="right" valign="top">Please Enter Your Message: <span style="color: red"> *</span><br /><br /></td>
<td width="40"></td>
<td align="left"><textarea type="Text" cols="40" rows="6" name="LeadGen_ContactForm_29555_m0:Message" class="StandardI AutoFormInput LeadGen_ContactForm_29555_m0_AutoForm" id="LeadGen_ContactForm_29555_m0_Message" ></textarea><br /><br /></td>
</tr>
<tr><td></td><td width="40"></td><td><input onclick="return HubSpotFormSpamCheck_LeadGen_ContactForm_29555_m0();" class="FormSubmitButton" type="submit" name="LeadGen_ContactForm_Submit_LeadGen_ContactForm_29555_m0" value="Submit"></td></tr>
</table>
</div>
</form>
</div>
</td>
</tr>
</table>
</div>
<img src="images/patentCatButtons.gif" width="617" height="32" border="0" alt="" usemap="#patentCatButtons_Map"><br />
<map name="patentCatButtons_Map">
<area shape="rect" alt="Full List" coords="496,0,617,32" href="list.php">
<area shape="rect" alt="Patent Study Results" coords="295,0,496,32" href="patent_study_results.php">
<area shape="rect" alt="Technology" coords="147,0,295,31" href="list.php?category=Technology">
<area shape="rect" alt="Healthcare" coords="0,0,147,32" href="list.php?category=Healthcare">
</map>
</div>
</td>
<td width="15"></td>
<td align="left" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top">
<?php include ('includes/mainNav.php') ?>
<div id="homeText">
<img src="images/homeText.png" border="0"><br />
</div>
<?php include ('includes/searchBox.php') ?>
</td>
</tr>
<tr>
<td align="left" valign="top">
<?php include ('includes/news2.php') ?>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div id="footerLong">
<div id="footerTextLeft">
<span onmouseover="show('copyright');return true;" onmouseout="hide('copyright');return true;">© <?=date("Y")?> ARTICLE ONE PARTNERS, ALL RIGHTS RESERVED</span><br />
<div id="copyright" style="DISPLAY: none">
The content contained on this site is provided to users "AS IS" without any express or implied warranty.<br />
</div>
</div>
<?php include ('includes/footer.php') ?>
</div>
</div>
</body>
</html>
Upvotes: 1
Views: 17947
Answers (2)
Pekka
Reputation: 449395
Your div starts inside a table structure. This is not valid and guaranteed to mess up the rendering result:
</td>
</tr>
<!-- No-no! Either end the table or start a new table row. -->
<div id="hubspot-contact-form" style="display: none;">
It is likely that the div gets ignored, and the following trs get merrily rendered, even if they are supposed to be hidden. You need to fix the HTML first.
You need to integrate the DIV into the table somehow, either by introducing another table, or using tbody elements.
Always be sure to run your HTML through the validator when hunting for display bugs.
Upvotes: 12
Anne Porosoff
Reputation: 1941
I noticed you're missing opening tr and td tags just prior to the div. Try adding those in and see if that fixes the problem.
Upvotes: 1
Related Questions
- DIVs with style.display none still showing up
- HTML element displays when set to display: none in CSS
- Why "Display:none" is property not working properly
- CSS trouble with display:none not being recognized
- Trying to hide Div element with css display:none; doesn't hide it
- div tag with style='display: none;' not working
- div display none breaks style
- div content shows when display:none
- Showing the div when display is set to none
- Display:none; not working in css