gwmbox
07-16-2010, 01:33 AM
Hi guys
I have had help getting some javascript together but I'd like to know if the same can be achieved via php rather than js.
The idea is to be able to wrap list items after every fifth list item, so if the list is something like
<ul id="mylist">
<li>Text1</li>
<li>Text2</li>
<li>Text3</li>
<li>Text4</li>
<li>Text5</li>
<li>Text6</li>
<li>Text7</li>
<li>Text8</li>
<li>Text9</li>
<li>Text10</li>
<li>Text11</li>
<li>Text12</li>
<li>Text13</li>
<li>Text14</li>
<li>Text15</li>
<li>Text16</li>
<li>Text17</li>
<li>Text18</li> (and up to a max of 20)
</ul>
The Text# in each list item will vary in length so it will not always be the same height as each other.
Then the result will be something like
Text1 Text6 Text11 Text16
Text2 Text7 Text12 Text17
Text3 Text8 Text13 Text18
Text4 Text9 Text14
Text5 Text10 Text15
Here is the javascript code I have;
The script assigns a unique ID to each list item and also calculates the height of column of list items (max of 5 items per column) and assigns a margin-top style to the next list item as a negative so that it brings that list item back to the top of the ul list area (as shown in the example above) It also calculates and identifies which of the 4 sets of 5 list items is the longest height and assigns that to a div so that any text after the list does not flow over the list items (it was an issue I had in chrome)
<script type="text/javascript">
/*<![CDATA[*/
var ul=document.getElementById('itemposts');
var div=document.getElementById('adverts');
var lis=ul.getElementsByTagName('LI');
for (var ary=[],h=0,lft=0,wdth=176,z0=0;z0<lis.length;z0++){
if (z0>0&&(z0)%5==0){
lis[z0].style.marginTop=-h+'px';
ary.push(h);
lft+=190;
h=0;
}
lis[z0].style.marginLeft=lft+'px';
lis[z0].style.width=wdth+'px';
h+=lis[z0].offsetHeight;
}
ary.push(h);
ary=ary.sort(function(a,b){ return b-a; });
div.style.height=ary[0]+'px';
/*]]>*/
</script>
So my question is with the list items being generated in the php file 'foreach' loop is there a way to achieve the same or similar as the above in php only?
Thanks
GW
I have had help getting some javascript together but I'd like to know if the same can be achieved via php rather than js.
The idea is to be able to wrap list items after every fifth list item, so if the list is something like
<ul id="mylist">
<li>Text1</li>
<li>Text2</li>
<li>Text3</li>
<li>Text4</li>
<li>Text5</li>
<li>Text6</li>
<li>Text7</li>
<li>Text8</li>
<li>Text9</li>
<li>Text10</li>
<li>Text11</li>
<li>Text12</li>
<li>Text13</li>
<li>Text14</li>
<li>Text15</li>
<li>Text16</li>
<li>Text17</li>
<li>Text18</li> (and up to a max of 20)
</ul>
The Text# in each list item will vary in length so it will not always be the same height as each other.
Then the result will be something like
Text1 Text6 Text11 Text16
Text2 Text7 Text12 Text17
Text3 Text8 Text13 Text18
Text4 Text9 Text14
Text5 Text10 Text15
Here is the javascript code I have;
The script assigns a unique ID to each list item and also calculates the height of column of list items (max of 5 items per column) and assigns a margin-top style to the next list item as a negative so that it brings that list item back to the top of the ul list area (as shown in the example above) It also calculates and identifies which of the 4 sets of 5 list items is the longest height and assigns that to a div so that any text after the list does not flow over the list items (it was an issue I had in chrome)
<script type="text/javascript">
/*<![CDATA[*/
var ul=document.getElementById('itemposts');
var div=document.getElementById('adverts');
var lis=ul.getElementsByTagName('LI');
for (var ary=[],h=0,lft=0,wdth=176,z0=0;z0<lis.length;z0++){
if (z0>0&&(z0)%5==0){
lis[z0].style.marginTop=-h+'px';
ary.push(h);
lft+=190;
h=0;
}
lis[z0].style.marginLeft=lft+'px';
lis[z0].style.width=wdth+'px';
h+=lis[z0].offsetHeight;
}
ary.push(h);
ary=ary.sort(function(a,b){ return b-a; });
div.style.height=ary[0]+'px';
/*]]>*/
</script>
So my question is with the list items being generated in the php file 'foreach' loop is there a way to achieve the same or similar as the above in php only?
Thanks
GW