Jump to content

JS not behaving in Chrome

gwmbox

By gwmbox
in JavaScript

Recommended Posts

gwmbox Newbie

gwmbox

Posted
Posted

Hi allI need some help with some JS that works with Firefox and IE but does not want to behave with Chrome and for the life of me I cannot work out why. I am also not sure if this is really a css or js issue so I have posted a similar question in the css forumThe desired result is that there will be four columns of up to five items in each column, there may be less than 20 items listed. After 5 items have been listed some js will calculate the height of those 5 items and set the margin-top to be a negative of that height so the next column starts at the same position as the first column - i.e.in line with each other. As I said this works for IE and FF but not in Chrome. It may simply be that I have some JS incorrectly applied so that is why I am posting here as I have spent a long time with this and cannot find a solution so here I am asking for help.the JS (which is embedded in the html below)

	  <script  type="text/javascript">	  /*<![CDATA[*/	  function postlist(id,cls){		var div=document.getElementById(id);		var lis=div.getElementsByTagName('DIV');		for (var z0=0;z0<lis.length;z0++){		lis[z0].id=cls+(z0+1);		}	  }	  postlist('mycolumns','item_');	  var div=document.getElementById('mycolumns');	  var lis=div.getElementsByTagName('DIV');	  for (var ary=[],h=0,z0=0;z0<lis.length;z0++){	  if (z0>0&&(z0)%5==0){		lis[z0].style.marginTop=-h+'px';		ary.push(h);		h=0;	  }	  h+=lis[z0].offsetHeight;	  }	  ary.push(h);	  ary=ary.sort(function(a,b){ return b-a; });	  div.style.height=ary[0]+'px';	  /*]]>*/	  </script>

the CSS (is in a separate file called incol-styles.css)

body {font-size:12px;}#mycolumns {width:760px;background:transparent url(images/posts-back.png) repeat 0 0;margin:0;padding:0;font-size:12px;color:#333;}#mycolumns :hover {background-color:#f0e68c;}#mycolumns a {color:#333;text-decoration:none;}#mycolumns .post-desc {color:#333;}#mycolumns div {line-height:16px;padding:5px;border-bottom:1px solid #ccc;width:180px;}#item_1, #item_2, #item_3, #item_4, #item_5 {margin:0;}#item_6, #item_7, #item_8, #item_9, #item_10 {margin-left:200px;}#item_11, #item_12, #item_13, #item_14, #item_15 {margin-left:400px;}#item_16, #item_17, #item_18, #item_19, #item_20 {margin-left:600px;}

Now the HTML and JS

