Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Aug 2007
    Location
    North Carolina, USA
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Javascript not working on IE6 or IE7 only, cross-browser problems

    Hi everybody,
    So I've been learning javascript and I'm using it to write a site. What I needed to do was to have some javascript code pull information from an XML file, add markers with bubbles to a google map on the page, add some tables to my page, and then put the information in the table cells appropriately to make a reference list corresponding to the markers.

    I programed the google map part successfully so that it made a map and pulled the XML data to make the markers with bubbles. This much code works on ie6, ie7, firefox, and safari3 beta for mac. This is where i ran into the problem; I added the following function to make the tables and insert the data. This function is run inside my for loop that makes the markers so when a marker is made the entry on the list is also made. The code with this function works beautifully on firefox and safari3 beta (mac), but when I open the page in ie6 or ie7 the table/list is no where to be seen. I'm assuming that this is because I'm using some javascript code in the function that is not supported by Microsoft browsers?
    Any help on why I'm having cross-broswer issues would be greatly appreciated.

    Code:
    // function for Writing the refrence table
    function writeEntry (barname, linkname, typeofbar, area, address1, address2, phonenum, letter, firstHit) {
    
    	if (firstHit == 1 ) {}
    	else {
    	var dividerow = document.createElement('tr');
    	document.getElementById('tablewrite').appendChild(dividerow);
    	var dividecell=dividerow.insertCell(0);
    	dividecell.setAttribute('width',559);
    	dividecell.setAttribute('height',6);
    	dividecell.setAttribute('class','barnamecell');
    	var divideline = document.createElement('img');
    	dividecell.appendChild(divideline);
    	divideline.src = "dividerLineFadding.jpg";
    	divideline.setAttribute('width',461);
    	divideline.setAttribute('height',6);
    	}
    
    	var boxrow = document.createElement('tr');
    	document.getElementById('tablewrite').appendChild(boxrow);
    	var boxcell=boxrow.insertCell(0);
    	boxcell.setAttribute('width',559);
    	boxcell.setAttribute('height',138);
    	boxcell.setAttribute('class','ridebox');
    	var boxtable = document.createElement('TABLE');
    	boxcell.appendChild(boxtable);
    	var boxtableRow = boxtable.insertRow(0);
    	var iconcell = boxtableRow.insertCell(0);
    	iconcell.setAttribute('height',137);
    	iconcell.setAttribute('style','text-align:center;vertical-align:middle');
    	var icon = document.createElement('img');
    	iconcell.appendChild(icon);
    	icon.src = "googlemarkers/marker" + letter + ".png";
    	icon.setAttribute('width',20);
    	icon.setAttribute('height',34);
    	icon.setAttribute('style','margin-left:5px');
    	var textcell = boxtableRow.insertCell(1);
    	textcell.setAttribute('height',137);
    	
    	var p1 = document.createElement('p');
    	textcell.appendChild(p1);
    	p1.setAttribute('class','eventpostingsubject');
    	var barnamelink = document.createElement('a');
    	p1.appendChild(barnamelink);
    	barnamelink.setAttribute('href','http://www.raleighbarhopper.com/' + linkname + '.html');
    	var p1text = document.createTextNode(barname);
    	barnamelink.appendChild(p1text);
    	
    	var p2 = document.createElement('p');
    	textcell.appendChild(p2);
    	p2.setAttribute('class','eventpostingdate');
    	var fonttag2 = document.createElement('font');
    	p2.appendChild(fonttag2);
    	fonttag2.setAttribute('style','font-style:normal');
    	var p2text1 = document.createTextNode('Type of Bar: ');
    	fonttag2.appendChild(p2text1);
    	var p2text2 = document.createTextNode(typeofbar);
    	p2.appendChild(p2text2);
    	
    	var p3 = document.createElement('p');
    	textcell.appendChild(p3);
    	p3.setAttribute('class','eventpostingdate');
    	var fonttag3 = document.createElement('font');
    	p3.appendChild(fonttag3);
    	fonttag3.setAttribute('style','font-style:normal');
    	var p3text1 = document.createTextNode('Area: ');
    	fonttag3.appendChild(p3text1);
    	var p3text2 = document.createTextNode(area);
    	p3.appendChild(p3text2);
    	
    	var p4 = document.createElement('p');
    	textcell.appendChild(p4);
    	p4.setAttribute('class','eventpostingdate');
    	var fonttag4 = document.createElement('font');
    	p4.appendChild(fonttag4);
    	fonttag4.setAttribute('style','font-style:normal');
    	var p4text1 = document.createTextNode('Address: ');
    	fonttag4.appendChild(p4text1);
    	var p4text2 = document.createTextNode(address1);
    	p4.appendChild(p4text2);
    	
    	var p5 = document.createElement('p');
    	textcell.appendChild(p5);
    	p5.setAttribute('class','eventpostingdate');
    	p5.setAttribute('style','margin-left:73px');
    	var p5text = document.createTextNode(address2);
    	p5.appendChild(p5text);
    	
    	var p6 = document.createElement('p');
    	textcell.appendChild(p6);
    	p6.setAttribute('class','eventpostingdate');
    	var fonttag6 = document.createElement('font');
    	p6.appendChild(fonttag6);
    	fonttag6.setAttribute('style','font-style:normal');
    	var p6text1 = document.createTextNode('Phone Number: ');
    	fonttag6.appendChild(p6text1);
    	var p6text2 = document.createTextNode(phonenum);
    	p6.appendChild(p6text2);
    	
    }
    I am a fairly new javascript user and so if anyone thinks that the problem is in some other part of the page let me know and I will make that available for review.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts
    couple of points

    dividecell.className='barnamecell';
    is safer than
    dividecell.setAttribute('class','barnamecell');


    iconcell.style.textAlign='center';
    iconcell.style.verticalAlign='middle';
    is safer than
    iconcell.setAttribute('style','text-align:center;vertical-align:middle');
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    ampron (08-22-2007)

  • #3
    New to the CF scene
    Join Date
    Aug 2007
    Location
    North Carolina, USA
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the tip, making the code more reliable is great.

    I do still need help finding a fix to the cross-browser problem though if any one else has an idea.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts
    Code:
    	var boxtable = document.createElement('TABLE');
    	boxcell.appendChild(boxtable);
    	var boxtableRow = boxtable.insertRow(0);
    	var iconcell = boxtableRow.insertCell(0);
    you need a TBODY to insert the rows


    I use
    Code:
    function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
     if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
     for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
     if (zxcp){ zxcp.appendChild(zxcele); }
     if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
     return zxcele;
    }

    This can create an element passing say 'TR' for a row as parameter 0
    Set the style as parameter 1, insert in an element parameter 2 and add a text node with data parameter 3

    example from post a script

    Code:
    ...
     for (var zxc0=1;zxc0<zxcsel.options.length;zxc0++){
      zxcflag=zxcES('IMG',{position:'absolute'});
      zxcflag.src=zxcsel.options[zxc0].title;
      var zxccopt=zxcES('DIV',{position:'relative',left:'0px',width:'100%',height:zxcflag.height+4+'px',backgroundColor:'#ffffff',cursor:zxccur},zxcdrop);
      zxcES(zxcflag,{left:'2px',top:'2px'},zxccopt);
      zxcES('DIV',{position:'absolute',left:(zxcflag.width+6)+'px',top:'2px'},zxccopt,zxcsel.options[zxc0].text);
    ....
    makes life easier

    edit
    see http://www.codingforums.com/showthread.php?t=121564
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    New to the CF scene
    Join Date
    Aug 2007
    Location
    North Carolina, USA
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Well I put the tbody tags in and the table still seems to be not appearing in ie6, I haven't been able to check 7

    here's the part of the code that I changed...
    Code:
    	var boxtable = document.createElement('TABLE');
    	boxcell.appendChild(boxtable);
    	var boxtablebody = document.createElement('tbody');
    	boxtable.appendChild(boxtablebody);
    	var boxtableRow = boxtablebody.insertRow(0);

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts
    done this

    Code:
    <!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></title>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    // function for Writing the refrence table
    function writeEntry (barname, linkname, typeofbar, area, address1, address2, phonenum, letter, firstHit) {
    	var dividerow = document.createElement('tr');
    	var tbdy=document.getElementById('tablewrite');
        var row=zxcES('TR',{},tbdy);
        var cell=zxcES('TD',{},row);
    	cell.width=559;
    	row.height=6;
    	cell.className='barnamecell';
    	var divideline = zxcES('IMG',{},cell);
    	divideline.src = "http://www.vicsjavascripts.org.uk/StdImages/One.gif";
    	divideline.width=461;
    	divideline.height=6;
    }
    
    function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
     if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
     for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
     if (zxcp){ zxcp.appendChild(zxcele); }
     if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
     return zxcele;
    }
    /*]]>*/
    </script>
    </head>
    
    <body>
    <table width="200" border="1" >
    <TBODY id="tablewrite" ></TBODY>
    <input type="button" name="" value="Add Row" onclick="writeEntry();"/>
    
    </table>
    </body>
    
    </html>
    do some more later
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    New to the CF scene
    Join Date
    Aug 2007
    Location
    North Carolina, USA
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    alright well it took me a sec to read through that function and understand it, but I like it because it does make writing a table more concise. I re-wrote the code using it but unfortunately I'm still having the issue of not seeing the table in ie 6 or 7.

    I'm still looking for some insight from anyone, I've been working on this problem constantly and I'm not getting anywhere.

    Here's the new code:
    Code:
    function writeEntry (barname, linkname, typeofbar, area, address1, address2, phonenum, letter, firstHit) {
    
    	if (firstHit == 1 ) {}
    	else {
    	var dividerow = document.createElement('tr');
    	document.getElementById('tablewrite').appendChild(dividerow);
    	var dividecell= elementMaker('td',{},dividerow);
    		dividecell.width = 559;
    		dividecell.height = 6;
    		dividecell.className='barnamecell';
    	var divideline = elementMaker('img',{},dividecell);
    		divideline.src = "dividerLineFadding.jpg";
    		divideline.width = 461;
    		divideline.height = 6;
    	}
    
    	var boxrow = document.createElement('tr');
    	document.getElementById('tablewrite').appendChild(boxrow);
    	var boxcell = elementMaker('td',{},boxrow);
    		boxcell.width = 559;
    		boxcell.height = 138;
    		boxcell.className='ridebox';
    	var boxtable = elementMaker('table',{},boxcell);
    	var boxtablebody = elementMaker('tbody',{},boxtable);
    	var boxtableRow = elementMaker('tr',{},boxtablebody);
    	var iconcell = elementMaker('td',{},boxtableRow);
    		iconcell.height = 137;
    		iconcell.style.textAlign = 'center';
    		iconcell.style.verticalAlign = 'middle';
    	var icon = elementMaker('img',{},iconcell);
    		icon.src = "googlemarkers/marker" + letter + ".png";
    		icon.width = 20;
    		icon.height = 34;
    		icon.setAttribute('style','margin-left:5px');
    	var textcell = elementMaker('td',{},boxtableRow);
    		textcell.height = 137;
    	
    	var p1 = elementMaker('p',{},textcell);
    		p1.className = 'eventpostingsubject';
    	var barnamelink = elementMaker('a',{},p1);
    		barnamelink.setAttribute('href','http://www.raleighbarhopper.com/' + linkname + '.html');
    	var p1text = document.createTextNode(barname);
    	barnamelink.appendChild(p1text);
    	
    	var p2 = elementMaker('p',{},textcell);
    		p2.className = 'eventpostingdate';
    	var fonttag2 = elementMaker('font',{},p2);
    		fonttag2.setAttribute('style','font-style:normal');
    	var p2text1 = document.createTextNode('Type of Bar: ');
    	fonttag2.appendChild(p2text1);
    	var p2text2 = document.createTextNode(typeofbar);
    	p2.appendChild(p2text2);
    	
    	var p3 = elementMaker('p',{},textcell);
    		p3.className = 'eventpostingdate';
    	var fonttag3 = elementMaker('font',{},p3);
    		fonttag3.setAttribute('style','font-style:normal');
    	var p3text1 = document.createTextNode('Area: ');
    	fonttag3.appendChild(p3text1);
    	var p3text2 = document.createTextNode(area);
    	p3.appendChild(p3text2);
    	
    	var p4 = elementMaker('p',{},textcell);
    		p4.className = 'eventpostingdate';
    	var fonttag4 = elementMaker('font',{},p4);
    		fonttag4.setAttribute('style','font-style:normal');
    	var p4text1 = document.createTextNode('Address: ');
    	fonttag4.appendChild(p4text1);
    	var p4text2 = document.createTextNode(address1);
    	p4.appendChild(p4text2);
    	
    	var p5 = elementMaker('p',{},textcell);
    		p5.className = 'eventpostingdate';
    		p5.setAttribute('style','margin-left:73px');
    	var p5text = document.createTextNode(address2);
    	p5.appendChild(p5text);
    	
    	var p6 = elementMaker('p',{},textcell);
    		p6.className = 'eventpostingdate';
    	var fonttag6 = elementMaker('font',{},p6);
    		fonttag6.setAttribute('style','font-style:normal');
    	var p6text1 = document.createTextNode('Phone Number: ');
    	fonttag6.appendChild(p6text1);
    	var p6text2 = document.createTextNode(phonenum);
    	p6.appendChild(p6text2);
    	
    }
    also here's the link to the webpage since i'm starting to think that the problem could possible be outside the writeEntry function.
    http://www.raleighbarhopper.com/glen...ap%20copy.html

  • #8
    New to the CF scene
    Join Date
    Aug 2007
    Location
    North Carolina, USA
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    question for vwphillips:
    what does this part of your function do?
    Code:
    for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
    also how would I use that function to replace this code
    Code:
    	var p1text = document.createTextNode(barname);
    	barnamelink.appendChild(p1text);

  • #9
    New to the CF scene
    Join Date
    Aug 2007
    Location
    North Carolina, USA
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    well ie is running the writeEntry function and the XML data is feeding through, I'm wondering if ie just doesn't like the pieces of the code that write the html elements to the page?

  • #10
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts
    Code:
    <!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></title>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    // Example call
    //   zxcES('DIV',{position:'absolute',left:(zxcflag.width+6)+'px',top:'2px'},zxccopt,zxcsel.options[zxc0].text);
    
    function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
     if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
     for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }  // this adds the style zxcstyle to the element
     if (zxcp){ zxcp.appendChild(zxcele); }  // this appends the zxcele to zxcp
     if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }  // this appends a text node with a value of zxctxt to zxcele
     return zxcele;
    }
    
    
    
    /*]]>*/
    </script>
    </head>
    
    <body>
    
    </body>
    
    </html>

    Suggest you test the function by calling the function from a button on click event specifying the parameters to ensure the function works before involving any other functions.

    If necessary post the test code(including the HTML)
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #11
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts
    you need a Rich text editor
    eg
    http://www.openwebware.com/products/openwysiwyg/
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #12
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Has this been resolved? I'm having the same problem (table displays in Firefox but not IE7):

    // create a new table
    var table = document.createElement('table');

    // loop through each event in the feed
    for (var i = 0; i < feed.entry.length; i++) {
    var entry = feed.entry[i];
    var title = entry.title.$t;
    var start = entry['gd$when'][0].startTime;

    var dateString = formatGCalTime(start);
    var tr = document.createElement('tr');

    // append the row (tr) onto the table
    table.appendChild(tr);
    }
    events.appendChild(table);
    }

    I've left out the table cells for now as I just wanted to keep the code simple for this discussion, but it doesn't display in IE7 either way.

  • #13
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok I've found a fix for me. I hope it works for you. VWPhilips was right about the TBODY:

    http://mypetprogrammer.com/blog/?cat=2


  •  

    Posting Permissions

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