Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Expandable Forms Sections

Status
Not open for further replies.
TrueJoker

TrueJoker

Technical User
Jun 14, 2006
115
GB
I have recently been researching using JS to create expandable sections within a form and have come across a fairly simple example and ahve been testing it and playing about with it but i noticed when cross browser testing that there were slight errors for some reason! I shall post the code and then explain the problem.....

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script language="Javascript" type="text/javascript" src="/js/cnt.js"></script> 

<script language="Javascript">
//Menu Set-Up Javascript
var ns6=document.getElementById&&!document.all?1:0
var head="display:''"
var folder=''
function expandit(curobj){
folder=ns6?curobj.nextSibling.nextSibling.style:document.all[curobj.sourceIndex+1].style
if (folder.display=="none")
folder.display=""
else
folder.display="none"
}
</script>

<? $isiepos = strpos($HTTP_USER_AGENT,"MSIE");
$isie = ( $isiepos>0 ? substr($HTTP_USER_AGENT,$isiepos+5,3) : 0 );
list($isnsver,$d) = explode(" ",$HTTP_USER_AGENT);
$isnsver = ( substr($isnsver,0,8)=="Mozilla/" ? substr( $isnsver,8 ) : 0 );
$isns = ( $isnsver>4.0 ? $isnsver : 0 );

if($isie==0)
{
$netscape=true;
}
else
{
$netscape=false;
}

$opera=0;
$br = strtolower(getenv("HTTP_USER_AGENT"));
if(ereg("opera", $br) && !ereg("7.", $br)) { $opera=true; }
?>
<? if ($opera)
{
?>

<? } ?> 

</head>

<body>
<? if($opera) { ?><div id="menu1" onclick="showhide(menu1in,menu1out)"><img src="images/menu1.gif" name="menu1out" width="120" height="30" border="0" id="menu1out"></div>
<span id="menu1in" style="display:'none'"><? } else { ?>
<div style="cursor:hand" <? if ($netscape) echo "onclick=\"expandit(this)\""?>><img src="images/menu1.gif" width="120" height="30" border="0" onclick="expandit(this)"></div>
<span style="display:none; &{head}"><? } ?>
<a href="link1.html"><img src="images/link1.gif" width="120" height="30" border="0"></a><br>
<a href="link2.html"><img src="images/link2.gif" width="120" height="30" border="0"></a><br>
<a href="link3.html"><img src="images/link3.gif" width="120" height="30" border="0"></a><br></span>

<? if($opera) { ?><div id="menu2" onclick="showhide(menu2in,menu2out)"><img src="images/menu2.gif" width="120" height="30" border="0" id="menu2out"></div>
<span id="menu2in" style="display:'none'"><? } else { ?>
<div style="cursor:hand" <? if ($netscape) echo "onclick=\"expandit(this)\""?>><img src="images/menu2.gif" width="120" height="30" border="0" onclick="expandit(this)"></div>
<span style="display:none; &{head}"><? } ?>
<a href="link1.html"><img src="images/link1.gif" width="120" height="30" border="0"></a><br>
<a href="link2.html"><img src="images/link2.gif" width="120" height="30" border="0"></a><br>
<a href="link3.html"><img src="images/link3.gif" width="120" height="30" border="0"></a><br></span>

<? if($opera) { ?><div id="menu3" onclick="showhide(menu3in,menu3out)"><img src="images/menu3.gif" width="120" height="30" border="0" id="menu3out"></div>
<span id="menu3in" style="display:'none'"><? } else { ?>
<div style="cursor:hand" <? if ($netscape) echo "onclick=\"expandit(this)\""?>><img src="images/menu3.gif" width="120" height="30" border="0" onclick="expandit(this)"></div>
<span style="display:none; &{head}"><? } ?>
<a href="link1.html"><img src="images/link1.gif" width="120" height="30" border="0"></a><br>
<a href="link2.html"><img src="images/link2.gif" width="120" height="30" border="0"></a><br>
<a href="link3.html"><img src="images/link3.gif" width="120" height="30" border="0"></a><br></span>
</body>
</html>

The problem i have found is that when i use IE the main buttons such as MENU 1, 2 and 3, do expand and show an extra 3 links the actual MENU buttons disappear, However when testing this in FireFox they do not disappear and the user can easily close the expanded links!

Anyone got any ideas why this is? i have been playing about with the code with no success =[
 
Sort by date Sort by votes
Your expandIt() function effectively uses tow different code paths based on which browser you are using. You should change it so that it uses the same code path regradless. I am speaking about the variable ns6.

You should install Firebug (an extension for Firefox) to give you the tools you need to do decent debugging. It's free.

I'm guessing that ns6 is incorrect when running as Firefox... in fact doing ANY kind of browser sniffing is not required for the solution you have (there are ways to provide common markup regardless).

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler
[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Upvote 0 Downvote
well the thing is this code makes it work perfectly in FireFox but not in IE!

in IE the main buttons that u click to expand and display more links disappear in IE.

But in Firefox it all works prefectly, but when i delete this part

Code: 
<? $isiepos = strpos($HTTP_USER_AGENT,"MSIE");
$isie = ( $isiepos>0 ? substr($HTTP_USER_AGENT,$isiepos+5,3) : 0 );
list($isnsver,$d) = explode(" ",$HTTP_USER_AGENT);
$isnsver = ( substr($isnsver,0,8)=="Mozilla/" ? substr( $isnsver,8 ) : 0 );
$isns = ( $isnsver>4.0 ? $isnsver : 0 );

if($isie==0)
{
$netscape=true;
}
else
{
$netscape=false;
}

$opera=0;
$br = strtolower(getenv("HTTP_USER_AGENT"));
if(ereg("opera", $br) && !ereg("7.", $br)) { $opera=true; }
?>
<? if ($opera)
{
?>

<? } ?>

and remove the php tags surrounding the links it works fin in IE and not in Firefox! i just find it all really annoying and confusing lol
 
Upvote 0 Downvote
Ok so i spent all of last day trying to figure out how to stop the images dissappearing in IE but for it still to work in Other browsers! I've had no luck so far =[

Im not the most knowledgable in JavaScript or PHP but i know enough to get by =S can anyone help please?
 
Upvote 0 Downvote
Post the client side code (HTML, JS, CSS) and not the PHP source that you see when you visit the page in IE (what version of IE - 6 or 7?).

Or post a minimal variation (test harness) of the HTML that displays just the problem (with the expectation that once it's working in the test harness, you can retro-fit it into the PHP source file).

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler
[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

impeachme
  • Locked
  • Question
expandable tables that are closed by default (before onload)
Replies
1
Views
73
vacunita
vacunita
gseales
  • Locked
  • Question
Javascript error Uncaught TypeError: Property 'forms' of object #&lt;HTMLDocument&gt; is not a funct
Replies
2
Views
60
jpadie
jpadie
HVtech
  • Locked
  • Question
Forms.js not working
Replies
7
Views
82
jpadie
jpadie
gazza52
  • Locked
  • Question
Forms and Array
Replies
3
Views
55
vacunita
vacunita
DFORMS
  • Locked
  • Question
Display user information onscreen using forms
Replies
1
Views
48
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top