<html><head>	<title>Test for columns</title>  <link rel="stylesheet" href="incol-styles.css" type="text/css" /></head><body>	<div id="columns">  <h2>Div Columns</h2>		<div id="mycolumns">			<div><a href="http://mysite.com/some-url/page12.html" title="Some Title"><span class="post-desc">Massa adipiscing dictumst, proin ultrices tincidunt nunc lectus magna dolor natoque velit, platea porta, cursus, mus, vel elit lun, Urna montes urna amet adipiscing, cursus magna, duis, eros auctor, ut pulvinar tortor a tincidunt turpis egestas vel, nec. Est aliquet etiam, non et a etiam cursus diam vel. Sed auctor. Dolor? Cras ###### natoque adipiscing et sociis elementum, parturient nec arcu non sed, mid, magna scelerisque integer magnis pid odio dis odio lectus ultricies porta in</span></a></div>									<div><a href="http://mysite.com/some-url/page12.html" title="Some Title"><span class="post-desc">Cras ###### natoque adipiscing et sociis elementum, parturient nec arcu non sed, mid, magna scelerisque integer magnis pid odio dis odio lectus ultricies porta in</span></a></div>						<div><a href="http://mysite.com/some-url/page12.html" title="Some Title"><span class="post-desc">Urna amet adipiscing, cursus magna, duis, eros auctor, ut pulvinar tortor a tincidunt turpis egestas vel, nec. Est aliquet etiam, non et a etiam cursus diam vel. Sed auctor. Dolor? Cras ###### natoque adipiscing et sociis elementum, parturient nec arcu non sed, mid, magna scelerisque integer magnis pid odio dis odio lectus ultricies porta in</span></a></div>						<div><a href="http://mysite.com/some-url/page12.html" title="Some Title"><span class="post-desc">Est aliquet etiam, non et a etiam cursus diam vel. Sed auctor. Dolor? Cras ###### natoque adipiscing et sociis elementum, parturient nec arcu non sed, mid, magna scelerisque integer magnis pid odio dis odio lectus ultricies porta in</span></a></div>						<div><a href="http://mysite.com/some-url/page12.html" title="Some Title"><span class="post-desc">Massa adipiscing dictumst, proin ultrices tincidunt nunc lectus magna dolor natoque velit, platea porta, cursus, mus, vel elit lun, Urna montes urna amet adipiscing, cursus magna, duis, eros auctor, ut pulvinar tortor a tincidunt turpis egestas vel, nec. Est aliquet etiam, non et a etiam cursus diam vel. Sed auctor. Dolor? Cras ###### natoque adipiscing et sociis elementum, parturient nec arcu non sed, mid, magna scelerisque integer magnis pid odio dis odio lectus ultricies porta in</span></a></div>						<div><a href="http://mysite.com/some-url/page12.html" title="Some Title"><span class="post-desc">Sed auctor. Dolor? Cras ###### natoque adipiscing et sociis elementum, parturient nec arcu non sed, mid, magna scelerisque integer magnis pid odio dis odio lectus ultricies porta in</span></a></div>						<div><a href="http://mysite.com/some-url/page12.html" title="Some Title"><span class="post-desc">Massa adipiscing dictumst, proin ultrices tincidunt nunc lectus magna dolor natoque velit, platea porta, cursus, mus, vel elit lun, Urna montes urna amet adipiscing, cursus magna, duis, eros auctor, ut pulvinar tortor a tincidunt turpis egestas vel, nec. Est aliquet etiam, non et a etiam cursus diam vel. Sed auctor. Dolor? Cras ###### natoque adipiscing et sociis elementum, parturient nec arcu non sed, mid, magna scelerisque integer magnis pid odio dis odio lectus ultricies porta in</span></a></div> 									<div><a href="http://mysite.com/some-url/page12.html" title="Some Title"><span class="post-desc">Urna montes urna amet adipiscing, cursus magna, duis, eros auctor, ut pulvinar tortor a tincidunt turpis egestas vel, nec. Est aliquet etiam, non et a etiam cursus diam vel. Sed auctor. Dolor? Cras ###### natoque adipiscing et sociis elementum, parturient nec arcu non sed, mid, magna scelerisque integer magnis pid odio dis odio lectus ultricies porta in</span></a></div>						<div><a href="http://mysite.com/some-url/page12.html" title="Some Title"><span class="post-desc">Est aliquet etiam, non et a etiam cursus diam vel. Sed auctor. Dolor? Cras ###### natoque adipiscing et sociis elementum, parturient nec arcu non sed, mid, magna scelerisque integer magnis pid odio dis odio lectus ultricies porta in</span></a></div>						<div><a href="http://mysite.com/some-url/page12.html" title="Some Title"><span class="post-desc">Massa adipiscing dictumst, proin ultrices tincidunt nunc lectus magna dolor natoque velit, platea porta, cursus, mus, vel elit lun, Urna montes urna amet adipiscing, cursus magna, duis, eros auctor, ut pulvinar tortor a tincidunt turpis egestas vel, nec. Est aliquet etiam, non et a etiam cursus diam vel. Sed auctor. Dolor? Cras ###### natoque adipiscing et sociis elementum, parturient nec arcu non sed, mid, magna scelerisque integer magnis pid odio dis odio lectus ultricies porta in</span></a></div>						<div><a href="http://mysite.com/some-url/page12.html" title="Some Title"><span class="post-desc">Natoque! Pulvinar ac elit magnis adipiscing urna et pellentesque! Mattis nascetur. Porttitor! Tristique sed augue et nunc mattis augue! Tortor integer, porttitor ultrices porttitor, dictumst! In auctor auctor ridiculus sit vel ac arcu, adipiscing pid sed sed vel massa risus</span></a></div>						<div><a href="http://mysite.com/some-url/page12.html" title="Some Title"><span class="post-desc">Sed auctor. Dolor? Cras ###### natoque adipiscing et sociis elementum, parturient nec arcu non sed, mid, magna scelerisque integer magnis pid odio dis odio lectus ultricies porta in</span></a></div>						<div><a href="http://mysite.com/some-url/page12.html" title="Some Title"><span class="post-desc">Massa adipiscing dictumst, proin ultrices tincidunt nunc lectus magna dolor natoque velit, platea porta, cursus, mus, vel elit lun, Urna montes</span></a></div>						<div><a href="http://mysite.com/some-url/page12.html" title="Some Title"><span class="post-desc">Natoque! Pulvinar ac elit magnis adipiscing urna et pellentesque! Mattis nascetur. Porttitor! Tristique sed augue et nunc mattis augue! Tortor integer, porttitor ultrices porttitor, dictumst! In auctor auctor ridiculus sit vel ac arcu, adipiscing pid sed sed vel massa risus</span></a></div>						<div><a href="http://mysite.com/some-url/page12.html" title="Some Title"><span class="post-desc">Massa adipiscing dictumst, proin ultrices tincidunt nunc lectus magna dolor natoque velit, platea porta, cursus, mus, vel elit lun, Urna montes urna amet adipiscing, cursus magna, duis, eros auctor, ut pulvinar tortor a tincidunt turpis egestas vel, nec. Est aliquet etiam, non et a etiam cursus diam vel. Sed auctor. Dolor? Cras ###### natoque adipiscing et sociis elementum, parturient nec arcu non sed, mid, magna scelerisque integer magnis pid odio dis odio lectus ultricies porta in</span></a></div>						<div><a href="http://mysite.com/some-url/page12.html" title="Some Title"><span class="post-desc">Massa adipiscing dictumst, proin ultrices tincidunt nunc lectus magna dolor natoque velit, platea porta, cursus, mus, vel elit lun, Urna montes urna amet adipiscing, cursus magna, duis, eros auctor, ut pulvinar tortor a tincidunt turpis egestas vel, nec. Est aliquet etiam, non et a etiam cursus diam vel. Sed auctor. Dolor? Cras ###### natoque adipiscing et sociis elementum, parturient nec arcu non sed, mid, magna scelerisque integer magnis pid odio dis odio lectus ultricies porta in</span></a></div>						<div><a href="http://mysite.com/free-animals/test-entry-for-small-image-siz-12.html" title="Some Title"><span class="post-desc">Natoque! Pulvinar ac elit magnis adipiscing urna et pellentesque! Mattis nascetur. Porttitor! Tristique sed augue et nunc mattis augue! Tortor integer, porttitor ultrices porttitor, dictumst! In auctor auctor ridiculus sit vel ac arcu, adipiscing pid sed sed vel massa risus</span></a></div>   	  </div><!-- mycolumns -->	  <script  type="text/javascript">	  /*<![CDATA[*/	  function postlist(id,cls){		var div=document.getElementById(id);		var lis=div.getElementsByTagName('DIV');		for (var z0=0;z0<lis.length;z0++){		lis[z0].id=cls+(z0+1);		}	  }	  postlist('mycolumns','item_');	  var div=document.getElementById('mycolumns');	  var lis=div.getElementsByTagName('DIV');	  for (var ary=[],h=0,z0=0;z0<lis.length;z0++){	  if (z0>0&&(z0)%5==0){		lis[z0].style.marginTop=-h+'px';		ary.push(h);		h=0;	  }	  h+=lis[z0].offsetHeight;	  }	  ary.push(h);	  ary=ary.sort(function(a,b){ return b-a; });	  div.style.height=ary[0]+'px';	  /*]]>*/	  </script>			  <div class="clear"></div>  </div><!-- columns --></body></html>

