Buttons won't work inside certain divs

Page 1 of 1

6 Replies - 1978 Views - Last Post: 30 November 2009 - 09:26 PM

#1 ccubed  Icon User is offline

  • It's That Guy
  • member icon

Reputation: 129
  • View blog
  • Posts: 1,297
  • Joined: 13-June 08

Buttons won't work inside certain divs

Posted 28 November 2009 - 05:39 PM

So, I have this page that I'm trying to position buttons on. The problem is that they only work in certain divs.

first off, here's the HTML.

<!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" xml:lang="en" lang="en">

<head>
  <title>Morgan County, Tennessee, USA</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="description" content="Morgan County East Tennessee, official website of Morgan County, USA" />
  <meta name="keywords" content="Morgan County, East Tennessee, USA" />
  <link rel="stylesheet" href="images/nav2.css" type="text/css" />
  <script type="text/javascript" src="picmove.js"></script>
  <script type="text/javascript" src="BDControl.js"></script>
  <script type="text/javascript" src="FancyBox/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="FancyBox/fancybox/jquery.fancybox-1.2.6.js"></script>
  <link rel="stylesheet" href="FancyBox/fancybox/jquery.fancybox-1.2.6.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="main.css" type="text/css" />
</head>

<body>

<div id="wrapper">

  <div id="headerwrapper">
	<div id="topheader">
	<p class="subhead"><em>Business Directory</em></p>

  <div id="logo">
	<a href="index.htm" target="_parent"><img src="logo.png" width="228" height="88" alt="" /></a>
	</div>
 </div>

 <div id="mainheader">
 <div id="pics"><img src="bus.jpg" width="1000" height="251" alt="" /></div>

 </div>
<div id="curve">
<img src="curve2.png" width="1000" height="153" alt="" />

  <div id="nav">
  <!-- nav here -->
 <ul id="cbinsmenuebul_table" class="cbinsmenuebul_menulist" style="width: 1000px; height: 39px;">
  <li class="spaced_li"><a href="index.htm" target="_parent"><img id="cbi_cbinsmenu_1" src="images/ebbtcbinsmenu1_0.gif" name="ebbcbinsmenu_1" width="111" height="39" style="vertical-align: bottom;" border="0" alt="Home" title="" /></a></li>
  <li class="spaced_li"><a href="service.htm" target="_parent"><img id="cbi_cbinsmenu_2" src="images/ebbtcbinsmenu2_0.gif" name="ebbcbinsmenu_2" width="111" height="39" style="vertical-align: bottom;" border="0" alt="Public Service
Directory" title="" /></a></li>
  <li class="spaced_li"><a href="business.htm" target="_parent"><img id="cbi_cbinsmenu_3" src="images/ebbtcbinsmenu3_0.gif" name="ebbcbinsmenu_3" width="111" height="39" style="vertical-align: bottom;" border="0" alt="Business
Directory" title="" /></a></li>
  <li class="spaced_li"><a href="tourism.htm" target="_parent"><img id="cbi_cbinsmenu_4" src="images/ebbtcbinsmenu4_0.gif" name="ebbcbinsmenu_4" width="109" height="39" style="vertical-align: bottom;" border="0" alt="Tourism" title="" /></a></li>
  <li class="spaced_li"><a href="economic.htm" target="_parent"><img id="cbi_cbinsmenu_5" src="images/ebbtcbinsmenu5_0.gif" name="ebbcbinsmenu_5" width="116" height="39" style="vertical-align: bottom;" border="0" alt="Economic
