toggled div doesn't seem to work in FF--help please?

geekisthenewsexy · December 15, 2010

hi all. i have here a form which is shown when via toggled div. the entire form/page is also fetched via iframe by the main page. my problem is, when i'm on the main page and i click on a link to fetch the external page that contains the form, and on the fetched page when i click on the link to show the form,it won't show. it doesn't seem to work in FF when i click on a link to show it. it's fine in IE but not in FF..how come?here, please take a look at the entire code of the fetched page that contains the form:

<?php
include("dbconnection_wmsuipil.php");
?>
<!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"/>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="js/style.css"/>	
</head>
<body> 		
<div id="sy_twrapper">
	<div id="formtable">+ <a href="javascript: animatedcollapse.toggle('viewform');">Options</a> | <a href="javascript: window.location.reload();">Refresh</a>
	<br />	<br />
        <div id="viewform" class="faq-ans">

    <ul class="tabs">
        <li class="active"><a href="#tab_sy_form" title="">Add schoolyear</a></li>
        <li class=""><a href="#tab_set_sy" title="Set schoolyear and semester">Set</a></li>
      
    </ul>

    <div class="tab_container">
        <div style="display: none;" id="tab_sy_form" class="tab_content">

     <h2><tr> 
      <td><div align="center" class="note"><b>Note: Please fill in all required fields (*).</b></div></td>
    </tr></h2>
<!--Start of add sy form-->
		<div class="form">
	<form name="form_sy" method="post" action="_admin_adsy.php">


		Add Schoolyear <i>*<b>from:</b></i> <input type="text" name="sy_from" size="10"/> <i>*<b>to:</b></i> <input type="text" name="sy_to"  size="10"/> <input type="Submit" name="Submit" value=" Add schoolyear "/> <input type="reset" value="Clear fields"/>

	</form>
<!--End-->
      </div>	
  
  
	</div>

	  <div style="display: none;" id="tab_set_sy" class="tab_content">

<!--Start of add sy form-->

		 <iframe src ="_tab_set_sy.php" width="100%">
		    <p>Sorry for the inconvenience but your browser doesn't support iframes.</p>
		   </iframe>	
	<!--End-->
    	
  
  
	</div>
	</div>	
	</div>


<div id="sy_theader">	

<div class="query">
                <select id="columns" onchange="sorter.search('query')"></select>
                <input type="text" id="query" name="query" onkeyup="sorter.search('query')" value="Search" onclick="this.value=''"/>
            </div>
    
            <span class="num_records">
			<div>Records <span id="startrecord"></span>-<span id="endrecord"></span> of <span id="totalrecords"></span></div>
        		<div><a href="javascript:sorter.reset()">Reset</a></div>				
        	</span>

        </div>	

<table cellpadding="0" cellspacing="0" border="0" id="table" class="sy_table">
    <thead>
                <tr>
			 <th><h3>SY_ID</h3></th>
                    <th><h3>Schoolyear</h3></th>					
				<th class="nosort"><h3></h3></th>
                </tr>

            </thead>
            <tbody>
<?php
$sql=mysql_query("SELECT * FROM admin_sy ORDER BY school_year ASC")or die(mysql_error()); 
$OutLine = array('id'=>'','school_year'=>'');
while($row=mysql_fetch_array($sql))
{
$OutLine['id'] = $row['id'];
$OutLine['school_year'] = $row['school_year'];
$countsy=0;
if($row>$countsy)
{
echo "<td>".implode('<td/>',$OutLine);

echo '<td align="center"><a href="#" onClick="window.open(\'_admin_edit_sy.php?id='.$row['id'].'&schoolyear='.$row['school_year'].'\',\'Edit\',\'width=350, height=300, menubar=yes\');return false;"><img src="images/edit.png" title="Edit schoolyear" width="16" height="16" border="0"></a> <a href="_admin_del_sy.php?id='.$row['id'].'&schoolyear='.$row['school_year'].'" title="Delete" onClick="return confirm(\'You are about to delete schoolyear '.$row['school_year'].'! You cannot undo this operation! Delete?\');return false;"><img src="images/del.png" width="16" height="16" border="0"></a></td>';
echo "</tr>";
}
else
{
echo "<tr>";
echo "<td>No schoolyear has been added yet.</td>";
echo "</tr>";
}
}
?>
</tbody>
</table>
      <div id="tablefooter">
          <div id="tablenav">
            	<div>
                    <img src="images/first.gif" width="16" height="16" title="First Page" onclick="sorter.move(-1,true)" />
                    <img src="images/previous.gif" width="16" height="16" title="First Page" onclick="sorter.move(-1)" />
                    <img src="images/next.gif" width="16" height="16" title="First Page" onclick="sorter.move(1)" />
                    <img src="images/last.gif" width="16" height="16" title="Last Page" onclick="sorter.move(1,true)" />
                </div>
                <div>
                	<select id="pagedropdown"></select>
			</div>
                <div>
                	<a href="javascript:sorter.showall()">View all</a>
                </div>
            </div>
		<div id="tablelocation">
            	<div>
                    <select onchange="sorter.size(this.value)">
                    <option value="5">5</option>
                        <option value="10" selected="selected">10</option>
                        <option value="20">20</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                    <span>Entries Per Page</span>
                </div>
                <div class="page">Page <span id="currentpage"></span>of <span id="totalpages"></span></div>
            </div>
        </div>
   <p>
		<center><a href="http://validator.w3.org/check?uri=referer"><img
			src="http://www.w3.org/Icons/valid-xhtml10"
			alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0"/></a></center>
	</p>
</div>
</div>
	<script type="text/javascript" src="script.js"></script>
		<script type="text/javascript">
		var sorter = new TINY.table.sorter('sorter','table',{
			headclass:'head',
			ascclass:'asc',
			descclass:'desc',
			evenclass:'evenrow',
			oddclass:'oddrow',
			evenselclass:'evenselected',
			oddselclass:'oddselected',
			paginate:true,
			size:5,
			colddid:'columns',
			currentid:'currentpage',
			totalid:'totalpages',
			startingrecid:'startrecord',
			endingrecid:'endrecord',
			totalrecid:'totalrecords',
			hoverid:'selectedrow',
			pageddid:'pagedropdown',
			navid:'tablenav',
			sortcolumn:1,
			sortdir:1,
			init:true

		});


	</script>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/animatedcollapse.js"></script>
	<script type="text/javascript">//^--Do not separate these two//
	animatedcollapse.addDiv('viewform', 'fade=1')
	animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
		//$: Access to jQuery
		//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
		//state: "block" or "none", depending on state
	}
	animatedcollapse.init()
	</script>		
	<script type="text/javascript" src="js/jquery.js"></script>				
	<script type="text/javascript">
	$(document).ready(function() {

	//Default Action
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content

	//On Click Event
	$("ul.tabs li").click(function() {
	$("ul.tabs li").removeClass("active"); //Remove any "active" class
	$(this).addClass("active"); //Add "active" class to selected tab
	$(".tab_content").hide(); //Hide all tab content
	var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
	$(activeTab).fadeIn(); //Fade in the active content	
	return false;
	});
	});
	</script>
	</body>
	</html>

anyone please help??

Sign In

toggled div doesn't seem to work in FF--help please?

Recommended Posts

geekisthenewsexy

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information