Any ideas on how I can get chrome to behave will be very much appreciated.CheersGW

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

Dude. Can you think about indenting and nesting? You're asking someone here to do a lot of work that could be easily simplified if you wrote your code so that humans can easily read it. Just a suggestion that might get you better results AND help you as a developer.

Link to comment
Share on other sites
gwmbox Newbie

gwmbox

Posted
  • Author
Posted
Dude. Can you think about indenting and nesting?
It is not that bad! There is some indenting but granted this was a cut and paste from my side here and the indenting did not for some reason carry over? Nesting?
You're asking someone here to do a lot of work that could be easily simplified if you wrote your code so that humans can easily read it. Just a suggestion that might get you better results AND help you as a developer.
Remember the above wa only an example to illustrate the issue, the code and content used inside each div is repetition to provide body content to display the results, that is all and hence not formatted to be pretty as I am fairly sure that is not causing the underlying issues I am having - thought I may be wrong - hence my question for help..Anyway here is a simplified version - I have edited the above tooJS
	  <script  type="text/javascript">	  /*<![CDATA[*/	  function postlist(id,cls){		var div=document.getElementById(id);		var lis=div.getElementsByTagName('DIV');		for (var z0=0;z0<lis.length;z0++){		lis[z0].id=cls+(z0+1);		}	  }	  postlist('mycolumns','item_');	  var div=document.getElementById('mycolumns');	  var lis=div.getElementsByTagName('DIV');	  for (var ary=[],h=0,z0=0;z0<lis.length;z0++){	  if (z0>0&&(z0)%5==0){		lis[z0].style.marginTop=-h+'px';		ary.push(h);		h=0;	  }	  h+=lis[z0].offsetHeight;	  }	  ary.push(h);	  ary=ary.sort(function(a,b){ return b-a; });	  div.style.height=ary[0]+'px';	  /*]]>*/	  </script>

CSS

body {font-size:12px;}#mycolumns {width:760px;background:transparent url(images/posts-back.png) repeat 0 0;margin:0;padding:0;font-size:12px;color:#333;}#mycolumns :hover {background-color:#f0e68c;}#mycolumns a {color:#333;text-decoration:none;}#mycolumns .post-desc {color:#333;}#mycolumns div {line-height:16px;padding:5px;border-bottom:1px solid #ccc;width:180px;}#item_1, #item_2, #item_3, #item_4, #item_5 {margin:0;}#item_6, #item_7, #item_8, #item_9, #item_10 {margin-left:200px;}#item_11, #item_12, #item_13, #item_14, #item_15 {margin-left:400px;}#item_16, #item_17, #item_18, #item_19, #item_20 {margin-left:600px;}

HTML

<html><head>	<title>Test for columns</title>  <link rel="stylesheet" href="incol-styles.css" type="text/css" /></head><body>	<div id="columns">  <h2>Div Columns</h2>		<div id="mycolumns">			<div><a href="http://mysite.com/some-url/page12.html" title="Some Title"><span class="post-desc">Massa adipiscing dictumst, proin ultrices tincidunt nunc lectus magna dolor natoque velit, platea porta, cursus, mus, vel elit lun, Urna montes urna amet adipiscing, cursus magna, duis, eros auctor, ut pulvinar tortor a tincidunt turpis egestas vel, nec. Est aliquet etiam, non et a etiam cursus diam vel. Sed auctor. Dolor? Cras ###### natoque adipiscing et sociis elementum, parturient nec arcu non sed, mid, magna scelerisque integer magnis pid odio dis odio lectus ultricies porta in</span></a></div>									<div><a href="http://mysite.com/some-url/page12.html" title="Some Title"><span class="post-desc">Cras ###### natoque adipiscing et sociis elementum, parturient nec arcu non sed, mid, magna scelerisque integer magnis pid odio dis odio lectus ultricies porta in</span></a></div>						<div><a href="http://mysite.com/some-url/page12.html" title="Some Title"><span class="post-desc">Urna amet adipiscing, cursus magna, duis, eros auctor, ut pulvinar tortor a tincidunt turpis egestas vel, nec. Est aliquet etiam, non et a etiam cursus diam vel. Sed auctor. Dolor? Cras ###### natoque adipiscing et sociis elementum, parturient nec arcu non sed, mid, magna scelerisque integer magnis pid odio dis odio lectus ultricies porta in</span></a></div>						<div><a href="http://mysite.com/some-url/page12.html" title="Some Title"><span class="post-desc">Est aliquet etiam, non et a etiam cursus diam vel. Sed auctor. Dolor? Cras ###### natoque adipiscing et sociis elementum, parturient nec arcu non sed, mid, magna scelerisque integer magnis pid odio dis odio lectus ultricies porta in</span></a></div>						<div><a href="http://mysite.com/some-url/page12.html" title="Some Title"><span class="post-desc">Massa adipiscing dictumst, proin ultrices tincidunt nunc lectus magna dolor natoque velit, platea porta, cursus, mus, vel elit lun, Urna montes urna amet adipiscing, cursus magna, duis, eros auctor, ut pulvinar tortor a tincidunt turpis egestas vel, nec. Est aliquet etiam, non et a etiam cursus diam vel. Sed auctor. Dolor? Cras ###### natoque adipiscing et sociis elementum, parturient nec arcu non sed, mid, magna scelerisque integer magnis pid odio dis odio lectus ultricies porta in</span></a></div>						<div><a href="http://mysite.com/some-url/page12.html" title="Some Title"><span class="post-desc">Sed auctor. Dolor? Cras ###### natoque adipiscing et sociis elementum, parturient nec arcu non sed, mid, magna scelerisque integer magnis pid odio dis odio lectus ultricies porta in</span></a></div>						<div><a href="http://mysite.com/some-url/page12.html" title="Some Title"><span class="post-desc">Massa adipiscing dictumst, proin ultrices tincidunt nunc lectus magna dolor natoque velit, platea porta, cursus, mus, vel elit lun, Urna montes urna amet adipiscing, cursus magna, duis, eros auctor, ut pulvinar tortor a tincidunt turpis egestas vel, nec. Est aliquet etiam, non et a etiam cursus diam vel. Sed auctor. Dolor? Cras ###### natoque adipiscing et sociis elementum, parturient nec arcu non sed, mid, magna scelerisque integer magnis pid odio dis odio lectus ultricies porta in</span></a></div> 									<div><a href="http://mysite.com/some-url/page12.html" title="Some Title"><span class="post-desc">Urna montes urna amet adipiscing, cursus magna, duis, eros auctor, ut pulvinar tortor a tincidunt turpis egestas vel, nec. Est aliquet etiam, non et a etiam cursus diam vel. Sed auctor. Dolor? Cras ###### natoque adipiscing et sociis elementum, parturient nec arcu non sed, mid, magna scelerisque integer magnis pid odio dis odio lectus ultricies porta in</span></a></div>						<div><a href="http://mysite.com/some-url/page12.html" title="Some Title"><span class="post-desc">Est aliquet etiam, non et a etiam cursus diam vel. Sed auctor. Dolor? Cras ###### natoque adipiscing et sociis elementum, parturient nec arcu non sed, mid, magna scelerisque integer magnis pid odio dis odio lectus ultricies porta in</span></a></div>						<div><a href="http://mysite.com/some-url/page12.html" title="Some Title"><span class="post-desc">Massa adipiscing dictumst, proin ultrices tincidunt nunc lectus magna dolor natoque velit, platea porta, cursus, mus, vel elit lun, Urna montes urna amet adipiscing, cursus magna, duis, eros auctor, ut pulvinar tortor a tincidunt turpis egestas vel, nec. Est aliquet etiam, non et a etiam cursus diam vel. Sed auctor. Dolor? Cras ###### natoque adipiscing et sociis elementum, parturient nec arcu non sed, mid, magna scelerisque integer magnis pid odio dis odio lectus ultricies porta in</span></a></div>						<div><a href="http://mysite.com/some-url/page12.html" title="Some Title"><span class="post-desc">Natoque! Pulvinar ac elit magnis adipiscing urna et pellentesque! Mattis nascetur. Porttitor! Tristique sed augue et nunc mattis augue! Tortor integer, porttitor ultrices porttitor, dictumst! In auctor auctor ridiculus sit vel ac arcu, adipiscing pid sed sed vel massa risus</span></a></div>						<div><a href="http://mysite.com/some-url/page12.html" title="Some Title"><span class="post-desc">Sed auctor. Dolor? Cras ###### natoque adipiscing et sociis elementum, parturient nec arcu non sed, mid, magna scelerisque integer magnis pid odio dis odio lectus ultricies porta in</span></a></div>						<div><a href="http://mysite.com/some-url/page12.html" title="Some Title"><span class="post-desc">Massa adipiscing dictumst, proin ultrices tincidunt nunc lectus magna dolor natoque velit, platea porta, cursus, mus, vel elit lun, Urna montes</span></a></div>						<div><a href="http://mysite.com/some-url/page12.html" title="Some Title"><span class="post-desc">Natoque! Pulvinar ac elit magnis adipiscing urna et pellentesque! Mattis nascetur. Porttitor! Tristique sed augue et nunc mattis augue! Tortor integer, porttitor ultrices porttitor, dictumst! In auctor auctor ridiculus sit vel ac arcu, adipiscing pid sed sed vel massa risus</span></a></div>						<div><a href="http://mysite.com/some-url/page12.html" title="Some Title"><span class="post-desc">Massa adipiscing dictumst, proin ultrices tincidunt nunc lectus magna dolor natoque velit, platea porta, cursus, mus, vel elit lun, Urna montes urna amet adipiscing, cursus magna, duis, eros auctor, ut pulvinar tortor a tincidunt turpis egestas vel, nec. Est aliquet etiam, non et a etiam cursus diam vel. Sed auctor. Dolor? Cras ###### natoque adipiscing et sociis elementum, parturient nec arcu non sed, mid, magna scelerisque integer magnis pid odio dis odio lectus ultricies porta in</span></a></div>						<div><a href="http://mysite.com/some-url/page12.html" title="Some Title"><span class="post-desc">Massa adipiscing dictumst, proin ultrices tincidunt nunc lectus magna dolor natoque velit, platea porta, cursus, mus, vel elit lun, Urna montes urna amet adipiscing, cursus magna, duis, eros auctor, ut pulvinar tortor a tincidunt turpis egestas vel, nec. Est aliquet etiam, non et a etiam cursus diam vel. Sed auctor. Dolor? Cras ###### natoque adipiscing et sociis elementum, parturient nec arcu non sed, mid, magna scelerisque integer magnis pid odio dis odio lectus ultricies porta in</span></a></div>						<div><a href="http://mysite.com/free-animals/test-entry-for-small-image-siz-12.html" title="Some Title"><span class="post-desc">Natoque! Pulvinar ac elit magnis adipiscing urna et pellentesque! Mattis nascetur. Porttitor! Tristique sed augue et nunc mattis augue! Tortor integer, porttitor ultrices porttitor, dictumst! In auctor auctor ridiculus sit vel ac arcu, adipiscing pid sed sed vel massa risus</span></a></div>   	  </div><!-- mycolumns -->	  <script  type="text/javascript">	  /*<![CDATA[*/	  function postlist(id,cls){		var div=document.getElementById(id);		var lis=div.getElementsByTagName('DIV');		for (var z0=0;z0<lis.length;z0++){		lis[z0].id=cls+(z0+1);		}	  }	  postlist('mycolumns','item_');	  var div=document.getElementById('mycolumns');	  var lis=div.getElementsByTagName('DIV');	  for (var ary=[],h=0,z0=0;z0<lis.length;z0++){	  if (z0>0&&(z0)%5==0){		lis[z0].style.marginTop=-h+'px';		ary.push(h);		h=0;	  }	  h+=lis[z0].offsetHeight;	  }	  ary.push(h);	  ary=ary.sort(function(a,b){ return b-a; });	  div.style.height=ary[0]+'px';	  /*]]>*/	  </script>			  <div class="clear"></div>  </div><!-- columns --></body></html>

ThanksGW

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

Hmm, do you think you could put up a sample page so we can see what it's doing ourselves? The code seems to be fine, from just looking at it. Maybe Chrome's error console can give a hint.

Link to comment
Share on other sites
gwmbox Newbie

gwmbox

Posted
  • Author
Posted

Ok some test URL's as requestedhttp://thatnetsite.com/test/col1.html <-- This is with the styles embedded in the html documenthttp://thatnetsite.com/test/col2.html <-- This is with the styles as an external file to the html documentI might just have to embed that part of the styles as that is the only way around it that I can tell, but posted here to see if there was something I was doing wrong, but f the code looks fine then OK.CheersGW

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...