Development" title="" /></a></li>
  <li class="spaced_li"><a href="infrastructure.htm" target="_parent"><img id="cbi_cbinsmenu_6" src="images/ebbtcbinsmenu6_0.gif" name="ebbcbinsmenu_6" width="110" height="39" style="vertical-align: bottom;" border="0" alt="Infrastructure" title="" /></a></li>
  <li class="spaced_li"><a href="education.htm" target="_parent"><img id="cbi_cbinsmenu_7" src="images/ebbtcbinsmenu7_0.gif" name="ebbcbinsmenu_7" width="110" height="39" style="vertical-align: bottom;" border="0" alt="Education" title="" /></a></li>
  <li class="spaced_li"><a href="demographics.htm" target="_parent"><img id="cbi_cbinsmenu_8" src="images/ebbtcbinsmenu8_0.gif" name="ebbcbinsmenu_8" width="111" height="39" style="vertical-align: bottom;" border="0" alt="Demographics" title="" /></a></li>
  <li><a href="community.htm" target="_parent"><img id="cbi_cbinsmenu_9" src="images/ebbtcbinsmenu9_0.gif" name="ebbcbinsmenu_9" width="111" height="39" style="vertical-align: bottom;" border="0" alt="Community
Calender" title="" /></a></li>
</ul>
<script type="text/javascript" src="images/cbjscbinsmenu.js"></script>



 <!-- end nav -->
  </div>
  
<div id="search"><img src="search2.png" width="144" height="25" alt="" /> </div>  </div>

  </div>


<div id="maincontent">

<div id="thankyou">
<button>test2</button>
</div>

<span id="break">
<button>Spanner</button>
</span> 

<div id="right">
<button>Test</button>
</div>

</div>
<div id="footer"><img src="line.png" width="1000" height="6" alt="" /><br /><br />Disclaimer Statement | Partnering Agencies | Contact Morgan County</div>
</div>
</body>

</html>



Now, the Test button is the only one that works. You cannot click spanner or testy. They just don't even function like buttons. Even adding an onclick thinking that perhaps it would still work doesn't work. They're completely unclickable.

This is probably the weirdest problem i've ever come across. I've never seen buttons that don't work in certain DIVs. Anyone got any idea?

I can post the CSS if you like.

Edit: It might help if I mention that firefox is the only browser having this issue.

This post has been edited by ccubed: 28 November 2009 - 06:29 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Buttons won't work inside certain divs

#2 ahmad_511  Icon User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 717
  • Joined: 28-April 07

Re: Buttons won't work inside certain divs

Posted 29 November 2009 - 05:55 AM

Hi,
the button element is treated as a submit button if you omit its type.
and i think the problem is that you don't have a form element (which specify the onsubmit() event).
so, you have two choices:
1- add a form element and and specify what do you want to do on the submit event, so all buttons elements will call that function and then the form will do the submit

2- add the type attribute to the buttons elements and sepecify what to do on click, so you can define different function for each button, and the form will submit nothing in this case.

hope it helps
Was This Post Helpful? 0
  • +
  • -

#3 ccubed  Icon User is offline

  • It's That Guy
  • member icon

Reputation: 129
  • View blog
  • Posts: 1,297
  • Joined: 13-June 08

Re: Buttons won't work inside certain divs

Posted 29 November 2009 - 11:11 AM

I tried changing the code in this way but it still doesn't work.

<div id="thankyou">
<input type="text" id="search_term" />
<button type="button" onclick="CompleteSearch()">Test</button>
</div>


I also tried a form element like so to no avail.

<FORM NAME="myform" ACTION="" METHOD="GET">
<INPUT TYPE="text" id="search_term" VALUE=""><P>
<INPUT TYPE="button" NAME="button" Value="Search" onclick="CompleteSearch()">
</FORM>


In this case, neither the text input NOR the button work.

Also, I should note that the firefox error console says that it can't convert something to a string, but i've commented out all scripts and I still get that so it's not one of my scripts causing it. However, even if it was, I find it odd that it would only stop buttons in those two divs and not others.

Still, in case it matters, here's the javascript. Note that updateFBox is for fancybox and uses jquery.

<script type="text/javascript">
<!--
Entry();

function CompleteSearch()
{

	Search(document.getElementById("search_term").value,'Any');
	UpdateFBox();
	
}

