SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member sushi's Avatar
    Join Date
    Jun 2004
    Location
    Romania
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help please IE vs Firefox

    can anyone please tell me why this works in IE and in FireFox it doesn't? (forgive me if this is super easy, but I can't see it)

    Code:
    function clear_id(xx) {
    	var qq=document.getElementsByTagName('a');
    	for(var i=0;i<qq.length;i++){
    		if(qq[i].getAttribute('id')) {
    			qq[i].id='s2';
    			document.getElementById(xx).id = 's1';
    		}
    	}
    }
    and the link looks like this:

    Code:
    <a href="#" onclick="clear_id('a1')" id="s1" name="a1">link</a>
    I have a group of 4 links. The first link has the id="s1", and the next links have all id="s2". The function should first change what is "s1" into "s2" and then change the link's id that called the function into "s1".

    Thanks in advance.

  2. #2
    SitePoint Addict
    Join Date
    May 2004
    Location
    Europe
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are calling getElementById with a parameter of 'a1', but your anchor's id is 's1', so it returns null. null.id='s1' doesn't make sense. If you use both id and name, make them the same. Also, id's are supposed to be unique.

  3. #3
    SitePoint Member sushi's Avatar
    Join Date
    Jun 2004
    Location
    Romania
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok... I guess I should post the entire html file so you can see what I'm trying to do:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Change Forms</title>
    <script language="JavaScript">
    function change(name){
    	var formArray = new Array(
    			"form1", 
    			"form2", 
    			"form3",
    			"form4"
    	);
    	for (var i=0; i<formArray.length; i++){
    		if (formArray[i] == name){
    			document.getElementById(name).style.zIndex=1;
    		}
    		else{
    			document.getElementById(formArray[i]).style.zIndex=-1;
    		}
    	}
    }
    
    function clear_id(xx) {
    	var qq=document.getElementsByTagName('a');
    	for(var i=0;i<qq.length;i++){
    		if(qq[i].getAttribute('id')) {
    			qq[i].id='s2';
    			document.getElementById(xx).id = 's1';
    		}
    	}
    }
    
    </script>
    <style type="text/css" media="all">
    body {
    	background: #DAE0D2 url(body_bg.gif) repeat-x;
    	margin: auto;
    	padding: 0;
    	color: #000;
    	font: 11px Tahoma;
    	text-align: center;
    }
    #outer {
    	width: 550px;
    	margin: auto;
    }
    #header {
    	width: 100%;
    	background: #DAE0D2 url(bg.gif) repeat-x bottom;
    	height: 25px;
    	margin-top: 10px;
    	margin-bottom: 20px;
    }
    #header #s2 {
    	float:left;
    	width: 58px;
    	height: 25px;
    	margin-left: 2px;
    	background:url(bg_off.gif) no-repeat;
    	font: 11px Tahoma;
    	color: #e1e1e1;
    	text-decoration:none;
    	font-weight:bold;
    }
    #header #s2 p {
    	margin-top: 5px;
    }
    #header #s1 {
    	float:left;
    	width: 58px;
    	height: 25px;
    	margin-left: 2px;
    	background:url(bg_on.gif) no-repeat;
    	font: 11px Tahoma;
    	color: #000;
    	text-decoration:none;
    	font-weight:bold;
    }
    #header #s1 p {
    	margin-top: 5px;
    }
    #form1{
    	position: relative;
    	width: 500px;
    	height: 50px;
    	z-index: 1;
    	border: 1px dashed black;
    	background-color: #e1e1e1;
    	text-align: left;
    }
    #form1 div{
    	margin: 5px;
    }
    #form2{
    	position: relative;
    	width: 500px;
    	height: 50px;
    	top: -52px;
    	z-index: -1;
    	border: 1px dashed black;
    	background-color: #e1e1e1;
    	text-align: left;
    }
    #form2 div{
    	margin: 5px;
    }
    #form3{
    	position: relative;
    	width: 500px;
    	height: 50px;
    	top: -104px;
    	z-index: -1;
    	border: 1px dashed black;
    	background-color: #e1e1e1;
    	text-align: left;
    }
    #form3 div{
    	margin: 5px;
    }
    #form4{
    	position: relative;
    	width: 500px;
    	height: 50px;
    	top: -156px;
    	z-index: -1;
    	border: 1px dashed black;
    	background-color: #e1e1e1;
    	text-align: left;
    }
    #form4 div{
    	margin: 5px;
    }
    input {
    	border: 1px solid #2D2D2D;
    	font: 11px Tahoma;
    	color: #2D2D2D;
    	background-color: #fff;
    }
    form {
    	margin: 0;
    	padding: 0;
    }
    </style>
    </head>
    <body>
    <div id="outer">
    	<form name="aloha1">
    	<div id="header">
    		<a href="#" onclick="change('form1'); clear_id('a1')" id="s1" name="a1"><p>Form 1</p></a>
    		<a href="#" onclick="change('form2'); clear_id('a2')" id="s2" name="a2"><p>Form 2</p></a>
    		<a href="#" onclick="change('form3'); clear_id('a3')" id="s2" name="a3"><p>Form 3</p></a>
    		<a href="#" onclick="change('form4'); clear_id('a4')" id="s2" name="a4"><p>Form 4</p></a>
    	</div>
    	</form>
    	<form name="aloha2">
    		<div id="form1"><div><strong>Form 1</strong><br />input 1 : <input type="text" /></div></div>
    		<div id="form2"><div><strong>Form 2</strong><br />input 2 : <input type="text" /></div></div>
    		<div id="form3"><div><strong>Form 3</strong><br />input 3 : <input type="text" /></div></div>
    		<div id="form4"><div><strong>Form 4</strong><br />submit : <input type="submit" /></div></div>
    	</form>
    </div>
    </body>
    </html>

  4. #4
    SitePoint Addict
    Join Date
    May 2004
    Location
    Europe
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use classes, not id's...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Change Forms</title>
    <script type="text/javascript">
    function change(name){
    	var formArray = new Array(
    		"form1", 
    		"form2", 
    		"form3",
    		"form4"
    	);
    	for (var i=0; i<formArray.length; i++){
    		if (formArray[i] == name){
    			document.getElementById(name).style.zIndex=1;
    		}
    		else{
    			document.getElementById(formArray[i]).style.zIndex=-1;
    		}
    	}
    }
    
    function clear_id(xx) {
    	var qq=document.getElementsByTagName('a');
    	for(var i=0;i<qq.length;i++){
    		if(qq[i].getAttribute('id')) {
    			qq[i].className='s2';
    		}
    	}
    	document.getElementById(xx).className = 's1';
    	return false;
    }
    
    </script>
    <style type="text/css" media="all">
    body {
    background: #DAE0D2 url(body_bg.gif) repeat-x;
    margin: auto;
    padding: 0;
    color: #000;
    font: 11px Tahoma;
    text-align: center;
    }
    #outer {
    width: 550px;
    margin: auto;
    }
    #header {
    width: 100%;
    background: #DAE0D2 url(bg.gif) repeat-x bottom;
    height: 25px;
    margin-top: 10px;
    margin-bottom: 20px;
    }
    #header .s2 {
    float:left;
    width: 58px;
    height: 25px;
    margin-left: 2px;
    background:url(bg_off.gif) no-repeat;
    font: 11px Tahoma;
    color: #e1e1e1;
    text-decoration:none;
    font-weight:bold;
    }
    #header .s2 p {
    margin-top: 5px;
    }
    #header .s1 {
    float:left;
    width: 58px;
    height: 25px;
    margin-left: 2px;
    background:url(bg_on.gif) no-repeat;
    font: 11px Tahoma;
    color: #000;
    text-decoration:none;
    font-weight:bold;
    }
    #header .s1 p {
    margin-top: 5px;
    }
    #form1{
    position: relative;
    width: 500px;
    height: 50px;
    z-index: 1;
    border: 1px dashed black;
    background-color: #e1e1e1;
    text-align: left;
    }
    #form1 div{
    margin: 5px;
    }
    #form2{
    position: relative;
    width: 500px;
    height: 50px;
    top: -52px;
    z-index: -1;
    border: 1px dashed black;
    background-color: #e1e1e1;
    text-align: left;
    }
    #form2 div{
    margin: 5px;
    }
    #form3{
    position: relative;
    width: 500px;
    height: 50px;
    top: -104px;
    z-index: -1;
    border: 1px dashed black;
    background-color: #e1e1e1;
    text-align: left;
    }
    #form3 div{
    margin: 5px;
    }
    #form4{
    position: relative;
    width: 500px;
    height: 50px;
    top: -156px;
    z-index: -1;
    border: 1px dashed black;
    background-color: #e1e1e1;
    text-align: left;
    }
    #form4 div{
    margin: 5px;
    }
    input {
    border: 1px solid #2D2D2D;
    font: 11px Tahoma;
    color: #2D2D2D;
    background-color: #fff;
    }
    form {
    margin: 0;
    padding: 0;
    }
    </style>
    </head>
    <body>
    <div id="outer">
    <form name="aloha1">
    <div id="header">
    <a href="#" onclick="change('form1'); return clear_id('s1')" id="s1" class="s1"><p>Form 1</p></a>
    <a href="#" onclick="change('form2'); return clear_id('s2')" id="s2" class="s2"><p>Form 2</p></a>
    <a href="#" onclick="change('form3'); return clear_id('s3')" id="s3" class="s2"><p>Form 3</p></a>
    <a href="#" onclick="change('form4'); return clear_id('s4')" id="s4" class="s2"><p>Form 4</p></a>
    </div>
    </form>
    <form name="aloha2">
    <div id="form1"><div><strong>Form 1</strong><br />input 1 : <input type="text" /></div></div>
    <div id="form2"><div><strong>Form 2</strong><br />input 2 : <input type="text" /></div></div>
    <div id="form3"><div><strong>Form 3</strong><br />input 3 : <input type="text" /></div></div>
    <div id="form4"><div><strong>Form 4</strong><br />submit : <input type="submit" /></div></div>
    </form>
    </div>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •