www.webdeveloper.com
Results 1 to 2 of 2

Thread: New to JS and DOM! Code working in IE6, not FF :(

  1. #1
    Join Date
    Jan 2009
    Posts
    1

    Unhappy New to JS and DOM! Code working in IE6, not FF :(

    Hi,

    Here's a short description of what I want to do with this code...

    1. I want to hold a stack of news, but keep only 6 of them visible at the same time.
    2. 3 of the visible news are open, the other 3 (older) are collapsed.
    3. It will use plain text with [+] and [-] to expand and collapse.
    4. The new part is working, but what it basically do, is if the posting is 2 days old or less it will display a "new!" message.

    So, the code works with IE6, haven't tested it with IE7, but FF3 it's not working.

    Here's the code. Feel free to use whatever of it if you like it... but since it's my first draft of code I ever write in JS, it might suck a bit....

    Code:
    <script type="text/javascript">
    function posted(noticia,dd){
    	var fdate = new Date(noticia);
    	var today = new Date();
    	var ddate = new Date(today-fdate);
    	
    	if (dd == null){
    		duedate = 3;
    	}
    	else duedate = dd + 1;
    	
    	if((ddate.getYear()<=70)&&(ddate.getMonth()==0)&&(ddate.getDate()<duedate&&ddate.getDate()>0)){
    		return document.write("&nbsp;-&nbsp;<span>NEW!</span>");		}
    		else document.write("<span></span>");
    }
    </script>
    <style type="text/css">
    	#postboard div{
    		display:none;
    	}
    		
    	div#postboard div h4 a{
    		font-family:"Courier New", Courier, monospace;
    		text-decoration:none;
    		font-size:10px;
    		line-height:16px;
    		background:gray;
    		color:white;
    		width:18px;
    		height:17px;
    		text-align:center;
    		margin-right:5px;
    	}
    	
    	.new_enabled span{
    		background:red;
    		font-size:10px;
    		font-style:oblique;
    		color:white;
    		padding:0 2px 0 2px;
    	}
    	
    	h4{
    		border-bottom:1px solid gray;
    	}
    </style>
    <!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" />
    <title>Untitled Document</title>
    </head>
    
    <body>
    
    <div id="postboard">
        <div  id="10">
            <h4 class="new_enabled"><a href="javascript:showTag(10)">&nbsp;</a>This is a Header 10 <script>posted("01/26/2009");</script></h4>
            <p>This is a paragraph 10</p>
        </div>
        
        <div  id="9">
            <h4 class="new_enabled"><a href="javascript:showTag(9)">&nbsp;</a>This is a Header 9 <script>posted("01/25/2009");</script></h4>
            <p>This is a paragraph 9</p>
        </div>
        
        <div  id="8">
            <h4 class="new_enabled"><a href="javascript:showTag(8)">&nbsp;</a>This is a Header 8 <script>posted("01/24/2009");</script></h4>
            <p>This is a paragraph 8</p>
        </div>
        
        <div  id="7">
            <h4 class="new_enabled"><a href="javascript:showTag(7)">&nbsp;</a>This is a Header 7 <script>posted("01/23/2009");</script></h4>
            <p>This is a paragraph 7</p>
        </div>
        
        <div  id="6">
            <h4 class="new_enabled"><a href="javascript:showTag(6)">&nbsp;</a>This is a Header 6 <script>posted("01/22/2009");</script></h4>
            <p>This is a paragraph 6</p>
        </div>
        
        <div  id="5">
            <h4 class="new_enabled"><a href="javascript:showTag(5)">&nbsp;</a>This is a Header 5 <script>posted("01/21/2009");</script></h4>
            <p>This is a paragraph 5</p>
        </div>
        
        <div  id="4">
            <h4 class="new_enabled"><a href="javascript:showTag(4)">&nbsp;</a>This is a Header 4 <script>posted("01/20/2009");</script></h4>
            <p>This is a paragraph 4</p>
        </div>
        
        <div  id="3">
            <h4 class="new_enabled"><a href="javascript:showTag(3)">&nbsp;</a>This is a Header 3 <script>posted("01/19/2009");</script></h4>
            <p>This is a paragraph 3</p>
        </div>
        
        <div  id="2">
            <h4 class="new_enabled"><a href="javascript:showTag(2)">&nbsp;</a>This is a Header 2 <script>posted("01/18/2009");</script></h4>
            <p>This is a paragraph 2</p>
        </div>
        
        <div  id="1">
            <h4 class="new_enabled"><a href="javascript:showTag(1)">&nbsp;</a>This is a Header 1 <script>posted("01/17/2009");</script></h4>
            <p>This is a paragraph 1</p>
        </div>
        
        <div  id="0">
            <h4 class="new_enabled"><a href="javascript:showTag(0)">&nbsp;</a>This is a Header 0 <script>posted("01/16/2009");</script></h4>
            <p>This is a paragraph 0</p>
        </div>
    </div>
    
    </body>
    </html>
    
    <script type="text/javascript">
    	
    	var numberOfPosts = 6;
    	var collapsedPosts = 3;
    	
    	var NoP = numberOfPosts - 1;
    	var cP = numberOfPosts - collapsedPosts;
    	
    
    	for(i = 0; i<= NoP; i++){
    		document.getElementById("postboard").childNodes[i].style.display = "block";
    	}
    	
    	for(i=cP; i <= NoP; i++){
    		document.getElementById("postboard").childNodes[i].childNodes[1].style.display = "none"
    		document.getElementById("postboard").childNodes[i].childNodes[0].childNodes[0].innerHTML="[+]";
    	}
    	
    	for(i=0; i <cP; i++){
    		document.getElementById("postboard").childNodes[i].childNodes[0].childNodes[0].innerHTML="[-]";
    	}
    	
    	function showTag(id) {
        	if (document.getElementById(id).childNodes[1].style.display == "none"){
    	        document.getElementById(id).childNodes[1].style.display = "block";
    			document.getElementById(id).childNodes[0].childNodes[0].innerHTML="[-]";
    		} else {
    	        document.getElementById(id).childNodes[1].style.display = "none";
    			document.getElementById(id).childNodes[0].childNodes[0].innerHTML="[+]";
        	}
    	}
    	
    	
    </script>

  2. #2
    Join Date
    Feb 2008
    Posts
    1,666
    In FF, you get an error on this line:
    Code:
    document.getElementById("postboard").childNodes[i].style.display = "block";
    and the reason is that FF renders text nodes even for a carriage-return. IE does not. Thus, to fix your issue you must check the node type or tagName to make sure you're changing the correct node.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles