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 8 of 8
  1. #1
    dep
    dep is offline
    Regular Coder
    Join Date
    Nov 2005
    Posts
    121
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Making a solid border when the months change.

    hello. i have a table like this, created dynamically

    | a | jan | 129 |
    | s | jan | 302 |
    | r | jan | 293 |

    | w | feb | w92 |
    .
    .
    .
    .
    .
    | e | mar | 283 |

    What i need to do, with javascript and DOM is when the month changes (at an unset interval) to make a solid line.

    Now I know how to make the line. What I don't know is the best way to check if the month is a new month or not.

    Any ideas?

    dep

  • #2
    dep
    dep is offline
    Regular Coder
    Join Date
    Nov 2005
    Posts
    121
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Didn't mean to post this twice...

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    you are creating this dynamically so when the month is not= the previous month draw a line

  • #4
    dep
    dep is offline
    Regular Coder
    Join Date
    Nov 2005
    Posts
    121
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i guess i'm looking for a more specific answer.

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    quess you need to post a more specific question.

    at the moment can only guess what methods you use.

  • #6
    dep
    dep is offline
    Regular Coder
    Join Date
    Nov 2005
    Posts
    121
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah, well, I'm using Trimpath and Javascript.

    Code:
    {for q in data.optionQuote}
    	<tr>
    		<td class="mondo">${q.monthVal|default:"--"}</td>
    		<td class="mondo">${q.type|default:"--"}</td>
    		<td class="mondo">${q.desc|default:"--"}</td>
    		<td class="mondo">${q.etc|default:"--"}</td>
    	</tr>
    {/for}

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    suggest that you read the posting guidelines

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    function Lines(){
     bdy=document.getElementsByTagName('BODY')[0];
     tbdy=document.getElementById('fred');
     trs=tbdy.getElementsByTagName('TR');
     var line=document.createElement('DIV');
     var lineS=line.style;
     lineS.position='absolute';
     lineS.overflow='hidden';
     lineS.width=(trs[0].offsetWidth)+'px';
     lineS.height=(2)+'px';
     lineS.left=zxcPos(trs[0])[0]+'px';
     bdy.appendChild(line);
     lineS.backgroundColor='black';
     for (var zxc0=1;zxc0<trs.length;zxc0++){
      if (trs[zxc0].getElementsByTagName('TD')[1].firstChild.data!=trs[zxc0-1].getElementsByTagName('TD')[1].firstChild.data){
       nline=line.cloneNode(true);
       bdy.appendChild(nline);
       nline.style.top=zxcPos(trs[zxc0])[1]+'px';
      }
     }
     bdy.removeChild(line);
    }
    
    function zxcPos(zxc){
     zxcObjLeft = zxc.offsetLeft;
     zxcObjTop = zxc.offsetTop;
     while(zxc.offsetParent!=null){
      zxcObjParent=zxc.offsetParent;
      zxcObjLeft+=zxcObjParent.offsetLeft;
      zxcObjTop+=zxcObjParent.offsetTop;
      zxc=zxcObjParent;
     }
     return [zxcObjLeft,zxcObjTop];
    }
    
    //-->
    </script>
    </head>
    
    <body onload="Lines()" >
    <table >
    <tbody id="fred" >
    	<tr>
    		<td class="mondo">${q.monthVal|default:"--"}</td>
    		<td class="mondo">may</td>
    	</tr>
    	<tr>
    		<td class="mondo">${q.monthVal|default:"--"}</td>
    		<td class="mondo">may</td>
    	</tr>
    	<tr>
    		<td class="mondo">${q.monthVal|default:"--"}</td>
    		<td class="mondo">June</td>
    	</tr>
       	<tr>
    		<td class="mondo">${q.monthVal|default:"--"}</td>
    		<td class="mondo">June</td>
    	</tr>
       	<tr>
    		<td class="mondo">${q.monthVal|default:"--"}</td>
    		<td class="mondo">July</td>
    	</tr>
    
    </tbody>
    </table>
    </body>
    
    </html>
    and remember that please and thank you are good when asking other to spend their time on your problem howerer trivial that may be

  • #8
    dep
    dep is offline
    Regular Coder
    Join Date
    Nov 2005
    Posts
    121
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vwphillips
    suggest that you read the posting guidelines

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    function Lines(){
     bdy=document.getElementsByTagName('BODY')[0];
     tbdy=document.getElementById('fred');
     trs=tbdy.getElementsByTagName('TR');
     var line=document.createElement('DIV');
     var lineS=line.style;
     lineS.position='absolute';
     lineS.overflow='hidden';
     lineS.width=(trs[0].offsetWidth)+'px';
     lineS.height=(2)+'px';
     lineS.left=zxcPos(trs[0])[0]+'px';
     bdy.appendChild(line);
     lineS.backgroundColor='black';
     for (var zxc0=1;zxc0<trs.length;zxc0++){
      if (trs[zxc0].getElementsByTagName('TD')[1].firstChild.data!=trs[zxc0-1].getElementsByTagName('TD')[1].firstChild.data){
       nline=line.cloneNode(true);
       bdy.appendChild(nline);
       nline.style.top=zxcPos(trs[zxc0])[1]+'px';
      }
     }
     bdy.removeChild(line);
    }
    
    function zxcPos(zxc){
     zxcObjLeft = zxc.offsetLeft;
     zxcObjTop = zxc.offsetTop;
     while(zxc.offsetParent!=null){
      zxcObjParent=zxc.offsetParent;
      zxcObjLeft+=zxcObjParent.offsetLeft;
      zxcObjTop+=zxcObjParent.offsetTop;
      zxc=zxcObjParent;
     }
     return [zxcObjLeft,zxcObjTop];
    }
    
    //-->
    </script>
    </head>
    
    <body onload="Lines()" >
    <table >
    <tbody id="fred" >
    	<tr>
    		<td class="mondo">${q.monthVal|default:"--"}</td>
    		<td class="mondo">may</td>
    	</tr>
    	<tr>
    		<td class="mondo">${q.monthVal|default:"--"}</td>
    		<td class="mondo">may</td>
    	</tr>
    	<tr>
    		<td class="mondo">${q.monthVal|default:"--"}</td>
    		<td class="mondo">June</td>
    	</tr>
       	<tr>
    		<td class="mondo">${q.monthVal|default:"--"}</td>
    		<td class="mondo">June</td>
    	</tr>
       	<tr>
    		<td class="mondo">${q.monthVal|default:"--"}</td>
    		<td class="mondo">July</td>
    	</tr>
    
    </tbody>
    </table>
    </body>
    
    </html>
    and remember that please and thank you are good when asking other to spend their time on your problem howerer trivial that may be

    Thank you.


  •  

    Posting Permissions

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