function UpdateFBox()
{

	var myWidth = 0, myHeight = 0;
	if( typeof( window.innerWidth ) == 'number' ) {
		//Non-IE
		myWidth = window.innerWidth;
		myHeight = window.innerHeight;
	} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
		//IE 6+ in 'standards compliant mode'
		myWidth = document.documentElement.clientWidth;
		myHeight = document.documentElement.clientHeight;
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
		//IE 4 compatible
		myWidth = document.body.clientWidth;
		myHeight = document.body.clientHeight;
	}
	
	myWidth -= 100;
	myHeight -= 100;

	if( navigator.appName == "Microsoft Internet Explorer" )
	{
	
		$(".FBLink").fancybox({
			'frameWidth': myWidth,
			'frameHeight': myHeight
			
		});
		
		$(".iframe").fancybox({
			'frameWidth': myWidth,
			'frameHeight': myHeight
			
		});
	
	}
	else
	{
	
		$(".FBLink").fancybox({
				'frameWidth': myWidth,
				'frameHeight': myHeight
		}); 
		
		$(".iframe").fancybox({
			'frameWidth': myWidth,
			'frameHeight': myHeight
			
		});
	
	}
	
}
-->
</script>

This post has been edited by ccubed: 29 November 2009 - 11:11 AM

Was This Post Helpful? 0
  • +
  • -

#4 ahmad_511  Icon User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 717
  • Joined: 28-April 07

Re: Buttons won't work inside certain divs

Posted 29 November 2009 - 03:46 PM

Hi,
the function UpdateFBox() looks OK (according to the way you calculate myWidth and myHeight)

but i don't know about the function Search(), are you sure the process is passing this function without any error?
you can do an alert message right after calling Search(), so if the message pops that means the function is passed, otherwise you have to check this function

note: in the first html code you posted there was no value for the "search_term" text box
also in the second html code the value was "", so maybe there is some sort of conversion that doesn't allow an empty string

if this is not helping, please add more details about the error you receive and the related function/code
Was This Post Helpful? 0
  • +
  • -

#5 ccubed  Icon User is offline

  • It's That Guy
  • member icon

Reputation: 129
  • View blog
  • Posts: 1,297
  • Joined: 13-June 08

Re: Buttons won't work inside certain divs

Posted 29 November 2009 - 04:06 PM

View Postahmad_511, on 29 Nov, 2009 - 02:46 PM, said:

Hi,
the function UpdateFBox() looks OK (according to the way you calculate myWidth and myHeight)

but i don't know about the function Search(), are you sure the process is passing this function without any error?
you can do an alert message right after calling Search(), so if the message pops that means the function is passed, otherwise you have to check this function

note: in the first html code you posted there was no value for the "search_term" text box
also in the second html code the value was "", so maybe there is some sort of conversion that doesn't allow an empty string

if this is not helping, please add more details about the error you receive and the related function/code


Search isn't the problem. It can't be called because the buttons can't be clicked, but if they could, search works fine. Also, the value of the textbox is irrelevent. By moving it to the 'right' div, the textbox and button work fine without a default value. It's ONLY the 'thankyou' div and the span that don't allow buttons/inputs to work.
Was This Post Helpful? 0
  • +
  • -

#6 ahmad_511  Icon User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 717
  • Joined: 28-April 07

Re: Buttons won't work inside certain divs

Posted 30 November 2009 - 02:52 AM

But when I tested it here the function is called..!???

did you change any of the thankyou div's properties that may affect the click event such as disabled property
or
is there any other object that covers this div and receives the click events instead of the buttons? maybe another div that has higher z-index or overlap the thankyou div

anyway, this part of code is working for me and there must be something else to look at.
Was This Post Helpful? 1
  • +
  • -

#7 ccubed  Icon User is offline

  • It's That Guy
  • member icon

Reputation: 129
  • View blog
  • Posts: 1,297
  • Joined: 13-June 08

Re: Buttons won't work inside certain divs

Posted 30 November 2009 - 09:26 PM

View Postahmad_511, on 30 Nov, 2009 - 01:52 AM, said:

But when I tested it here the function is called..!???

did you change any of the thankyou div's properties that may affect the click event such as disabled property
or
is there any other object that covers this div and receives the click events instead of the buttons? maybe another div that has higher z-index or overlap the thankyou div

anyway, this part of code is working for me and there must be something else to look at.



It was the z-index. Thanks for the help.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1